/* ========================================================================== tokens.css - THE DESIGN SYSTEM (Tondnet Data) Edit this file to re-skin the entire site. Nothing else needs touching. -------------------------------------------------------------------------- GUARDRAILS - read before adding a value here: - This is a blue-and-white scheme. Everything chromatic comes from ONE blue family (--c-accent / --c-accent-bright / --c-accent-on-dark / --c-decorative-cool). Do not introduce a second hue. A single hue plus white and blue-grey neutrals is what keeps this reading as modern enterprise rather than dated ISP. - No gradients between unrelated hues, no bevels, no gloss. Depth comes from the elevation tokens below and from 1px borders. - --c-accent is text-safe on light grounds; --c-accent-on-dark is text-safe on dark grounds. --c-accent-bright and --c-decorative-cool BOTH FAIL WCAG AA as text at any size - borders, strokes, fills and large decorative glyphs only, never words. - Never use --c-accent and --c-critical in the same component. Critical is reserved exclusively for genuine incident/urgency contexts (SOC or outage status, security-incident banners) - it must never mean "click here." - Card / panel / input radius (--radius-soft*) and interactive-control radius (--radius-pill) are different roles. Never apply card radius to a button, or pill radius to a card. - Never set text colour to pure #000000 - use --c-ink (it carries a faint cool cast) so nothing on the page reads as flat black. ========================================================================== */ :root { /* --- BRAND COLOUR -------------------------------------------------------- Blue and white. The whole palette is one blue family sampled from the Tondnet Data logo, plus white and blue-tinted neutrals. Blue is the dominant brand colour here, not a sparse accent: it fills primary CTAs and every dark band. The one thing to hold onto: a single hue family, no second chromatic colour, no gradients between unrelated hues. That is what separates a modern enterprise blue from a dated ISP blue. */ --c-ink: #0b1c33; /* primary text / ink - deep blue-black */ --c-text-secondary: #41556e; /* supporting copy - 7.6:1 on white */ --c-text-tertiary: #8a9bb0; /* disabled states, fine print */ --c-border: #d9e4f2; /* the single neutral holding the UI together */ --c-canvas: #f1f6fc; /* blue-tinted section band background */ --c-surface: #ffffff; /* elevated panels, card fills */ --c-surface-shadow-tint: #cddcec; /* blue tint folded into the shadows */ --c-accent: #0050b0; /* THE brand blue - deep logo blue. 7.6:1 on white, so it is safe for accent TEXT as well as icons, strokes, indices, tags AND the fill of primary CTA buttons, where white text on it reaches 7.6:1. */ --c-accent-bright: #0080e0; /* mid logo blue - 4.07:1 on white, FAILS AA as text. Strokes, fills, dots only. */ --c-accent-on-dark: #10a0f0; /* bright logo blue - 6.6:1 on --c-ink, so this is the text-safe accent on dark grounds. Decoration-only on light ones. */ --c-decorative-cool: #28d3fe; /* soft background bands/strokes ONLY - fails contrast as text at any size. */ --c-info: #2563eb; /* neutral data callouts, non-critical status */ --c-critical: #dc2626; /* RESERVED - genuine incident/urgency only: security-incident banners, SOC/outage status, hazard indicators. Never for marketing CTAs or decoration. */ /* Text-safe accent alias, kept so components read intentionally */ --c-accent-text: var(--c-accent); /* --- NEUTRAL ALIASES (kept for compatibility with existing component naming across the codebase - same roles as the palette above) */ --c-white: var(--c-surface); --c-paper: var(--c-canvas); --c-line: var(--c-border); --c-line-dark: rgba(255, 255, 255, 0.14); --c-muted: var(--c-text-secondary); --c-muted-on-dark: rgba(255, 255, 255, 0.68); /* --- BACKGROUND ROLES ------------------------------------------------------- Dark bands are deep brand BLUE, not near-black. White on --bg-dark is 15:1 and --c-accent-on-dark on it is 5.2:1, so both stay AA. */ --bg-page: var(--c-surface); --bg-soft: var(--c-canvas); --bg-dark: #03264f; /* hero, dark bands, solid header */ --bg-dark-2: #052f5e; /* footer, mobile nav drawer */ /* --- TYPOGRAPHY ------------------------------------------------------------ Geometric-humanist sans. Inter is the closest free match to the reference's forms - loaded via Google Fonts on every page. */ --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900; /* Fluid display scale - Major Second (1.125), 16px base. Class names are inherited from the structural template (.t-hero / .t-display-l/m/s): .t-hero -> display-xl 72px / 400 / 1.08 .t-display-l -> display 52px / 400 / 1.05 .t-display-m -> heading-lg 40px / 400 / 1.00 .t-display-s -> heading 32px / 400 / 1.12 Card/section-level headings (h3 etc.) default to heading-sm (24/500). */ --fs-hero: clamp(42px, 6.4vw, 78px); /* display-xl, hero only - bumped for premium confidence at the very top of the hierarchy only */ --fs-display-l: clamp(36px, 4.6vw, 56px); /* display, hero only */ --fs-display-m: clamp(28px, 3.4vw, 40px); /* heading-lg */ --fs-display-s: clamp(24px, 2.4vw, 32px); /* heading */ --lh-display-xl: 1.08; --lh-display: 1.05; --lh-heading-lg: 1.00; --lh-heading: 1.12; --ls-display-xl: -0.034em; /* was -0.03em, compensates the larger --fs-hero */ --ls-display: -0.028em; --ls-heading-lg: -0.02em; --ls-heading: -0.01em; /* Fixed steps */ --fs-h4: 24px; /* heading-sm - card / panel headings, 500 weight */ --fs-h5: 22px; /* subheading - 500 weight */ --fs-lead: 18px; /* body-lg - intro paragraphs */ --fs-body: 16px; --fs-sm: 14px; --fs-xs: 13px; --fs-eyebrow: 11px; --fs-utility: 10px; --lh-heading-sm: 1.2; /* heading-sm / subheading */ --lh-body-lg: 1.6; --lh-body: 1.5; /* SMALL-CAPS LABEL TOKENS. Despite the historical names, these are NOT tied to any one component - the old ".eyebrow" device was removed site-wide. They are the shared sizing/tracking for every small uppercase label that remains: .stat__label, .partner-group__title, .step__label, .diagram__row-title, .toc h2, .mega__col h3, .footer-col h3, .case-study__label, .tag. Open tracking is what keeps 10–11px uppercase legible. */ --ls-eyebrow: 0.1em; --ls-utility: 0.1em; --ls-wide: 0.12em; /* --- SPACING SCALE -------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* Vertical rhythm - the single most important spacing value */ --section-y: 130px; --section-y-sm: 85px; /* --- LAYOUT ---------------------------------------------------------------- */ --container-max: 1520px; --container-gutter: 72px; --measure: 1020px; /* max width for section intro copy */ /* Header is a single nav row. --header-h and --header-nav-h must stay equal; eight rules depend on --header-h (scroll-padding-top, hero and page-hero top padding, and the mobile drawer's top/height), so changing the nav row height here corrects all of them at once. */ --header-h: 84px; --header-nav-h: 84px; /* --- SHAPE ------------------------------------------------------------------ Two distinct radius roles - never blend them (see guardrails above). Pill (9999px): buttons, badges, nav pills, tag chips, filter pills. Soft (12–14px): cards, panels, inputs, nested containers - NEVER on a button or other interactive control. */ --radius-pill: 9999px; --radius-soft: 12px; --radius-soft-lg: 16px; --radius-round: 50%; /* avatars / dots only */ --border: 1px solid var(--c-border); --border-dark: 1px solid var(--c-line-dark); /* --- ELEVATION -------------------------------------------------------------- Blue-ink-tinted shadows - never pure black. Applied only to cards, elevated panels and the fixed header. Never on text, icons or small UI elements. */ --shadow-card-resting: 0 4px 12px -4px rgba(10, 35, 80, 0.08), 0 1px 2px 0 rgba(10, 35, 80, 0.04); --shadow-card-hover: 0 30px 48px -28px rgba(10, 35, 80, 0.32), 0 14px 28px -14px rgba(10, 35, 80, 0.16); --shadow-button: 0 1px 2px 0 rgba(10, 35, 80, 0.18), 0 4px 10px -2px rgba(10, 35, 80, 0.14); --shadow-header: 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 8px 28px -10px rgba(10, 35, 80, 0.55); /* Accent-glow tier - built only from the existing accent-blue family, for premium hover/focus moments (primary button, dark-band card hover). Supplements, does not replace, the flat shadows above. */ --shadow-glow-accent: 0 0 0 1px rgba(0, 80, 176, 0.14), 0 14px 32px -10px rgba(16, 160, 240, 0.40); --shadow-glow-accent-lg: 0 0 0 1px rgba(0, 80, 176, 0.16), 0 26px 56px -16px rgba(16, 160, 240, 0.44); /* Legacy aliases (components not yet migrated reference these) */ --shadow-panel: var(--shadow-card-hover); --shadow-soft: var(--shadow-card-resting); /* Ambient accent bloom - single-hue radial glow for the CTA-band signature touch (components.css, CTA BAND section). --c-accent-on-dark only, so it stays inside the one-blue-family guardrail. */ --glow-cta: radial-gradient(60% 140% at 50% 0%, rgba(16, 160, 240, 0.28), rgba(16, 160, 240, 0) 70%); /* --- MOTION ------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.75, 0.2, 1); --dur-fast: 0.2s; --dur-base: 0.25s; --dur-mid: 0.35s; --dur-slow: 0.65s; /* --- Z-INDEX ------------------------------------------------------------ */ --z-header: 1000; --z-mega: 1001; --z-progress: 1002; --z-skip: 9999; } /* --- BREAKPOINTS ----------------------------------------------------------- 600px - small phone adjustments 900px - nav collapses to mobile, grids go single-column (load-bearing) 1180px - multi-column grids step down (load-bearing) 1520px - container ceiling Custom properties cannot be used in media queries, so these are literals throughout the CSS. Documented here as the canonical set. ------------------------------------------------------------------------ */ @media (max-width: 1180px) { :root { --container-gutter: 40px; --section-y: 100px; } } @media (max-width: 900px) { :root { --container-gutter: 24px; --section-y: var(--section-y-sm); --header-h: 64px; --header-nav-h: 64px; } } @media (max-width: 600px) { :root { --container-gutter: 20px; --section-y: 64px; } }