/* ============================================================ ABERDEEN GROUP — "MACHINED" DESIGN SYSTEM Dark obsidian ground · brushed-metal edges · real glass Zero build step. Plain CSS custom properties. ------------------------------------------------------------ 1 Tokens 2 Reset & base 3 Atmosphere (grid, aurora, grain) 4 Typography primitives 5 Buttons & form controls 6 Surfaces: metal edge, glass, spotlight, plates 7 Navigation 8 Hero (home) 9 Marquee 10 Section shell 11 Systems grid (home) 12 Precision grid (home) 13 CTA band 14 Page hero (sub-pages) 15 Service cards (services) 16 Advantage cards (why choose) 17 Union + commissioning (why choose) 18 Contact layout + thanks 19 BAS studio frame + controls showcase (home) 20 Footer 20a Hero telemetry (home) 20b Cutaway (home) 20c Bento + micro-visuals (home, services) 21 Motion utilities 22 Responsive 23 Reduced motion / print ============================================================ */ /* ============================================================ 1 TOKENS ============================================================ */ :root { /* --- Ink ramp: page ground -> raised surface --- */ --ink-950: #03050a; --ink-900: #05070e; --ink-850: #070a14; --ink-800: #0a0e1a; --ink-750: #0e1320; --ink-700: #131928; --ink-600: #1a2132; --ink-500: #232c40; --ink-400: #2f3a52; /* --- Brand --- */ --cyan-100: #d6f5ff; --cyan-200: #a5e9ff; --cyan-300: #7ee0ff; --cyan-400: #4cd6ff; --cyan-500: #22bde8; --cyan-600: #0a97bf; --cyan-700: #06718f; --cyan-900: #032b39; --amber-300: #ffcbaf; --amber-400: #ffb693; --amber-600: #e07a3c; --primary: var(--cyan-400); --accent: var(--amber-400); /* --- Text --- */ /* Text ramp. Every step clears WCAG AA 4.5:1 against the darkest glass surface (~#0e1420), because the dimmest steps carry real labels. Ratios below are measured against that worst case; the earlier numbers here were against the lighter-contrast page ground (--ink-900), which flattered every step. tokens.html recomputes these live from the shipped hex, so the comment cannot drift again. */ --text-hi: #eaf1ff; /* 16.26:1 on glass · 17.76:1 on --ink-900 */ --text: #c3cde0; /* 11.52:1 on glass · 12.59:1 on --ink-900 */ --text-mid: #aab6cc; /* 9.01:1 on glass · 9.85:1 on --ink-900 */ --text-dim: #96a3bb; /* 7.24:1 on glass · 7.91:1 on --ink-900 */ --text-faint: #7683a0; /* 4.85:1 on glass · 5.30:1 on --ink-900 */ /* --- Tint channels --- */ /* Bare `R, G, B` triplets, the tint bases every translucent value in the primitive layer resolves through: rgba(var(--rgb-cyan), 0.13). They exist so no component rule carries a literal channel — a colour literal lives here in :root or it is a bug. Each mirrors a named token above; keep the pair in step. */ --rgb-white: 255, 255, 255; --rgb-black: 0, 0, 0; --rgb-cyan: 76, 214, 255; /* --cyan-400 */ --rgb-cyan-hi: 126, 224, 255; /* --cyan-300 */ --rgb-amber: 255, 182, 147; /* --amber-400 */ --rgb-slate: 148, 172, 214; /* line + hairline tint base */ --rgb-ink-plate: 10, 15, 26; /* icon-plate well */ --rgb-ink-band: 13, 18, 30; /* alternating section band */ --rgb-ok: 53, 224, 138; --rgb-err: 255, 145, 130; --rgb-on-accent: 4, 20, 28; /* --on-accent */ --white: rgb(var(--rgb-white)); /* Ink laid over a cyan fill (--grad-accent, --cyan-400). Dark enough to clear AA on the lightest stop of the gradient. */ --on-accent: #04141c; /* --- Status --- */ /* Success/error pairs: a solid dot colour, a 8% tint fill, a 40% border, and a light text step that stays AA over the tint. Ratios are printed live by tokens.html; the measured numbers are in design-system.md §2. */ --ok-500: rgb(var(--rgb-ok)); --ok-300: #7ef0b6; --ok-200: #a8f2cd; --ok-tint: rgba(var(--rgb-ok), 0.08); --ok-line: rgba(var(--rgb-ok), 0.4); --err-500: rgb(var(--rgb-err)); --err-200: #ffc2b9; --err-tint: rgba(var(--rgb-err), 0.08); --err-line: rgba(var(--rgb-err), 0.4); /* --- Lines --- */ --line: rgba(var(--rgb-slate), 0.13); --line-soft: rgba(var(--rgb-slate), 0.07); --line-hard: rgba(var(--rgb-slate), 0.24); /* --- Metal: brushed edge + plate fills --- */ --metal-edge: linear-gradient(150deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0.01) 46%, rgba(124, 214, 255, 0.10) 74%, rgba(255, 255, 255, 0.18) 100%); --metal-edge-hot: linear-gradient(150deg, rgba(255, 255, 255, 0.42) 0%, rgba(126, 224, 255, 0.30) 26%, rgba(255, 255, 255, 0.06) 52%, rgba(76, 214, 255, 0.34) 78%, rgba(255, 255, 255, 0.34) 100%); --metal-plate: linear-gradient(158deg, #1b2333 0%, #10151f 44%, #0c1119 100%); --grad-accent: linear-gradient(105deg, var(--cyan-200) 0%, var(--cyan-400) 42%, var(--cyan-600) 100%); --grad-heat: linear-gradient(105deg, var(--amber-300), var(--amber-400) 55%, var(--amber-600)); /* --- Glass --- */ --glass-bg: linear-gradient(158deg, rgba(30, 41, 61, 0.62), rgba(12, 17, 27, 0.50)); --glass-bg-soft: linear-gradient(158deg, rgba(26, 35, 53, 0.46), rgba(10, 14, 24, 0.40)); --glass-blur: blur(22px) saturate(150%); --glass-blur-lg: blur(34px) saturate(160%); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.28); /* --- Form controls --- */ /* The input well is darker than any glass surface on purpose: a field has to read as a hole in the panel, not another pane of it. */ --field-bg: rgba(6, 10, 18, 0.62); --field-bg-focus: rgba(8, 14, 24, 0.85); --field-ring: 0 0 0 3px rgba(var(--rgb-cyan), 0.14); /* Chevron for the custom select. url() cannot take a var(), so the stroke is spelled out — it is --text-faint (#7683a0) and must be re-typed here by hand if that token ever moves. */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237683a0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* --- Scrollbar --- */ --scroll-thumb: linear-gradient(180deg, #2a3448, #1a2131); --scroll-thumb-hot: linear-gradient(180deg, #3b4763, #232c40); /* --- Elevation --- */ --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); --elev-2: 0 6px 20px -6px rgba(0, 0, 0, 0.55); --elev-3: 0 18px 44px -14px rgba(0, 0, 0, 0.68); --elev-4: 0 36px 90px -24px rgba(0, 0, 0, 0.78); --glow-cyan: 0 0 0 1px rgba(76, 214, 255, 0.18), 0 12px 44px -12px rgba(76, 214, 255, 0.42); --glow-cyan-sm: 0 8px 26px -10px rgba(76, 214, 255, 0.5); /* --- Type --- */ --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace; --fs-mono: 0.6875rem; --fs-xs: 0.78rem; --fs-sm: 0.875rem; --fs-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem); --fs-lg: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); --fs-xl: clamp(1.25rem, 1.14rem + 0.55vw, 1.6rem); --fs-2xl: clamp(1.55rem, 1.3rem + 1.1vw, 2.2rem); --fs-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); --fs-4xl: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); /* Trimmed from a 7.4rem cap so the copy column can yield width to the enlarged hero render. The headline also caps itself at 15cqi of its column so its longest word ("Performance") cannot overrun it. See §8. */ --fs-hero: clamp(2.9rem, 1.05rem + 6.1vw, 6rem); --lh-tight: 0.94; --lh-snug: 1.18; --lh-body: 1.68; --tracking-wide: 0.16em; --tracking-mono: 0.22em; /* --- Space: 4px base, linear --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --section-y: clamp(4rem, 2.8rem + 4.4vw, 7rem); --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); --maxw: 1240px; /* --- Radii --- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* --- Motion --- */ --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; --dur-4: 620ms; --dur-5: 900ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.42, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* --- Motion: shared helpers --- */ /* The two transition recipes that were hand-copied onto every hoverable surface. Declared once so a timing change is a one-token edit and the whole system stays in step. */ --t-lift: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out); --t-tint: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); --lift-1: -2px; /* buttons, small controls */ --lift-2: -4px; /* cards and panels */ /* --- Motion: metallic sheen --- */ /* One angled highlight band, swept across a surface by translating it. `.btn::after` and the `.sheen` utility are the same recipe — this is the only place its stops are written. */ --sheen-band: linear-gradient(105deg, transparent 38%, rgba(var(--rgb-white), 0.30) 47%, rgba(var(--rgb-white), 0.06) 53%, transparent 62%); --sheen-band-soft: linear-gradient(105deg, transparent 36%, rgba(var(--rgb-white), 0.13) 47%, rgba(var(--rgb-cyan-hi), 0.07) 53%, transparent 64%); --sheen-travel: 120%; --sheen-dur: var(--dur-5); --sheen-loop-dur: 5.5s; /* --- Atmosphere --- */ --grid-line: rgba(148, 180, 230, 0.055); --grid-line-fine: rgba(148, 180, 230, 0.022); --grid-mask: radial-gradient(ellipse 90% 70% at 50% 30%, rgb(var(--rgb-black)) 10%, transparent 76%); --aurora-cyan: radial-gradient(circle, rgba(34, 189, 232, 0.30), transparent 66%); --aurora-indigo: radial-gradient(circle, rgba(94, 122, 255, 0.20), transparent 66%); --aurora-ember: radial-gradient(circle, rgba(224, 122, 60, 0.13), transparent 66%); /* --- Header --- */ /* Header wordmark. Scales with viewport, clamped so it never crowds the hamburger on mobile nor outgrows the glass bar on ultrawide. Nav height is derived from it so the bar and the mark stay locked together. */ --logo-h: clamp(54px, 4.4vw, 64px); --logo-h-sm: clamp(42px, 3.4vw, 50px); --nav-h: calc(var(--logo-h) + 22px); --nav-h-sm: calc(var(--logo-h-sm) + 20px); } /* ============================================================ 2 RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s-4)); } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text); background: var(--ink-900); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } ul { list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: rgba(var(--rgb-cyan), 0.28); color: var(--white); } :focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 3px; border-radius: var(--r-xs); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ink-950); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-pill); border: 2px solid var(--ink-950); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hot); } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -140%); z-index: 200; padding: var(--s-3) var(--s-5); background: var(--cyan-400); color: var(--on-accent); font-weight: 600; font-size: var(--fs-sm); border-radius: 0 0 var(--r-sm) var(--r-sm); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus { transform: translate(-50%, 0); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon-solid { fill: currentColor; stroke: none; } /* ============================================================ 3 ATMOSPHERE ============================================================ */ .atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ink-900); overflow: hidden; } /* Engineered grid, faded toward the edges */ .atmosphere::before { content: ''; position: absolute; inset: -10%; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(var(--grid-line-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-fine) 1px, transparent 1px); background-size: 220px 220px, 220px 220px, 44px 44px, 44px 44px; -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask); } /* Slow-drifting aurora pools */ .aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .aurora-1 { top: -18vh; right: -8vw; width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; background: var(--aurora-cyan); animation: drift-a 26s var(--ease-in-out) infinite alternate; } .aurora-2 { top: 42vh; left: -14vw; width: 40vw; height: 40vw; min-width: 320px; min-height: 320px; background: var(--aurora-indigo); animation: drift-b 32s var(--ease-in-out) infinite alternate; } .aurora-3 { bottom: -14vh; right: 14vw; width: 34vw; height: 34vw; min-width: 280px; min-height: 280px; background: var(--aurora-ember); animation: drift-a 38s var(--ease-in-out) infinite alternate-reverse; } @keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, 7vh, 0) scale(1.14); } } @keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(7vw, -5vh, 0) scale(0.92); } } /* Film grain */ .grain { position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 6s steps(6) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); } } /* Everything above the grain */ .nav, main, .footer { position: relative; z-index: 1; } .nav { z-index: 100; } /* ============================================================ 4 TYPOGRAPHY PRIMITIVES ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-hi); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.015em; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--cyan-300); font-weight: 500; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan-400)); } .chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); border: 1px solid transparent; background: linear-gradient(var(--ink-800), var(--ink-800)) padding-box, var(--metal-edge) border-box; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mid); } .chip .icon { width: 14px; height: 14px; color: var(--cyan-400); } .accent { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .accent { color: var(--cyan-300); -webkit-text-fill-color: currentColor; } } .accent-warm { background: var(--grad-heat); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .lead { font-size: var(--fs-lg); color: var(--text-mid); line-height: 1.62; max-width: 58ch; } /* Status dot used across telemetry blocks */ .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-500); box-shadow: 0 0 0 3px rgba(var(--rgb-ok), 0.16); animation: pulse-dot 2.4s var(--ease-in-out) infinite; flex: none; } .dot.warm { background: var(--amber-400); box-shadow: 0 0 0 3px rgba(var(--rgb-amber), 0.16); } .dot.cyan { background: var(--cyan-400); box-shadow: 0 0 0 3px rgba(var(--rgb-cyan), 0.16); } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } /* ============================================================ 5 BUTTONS & FORM CONTROLS ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0.95rem 1.6rem; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; transition: var(--t-lift), var(--t-tint); } .btn .icon { width: 17px; height: 17px; } /* Sheen sweep on hover — shared by both variants, and the same band the `.sheen` utility uses (§21). */ .btn::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--sheen-band); transform: translateX(calc(0px - var(--sheen-travel))); transition: transform var(--sheen-dur) var(--ease-out); pointer-events: none; } .btn:hover::after, .btn:focus-visible::after { transform: translateX(var(--sheen-travel)); } .btn-primary { color: var(--on-accent); background: var(--grad-accent); box-shadow: var(--glow-cyan-sm), inset 0 1px 0 rgba(var(--rgb-white), 0.5); } .btn-primary:hover { transform: translateY(var(--lift-1)); box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(var(--rgb-white), 0.6); } .btn-primary:active { transform: translateY(0); } .btn-secondary { color: var(--text-hi); background: linear-gradient(var(--ink-800), var(--ink-750)) padding-box, var(--metal-edge) border-box; box-shadow: var(--elev-2), var(--glass-inner); } .btn-secondary:hover { transform: translateY(var(--lift-1)); background: linear-gradient(var(--ink-700), var(--ink-750)) padding-box, var(--metal-edge-hot) border-box; box-shadow: var(--elev-3); } .btn-secondary:active { transform: translateY(0); } .btn-lg { padding: 1.15rem 2.2rem; font-size: var(--fs-base); } .btn-full { width: 100%; } .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; } .btn .icon-arrow { transition: transform var(--dur-2) var(--ease-out); } .btn:hover .icon-arrow { transform: translateX(4px); } .btn .spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(var(--rgb-on-accent), 0.28); border-top-color: var(--on-accent); animation: spin 0.7s linear infinite; flex: none; } /* ---- Form controls ---------------------------------------- Field, label, input/select/textarea and the status banner. These sit with the buttons because they are shared primitives, not contact-page furniture — §18 keeps only the contact layout that arranges them. */ .form-grid { display: grid; gap: var(--s-4); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .field { display: grid; gap: var(--s-2); } .field label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); } .field .req { color: var(--cyan-400); } .field input, .field select, .field textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field-bg); color: var(--text-hi); font-size: var(--fs-sm); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .field textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .field select { appearance: none; -webkit-appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px; padding-right: 2.6rem; cursor: pointer; } .field select option { background: var(--ink-800); color: var(--text-hi); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-hard); } /* Pointer focus gets the ring alone; keyboard focus keeps the site-wide outline on top of it, so the indicator never depends on a subtle glow. */ .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan-500); background: var(--field-bg-focus); box-shadow: var(--field-ring); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 2px; } .hp { position: absolute; left: -9999px; opacity: 0; } .form-status { display: none; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-sm); border: 1px solid var(--line); font-size: var(--fs-sm); } .form-status.show { display: flex; } .form-status.ok { border-color: var(--ok-line); background: var(--ok-tint); color: var(--ok-200); } .form-status.err { border-color: var(--err-line); background: var(--err-tint); color: var(--err-200); } .form-status .icon { width: 18px; height: 18px; margin-top: 2px; } .form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ 6 SURFACES ============================================================ */ /* Brushed-metal 1px edge over any fill */ .metal { border: 1px solid transparent; background: var(--metal-plate) padding-box, var(--metal-edge) border-box; } .glass { border: 1px solid transparent; background: var(--glass-bg) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-3), var(--glass-inner); } .glass-soft { border: 1px solid transparent; background: var(--glass-bg-soft) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-2), var(--glass-inner); } /* Panel = the workhorse card. Pointer spotlight + lit top edge on hover. */ .panel { position: relative; isolation: isolate; border-radius: var(--r-lg); overflow: hidden; transition: var(--t-lift); } /* Spotlight follows the pointer via --mx / --my set in main.js */ .panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--rgb-cyan), 0.13), transparent 62%); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); pointer-events: none; } .panel:hover::before, .panel:focus-within::before { opacity: 1; } /* Top hairline that lights up */ .panel::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rgb-cyan-hi), 0.85), transparent); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); pointer-events: none; } .panel:hover::after, .panel:focus-within::after { opacity: 1; } .panel:hover { transform: translateY(var(--lift-2)); box-shadow: var(--elev-4), var(--glass-inner); } /* Icon plate — small machined square holding an icon */ .plate { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); border: 1px solid transparent; background: linear-gradient(158deg, rgba(var(--rgb-cyan), 0.14), rgba(var(--rgb-ink-plate), 0.9)) padding-box, var(--metal-edge) border-box; color: var(--cyan-300); box-shadow: var(--elev-1), inset 0 1px 0 rgba(var(--rgb-white), 0.09); transition: color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); } .plate .icon { width: 22px; height: 22px; } .panel:hover .plate { color: var(--cyan-100); box-shadow: var(--glow-cyan-sm), inset 0 1px 0 rgba(var(--rgb-white), 0.16); } .plate-warm { background: linear-gradient(158deg, rgba(var(--rgb-amber), 0.16), rgba(var(--rgb-ink-plate), 0.9)) padding-box, var(--metal-edge) border-box; color: var(--amber-300); } /* Monospace index numeral on cards */ .index { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); color: var(--text-faint); } /* Tag pills inside cards */ .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); } .tag { padding: 0.3rem 0.7rem; border-radius: var(--r-xs); border: 1px solid var(--line); background: rgba(var(--rgb-slate), 0.045); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .panel:hover .tag { color: var(--text-mid); border-color: var(--line-hard); } /* Checklist rows */ .checks { display: grid; gap: var(--s-2); } .checks li, .check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-mid); } .checks .icon, .check .icon { width: 15px; height: 15px; color: var(--cyan-400); } /* ============================================================ 7 NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; transition: height var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); border-bottom: 1px solid transparent; } .nav.scrolled { height: var(--nav-h-sm); background: rgba(6, 9, 16, 0.72); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border-bottom-color: var(--line); box-shadow: var(--elev-2); } .nav-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: var(--logo-h); width: auto; transition: height var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out); filter: drop-shadow(0 2px 10px rgba(76, 214, 255, 0.16)); } .nav.scrolled .nav-logo img { height: var(--logo-h-sm); } .nav-logo:hover img { filter: drop-shadow(0 2px 16px rgba(76, 214, 255, 0.44)); } .nav-links { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; /* pushes links + CTA to the right of the logo */ } .nav-link { position: relative; padding: 0.55rem var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--text-mid); transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .nav-link:hover { color: var(--text-hi); background: rgba(148, 172, 214, 0.07); } .nav-link.active { color: var(--text-hi); } .nav-link.active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; transform: translateX(-50%); border-radius: var(--r-pill); background: var(--grad-accent); box-shadow: 0 0 10px rgba(76, 214, 255, 0.8); } .nav-cta .btn { padding: 0.66rem 1.2rem; } .btn-mobile { display: none; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(148, 172, 214, 0.05); cursor: pointer; } .nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--text-hi); border-radius: var(--r-pill); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear; transform-origin: center; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Scroll progress rail */ .nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; } .nav-progress i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad-accent); box-shadow: 0 0 12px rgba(76, 214, 255, 0.7); } /* ============================================================ 8 HERO (home) ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + var(--s-9)) 0 var(--s-9); } /* Two columns for copy + render, then a third full-width row for the metrics rail. The rail spanning `1 / -1` is what makes the hero wrap the render: copy down the left, rail across the bottom, render nested into the corner between them and bled past the right gutter. */ /* The render and the rail beneath it break the right gutter by the same amount. The bleed can never exceed the slack the centred container leaves beside it: available slack is (clientWidth - maxw) / 2 + gutter, and this value is capped at (100vw - maxw) / 2 — smaller by a full gutter (>= 20px) even after 100vw's scrollbar overshoot. So it cannot introduce horizontal overflow. */ .hero-inner { --hero-bleed: clamp(0px, calc((100vw - var(--maxw)) / 2), 9rem); width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; /* 32.5rem is a hard floor, not a preference: the two hero CTAs plus their gap measure up to 510.4px at the widest button padding, and a copy column even 1px under that silently breaks them onto two lines. The floor buys ~10px of headroom; the render takes every pixel above it. */ grid-template-columns: minmax(min(100%, 32.5rem), 0.92fr) minmax(0, 1.08fr); align-items: center; /* Asymmetric on purpose: the column gap is the only lever left for the render's width once the copy floor and the bleed cap are both fixed, so it runs tight. The row gap above the rail stays generous. */ column-gap: var(--s-5); row-gap: var(--s-7); } .hero-copy > * + * { margin-top: var(--s-5); } /* The headline is capped by its own column as well as by the viewport: "PERFORMANCE", the longest unbreakable word, measures ~6.6em, so 15cqi of the copy column is the largest size at which it cannot overrun. At the two-column widths that cap binds (96px -> ~78px at 1440); stacked and on phones the column is wide enough that --fs-hero still decides. */ .hero-copy { container-type: inline-size; } .hero-title { font-size: min(var(--fs-hero), 15cqi); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; } .hero-title .l1 { color: var(--text-hi); } .hero-title .l3 { font-size: 0.36em; font-weight: 500; letter-spacing: 0.2em; color: var(--text-dim); padding-top: 0.7em; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* Metrics rail — its own grid row across the full hero width. The metrics stay clustered left under the copy; the hairline runs on beneath the render. */ .hero-metrics { grid-column: 1 / -1; display: flex; align-items: stretch; flex-wrap: wrap; margin-right: calc(-1 * var(--hero-bleed)); border-top: 1px solid var(--line); padding-top: var(--s-5); } .metric { flex: 0 1 auto; min-width: 0; padding-right: var(--s-6); } .metric + .metric { padding-left: var(--s-5); border-left: 1px solid var(--line); } .metric-value { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text-hi); font-variant-numeric: tabular-nums; } .metric-label { display: block; margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-faint); } /* --- Hero visual: the BAS studio frame (see §19) --- */ .hero-visual { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 0; margin-right: calc(-1 * var(--hero-bleed)); will-change: transform; } .hero-visual > .studio-frame { width: 100%; } /* Scroll cue */ .scroll-cue { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-faint); } .scroll-cue i { display: block; width: 1px; height: 44px; background: linear-gradient(180deg, var(--cyan-400), transparent); animation: cue 2.6s var(--ease-in-out) infinite; transform-origin: 50% 0; } @keyframes cue { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } /* ============================================================ 9 MARQUEE ============================================================ */ .marquee { position: relative; z-index: 1; padding: var(--s-4) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(8, 11, 20, 0.5); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; gap: var(--s-8); padding-right: var(--s-8); } .marquee-group span { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .marquee-group span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-500); } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ 10 SECTION SHELL ============================================================ */ .section { position: relative; padding: var(--section-y) 0; } .section-alt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(var(--rgb-ink-band), 0.72) 18%, rgba(var(--rgb-ink-band), 0.72) 82%, transparent); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section-head { max-width: 720px; margin-bottom: var(--s-9); } .section-head > * + * { margin-top: var(--s-4); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow::before { display: none; } .section-head.center .lead { margin-left: auto; margin-right: auto; } .section-title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; } /* ============================================================ 11 SYSTEMS GRID (home) ============================================================ */ .systems-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--s-4); } .system-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); border: 1px solid transparent; background: var(--glass-bg-soft) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-2), var(--glass-inner); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); } .system-card h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; } .system-card p { font-size: var(--fs-sm); color: var(--text-mid); flex: 1; } .system-card .tags { margin-top: auto; } /* ============================================================ 12 PRECISION GRID (home) ============================================================ */ .precision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); } .precision-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7) var(--s-6); border: 1px solid transparent; background: var(--glass-bg) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-3), var(--glass-inner); } .precision-card h3 { font-size: var(--fs-lg); } .precision-card p { font-size: var(--fs-sm); color: var(--text-mid); flex: 1; } .precision-card.highlight { background: linear-gradient(158deg, rgba(58, 40, 30, 0.55), rgba(14, 17, 26, 0.6)) padding-box, linear-gradient(150deg, rgba(255, 203, 175, 0.5), rgba(255, 182, 147, 0.12) 40%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 182, 147, 0.32)) border-box; } .precision-card.highlight::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 182, 147, 0.14), transparent 62%); } .precision-card.highlight::after { background: linear-gradient(90deg, transparent, rgba(255, 203, 175, 0.85), transparent); } .status { display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start; padding: 0.34rem 0.75rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(var(--rgb-ok), 0.07); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok-300); } .status.warm { background: rgba(var(--rgb-amber), 0.09); color: var(--amber-300); } .status.cyan { background: rgba(var(--rgb-cyan), 0.08); color: var(--cyan-200); } /* ============================================================ 13 CTA BAND ============================================================ */ .cta-band { position: relative; overflow: hidden; padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter); border-radius: var(--r-xl); border: 1px solid transparent; background: linear-gradient(158deg, rgba(24, 34, 52, 0.72), rgba(9, 13, 22, 0.78)) padding-box, var(--metal-edge-hot) border-box; -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); box-shadow: var(--elev-4), var(--glass-inner); text-align: center; } .cta-band::before { content: ''; position: absolute; top: -60%; left: 50%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(76, 214, 255, 0.16), transparent 58%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band > * + * { margin-top: var(--s-5); } .cta-title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; } .cta-band .lead { margin-left: auto; margin-right: auto; } .cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-6); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); } .cta-meta span { display: inline-flex; align-items: center; gap: var(--s-2); } .cta-meta .icon { width: 14px; height: 14px; color: var(--cyan-400); } /* ============================================================ 14 PAGE HERO (sub-pages) ============================================================ */ .page-hero { position: relative; padding: calc(var(--nav-h) + clamp(3.5rem, 2rem + 6vw, 7rem)) 0 clamp(2.5rem, 1.5rem + 4vw, 5rem); } .page-hero-inner { max-width: 860px; } .page-hero-inner > * + * { margin-top: var(--s-5); } .page-hero-title { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; } .page-hero::after { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: linear-gradient(90deg, var(--cyan-600), var(--line-soft) 40%, transparent); } /* ============================================================ 15 SERVICE CARDS (services page) ============================================================ */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-4); } .service-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); padding: var(--s-6); border: 1px solid transparent; background: var(--glass-bg-soft) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-2), var(--glass-inner); } .service-card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); } .service-card p { font-size: var(--fs-sm); color: var(--text-mid); margin-bottom: var(--s-4); } /* Certification / partner strip */ .partner-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-8); } .partner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-5) var(--s-4); border-radius: var(--r-md); border: 1px solid transparent; background: linear-gradient(158deg, rgba(22, 30, 46, 0.5), rgba(10, 14, 24, 0.5)) padding-box, var(--metal-edge) border-box; text-align: center; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); } .partner:hover { transform: translateY(-3px); box-shadow: var(--elev-3); } .partner .icon { width: 22px; height: 22px; color: var(--cyan-300); } .partner b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--text-hi); } .partner small { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } /* ============================================================ 16 ADVANTAGE CARDS (why choose) ============================================================ */ .advantage-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); } .advantage-card { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); border: 1px solid transparent; background: var(--glass-bg-soft) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-2), var(--glass-inner); } .advantage-card h3 { font-size: var(--fs-lg); } .advantage-card p { font-size: var(--fs-sm); color: var(--text-mid); flex: 1; } .advantage-card.wide { grid-column: span 3; } .advantage-card.featured { grid-column: span 6; background: linear-gradient(140deg, rgba(20, 38, 50, 0.72), rgba(9, 13, 22, 0.68)) padding-box, var(--metal-edge-hot) border-box; } .advantage-card.featured .checks { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-3); } .stat-slab { display: flex; align-items: baseline; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); } .stat-value { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .stat-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); } /* ============================================================ 17 UNION + COMMISSIONING (why choose) ============================================================ */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-8); align-items: center; } .split-copy > * + * { margin-top: var(--s-4); } .split-copy p { color: var(--text-mid); } .union-cards { display: grid; gap: var(--s-4); } .union-card { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border: 1px solid transparent; background: var(--glass-bg) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-3), var(--glass-inner); } .union-card b { display: block; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text-hi); letter-spacing: -0.02em; } .union-card small { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); } .commission-cta { padding: var(--s-7); border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(158deg, rgba(24, 34, 52, 0.7), rgba(9, 13, 22, 0.74)) padding-box, var(--metal-edge-hot) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-4), var(--glass-inner); } .commission-cta > * + * { margin-top: var(--s-4); } .commission-cta h3 { font-size: var(--fs-2xl); letter-spacing: -0.025em; } .commission-cta p { font-size: var(--fs-sm); color: var(--text-mid); } /* ============================================================ 18 CONTACT LAYOUT + THANKS (the form controls themselves are primitives — see §5) ============================================================ */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-6); align-items: start; } .form-panel { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-lg); border: 1px solid transparent; background: var(--glass-bg) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); box-shadow: var(--elev-4), var(--glass-inner); } .form-panel > h2 { font-size: var(--fs-2xl); letter-spacing: -0.025em; margin-bottom: var(--s-2); } .form-note { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: var(--s-6); } /* Info column */ .info-stack { display: grid; gap: var(--s-4); } .info-card { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid transparent; background: var(--glass-bg-soft) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--elev-2), var(--glass-inner); } .info-card h3 { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-dim); } .info-card p { font-size: var(--fs-sm); color: var(--text); } .info-card .plate { width: 38px; height: 38px; border-radius: var(--r-sm); } .info-card .plate .icon { width: 18px; height: 18px; } .info-big { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text-hi); transition: color var(--dur-2) var(--ease-out); } a.info-big:hover { color: var(--cyan-300); } .avail { display: grid; gap: var(--s-2); } .avail-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.45rem 0; border-bottom: 1px dashed var(--line-soft); font-size: var(--fs-xs); color: var(--text-mid); } .avail-row:last-child { border-bottom: 0; } .avail-row b { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--text-dim); } .avail-row b.on { color: var(--ok-300); } /* Thank-you page */ .thanks { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-9); text-align: center; } .thanks-inner { max-width: 620px; } .thanks-inner > * + * { margin-top: var(--s-5); } .thanks-inner .lead { margin-left: auto; margin-right: auto; } .thanks .plate { width: 64px; height: 64px; margin: 0 auto; border-radius: var(--r-lg); } .thanks .plate .icon { width: 30px; height: 30px; } /* ============================================================ 19 BAS STUDIO FRAME + CONTROLS SHOWCASE (home) ============================================================ */ /* The studio frame is the shared housing for every BAS visual: an inset dark-glass field behind a brushed-metal edge, lit by a cyan bloom that sits strongest off the lower-right corner. The bloom is an offset box-shadow rather than a blurred pseudo-element so it never joins the frame's own stacking context and can never be painted over the image. */ .studio-frame { position: relative; padding: var(--frame-pad, 12px); border: 1px solid transparent; border-radius: var(--r-lg); background: linear-gradient(158deg, #0d1420 0%, #080c14 52%, #05080e 100%) padding-box, var(--metal-edge) border-box; box-shadow: var(--elev-4), 30px 38px 96px -40px rgba(76, 214, 255, 0.72), 16px 20px 48px -26px rgba(76, 214, 255, 0.5), -10px -12px 40px -30px rgba(126, 224, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -24px 46px -34px rgba(0, 0, 0, 0.95); } /* Inset screen well. aspect-ratio is set per image so `contain` never letterboxes and never crops — the brief requires the whole composition. */ .studio-screen { position: relative; aspect-ratio: var(--shot-ar, 16 / 9); border-radius: calc(var(--r-lg) - 8px); background: radial-gradient(120% 120% at 50% 0%, #0a1019 0%, #04070c 100%); box-shadow: inset 0 2px 24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; } .studio-screen > img, .studio-screen > video { display: block; width: 100%; height: 100%; object-fit: contain; } /* `object-fit` governs the poster as well as the decoded frames, so a poster whose ratio differs from the video's would letterbox. Both posters here are the stills their videos were rendered from — 1693x929 (1.8224) against the video's 736x400 (1.8400) — a 0.96% difference that resolves to ~3px of dark edge on a dark well, and only while the first frame decodes. */ .studio-media { background: transparent; } /* One reflection band across the glass. Kept low-contrast so it reads as a display surface, not a gloss effect over the artwork. */ .studio-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(122deg, transparent 30%, rgba(255, 255, 255, 0.055) 42%, rgba(255, 255, 255, 0.012) 50%, transparent 58%); } /* --- Hero instance --- */ /* Heavier bezel than the showcase panels: at ~700px wide a 14px edge reads thin. The extra left-hand cyan spill is what carries the render's light back under the headline so the copy reads as wrapping the panel, not sitting beside it. */ .hero-frame { --shot-ar: 736 / 400; --frame-pad: 17px; box-shadow: var(--elev-4), 30px 38px 96px -40px rgba(76, 214, 255, 0.72), 16px 20px 48px -26px rgba(76, 214, 255, 0.5), -60px 10px 130px -60px rgba(76, 214, 255, 0.4), -10px -12px 40px -30px rgba(126, 224, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -24px 46px -34px rgba(0, 0, 0, 0.95); } /* --- Controls showcase --- */ .showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } /* The two panels no longer share an aspect ratio (AHU is 1.84 video, VAV is 1.7768 plate), so their frames differ in height by ~11px at desktop. Column flex plus `margin-top: auto` on the caption pins both captions to a common bottom edge instead of letting that difference cascade into the text. */ .showcase-panel { min-width: 0; display: flex; flex-direction: column; } .showcase-panel .showcase-caption { margin-top: auto; padding-top: var(--s-4); } .showcase-panel .studio-frame { --shot-ar: 1672 / 941; --frame-pad: 10px; } /* The AHU panel is a video now and the VAV panel is still the plate + SVG overlays, so the two panels no longer share one ratio. The overlay percentages in §19 are calibrated to 1672/941 — do not touch that value. */ .ahu-panel .studio-frame { --shot-ar: 736 / 400; } .showcase-caption { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4); padding: 0 var(--s-1); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-dim); } .showcase-caption b { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; color: var(--cyan-300); margin-bottom: 0.35rem; } .showcase-caption > .icon { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--cyan-400); } /* --- VAV motion overlay --- Percentages are measured against the VAV screen artwork and are the same values proven in the standalone demo: supply arrow on the entering duct, waves inside the terminal, discharge arrow on the downstream outlet drop. They ride the image box, so they stay registered at every width. */ .vav-stage { position: absolute; inset: 0; pointer-events: none; } /* overflow:hidden is load-bearing: the arrows translate well past the viewBox and must be clipped at the duct ends, exactly as they were when these were standalone files. Without it they spill across the whole screen. */ .vav-motion { position: absolute; overflow: hidden; } .vav-supply { left: 15.2%; top: 25.2%; width: 13.8%; height: 7.2%; } .vav-terminal { left: 34.7%; top: 25.2%; width: 9.1%; height: 7.2%; } .vav-discharge { left: 57.3%; top: 28.2%; width: 5.3%; height: 15.1%; } /* Static counterparts, revealed only under prefers-reduced-motion (§23). */ .rm-static { display: none; } /* ============================================================ 20 FOOTER ============================================================ */ .footer { position: relative; margin-top: var(--s-9); padding: var(--s-10) 0 var(--s-6); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 11, 20, 0.4), rgba(3, 5, 10, 0.9)); } .footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(76, 214, 255, 0.5), transparent); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } .footer-brand > * + * { margin-top: var(--s-4); } .footer-brand img { height: 42px; width: auto; } .footer-brand p { font-size: var(--fs-sm); color: var(--text-dim); max-width: 40ch; } .footer-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); } .footer-col h3 { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-hi); margin-bottom: var(--s-4); } .footer-col ul { display: grid; gap: var(--s-2); } .footer-col a, .footer-col p { font-size: var(--fs-sm); color: var(--text-dim); transition: color var(--dur-2) var(--ease-out); } .footer-col a { display: inline-block; } .footer-col a:hover { color: var(--cyan-300); } .footer-phone { display: inline-flex !important; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--fs-base) !important; font-weight: 600; color: var(--text-hi) !important; } .footer-phone .icon { width: 16px; height: 16px; color: var(--cyan-400); } .footer-phone:hover { color: var(--cyan-300) !important; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--text-faint); } .footer-bottom nav { display: flex; gap: var(--s-5); } .footer-bottom a:hover { color: var(--text-mid); } /* ============================================================ 20a HERO TELEMETRY (home) ============================================================ */ /* Glass readouts floated over the hero render (values driven by main.js §9). They are sized off the frame's own width in container units, so they shrink with the render rather than with the viewport — the frame is a third as wide on a phone as it is at 1024px. */ .hero-frame { container-type: inline-size; } .telemetry { position: absolute; inset: 0; pointer-events: none; font-size: clamp(9px, 1.75cqi, 13px); } .tele { position: absolute; width: 13.5em; padding: 0.85em 1em 0.9em; border-radius: var(--r-sm); border: 1px solid transparent; background: linear-gradient(158deg, rgba(var(--rgb-ink-plate), 0.8), rgba(var(--rgb-ink-band), 0.64)) padding-box, var(--metal-edge) border-box; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: var(--elev-3), var(--glass-inner); font-family: var(--font-mono); color: var(--text-mid); opacity: 0; transform: translateY(0.8em) scale(0.97); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); /* Lands after the headline wipe, one readout at a time, like points coming in on a first poll. */ transition-delay: calc(700ms + var(--i, 0) * 160ms); } .is-loaded .tele, .no-js .tele { opacity: 1; transform: none; } .tele-a { left: 3.5%; top: 5%; } .tele-b { right: 3.5%; top: 5%; } .tele-c { left: 3.5%; bottom: 6%; width: 12em; } .tele-head { display: flex; align-items: center; gap: 0.55em; font-size: 0.78em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .tele-head .dot { width: 0.6em; height: 0.6em; box-shadow: 0 0 0 0.25em rgba(var(--rgb-ok), 0.16); } .tele-head .dot.cyan { box-shadow: 0 0 0 0.25em rgba(var(--rgb-cyan), 0.16); } .tele-value { display: flex; align-items: baseline; gap: 0.3em; margin-top: 0.45em; color: var(--text-hi); } .tele-value b { font-family: var(--font-display); font-size: 2.1em; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .tele-value small { font-size: 0.85em; color: var(--text-dim); } /* Control-mode pill, the way a front end tags a point in Auto vs Hand. */ .tele-value em { align-self: center; margin-left: auto; padding: 0.2em 0.55em; border-radius: var(--r-pill); border: 1px solid var(--ok-line); background: var(--ok-tint); font-style: normal; font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok-300); } .tele-sub { margin-top: 0.45em; font-size: 0.78em; letter-spacing: 0.06em; color: var(--text-dim); } .tele-sub span { color: var(--text); font-variant-numeric: tabular-nums; } .tele-spark { width: 100%; height: 2.2em; margin-top: 0.55em; overflow: visible; } .tele-spark-area { fill: rgba(var(--rgb-cyan), 0.12); } .tele-spark-line { fill: none; stroke: var(--cyan-400); stroke-width: 1.4; vector-effect: non-scaling-stroke; } .tele-bar { position: relative; height: 0.36em; margin-top: 0.6em; border-radius: var(--r-pill); background: rgba(var(--rgb-slate), 0.14); overflow: hidden; } .tele-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0.5)); transition: transform var(--dur-5) var(--ease-out); } .tele-rows { display: grid; gap: 0.3em; margin-top: 0.6em; } .tele-rows div { display: flex; justify-content: space-between; gap: 1em; font-size: 0.86em; } .tele-rows dt { color: var(--text-dim); letter-spacing: 0.1em; } .tele-rows dd { color: var(--text-hi); font-variant-numeric: tabular-nums; } /* A changed value flashes once, then settles back to its own colour. */ .tele .tick { animation: tele-tick 700ms var(--ease-out); } @keyframes tele-tick { from { color: var(--cyan-200); text-shadow: 0 0 12px rgba(var(--rgb-cyan), 0.6); } } /* Narrow render: two compact readouts, not three full ones over the art. */ @container (max-width: 520px) { .tele { width: 11em; padding: 0.7em 0.8em; } .tele-c, .tele-sub, .tele-spark { display: none; } } /* ============================================================ 20b CUTAWAY (home) ============================================================ */ /* A section drawing kept on screen while four steps scroll past it. main.js §10 adds `.is-live` to the wrapper and marks each system group `.is-on` (already commissioned) or `.is-active` (the step being read). Without JS none of that happens and every system simply renders lit. */ .cutaway { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--s-8); align-items: start; } .cutaway-figure { position: sticky; top: calc(var(--nav-h-sm) + var(--s-5)); z-index: 2; overflow: hidden; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(158deg, rgba(var(--rgb-ink-band), 0.94), rgba(var(--rgb-ink-plate), 0.96)) padding-box, var(--metal-edge) border-box; box-shadow: var(--elev-4), var(--glass-inner); } /* Blueprint grid, faded at the edges like the page atmosphere. */ .cutaway-figure::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgb(var(--rgb-black)) 35%, transparent 85%); mask-image: radial-gradient(ellipse at 50% 50%, rgb(var(--rgb-black)) 35%, transparent 85%); } .cutaway-figure > :not(.cutaway-scan) { position: relative; } /* One scan line sweeps the drawing each time the step changes. */ .cutaway-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--cyan-300), transparent); box-shadow: 0 0 18px rgba(var(--rgb-cyan), 0.8); } .cutaway-scan.run { animation: cut-scan 1s var(--ease-in-out); } @keyframes cut-scan { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .cutaway-hud { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); } .cutaway-hud b { font-weight: 500; color: var(--cyan-300); } .cutaway-hud b::before { content: '\00b7'; margin-right: var(--s-2); color: var(--text-faint); } .cutaway-svg { width: 100%; height: auto; max-height: calc(100svh - var(--nav-h-sm) - 12rem); margin: var(--s-4) auto; overflow: visible; } .cutaway-svg text { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; } .cut-shell { stroke: var(--line-hard); stroke-width: 1.2; } .cut-shell text { fill: var(--text-faint); stroke: none; } .cut-plenum { stroke: var(--line); stroke-dasharray: 3 5; } .sys { color: var(--cyan-400); stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-4) var(--ease-out), opacity var(--dur-4) var(--ease-out); } .sys .hot { color: var(--amber-400); } .cut-box { fill: var(--ink-850); } .cut-label { fill: currentColor; stroke: none; } .cut-pipe { stroke-width: 2.2; } .cut-wire { stroke-width: 1; stroke-dasharray: 2 3; } .cut-net { stroke-dasharray: 5 4; } .cut-room { stroke: none; fill: currentColor; fill-opacity: 0.06; transition: fill-opacity var(--dur-4) var(--ease-out); } .cut-flow { stroke: var(--cyan-100); stroke-width: 2; stroke-dasharray: 3 11; transition: opacity var(--dur-4) var(--ease-out); animation: cut-flow 1.1s linear infinite; } .hot .cut-flow { stroke: var(--amber-300); } @keyframes cut-flow { to { stroke-dashoffset: -14; } } /* Fan blades turn about the hub (245, 88) in viewBox units. */ .cut-fan { transform-origin: 245px 88px; animation: cut-spin 1.4s linear infinite; } @keyframes cut-spin { to { transform: rotate(360deg); } } /* Staged states, only once main.js has taken over */ .is-live .sys { color: var(--text-faint); opacity: 0.45; } .is-live .sys .hot { color: inherit; } .is-live .sys .cut-room { fill-opacity: 0; } .is-live .sys .cut-flow { opacity: 0; animation-play-state: paused; } .is-live .sys .cut-fan { animation-play-state: paused; } .is-live .sys.is-on { color: var(--cyan-600); opacity: 0.9; } .is-live .sys.is-on .hot { color: var(--amber-600); } .is-live .sys.is-on .cut-room { fill-opacity: 0.035; } .is-live .sys.is-on .cut-flow { opacity: 0.5; animation-play-state: running; } .is-live .sys.is-on .cut-fan { animation-play-state: running; } .is-live .sys.is-active { color: var(--cyan-300); opacity: 1; filter: url(#cut-glow); } .is-live .sys.is-active .hot { color: var(--amber-400); } .is-live .sys.is-active .cut-room { fill-opacity: 0.08; } .is-live .sys.is-active .cut-flow { opacity: 1; animation-play-state: running; } .is-live .sys.is-active .cut-fan { animation-play-state: running; } .cutaway-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); } .cutaway-legend li { display: inline-flex; align-items: center; gap: var(--s-2); transition: color var(--dur-3) var(--ease-out); } .cutaway-legend li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; border: 1px solid currentColor; transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); } .cutaway-legend li.is-on { color: var(--text-mid); } .cutaway-legend li.is-on::before { background: var(--cyan-600); border-color: var(--cyan-600); } .cutaway-legend li.is-active { color: var(--cyan-200); } .cutaway-legend li.is-active::before { background: var(--cyan-300); border-color: var(--cyan-300); box-shadow: 0 0 10px rgba(var(--rgb-cyan), 0.7); } /* Steps: a rail down the left, the active step lit on it. */ .cutaway-step { position: relative; min-height: 68vh; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: var(--s-6) 0 var(--s-6) var(--s-6); border-left: 1px solid var(--line); transition: opacity var(--dur-4) var(--ease-out); } .cutaway-step::before { content: ''; position: absolute; left: -1px; top: 50%; width: 2px; height: 0; background: var(--grad-accent); box-shadow: 0 0 12px rgba(var(--rgb-cyan), 0.7); transform: translateY(-50%); transition: height var(--dur-4) var(--ease-out); } .cutaway-step .index { color: var(--cyan-400); } .cutaway-step h3 { font-size: var(--fs-2xl); letter-spacing: -0.025em; } .cutaway-step p { color: var(--text-mid); max-width: 44ch; } .is-live .cutaway-step { opacity: 0.32; } .is-live .cutaway-step.is-active { opacity: 1; } .is-live .cutaway-step.is-active::before { height: 42%; } /* ============================================================ 20c BENTO + MICRO-VISUALS (home, services) ============================================================ */ /* Six-column bento. Cards default to two columns; `.bento-wide` takes four and `.bento-full` all six, so a grid can be composed to end on a full row instead of stranding its last card. Responsive spans are in §22. */ .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); } .bento > * { grid-column: span 2; } .bento > .bento-wide { grid-column: span 4; } .bento > .bento-full { grid-column: span 6; } /* Wide system cards put the visual beside the copy. */ .system-card.bento-wide { flex-direction: row; align-items: stretch; gap: var(--s-6); } .bento-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); } .bento-copy .tags { margin-top: auto; } .system-card.bento-wide > .viz { flex: 0 0 46%; } /* Service cards: a visual spans the card below the copy, or takes a third column when the card is wide. */ .service-card > .viz { grid-column: 1 / -1; } .service-card.bento-wide, .service-card.bento-full { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.95fr); } .service-card.bento-wide > .viz, .service-card.bento-full > .viz { grid-column: auto; } /* The well every micro-visual sits in: a darker inset under the glass. */ .viz { position: relative; min-width: 0; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: radial-gradient(120% 100% at 50% 0%, rgba(var(--rgb-cyan), 0.06), transparent 60%), rgba(var(--rgb-ink-plate), 0.55); box-shadow: inset 0 1px 0 rgba(var(--rgb-white), 0.04), inset 0 -18px 30px -24px rgba(var(--rgb-black), 0.8); overflow: hidden; transition: border-color var(--dur-3) var(--ease-out); } .panel:hover .viz { border-color: var(--line); } .viz-label { fill: var(--text-faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; } /* --- Pipe loop (MEP) --- */ .viz-loop { display: grid; place-items: center; padding: var(--s-4); } .viz-loop svg { width: 100%; height: auto; max-height: 280px; } /* In a narrow card the diagram sits above the copy, so it is held shorter. */ .system-card:not(.bento-wide) .viz-loop svg { max-height: 190px; } .viz-pipe { stroke: var(--line-hard); stroke-width: 1.4; } .viz-coil { stroke: var(--cyan-600); stroke-width: 1.2; } .viz-bus { stroke: var(--cyan-700); stroke-width: 3; stroke-linecap: round; } .viz-breaker { fill: var(--ink-850); stroke: var(--line-hard); stroke-width: 1.2; } /* Every dash pattern here sums to 14 so it loops seamlessly on the shared `cut-flow` keyframe, which moves the offset exactly one period. */ .viz-flow { stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 12; animation: cut-flow 1.1s linear infinite; } .viz-flow-cold { stroke: var(--cyan-300); } .viz-flow-warm { stroke: var(--amber-400); } .viz-flow-power { stroke: var(--cyan-100); stroke-width: 2.4; stroke-dasharray: 1 13; animation-duration: 0.5s; } .viz-flow-water { stroke: var(--cyan-500); stroke-width: 3; animation-duration: 1.6s; } .viz-pump { fill: var(--ink-850); stroke: var(--cyan-400); stroke-width: 1.4; } .viz-pump-mark { fill: var(--cyan-400); } .viz-valve { fill: var(--ink-850); stroke: var(--amber-400); stroke-width: 1.4; } /* --- Controller I/O (DDC) --- */ .viz-io { display: grid; align-content: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .io-head, .io-foot { display: flex; justify-content: space-between; gap: var(--s-3); } .io-head span:first-child { color: var(--cyan-300); } .io-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .io-grid i { justify-self: center; width: 100%; max-width: 12px; aspect-ratio: 1; border-radius: 50%; background: rgba(var(--rgb-slate), 0.18); box-shadow: inset 0 1px 1px rgba(var(--rgb-black), 0.6); /* Each point polls on its own period, so the panel never blinks in step. */ animation: io-blink calc(1.6s + var(--d, 0) * 0.23s) steps(1, end) infinite; animation-delay: calc(var(--d, 0) * -0.37s); } .io-grid i.on { animation: none; background: var(--ok-500); box-shadow: 0 0 8px rgba(var(--rgb-ok), 0.7); } .panel:hover .io-grid i:not(.on) { animation-duration: calc(0.5s + var(--d, 0) * 0.09s); } @keyframes io-blink { 0% { background: rgba(var(--rgb-slate), 0.18); box-shadow: inset 0 1px 1px rgba(var(--rgb-black), 0.6); } 50% { background: var(--cyan-400); box-shadow: 0 0 8px rgba(var(--rgb-cyan), 0.8); } } /* Zone trend strip: a wave exactly two periods wider than the view, slid one period per loop, so the trace scrolls without a seam. */ .io-trend { width: 100%; height: 44px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .io-trend-sp { stroke: var(--line-hard); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .io-trend-wave { animation: io-trend 3.2s linear infinite; } .io-trend-wave path { fill: none; stroke: var(--cyan-400); stroke-width: 1.4; vector-effect: non-scaling-stroke; } @keyframes io-trend { to { transform: translateX(-50px); } } /* --- Fan on a drive (VFD) --- */ .viz-fan { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); } .viz-fan svg { width: 76px; height: 76px; flex: none; } .fan-housing { fill: rgba(var(--rgb-ink-plate), 0.6); stroke: var(--line-hard); stroke-width: 1.4; } .fan-rotor path { fill: rgba(var(--rgb-cyan), 0.22); stroke: var(--cyan-300); stroke-width: 1.1; } .fan-hub { fill: var(--ink-700); stroke: var(--cyan-400); stroke-width: 1.2; } .fan-read { display: grid; gap: 6px; flex: 1; min-width: 0; font-family: var(--font-mono); } .fan-hz { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-dim); white-space: nowrap; } .fan-hz b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-hi); font-variant-numeric: tabular-nums; } .fan-bar { display: block; height: 5px; border-radius: var(--r-pill); background: rgba(var(--rgb-slate), 0.14); overflow: hidden; } .fan-bar i { display: block; height: 100%; background: var(--grad-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0.7)); } .fan-read small { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); transition: color var(--dur-2) var(--ease-out); } .panel:hover .fan-read small { color: var(--cyan-300); } /* --- On-call clock (Operations) --- */ .viz-clock { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); padding: var(--s-5); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .clock-head { display: flex; align-items: center; gap: var(--s-2); color: var(--ok-300); } .clock-head b { margin-left: auto; font-weight: 500; letter-spacing: 0.1em; color: var(--text-hi); } .clock-track { position: relative; height: 26px; border-radius: var(--r-xs); border: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(var(--rgb-slate), 0.16) 0 1px, transparent 1px calc(100% / 24)); } .clock-fill { position: absolute; inset: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--rgb-ok), 0.22), rgba(var(--rgb-cyan), 0.22)); } .clock-now { position: absolute; top: -5px; bottom: -5px; left: calc(var(--t, 0.5) * 100%); width: 2px; margin-left: -1px; background: var(--cyan-200); box-shadow: 0 0 12px rgba(var(--rgb-cyan), 0.9); transition: left var(--dur-5) var(--ease-out); } .clock-now::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cyan-200); animation: pulse-dot 2.4s var(--ease-in-out) infinite; } .clock-ticks { display: flex; justify-content: space-between; } .clock-rows { display: grid; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); } .clock-rows span { display: flex; justify-content: space-between; gap: var(--s-3); letter-spacing: 0.1em; color: var(--text-mid); } .clock-rows em { font-style: normal; color: var(--text-faint); } /* --- Pneumatic gauge to digital (Pneumatic Controls) --- */ .viz-gauge { display: flex; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-4); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } .gauge-dial { width: 136px; height: auto; flex: none; } .gauge-arc { stroke: var(--line-hard); stroke-width: 6; stroke-linecap: round; } .gauge-tick { stroke: var(--text-faint); stroke-width: 1.4; } .gauge-needle { transform-origin: 60px 64px; transition: transform 1.2s var(--ease-out); } .gauge-needle path { stroke: var(--amber-400); stroke-width: 2; stroke-linecap: round; } .gauge-hub { fill: var(--ink-700); stroke: var(--amber-400); stroke-width: 1.4; } .gauge-link { width: 40px; height: 14px; flex: none; color: var(--cyan-500); } .gauge-read { display: grid; gap: var(--s-2); min-width: 0; font-size: 0.7rem; } .gauge-read > span { display: flex; justify-content: space-between; gap: var(--s-4); } .gauge-read b { font-weight: 500; text-transform: none; letter-spacing: 0.06em; color: var(--text-hi); font-variant-numeric: tabular-nums; } /* ============================================================ 21 MOTION UTILITIES ============================================================ */ /* ---- Scroll reveal ---------------------------------------- `[data-reveal]` in the markup; main.js adds `.reveal` (+ a variant) at boot and `.in` when the element first intersects, then unobserves it. One-way by design — nothing re-hides on scroll back. Anything on the first screen at load gets `.in` in the same pass, so it never animates (main.js §3). No blur: animating `filter` over cards that hold `backdrop-filter` glass re-renders the backdrop every frame, which is what made entrances drag on an iPhone. Opacity + transform stay on the compositor. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; /* Released once the element has arrived. Left set, every revealed node holds its own compositor layer for the life of the page — on the home page that is 20 permanent layers for an animation that ran once. */ will-change: auto; } .reveal-left { transform: translateX(-26px); } .reveal-right { transform: translateX(26px); } .reveal-scale { transform: scale(0.965); } /* ---- Text mask-wipe ---------------------------------------- */ .wipe { display: block; overflow: hidden; } .wipe > span { display: block; transform: translateY(105%); transition: transform var(--dur-5) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .is-loaded .wipe > span { transform: none; } /* ---- Metallic sheen --------------------------------------- A highlight band swept across any surface. `.sheen` needs a positioned, overflow-hidden host — `.panel` and `.studio-frame` already are. The band is painted on ::after so it never disturbs the host's own background, and it is `pointer-events: none` so it cannot eat a click. Three modes: .sheen sweeps once on hover or keyboard focus .sheen-loop sweeps continuously, for "live system" surfaces .sheen-strong the full-strength band (the button's own weight) */ .sheen { position: relative; overflow: hidden; isolation: isolate; } .sheen::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--sheen-band-soft); transform: translateX(calc(0px - var(--sheen-travel))); transition: transform var(--sheen-dur) var(--ease-out); } .sheen:hover::after, .sheen:focus-visible::after, .sheen:focus-within::after { transform: translateX(var(--sheen-travel)); } .sheen-strong::after { background: var(--sheen-band); } .sheen-loop::after { transition: none; animation: sheen-sweep var(--sheen-loop-dur) var(--ease-in-out) infinite; } @keyframes sheen-sweep { 0% { transform: translateX(calc(0px - var(--sheen-travel))); } 55%, 100% { transform: translateX(var(--sheen-travel)); } } /* ---- Transition helpers ------------------------------------ The two hover recipes the primitives already share, as classes for markup that isn't one of them. `.lift` matches `.btn`, `.lift-lg` matches `.panel` — same tokens, so they cannot drift apart from the components. */ .lift { transition: var(--t-lift); } .lift:hover { transform: translateY(var(--lift-1)); } .lift-lg { transition: var(--t-lift); } .lift-lg:hover { transform: translateY(var(--lift-2)); } .tint { transition: var(--t-tint); } /* ---- No page transitions ----------------------------------- Cross-document View Transitions (`@view-transition`) were tried and removed: in WebKit they held every menu click back by 0.5-0.8s even on a fast desktop, and on an iPhone that read as a multi-second page load. See design-system.md §5 before adding them back. */ /* ---- No-JS safety ------------------------------------------ Never leave content hidden if the script fails to run. */ .no-js .reveal { opacity: 1; transform: none; } .no-js .wipe > span { transform: none; } /* ============================================================ 22 RESPONSIVE ============================================================ */ @media (max-width: 1080px) { /* No bleed once stacked — there is no second column to break out of. */ .hero-inner { --hero-bleed: 0px; grid-template-columns: 1fr; column-gap: var(--s-8); row-gap: var(--s-8); } /* Headline leads; the studio frame follows in DOM order and takes the full column instead of sitting beside the copy. */ .hero-visual { width: 100%; } .showcase-grid { gap: var(--s-5); } .contact-layout { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .advantage-card, .advantage-card.wide { grid-column: span 3; } /* Bento halves: two across, wide cards full width. `.bento-tab-full` is for the one narrow card per grid that would otherwise be left alone on its row at this width. */ .bento > * { grid-column: span 3; } .bento > .bento-wide, .bento > .bento-full, .bento > .bento-tab-full { grid-column: span 6; } .cutaway { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-6); } } /* The hero render overhangs its frame only while it sits in its own column; stacked, the readout would push into the metrics rail. */ @media (min-width: 1081px) { .tele-c { bottom: -1.6em; } } /* Narrow desktop: the larger wordmark leaves less room before the hamburger breakpoint, so tighten the nav rhythm to keep links + CTA on one line. */ @media (max-width: 1000px) { .nav-inner { gap: var(--s-4); } .nav-link { padding: 0.55rem var(--s-3); } .nav-cta .btn { padding: 0.6rem 0.95rem; } } @media (max-width: 860px) { /* Tighter collar on mobile — the bar stays compact while the mark grows. */ :root { --nav-h: calc(var(--logo-h) + 14px); --nav-h-sm: calc(var(--logo-h-sm) + 14px); } .nav-cta { display: none; } .nav-toggle { display: flex; } .btn-mobile { display: inline-flex; } .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-3) var(--gutter) var(--s-6); background: rgba(6, 9, 16, 0.94); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border-bottom: 1px solid var(--line); box-shadow: var(--elev-4); clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; transition: clip-path var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); } .nav.scrolled .nav-links { top: var(--nav-h-sm); } .nav-links.open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; } .nav-link { padding: 0.95rem var(--s-5); border-radius: var(--r-sm); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-base); } .nav-link.active::after { left: 2px; top: 50%; bottom: auto; transform: translateY(-50%); width: 3px; height: 18px; } .nav-links .btn { margin-top: var(--s-4); } .advantage-card, .advantage-card.wide, .advantage-card.featured { grid-column: span 6; } .service-card, .service-card.bento-wide, .service-card.bento-full { grid-template-columns: 1fr; gap: var(--s-4); } .service-card.bento-wide > .viz, .service-card.bento-full > .viz { grid-column: 1 / -1; } .split { gap: var(--s-7); } /* Cutaway stacks: the drawing pins under the nav at a reduced height and the steps scroll up beneath it. The figure is opaque, so they pass behind it rather than through it. */ .cutaway { grid-template-columns: 1fr; gap: var(--s-5); } .cutaway-figure { top: calc(var(--nav-h-sm) + var(--s-2)); padding: var(--s-3) var(--s-4); } .cutaway-svg { max-height: 36svh; margin: var(--s-2) auto 0; } .cutaway-legend { display: none; } .cutaway-step { min-height: 58svh; padding-left: var(--s-5); } } @media (max-width: 640px) { .hero { padding-top: calc(var(--nav-h) + var(--s-7)); min-height: auto; } .hero-metrics { flex-wrap: wrap; } .metric { flex: 1 1 40%; } .metric + .metric { padding-left: var(--s-4); } .metric:nth-child(3) { flex-basis: 100%; padding-left: 0; border-left: 0; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); } .hero-actions .btn { flex: 1 1 100%; } .scroll-cue { display: none; } /* Studio frame: tighter housing, simplified bloom. The image itself is never cropped — only the frame's padding and glow shrink. */ .studio-frame { --frame-pad: 8px; border-radius: var(--r-md); box-shadow: var(--elev-3), 10px 14px 40px -28px rgba(76, 214, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .studio-screen { border-radius: calc(var(--r-md) - 5px); } .showcase-grid { grid-template-columns: 1fr; gap: var(--s-7); } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: var(--s-7); } .footer-bottom { flex-direction: column; align-items: flex-start; } .cta-band { border-radius: var(--r-lg); } .section-head { margin-bottom: var(--s-7); } .bento > *, .bento > .bento-wide, .bento > .bento-full, .bento > .bento-tab-full { grid-column: span 6; } .system-card.bento-wide { flex-direction: column; } .system-card.bento-wide > .viz { flex-basis: auto; } .viz-gauge { flex-wrap: wrap; } /* Equipment tags are ~4px tall once the drawing fits a phone. */ .cut-label { display: none; } .cutaway-step h3 { font-size: var(--fs-xl); } } @media (max-width: 420px) { .system-card, .precision-card, .service-card, .advantage-card, .info-card { padding: var(--s-5); } .hero-title .l3 { letter-spacing: 0.12em; } .union-card { flex-direction: column; align-items: flex-start; gap: var(--s-3); } .studio-frame { --frame-pad: 6px; } .showcase-caption { font-size: var(--fs-xs); } } /* ============================================================ 23 REDUCED MOTION / PRINT ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; filter: none !important; } .wipe > span { transform: none !important; } .grain { display: none; } .marquee-track { transform: none; } .btn:hover, .panel:hover, .partner:hover, .lift:hover, .lift-lg:hover { transform: none; } /* Sheen is pure decoration with no content behind it, so it is removed outright rather than frozen mid-sweep — a band parked across a card reads as a rendering fault. Same reasoning as `.grain`. */ .btn::after, .sheen::after { display: none; } /* VAV airflow: swap the SMIL-driven arrows for their static counterparts. SMIL ignores animation-duration, so the only reliable off switch is to stop rendering the animated groups — hence the paired rm-move/rm-static markup. This is also why the three overlays are inlined rather than loaded through : page CSS cannot reach into an image document. */ .rm-move { display: none; } .rm-static { display: block; } /* Cutaway scan line is decoration: removed, like the sheen. The flow dashes and fan land frozen through the global reset, and the staged lighting stays — it is a state change, not movement. */ .cutaway-scan { display: none; } } @media print { .atmosphere, .grain, .nav, .scroll-cue, .marquee, .footer-bottom nav { display: none !important; } body { background: #fff; color: #000; } .accent, .accent-warm, .stat-value { -webkit-text-fill-color: #000; color: #000; } .panel, .glass, .info-card, .system-card, .service-card, .advantage-card { box-shadow: none; border: 1px solid #ccc; background: #fff; } h1, h2, h3, h4, .metric-value { color: #000; } }