/* ========================================================================= FaultReady Systems — shared base tokens, reset, primitives. Video slot assignments (Phase 0 — adjust after eyeballing poster frames): hero → AdobeStock_498183649.mov control-room dolly (most cinematic, loops) surveillance → AdobeStock_1522064161.mov monitor wall (who-we-serve / who-we-are) ops → AdobeStock_172780987.mov team in lab / ops room (capabilities montage) Poster fallbacks (until tools/encode-media.ps1 runs): hero-poster.jpg → AdobeStock_717094244 (ops centre) montage-poster.jpg → AdobeStock_419897095 (surveillance wall) ops-poster.jpg → AdobeStock_1107050561 (team in ops room) Per-design overrides live inside each designs/option-*.html. Site-wide visual differences (fonts, accent, surface) are scoped via [data-design="a"|"b"|"c"] on . Contrast: tokens here were chosen so --ink-mid on --bg clears WCAG AA (~9.7:1) and --ink-mid on --bg-raised clears (~8.3:1). Don't drop below --ink-mid for body copy; for very large display copy, --line is the floor. ========================================================================= */ :root { /* Surfaces (cool near-black, faint blue cast — not warm, not magenta) */ --bg: oklch(0.16 0.004 260); --bg-raised: oklch(0.20 0.005 260); --bg-sunken: oklch(0.13 0.004 260); --line: oklch(0.32 0.005 260); --line-strong: oklch(0.45 0.005 260); /* Text */ --ink: oklch(0.97 0 0); --ink-mid: oklch(0.78 0.004 260); --ink-quiet: oklch(0.62 0.004 260); /* Accent — muted signal amber. Caps at ~10% of any viewport. */ --accent: oklch(0.78 0.13 70); --accent-soft: oklch(0.78 0.13 70 / 0.16); /* Status (incident banner, indicators only — never decorative) */ --signal: oklch(0.82 0.13 60); /* Type families — each design redeclares these */ --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* Scale floor; each design redefines max for hero */ --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.85rem); --step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem); --step-1: clamp(1.10rem, 1.00rem + 0.50vw, 1.30rem); --step-2: clamp(1.35rem, 1.18rem + 0.85vw, 1.75rem); --step-3: clamp(1.75rem, 1.45rem + 1.50vw, 2.40rem); --step-4: clamp(2.25rem, 1.80rem + 2.20vw, 3.30rem); --step-5: clamp(2.80rem, 2.10rem + 3.40vw, 4.40rem); /* Spacing rhythm (varied; do not snap every section to one value) */ --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: 6.5rem; --sp-9: 9rem; /* Geometry */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; /* Semantic z-index */ --z-base: 0; --z-banner: 60; --z-nav: 70; --z-modal-bg: 80; --z-modal: 90; --z-toast: 100; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* quart */ --d-fast: 180ms; --d-norm: 360ms; --d-slow: 720ms; } /* ------------------------------------------------------------------------- Reset & defaults ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink-mid); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scrollbar-color: var(--line) transparent; } body { min-height: 100dvh; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--bg); } img, svg, video, canvas { display: block; max-width: 100%; } h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; /* floor; do NOT drop below -0.04em */ text-wrap: balance; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-3); } p { max-width: 68ch; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ------------------------------------------------------------------------- Photographic / video treatment — every asset sits in the same world. ------------------------------------------------------------------------- */ .media { position: relative; overflow: hidden; background: var(--bg-sunken); } .media > img, .media > video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(1.04) brightness(0.94); } .media::after { /* unifying scrim — slightly lifted off black so the imagery stays readable */ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, oklch(0.16 0.004 260 / 0.10) 0%, oklch(0.16 0.004 260 / 0.00) 35%, oklch(0.16 0.004 260 / 0.55) 100%); } /* ------------------------------------------------------------------------- Incident banner — shared across all three designs. ------------------------------------------------------------------------- */ .incident { position: sticky; top: 0; z-index: var(--z-banner); display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.5rem 1.25rem; background: var(--bg-sunken); border-bottom: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-mid); } .incident strong { color: var(--ink); font-weight: 500; } .incident a { color: var(--accent); border-bottom: 1px solid color-mix(in oklch, var(--accent) 50%, transparent); transition: border-color var(--d-fast) var(--ease-out); } .incident a:hover { border-bottom-color: var(--accent); } .signal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in oklch, var(--signal) 18%, transparent); animation: signal 2.4s ease-out infinite; } @keyframes signal { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--signal) 18%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in oklch, var(--signal) 6%, transparent); } } /* ------------------------------------------------------------------------- CTA primitives — designs may restyle but inherit safe defaults. ------------------------------------------------------------------------- */ .cta { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.4rem; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em; border-radius: var(--r-1); transition: background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); } .cta:hover { background: var(--accent); } .cta--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); } .cta--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); } /* ------------------------------------------------------------------------- Reveal — enhances already-visible content (never hides on load). ------------------------------------------------------------------------- */ .reveal { opacity: 0.001; transform: translateY(14px); transition: opacity var(--d-slow) var(--ease-out-soft), transform var(--d-slow) var(--ease-out-soft); } .reveal.is-in { opacity: 1; transform: none; } /* Headless / JS-less / IO-failure fallback: after the load event we force .reveal to its final state via JS, so prerenders never ship blank. */ /* ------------------------------------------------------------------------- Partner-logo strip — quiet, monochrome, footer-only. ------------------------------------------------------------------------- */ .partners { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: center; padding: 1.5rem 0; } .partners img { height: 28px; width: auto; opacity: 0.55; filter: grayscale(1) brightness(2.2); transition: opacity var(--d-fast) var(--ease-out); } .partners img:hover { opacity: 0.85; } /* ------------------------------------------------------------------------- Reduced motion — non-negotiable. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .signal-dot { animation: none; } }