/* ============================================================================ Informed Software Solutions — Design Tokens "Living Evidence" design system. Single source of truth for colour, type, space, motion. Raw hex values live ONLY in this file; everything else consumes var(--token). Do not hardcode colours elsewhere. ---------------------------------------------------------------------------- Sections: 1. @font-face (self-hosted WOFF2, latin + latin-ext) 2. :root — palette, per-product accents, semantic defaults 3. :root — typography (fluid clamp scale, stacks, weights) 4. :root — spacing, radii, borders, shadows, z-index 5. :root — motion (easing + duration tokens) 6. Theme classes — .theme-daylight (default), .theme-operations (dark) ========================================================================== */ /* --------------------------------------------------------------------------- 1. SELF-HOSTED FONTS Fraunces — variable, opsz (9-144) + wght (400-600) axes preserved. Inter — variable, wght axis (400-600). IBM Plex Mono — static, weight 500. latin + latin-ext split via unicode-range (latin-ext carries macrons ā ē ī ō ū required for te reo Māori). font-display: swap so text paints immediately in fallback, swaps on load. --------------------------------------------------------------------------- */ /* Fraunces — latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Fraunces — latin-ext (macrons for te reo Māori) */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter — latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* IBM Plex Mono — latin (weight 500) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* IBM Plex Mono — latin-ext (weight 500) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* =========================================================================== 2. PALETTE (raw values — defined ONCE, here only) =========================================================================== */ :root { /* ========================================================================== NAVY RAMP — the whole site is now layered navy ("Operations-grade dark"). Rhythm comes from luminance steps WITHIN navy, never a light theme. Depth map (deepest → raised): 950 void / deepest sections + footer floor 900 default section ground 880 the "lifted" alternating section ground (mix, defined below) 800 card / panel surfaces 700 raised elements, big outline section numerals, borders 600 hovers, glow pools, hairline accents ========================================================================== */ --navy-950: #0A141F; /* deepest void — hero floor, footer, deepest bands */ --navy-900: #0E1F30; /* default section ground */ --navy-800: #16314B; /* card / panel surfaces, raised fills */ --navy-700: #1F3C5C; /* BRAND navy, borders, raised elements, numerals */ --navy-600: #2C5078; /* hovers, glow pools, secondary fills */ --navy-500: #3E6794; /* ridge lines, brighter borders */ --navy-400: #5681AB; /* luminous ridge-line tone on dark */ --navy-300: #8FA8C2; /* muted text on dark */ --navy-200: #B9C9DA; /* body text on dark */ --navy-100: #D7E1EC; /* brightest tint */ /* "880-ish" lifted section ground — one luminance step above 900, sampled between 900 and 800 so alternating bands read as a deliberate rise. */ --navy-880: #122740; /* Cool off-white ink ramp — for text ON the navy ground. NOT cream. Verified on the darkest realistic ground (--navy-950 #0A141F): ink #EDF3F9 → 16.9:1 (headings / strong body) ink-2 #B9C9DA → 9.9:1 (default body copy) ink-3 #8FA8C2 → 5.9:1 (muted captions / labels) All clear AA; body & headings clear AAA. */ --ink: #EDF3F9; /* headings + strong text on navy */ --ink-body: #B9C9DA; /* default body copy on navy (= navy-200) */ --ink-soft: #8FA8C2; /* muted / secondary text on navy (= navy-300) */ --line: rgba(143, 168, 194, 0.18); /* hairline on navy */ --line-strong: rgba(143, 168, 194, 0.30); /* stronger hairline / card border */ /* Legacy paper tokens retained ONLY so any not-yet-converted reference keeps resolving; the live site never paints paper. (Product-pages agent: do not reintroduce these as backgrounds — the site is all-navy now.) */ --paper: #EDF3F9; /* repurposed: reads as the cool off-white ink */ --paper-raised: var(--navy-800); /* "raised" now means a navy surface */ /* Beacon — forensic brass / evidence light (primary accent) */ --beacon-700: #8C5A12; /* accent SMALL-TEXT on light — AA: 5.38:1 on paper, 5.86:1 on white, 4.75:1 on the beacon-100 wash */ --beacon-600: #B5751F; /* larger accent text / fills on light (3.79:1 white — large-text AA only; do NOT use for <18.66px text) */ --beacon-500: #C8862C; /* primary accent — fills, glints */ --beacon-400: #E0A23D; /* accent on dark */ --beacon-100: #F3E6CE; /* accent wash */ /* Per-product accents (so no page hardcodes hex) */ --accent-ims: #C8862C; /* Informed Management System — beacon amber */ --accent-iv: #3E6794; /* Informed Investigations — navy */ --accent-iv-spark: #2BB3C0; /* Investigations — teal spark */ --accent-df: #4B5E86; /* Informed Defence — slate-indigo */ /* Per-product accent for SMALL TEXT on light (#F7F5F1) — must be AA (>=4.5:1). IMS amber is only 2.79:1 at small size, so its text variant is darkened to beacon-700 (#8C5A12 = 5.38:1). Investigations (#3E6794 = 5.40:1) and Defence (#4B5E86 = 5.94:1) already pass, so their text variant equals their accent. */ --accent-ims-text: #8C5A12; /* darkened amber — 5.38:1 on paper */ --accent-iv-text: #3E6794; /* 5.40:1 on paper */ --accent-df-text: #4B5E86; /* 5.94:1 on paper */ /* Functional state colours (derived from palette family, AA on paper) */ --success: #2F6B4F; --success-soft: #E2EFE8; --danger: #A23A2E; --danger-soft: #F6E3DF; /* Translucent inks for overlays / scrims (rgba so they layer over media) */ --scrim-navy: rgba(10, 20, 31, 0.72); /* navy-950 @ .72 */ --scrim-paper: rgba(14, 31, 48, 0.82); /* (legacy name) navy-900 scrim */ --glass-paper: rgba(14, 31, 48, 0.80); /* (legacy name) → navy glass */ --glass-navy: rgba(10, 20, 31, 0.80); /* navy-950 glass for scrolled header */ /* ========================================================================== ATMOSPHERE — the "wow" layer. Cool navy-glow pools, fingerprint-ridge texture fields, and a fine film-grain overlay. Token-driven so the product-pages agent can drop the same richness onto converted pages. ========================================================================== */ /* Radial navy-glow pool (cool atmosphere behind heads / hero). Compose with `background-image: var(--glow-navy);` on a positioned ::before. */ --glow-navy: radial-gradient(60% 60% at 50% 0%, rgba(44, 80, 120, 0.16) 0%, /* navy-600 @ 16% */ rgba(44, 80, 120, 0.06) 38%, transparent 72%); /* Warmer amber glint pool — used sparingly behind a single focal element. */ --glow-amber: radial-gradient(50% 50% at 50% 40%, rgba(224, 162, 61, 0.14) 0%, /* beacon-400 @ 14% */ rgba(224, 162, 61, 0.04) 45%, transparent 72%); /* Fingerprint-ridge texture field — faint concentric hairlines, navy-600. */ --ridge-field: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px, rgba(44, 80, 120, 0.05) 13px 14px); /* Film-grain — a tiny inline SVG fractal-noise tile (no asset dependency). Applied via a fixed pointer-events:none overlay at ~3% opacity. */ --grain-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Oversized translucent section numeral (01/02/03 behind heads). */ --numeral-fill: rgba(31, 60, 92, 0.10); /* navy-700 @ 10% body fill */ --numeral-line: rgba(86, 129, 171, 0.16); /* navy-400 outline */ /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'Consolas', 'SF Mono', ui-monospace, monospace; /* Fluid type scale (clamp: min, preferred-vw, max). Display pushed up for cinematic drama — hero now scales to ~7vw / 7rem. */ --fs-display: clamp(3rem, 1.4rem + 7vw, 7rem); /* hero — bigger */ --fs-h1: clamp(2.4rem, 1.55rem + 4vw, 3.4rem); --fs-h2: clamp(2rem, 1.4rem + 2.9vw, 2.75rem); --fs-h3: clamp(1.5rem, 1.22rem + 1.4vw, 1.95rem); --fs-lead: clamp(1.18rem, 1.06rem + 0.6vw, 1.375rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-kicker: 0.75rem; /* 12px */ /* Line heights — tighter display leading for the bigger scale */ --lh-display: 0.94; --lh-tight: 1.06; --lh-heading: 1.18; --lh-body: 1.6; --lh-snug: 1.45; /* Letter spacing */ --ls-display: -0.02em; --ls-heading: -0.012em; --ls-body: 0; --ls-kicker: 0.18em; /* mono evidence-tag tracking */ --ls-tag: 0.08em; /* Variable-font weight axis */ --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-display: 550; /* Fraunces heading weight (variable axis) */ --fw-display-bold: 600; /* Optical size axis (Fraunces opsz 9-144) */ --opsz-text: 24; --opsz-display: 96; /* Max line measure */ --measure: 66ch; /* ========================================================================== 4. SPACING / SIZING / RADII / BORDERS / SHADOWS / Z-INDEX ========================================================================== */ /* Spacing scale — 4px base */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6rem; /* 96 */ --space-12: 8rem; /* 128 */ /* Section vertical rhythm (fluid) */ --section-py: clamp(5rem, 10vw, 9rem); --section-py-sm: clamp(3.5rem, 7vw, 6rem); /* Layout */ --container-max: 1200px; --container-wide: 1440px; --container-pad: clamp(1.25rem, 5vw, 4rem); --content-narrow: 760px; /* Radii */ --radius-sm: 6px; --radius: 8px; /* cards */ --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* Borders */ --border-hairline: 1px; --border-thick: 2px; --rule-light: 1px solid var(--line); --rule-navy: 1px solid var(--line-strong); /* Shadows — deep, near-black navy drops for the dark system. On a navy ground a soft tinted shadow reads as recessed depth, not grey haze. */ --shadow-xs: 0 1px 2px rgba(3, 8, 14, 0.40); --shadow-sm: 0 2px 10px rgba(3, 8, 14, 0.45), 0 1px 2px rgba(3, 8, 14, 0.35); --shadow-md: 0 10px 30px rgba(3, 8, 14, 0.50), 0 3px 8px rgba(3, 8, 14, 0.38); --shadow-lg: 0 22px 60px rgba(3, 8, 14, 0.58), 0 8px 18px rgba(3, 8, 14, 0.42); --shadow-xl: 0 40px 100px rgba(3, 8, 14, 0.66), 0 14px 32px rgba(3, 8, 14, 0.48); --shadow-beacon: 0 8px 30px rgba(200, 134, 44, 0.38); --shadow-inset-line: inset 0 -1px 0 var(--line); /* Soft cool glow ring for raised navy surfaces (subtle inner luminance). */ --ring-raise: 0 0 0 1px var(--line-strong), 0 1px 0 rgba(215, 225, 236, 0.04) inset; /* Z-index scale */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-progress: 200; /* scroll-progress ridge */ --z-header: 300; /* fixed nav */ --z-flyout: 400; /* mega-flyout panel */ --z-overlay: 500; /* mobile full-screen menu */ --z-cursor: 900; /* custom cursor ring */ --z-modal: 1000; --z-toast: 1100; /* Header sizing */ --header-h: 72px; --header-h-scrolled: 64px; /* ========================================================================== 5. MOTION (easing + duration tokens) ========================================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* power-out entrances */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* draws */ --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* expo-style headlines */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* magnetic / playful */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-instant: 120ms; --dur-fast: 200ms; /* UI feedback */ --dur-med: 600ms; /* narrative reveals */ --dur-slow: 1100ms; /* line draws */ /* ========================================================================== SEMANTIC DEFAULTS — now the layered-navy dark system site-wide. The entire marketing site is "Operations-grade dark"; there is no light theme in play. An un-themed root renders the default navy-900 ground with cool off-white ink. Theme classes below set band DEPTH, not light/dark. ========================================================================== */ --bg: var(--navy-900); --bg-raised: var(--navy-800); --text: var(--ink-body); /* default body copy = cool off-white */ --text-strong: var(--ink); /* strong/heading-weight text */ --text-soft: var(--ink-soft); /* muted captions/labels */ --heading: var(--ink); /* headings = brightest off-white */ --accent: var(--beacon-400); /* amber, brighter on dark */ --accent-text: var(--beacon-400); /* AA-safe accent for small text on navy */ --rule: var(--line); --glow: var(--glow-navy); /* default atmosphere pool */ --selection-bg: var(--beacon-400); --selection-fg: var(--navy-950); } /* =========================================================================== 6. THEME / BAND CLASSES The site is uniformly dark; these set band DEPTH (a luminance step within navy), not a light/dark mode. Rhythm = alternating depth between sections. All resolve cool off-white ink + amber accent. Applied to or any section wrapper. Depth ladder: .theme-daylight → navy-900 (default ground; the legacy class) .band-raised → navy-880 (the "lifted" alternating band) .theme-operations→ navy-950 (deepest void — hero, contact, footer) =========================================================================== */ /* Legacy class — now the default navy-900 ground (NOT light). */ .theme-daylight { --bg: var(--navy-900); --bg-raised: var(--navy-800); --text: var(--ink-body); --text-strong: var(--ink); --text-soft: var(--ink-soft); --heading: var(--ink); --accent: var(--beacon-400); --accent-text: var(--beacon-400); --rule: var(--line); --glow: var(--glow-navy); --selection-bg: var(--beacon-400); --selection-fg: var(--navy-950); } /* Lifted alternating band — one luminance step up from 900. */ .band-raised { --bg: var(--navy-880); --bg-raised: var(--navy-800); --text: var(--ink-body); --text-strong: var(--ink); --text-soft: var(--ink-soft); --heading: var(--ink); --accent: var(--beacon-400); --accent-text: var(--beacon-400); --rule: var(--line); --glow: var(--glow-navy); } /* Operations — the DEEPEST navy void (hero, contact, footer floor). */ .theme-operations { --bg: var(--navy-950); --bg-raised: var(--navy-800); --text: var(--ink-body); --text-strong: var(--ink); --text-soft: var(--ink-soft); --heading: var(--ink); --accent: var(--beacon-400); --accent-text: var(--beacon-400); --rule: var(--line); --glow: var(--glow-navy); --selection-bg: var(--beacon-400); --selection-fg: var(--navy-950); }