/* *#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* base-styles.css *#*#*#*#*#*#*#*#*#*#*#*#*#*# (C) 2025 DekTec */
/* */
/* Global Styles for DekTec Website v2 */
/* */
/* This file defines foundational CSS rules shared across the entire site, including: */
/* - Root variables for breakpoints, colors, and transitions */
/* - CSS reset and layout defaults */
/* - Typography, utility classes, and buttons */
/* - Responsive visibility helpers */
/* - Generic layout containers (e.g., .panel) */
/* */
/* Maintainers: Update this file with caution, as changes may affect multiple pages. */
/* */
/* =+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ */
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Constants -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */
:root {
--breakpoint-md:860px;
--breakpoint-xl:1290px;
--topbar-height:4rem;
--fade-duration:0.2s; /* Fade-in/fade-out duration. Cross-fade is twice this length. */
--image-fade-multiplier:2.4;
--color-accent-light:#FFFFFF;
--color-dektec-aqua:#90E7EA;
--color-dark-blue:#1F2E4D; /* Used in hero gradient background. */
--color-dark-blue-hover:#2C4C85;
--color-section-bg:#F8F8F8;
--dektec-blue-h: 215;
--dektec-blue-s: 70%;
--dektec-blue-l: 51%;
--color-dektec-blue: hsl(var(--dektec-blue-h) var(--dektec-blue-s) var(--dektec-blue-l));
}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Debugging Aids -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */
/* Add class="debug" on to enable them. */
html.debug {background:pink}
html.debug body {background:yellow}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Base Reset & Defaults -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */
/* Purpose: */
/* 1. Establishes a predictable box-model (border-box) for all elements. */
/* 2. Removes default margins/padding that vary by browser. */
/* 3. Defines the value of 1 rem: */
/* + Desktop >1289px : 16px */
/* + Medium 860-1289px : fluid (vw-based) so rem grows/shrinks with width */
/* + Small <860px : 16px */
/* + Small landscape < 640px : rem scales down with viewport */
/* (floor = 8px to keep text legible) */
/* 1. Universal reset for margins/padding. */
* {box-sizing:border-box; margin:0; padding:0}
/* 2. BODY baseline. */
/* Sets layout baseline and typography defaults for the document */
html, body {font-family:'Noto Sans', sans-serif; overflow-x:hidden}
/* 3. Root font-size - defines the value of 1rem. */
/* 3a. Default / desktop ≥ 1290px → 1 rem = 16px */
html {font-size:16px}
/* 3b. Mobile: fixed 16px */
@media (max-width:859.98px) {html {font-size:16px}}
/* 3c. Medium desktop (860-1289px): fluid scaling, ~16px at 1290px.*/
@media (min-width:860px) and (max-width:1289.98px) {html {font-size:calc(100vw / 80.625)}}
/* 3d. Extra-small Mobile landscape: */
/* When the .panel shrinks below its 40 rem design width (~640px), scale rem down with the viewport. */
/* clamp() keeps a 12px floor so body text never becomes unreadably small. */
@media (max-width: 639.98px) and (orientation: landscape)
{
/* 100vw / 40 ⇒ 640px → 16px, 480px → 12px, 320px → 8px (minimum) */
html {font-size:clamp(8px, calc(100vw / 40), 16px)}
}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Responsive Text Visibility -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */
/* Use "show-at" on inline elements to control visibility based on screen width: */
/* */
/* sm – Mobile (both Landscape and Portrait) */
/* sm-portrait – Mobile Portrait */
/* md – 860px to 1289.98px */
/* xl – 1290px and up */
/* md-xl – 860px and up */
/* */
/* Example: */
/* Short title */
/* Full, typically longer title */
.show-at {display:none}
@media (max-width:859.98px) {.sm {display:inline}}
@media (max-width:859.98px) and (orientation:portrait) {.sm-portrait {display:inline}}
@media (min-width:860px) and (max-width:1289.98px) {.md {display:inline}}
@media (min-width:1290px) {.xl {display:inline}}
@media (min-width:860px) {.md-xl {display:inline}}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Themes -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */
.theme-dark p {color:white}
.theme-reset, .theme-reset * {color:initial}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Base Typography and Layout Styles -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */
.bg-white {background:white}
.centered {text-align:center}
.small-text {font-size:0.875rem; font-weight:400}
h3 {color:var(--color-dektec-blue); font-size:1.1875rem; font-weight:600}
@media (max-width:859.98px) {h3 {font-size:1rem}}
.blue-link {color:var(--color-dektec-blue); font-size:1rem; font-weight:600; text-decoration:none}
.blue-link:visited {color:var(--color-dektec-blue)} /* Prevent color change after visiting */
.blue-link:hover {text-decoration:underline}
.blue-link:focus-visible {outline:2px dashed currentColor; outline-offset:2px}
@media (max-width:859.98px) {.blue-link {font-size:clamp(0.8rem, 4vw, 1.6rem)}}
/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Section -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */
section {background:var(--color-section-bg)}
/* On mobile, make full-height sections fill the viewport vertically. */
@media (max-width:859.98px)
{
section.full-height {height:100svh}
}
/* --- Mobile landscape --- */
@media (max-width:859.98px) and (orientation:landscape)
{
section.full-height {min-height:16rem; max-height:22rem}
}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Panel -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */
/* Provides a consistent centered layout (margin:auto) with max width and padding for main content. */
.panel {height:100%; margin:auto; max-width:80.625rem; padding:2rem 3.75rem}
.panel-header {color:var(--color-dark-blue); font-size:3rem; font-weight:500;
margin-bottom:1.875rem; text-align:center}
.panel-intro {font-size:1.375rem; font-weight:300}
/* --- Mobile Portrait --- */
@media (max-width:859.98px) and (orientation:portrait)
{
.panel {padding:1.875rem 1rem}
.panel.narrow {padding-left:0.5rem; padding-right:0.5rem}
.panel-header {font-size:clamp(1.5rem, calc(0.8rem + 2.55vw), 2rem); font-weight:600; margin-bottom:1rem}
.panel-header.large {font-size:35px; line-height:1.15}
.panel-intro {font-size:clamp(1rem, calc(0.73rem + 1.2vw), 1.375rem)}
}
/* --- Mobile Landscape --- */
@media (max-width:859.98px) and (orientation:landscape)
{
.panel {max-width:40rem; padding:clamp(1rem, 10cqh, 0.2rem) 1rem}
.panel.full-height {height:100%}
.panel.narrow {padding:3vh 0}
.panel-header {font-size:1.8rem; font-weight:600; margin-bottom:0rem}
.panel-header.large {font-size:2rem; margin-bottom:0}
/* In mobile landscape, shrink .panel-header.large inside a full-height panel for better fit. */
.panel.full-height .panel-header.large {font-size:1.8rem}
.panel-intro {font-size:clamp(1rem, calc(0.73rem + 1.2vw), 1.375rem)}
}
/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- All Button -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */
.all-button {background-color:var(--color-dark-blue); border-radius:2rem; color:white; cursor:pointer;
display:inline-block; font-size:1.125rem; font-weight:600; line-height:1.125rem;
padding:0.8125rem 1.875rem; text-decoration:none; transition:background-color 0.3s ease}
.all-button:hover {background-color:var(--color-dark-blue-hover)}
@media (max-width:859.98px) {.all-button {font-size:0.875rem; padding:0.5rem 1rem}}
/* +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ Top Bar +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+= */
.topbar {align-items:center; display:flex; justify-content:space-between; margin-bottom:1.875rem; width:100%}
.topbar img {height:1.875rem}
/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Portrait -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */
@media (max-width:859.98px) and (orientation:portrait)
{
.topbar {margin-bottom:4vh}
.topbar img {height:1.5625rem; margin-bottom:0}
}
/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Landscape -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */
@media (max-width:859.98px) and (orientation:landscape)
{
.topbar {margin-bottom:0vh}
.topbar img {height:1.3rem}
}