/* ========================================================================== Hetnet Wireless Technologies — Design Tokens -------------------------------------------------------------------------- This file contains custom properties ONLY. No selectors other than :root (and its theme-switch variants), no component styles, no layout. Every value in main.css must resolve to a token declared here. Colour ramp is derived from the corporate mark. The four source values sampled from the logo artwork are, and remain, canonical: #003B64 deepest band (shadow side of the ribbon) #006DB0 mid band #008FB5 light band #84FFE2 highlight band THEMING ------- Two themes ship: light (default) and dark. The dark theme exists because the reference visual language is dark-first, but the two navies above are unreadable on a dark canvas — #006DB0 measures 3.52:1 and #003B64 just 1.67:1, against a 4.5:1 floor. Section 2b therefore declares lifted siblings in the same hue family. The logo artwork itself is never recoloured; only the interface ramp gains dark variants. The theme switch is applied in two places, by necessity: @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) :root[data-theme="dark"] The first serves visitors with JavaScript disabled; the second serves an explicit choice saved to localStorage. Both map roles from the SAME --d-* palette declared in 2b, so the mapping is duplicated but the values are not — there is one source of truth per colour. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND RAMP — primary + 3 tints/shades (light theme values) ---------------------------------------------------------------------- */ /* Darkest logo band. Contrast on white 11.6:1 — safe for body copy. */ --c-primary-900: #003B64; /* Wordmark blue. Contrast on white 6.7:1 — safe for links and small text. */ --c-primary-700: #005F9B; /* Mid logo band — the canonical primary. Contrast on white 5.5:1. */ --c-primary-500: #006DB0; /* Light logo band. Decorative / large text only. */ --c-primary-300: #008FB5; /* Lifted tint for surfaces and hairlines. Never used for text. */ --c-primary-100: #D6EAF3; /* ---------------------------------------------------------------------- 2. ACCENT — the highlight band ---------------------------------------------------------------------- */ /* The mint highlight. Very light: use on dark surfaces only, never on white. */ --c-accent: #84FFE2; /* Darkened accent for text/icons on light surfaces. Contrast on white 4.9:1. */ --c-accent-deep: #00806B; /* Sub-threshold marker on the hero instrument. Declared once and NOT remapped in the dark blocks below, because that surface is dark in both themes: --c-surface-inverse resolves to #003B64 in light and #0E1822 in dark, and this amber measures 7.0:1 and 10.6:1 against them. A semantic --c-warning cannot be used there — its light-theme value (#A15C00) is unreadable on navy. */ --c-scope-warn: #F2C063; /* ---------------------------------------------------------------------- 2b. DARK PALETTE — declared here, applied in section 5b. Sibling hues of the ramp above, lifted in lightness until they clear 4.5:1 on the dark canvas. Measured values are noted per line. ---------------------------------------------------------------------- */ --d-canvas: #070E15; /* page ground — navy-black, not neutral black */ --d-surface: #0E1822; /* card / panel fill */ --d-raised: #152532; /* header, sunken bands, table heads */ --d-overlay: #101C27; /* mobile nav sheet, toolbars */ --d-primary-300: #8FDCF2; /* 13.0:1 — large text, icons on dark */ --d-primary-500: #4FB8E8; /* 8.6:1 — canonical dark primary, links */ --d-primary-700: #2E97CC; /* 5.7:1 — hover/pressed */ --d-primary-900: #1B3A52; /* structural fill only, never text */ --d-text: #E3EDF5; /* 16.4:1 on canvas, 15.1:1 on surface */ --d-text-mut: #93A9BD; /* 8.0:1 on canvas, 7.4:1 on surface */ --d-border: #22384B; /* visible hairline without glowing */ --d-border-str:#31506B; /* emphasised / hover border */ /* Text that sits ON a mint or bright-blue fill. 13.7:1 on #84FFE2. */ --d-on-accent: #04222E; /* ---------------------------------------------------------------------- 3. NEUTRAL SCALE — 6 steps, tinted toward the brand hue ---------------------------------------------------------------------- */ --c-n-1: #F5F8FA; /* page tint / alternating section band */ --c-n-2: #E6ECF1; /* card fill on tinted sections, disabled fill */ --c-n-3: #C9D5DE; /* borders, dividers, input outlines */ --c-n-4: #8FA3B1; /* placeholder text, decorative rules */ --c-n-5: #566B7A; /* muted body copy. Contrast on white 5.6:1. */ --c-n-6: #24333D; /* headings on light. Contrast on white 12.4:1. */ /* ---------------------------------------------------------------------- 4. SEMANTIC ---------------------------------------------------------------------- */ --c-success: #0F7B4F; /* 5.3:1 on white */ --c-warning: #A15C00; /* 5.2:1 on white */ --c-error: #B3261E; /* 6.5:1 on white */ --c-success-bg: #E6F4ED; --c-warning-bg: #FBF0E0; --c-error-bg: #FBEAE9; /* ---------------------------------------------------------------------- 5. APPLIED ROLES — components reference these, not the ramp above ---------------------------------------------------------------------- */ color-scheme: light; --c-surface: #FFFFFF; --c-surface-sunken: var(--c-n-1); --c-surface-raised: #FFFFFF; /* header, floating panels */ --c-surface-inverse: var(--c-primary-900); /* Header is translucent and blurred; this is its backdrop fill. */ --c-surface-header: rgba(255, 255, 255, 0.82); --c-text: var(--c-n-6); --c-text-muted: var(--c-n-5); --c-text-inverse: #FFFFFF; --c-text-inverse-mut: #B7D2E4; /* 7.4:1 on --c-primary-900 */ --c-text-on-primary: #FFFFFF; --c-text-on-accent: var(--c-primary-900); --c-border: var(--c-n-3); --c-border-subtle: var(--c-n-2); --c-border-strong: var(--c-n-4); --c-border-inverse: #1A5580; --c-link: var(--c-primary-700); --c-link-hover: var(--c-primary-900); --c-focus-ring: var(--c-primary-500); --c-focus-ring-inv: var(--c-accent); /* Icon plate fill + the tinted wash behind hero and page headers. */ --c-plate-bg: var(--c-primary-100); --c-plate-fg: var(--c-primary-700); /* ---------------------------------------------------------------------- 5a. GRADIENTS The mark is a sphere of parallel bands running light-to-dark. Every gradient here is a sweep along that same ramp, so the interface and the logo share one gesture. ---------------------------------------------------------------------- */ /* Display headings, clipped to text. Endpoints must both clear 3:1 for large text: on white, 11.6:1 and 5.5:1. */ --grad-heading: linear-gradient(100deg, var(--c-primary-900) 0%, var(--c-primary-500) 55%, var(--c-primary-300) 100%); /* Primary button fill. Text on it is --c-text-on-primary. */ --grad-btn: linear-gradient(100deg, var(--c-primary-700) 0%, var(--c-primary-500) 100%); --grad-btn-hov: linear-gradient(100deg, var(--c-primary-900) 0%, var(--c-primary-700) 100%); /* 1px top edge on cards — the band motif reduced to a single ribbon. */ --grad-edge: linear-gradient(90deg, transparent 0%, var(--c-primary-500) 22%, var(--c-primary-300) 55%, transparent 100%); /* Ambient wash behind the hero. Sits under the band texture. */ --grad-ambient: radial-gradient( 62rem 38rem at 78% -8%, rgba(0, 143, 181, 0.16) 0%, rgba(0, 143, 181, 0) 62%); --grad-ambient-2: radial-gradient( 46rem 30rem at 6% 108%, rgba(0, 109, 176, 0.12) 0%, rgba(0, 109, 176, 0) 60%); /* ---------------------------------------------------------------------- 6. TYPOGRAPHY ---------------------------------------------------------------------- */ /* Self-hosted, subset to latin + latin-ext. No third-party request. Falls back to the previous system stack if the woff2 fails to load. */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-head: var(--font-body); /* Technical labels, spec values, version strings, file sizes. */ --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Fluid scale. Min values are the 375px rendering, max the 1440px+. */ --fs-xs: 0.8125rem; /* 13px, labels */ --fs-sm: 0.9375rem; /* 15px, meta */ --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 → 17 */ --fs-md: clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem); /* 17 → 19 */ --fs-lg: clamp(1.1875rem, 1.09rem + 0.40vw, 1.375rem); /* 19 → 22 */ --fs-xl: clamp(1.375rem, 1.22rem + 0.66vw, 1.75rem); /* 22 → 28 */ --fs-2xl: clamp(1.625rem, 1.36rem + 1.13vw, 2.25rem); /* 26 → 36 */ --fs-3xl: clamp(1.9375rem, 1.44rem + 2.10vw, 3.125rem); /* 31 → 50 */ --fs-4xl: clamp(2.375rem, 1.58rem + 3.39vw, 4.25rem); /* 38 → 68 */ --lh-tight: 1.08; /* display headings */ --lh-snug: 1.24; /* section headings, card titles */ --lh-normal: 1.5; /* short UI strings, nav */ --lh-body: 1.65; /* all running prose — brief requires >= 1.6 */ --ls-tight: -0.028em; /* Inter is set tighter than the old system face */ --ls-normal: 0; --ls-wide: 0.02em; --ls-label: 0.09em; /* echoes the logo wordmark's wide tracking */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* display headings only */ --measure: 68ch; /* brief caps at 75ch */ --measure-tight: 56ch; /* lead paragraphs, card body */ /* ---------------------------------------------------------------------- 7. SPACING — 8px base. -1 and -2 are the sub-grid half steps. ---------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 2.5rem; /* 40px */ --sp-8: 3rem; /* 48px */ --sp-9: 4rem; /* 64px */ --sp-10: 5rem; /* 80px */ --sp-11: 6rem; /* 96px */ --sp-12: 8rem; /* 128px */ /* Section rhythm, fluid between the 375px and 1440px breakpoints. */ --sp-section: clamp(3.75rem, 2.5rem + 5.3vw, 7rem); --sp-section-l: clamp(5rem, 3.4rem + 6.8vw, 9.5rem); --sp-gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); --w-container: 81.25rem; /* 1300px */ --w-container-n: 60rem; /* 960px, narrow prose pages */ /* ---------------------------------------------------------------------- 8. RADII Superseded the original 0–4px scale. The previous note read "kept minimal; the mark has no curves" — that was consistent with the old chisel-cut language, but the current surface language is soft-cornered and the two cannot both hold. The band motif is now carried by --grad-edge instead of by the corner treatment. ---------------------------------------------------------------------- */ --r-none: 0; --r-sm: 4px; --r-md: 8px; /* buttons, inputs, small plates */ --r-lg: 12px; /* cards, panels */ --r-xl: 18px; /* hero panel, CTA band, large containers */ --r-pill: 999px; /* tags, status pills, toggle */ /* ---------------------------------------------------------------------- 9. BORDERS, SHADOWS & GLOW ---------------------------------------------------------------------- */ --bw-hair: 1px; --bw-thick: 2px; --bw-marker: 3px; /* the left rule on cards and blockquotes */ /* Tinted toward the brand navy rather than neutral black. */ --sh-none: none; --sh-1: 0 1px 2px rgba(0, 59, 100, 0.06), 0 1px 1px rgba(0, 59, 100, 0.04); --sh-2: 0 2px 4px rgba(0, 59, 100, 0.07), 0 4px 12px rgba(0, 59, 100, 0.06); --sh-3: 0 4px 8px rgba(0, 59, 100, 0.08), 0 12px 28px rgba(0, 59, 100, 0.09); --sh-header: 0 1px 0 rgba(0, 59, 100, 0.08), 0 6px 24px rgba(0, 59, 100, 0.07); /* Brand-tinted glow used on hover for cards and primary buttons. */ --sh-glow: 0 0 0 1px rgba(0, 109, 176, 0.35), 0 8px 30px rgba(0, 109, 176, 0.18); --sh-glow-btn: 0 6px 20px rgba(0, 109, 176, 0.30); /* Header blur. Kept modest — heavy blur costs paint time on scroll. */ --blur-header: 12px; /* ---------------------------------------------------------------------- 10. MOTION — brief caps transitions at 150–250ms. ---------------------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --dur-reveal: 420ms; /* scroll reveal only, not an interaction */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); --reveal-shift: 14px; --reveal-stagger: 60ms; /* ---------------------------------------------------------------------- 11. Z-INDEX SCALE ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-nav: 30; --z-skip: 50; /* ---------------------------------------------------------------------- 12. MARK-DERIVED DECORATION The logo is a sphere cut into parallel bands. This gradient reproduces that banding as a reusable rule/divider fill. ---------------------------------------------------------------------- */ --band-rule: repeating-linear-gradient( 90deg, var(--c-primary-500) 0 14px, transparent 14px 22px ); --band-rule-inverse: repeating-linear-gradient( 90deg, var(--c-accent) 0 14px, transparent 14px 22px ); /* The 170° field behind the hero and page headers. */ --band-field: repeating-linear-gradient( 170deg, var(--c-primary-100) 0 2px, transparent 2px 26px ); --band-field-opacity: 0.55; --icon-stroke: 1.75; /* consumed via attribute on inline SVG */ } /* ========================================================================== 5b. DARK THEME ROLE MAPPING -------------------------------------------------------------------------- The two selectors below carry identical bodies on purpose. CSS has no way to share one declaration block between a media query and a plain attribute selector, so the mapping is written twice. Every value is a var() reference into the --d-* palette in section 2b, so a colour change is still a one-line edit; only the role wiring is repeated. If you edit one block, edit the other. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-primary-900: var(--d-primary-900); --c-primary-700: var(--d-primary-700); --c-primary-500: var(--d-primary-500); --c-primary-300: var(--d-primary-300); --c-primary-100: #16334A; --c-surface: var(--d-canvas); --c-surface-sunken: var(--d-surface); --c-surface-raised: var(--d-raised); --c-surface-inverse: var(--d-surface); --c-surface-header: rgba(10, 18, 26, 0.72); --c-text: var(--d-text); --c-text-muted: var(--d-text-mut); --c-text-inverse: var(--d-text); --c-text-inverse-mut: var(--d-text-mut); --c-text-on-primary: var(--d-on-accent); --c-text-on-accent: var(--d-on-accent); --c-border: var(--d-border); --c-border-subtle: #1A2A38; --c-border-strong: var(--d-border-str); --c-border-inverse: var(--d-border-str); --c-link: var(--d-primary-500); --c-link-hover: var(--c-accent); --c-focus-ring: var(--c-accent); --c-focus-ring-inv: var(--c-accent); --c-plate-bg: #142434; --c-plate-fg: var(--d-primary-300); --c-n-5: var(--d-text-mut); --c-success-bg: #0C2A1E; --c-warning-bg: #2E2110; --c-error-bg: #331414; --c-success: #5BD39B; --c-warning: #E9B457; --c-error: #F58A82; --grad-heading: linear-gradient(100deg, var(--d-primary-500) 0%, var(--d-primary-300) 48%, var(--c-accent) 100%); --grad-btn: linear-gradient(100deg, var(--d-primary-500) 0%, var(--c-accent) 100%); --grad-btn-hov: linear-gradient(100deg, var(--d-primary-300) 0%, var(--c-accent) 100%); --grad-edge: linear-gradient(90deg, transparent 0%, var(--d-primary-500) 22%, var(--c-accent) 55%, transparent 100%); --grad-ambient: radial-gradient(62rem 38rem at 78% -8%, rgba(79, 184, 232, 0.20) 0%, rgba(79, 184, 232, 0) 62%); --grad-ambient-2: radial-gradient(46rem 30rem at 6% 108%, rgba(132, 255, 226, 0.10) 0%, rgba(132, 255, 226, 0) 60%); --band-field: repeating-linear-gradient(170deg, rgba(79, 184, 232, 0.16) 0 2px, transparent 2px 26px); --band-field-opacity: 0.9; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55); --sh-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.45); --sh-3: 0 6px 16px rgba(0, 0, 0, 0.60), 0 20px 48px rgba(0, 0, 0, 0.50); --sh-header: 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 28px rgba(0, 0, 0, 0.55); --sh-glow: 0 0 0 1px rgba(79, 184, 232, 0.45), 0 10px 34px rgba(79, 184, 232, 0.16); --sh-glow-btn: 0 6px 24px rgba(79, 184, 232, 0.35); } } :root[data-theme="dark"] { color-scheme: dark; --c-primary-900: var(--d-primary-900); --c-primary-700: var(--d-primary-700); --c-primary-500: var(--d-primary-500); --c-primary-300: var(--d-primary-300); --c-primary-100: #16334A; --c-surface: var(--d-canvas); --c-surface-sunken: var(--d-surface); --c-surface-raised: var(--d-raised); --c-surface-inverse: var(--d-surface); --c-surface-header: rgba(10, 18, 26, 0.72); --c-text: var(--d-text); --c-text-muted: var(--d-text-mut); --c-text-inverse: var(--d-text); --c-text-inverse-mut: var(--d-text-mut); --c-text-on-primary: var(--d-on-accent); --c-text-on-accent: var(--d-on-accent); --c-border: var(--d-border); --c-border-subtle: #1A2A38; --c-border-strong: var(--d-border-str); --c-border-inverse: var(--d-border-str); --c-link: var(--d-primary-500); --c-link-hover: var(--c-accent); --c-focus-ring: var(--c-accent); --c-focus-ring-inv: var(--c-accent); --c-plate-bg: #142434; --c-plate-fg: var(--d-primary-300); --c-n-5: var(--d-text-mut); --c-success-bg: #0C2A1E; --c-warning-bg: #2E2110; --c-error-bg: #331414; --c-success: #5BD39B; --c-warning: #E9B457; --c-error: #F58A82; --grad-heading: linear-gradient(100deg, var(--d-primary-500) 0%, var(--d-primary-300) 48%, var(--c-accent) 100%); --grad-btn: linear-gradient(100deg, var(--d-primary-500) 0%, var(--c-accent) 100%); --grad-btn-hov: linear-gradient(100deg, var(--d-primary-300) 0%, var(--c-accent) 100%); --grad-edge: linear-gradient(90deg, transparent 0%, var(--d-primary-500) 22%, var(--c-accent) 55%, transparent 100%); --grad-ambient: radial-gradient(62rem 38rem at 78% -8%, rgba(79, 184, 232, 0.20) 0%, rgba(79, 184, 232, 0) 62%); --grad-ambient-2: radial-gradient(46rem 30rem at 6% 108%, rgba(132, 255, 226, 0.10) 0%, rgba(132, 255, 226, 0) 60%); --band-field: repeating-linear-gradient(170deg, rgba(79, 184, 232, 0.16) 0 2px, transparent 2px 26px); --band-field-opacity: 0.9; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55); --sh-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.45); --sh-3: 0 6px 16px rgba(0, 0, 0, 0.60), 0 20px 48px rgba(0, 0, 0, 0.50); --sh-header: 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 28px rgba(0, 0, 0, 0.55); --sh-glow: 0 0 0 1px rgba(79, 184, 232, 0.45), 0 10px 34px rgba(79, 184, 232, 0.16); --sh-glow-btn: 0 6px 24px rgba(79, 184, 232, 0.35); }