/* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/f/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/f/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/f/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgsAXHNlYzg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/f/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/f/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/f/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/f/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/f/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/f/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/f/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/f/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/f/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/f/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/f/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/f/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/f/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/f/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/f/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══════════════════════════════════════════════════════════════════════════ * FDC ELITE KIT v2 — the polish layer, palette-agnostic. * * THE POINT: products must NOT look the same. Each keeps its own palette and * its own personality. What this file equalises is the LEVEL — the heroes with * video and logos and visual effects, the ambient glows, the shimmer, the * trim, the animations that otherwise get added by hand, one at a time, on * every build. * * SO THIS FILE DECLARES NO COLOURS. Every hue is `var(--elite-*, )` * and every fallback resolves through `currentColor`, so an unconfigured page * renders in its own ink rather than somebody else's brand. A product sets the * contract in its own `:root` (see README.md and example/tokens.css) and the * whole kit reskins. * * Two literals survive, and neither paints a hue: `#000` inside the ring * masks, where only the alpha channel is read and the colour is discarded; * and `black` as the second operand of a color-mix that DARKENS the product's * own accent for a pressed state. Grep for a hex and you will find nothing * else. * * Harvested from shipped FDC code, not reinvented: * rucofence buttons, reveal, fields, pin track, the rAF story * appredding glow pulses, solar rotation, rays, mesh, borders, * marquee, logo shine, the conic "watt-run" ring * stillroof film bars, lens float, orb drift, hero breathe, * scroll cue, the CSS-only sundown reveal * stain-and-seal-supply Ken Burns, hero dust, film grain, wood grain, * sheen, text shimmer, skeleton trace, load bar * savvy-fsbo-WL the luxury trim layer: corner ticks, hairline, * inner ring, glossy top, section rule, hover lift * padlock-park hero-rise / hero-zoom and their LCP reasoning * flash-repair speed trails, energy pulse, border flow, the * conic hero beam, corner pulse, grain shift * fusion-overwatch HUD scan lines, neon rotate, stagger, blob float * thinkllp.dev the type scale, surface levels, border tiers, * status colour+glow pairs, radius scale, tables * * The comments are kept. They record failure modes that were paid for once. * ═════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * 0. THE CONTRACT * * These are DERIVATIONS, not declarations. Everything here is either a * geometry/timing value (which carries no brand) or a value computed from a * variable the product supplies. The `var(--x, fallback)` fallbacks below all * resolve through `currentColor`, so nothing in this file can ever paint a * colour the product did not choose. * * Surfaces and rules are built with color-mix against --elite-ink rather than * hand-picked hexes, which is why the same six lines are correct on a dark * ground AND on a light one: ink is always the opposite of surface, so * "4% of ink over surface" lightens a dark card and darkens a light one. * ═════════════════════════════════════════════════════════════════════════ */ :root { /* ── shape ───────────────────────────────────────────────────────────── A radius SCALE, never one radius stamped on everything. */ --elite-radius-hero: var(--elite-radius, 28px); --elite-radius-card: 20px; --elite-radius-input: 12px; --elite-radius-pill: 999px; /* ── motion ────────────────────────────────────────────────────────── */ --elite-ease: cubic-bezier(.4, 0, .2, 1); --elite-ease-bounce: cubic-bezier(.175, .885, .32, 1.275); --elite-ease-editorial: cubic-bezier(.22, 1, .36, 1); --elite-dur-entrance: 900ms; --elite-dur-ambient: 26s; /* ── type: 7 steps, each with its OWN line height ────────────────────── thinkllp.dev's scale. Not `text-sm` sprinkled by feel. The line height climbs as the size falls, because small type needs more air, not less. */ --elite-t1: 20px; --elite-lh1: 1.5; --elite-t2: 18px; --elite-lh2: 1.55; --elite-t3: 16px; --elite-lh3: 1.6; --elite-t4: 15px; --elite-lh4: 1.6; --elite-t5: 14px; --elite-lh5: 1.65; --elite-t6: 12px; --elite-lh6: 1.7; --elite-t7: 11px; --elite-lh7: 1.8; /* ── derived surfaces (product sets --elite-surface and --elite-ink) ── */ --elite-surface-1: color-mix(in srgb, var(--elite-ink, currentColor) 4%, var(--elite-surface, transparent)); --elite-surface-2: color-mix(in srgb, var(--elite-ink, currentColor) 7%, var(--elite-surface, transparent)); --elite-surface-hover: color-mix(in srgb, var(--elite-ink, currentColor) 6%, var(--elite-surface, transparent)); --elite-surface-inverse: var(--elite-ink, currentColor); /* ── derived border tiers ───────────────────────────────────────────── Hairlines are drawn as `inset 0 0 0 1px`, never as a border, so adding one never shifts layout by a pixel and never changes a grid's rhythm. */ --elite-rule-1: var(--elite-rule, color-mix(in srgb, currentColor 10%, transparent)); --elite-rule-strong: color-mix(in srgb, currentColor 22%, transparent); --elite-rule-highlight: color-mix(in srgb, var(--elite-accent, currentColor) 45%, transparent); /* ── light and shade ────────────────────────────────────────────────── --elite-sheen is the highlight a glossy or metallic surface catches; --elite-shade is the ground a shadow falls on. Both are contract points because a light register wants a far weaker sheen than a dark one. */ --elite-sheen: color-mix(in srgb, currentColor 88%, transparent); --elite-shade: color-mix(in srgb, currentColor 28%, transparent); /* ── the glow channel ───────────────────────────────────────────────── ONE glow keyframe, re-pointed per element. appredding shipped six near-identical @keyframes (green/blue/purple/orange/gold/red) that differed only in the colour literal. Collapsed to one keyframe reading --elite-glow, so a new accent costs a single custom-property, not twenty-four lines of box-shadow. */ --elite-glow: var(--elite-accent, currentColor); /* ── the trim ───────────────────────────────────────────────────────── The SECOND accent. savvy-fsbo called it gold, flash-repair called it gold, appredding called it amber over navy — it is whatever metal a product's trim is, and the kit refuses to guess. Corner ticks, the hairline, the inner ring, the section rule and the metallic sweep all read this and nothing else. Defaults to the primary accent so a product that has only one accent still looks deliberate. */ --elite-trim: var(--elite-accent, currentColor); /* ── texture ──────────────────────────────────────────────────────────── */ --elite-grain-opacity: .06; --elite-dust-opacity: .5; } /* ═══════════════════════════════════════════════════════════════════════════ * 1. TYPE + SURFACE UTILITIES * ═════════════════════════════════════════════════════════════════════════ */ @layer components { .elite-t1 { font-size: var(--elite-t1); line-height: var(--elite-lh1); } .elite-t2 { font-size: var(--elite-t2); line-height: var(--elite-lh2); } .elite-t3 { font-size: var(--elite-t3); line-height: var(--elite-lh3); } .elite-t4 { font-size: var(--elite-t4); line-height: var(--elite-lh4); } .elite-t5 { font-size: var(--elite-t5); line-height: var(--elite-lh5); } .elite-t6 { font-size: var(--elite-t6); line-height: var(--elite-lh6); } .elite-t7 { font-size: var(--elite-t7); line-height: var(--elite-lh7); } .tabular { font-variant-numeric: tabular-nums; } /* Wide content scrolls inside itself. The page body never scrolls sideways. */ .elite-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; } /* Visually hidden, still announced. `clip-path` plus a 1px box, never `display:none` (which removes it from the accessibility tree) and never a negative text-indent (which a right-to-left locale reverses). */ .elite-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The eyebrow: mono, uppercase, wide. Never a system label. */ .eyebrow { font-family: var(--elite-font-mono, ui-monospace, monospace); font-size: var(--elite-t7); letter-spacing: .17em; text-transform: uppercase; font-weight: 500; color: var(--elite-ink-3, currentColor); } /* The pill eyebrow — the "WHY CHOOSE US" / "HOW IT WORKS" chip. */ .eyebrow-pill { display: inline-block; font-family: var(--elite-font-mono, ui-monospace, monospace); font-size: var(--elite-t6); letter-spacing: .22em; text-transform: uppercase; color: var(--elite-accent, currentColor); padding: 8px 18px; border-radius: var(--elite-radius-pill); border: 1px solid color-mix(in srgb, var(--elite-accent, currentColor) 35%, transparent); background: color-mix(in srgb, var(--elite-accent, currentColor) 6%, transparent); } .card { background: var(--elite-surface, transparent); border-radius: var(--elite-radius-card); box-shadow: inset 0 0 0 1px var(--elite-rule-1); } .card-hero { border-radius: var(--elite-radius-hero); } /* Glass. The blur and the saturate are the whole effect; the tint is the product's. `isolation:isolate` so a negative-z child (the button wipe, the conic beam) is trapped inside this card and cannot paint under the page background. */ .glass-card { background: color-mix(in srgb, var(--elite-surface, transparent) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-radius: var(--elite-radius-hero); box-shadow: inset 0 0 0 1px var(--elite-rule-1); isolation: isolate; } .glass-card-light { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); background: color-mix(in srgb, var(--elite-surface, transparent) 52%, transparent); } .glass-card-strong { -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.08); backdrop-filter: blur(32px) saturate(200%) brightness(1.08); background: color-mix(in srgb, var(--elite-surface, transparent) 86%, transparent); } .field { width: 100%; background: var(--elite-surface, transparent); border: 1px solid var(--elite-rule-1); border-radius: var(--elite-radius-input); padding: 10px 12px; font-size: var(--elite-t4); line-height: var(--elite-lh4); color: var(--elite-ink, currentColor); font-family: inherit; } .field:focus { outline: 2px solid var(--elite-accent, currentColor); outline-offset: 1px; border-color: transparent; } .field::placeholder { color: var(--elite-ink-3, currentColor); opacity: .75; } /* Field labels are --elite-ink-2, never --elite-ink-3. Grey-on-dark field labels are the single fastest way to get a build rejected. */ .label { display: block; font-size: 12.5px; font-weight: 600; color: var(--elite-ink-2, currentColor); margin-bottom: 6px; letter-spacing: .01em; } } /* /components */ :focus-visible { outline: 2px solid var(--elite-accent, currentColor); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ * 2. CTA BUTTONS (rucofence) * * Rebuilt, not carried over. The old treatment swapped one background colour * for another on hover, which is the cheapest hover a button has. * * The fill now WIPES in from the left, behind the label, on a pseudo element * at z-index -1. Inside a stacking context the element's own background paints * first and negative-z children paint over it but under the in-flow content, * so the wipe passes between the button's ground and its own words with * nothing layered by hand. * * Every existing class name still works. Dozens of files set `.btn` with * Tailwind !important overrides for the white-on-photograph variant, and those * only ever touch `background`, so they compose with the wipe instead of * fighting it: the default wipe is a tint of the button's own text colour and * is therefore correct on any ground — it darkens dark type on a white hero * button and lightens white type on a ghost button. * * `.btn` lives inside @layer components deliberately. Written in the bare * sheet it beat `lg:hidden` at equal specificity and rendered the mobile menu * button at every width beside the full desktop nav. CLAUDE.md trap 3. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; padding: 11px 20px; border-radius: var(--elite-radius-input); border: 1px solid transparent; cursor: pointer; --btn-wipe: color-mix(in srgb, currentColor 10%, transparent); transition: background-color 180ms var(--elite-ease), color 180ms var(--elite-ease), border-color 180ms var(--elite-ease), box-shadow 180ms var(--elite-ease), transform 120ms var(--elite-ease); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-wipe); transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--elite-ease); } .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } /* The trailing arrow steps forward. A LEADING icon is left alone — that is what :not(:first-child) buys, since text nodes are not children here, so `Label ` moves and ` Label` does not. */ .btn > svg:last-child:not(:first-child) { transition: transform 260ms var(--elite-ease); } .btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); } /* A real pressed state: the wipe snaps home and the button takes a step down. */ .btn:active { transform: translateY(1px); } .btn:active::before { transform: scaleX(1); transition-duration: 90ms; } .btn-primary { background: var(--elite-accent, currentColor); color: var(--elite-accent-on, var(--elite-surface, canvas)); --btn-wipe: var(--elite-accent-deep, color-mix(in srgb, var(--elite-accent, currentColor) 76%, black)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 22%, transparent); } .btn-primary:active { box-shadow: inset 0 2px 6px var(--elite-shade); } .btn-ghost { background: transparent; color: var(--elite-accent, currentColor); border-color: var(--elite-rule-1); --btn-wipe: color-mix(in srgb, var(--elite-ink, currentColor) 6%, transparent); } .btn-ghost:hover { border-color: var(--elite-accent, currentColor); } /* The trim button — the second accent, for a secondary CTA that must still look expensive. Reads --elite-trim, never a hardcoded gold. */ .btn-trim { background: transparent; color: var(--elite-trim); border-color: color-mix(in srgb, var(--elite-trim) 40%, transparent); --btn-wipe: color-mix(in srgb, var(--elite-trim) 12%, transparent); } .btn-trim:hover { border-color: var(--elite-trim); } .btn-flag { background: var(--elite-accent, currentColor); color: var(--elite-accent-on, var(--elite-surface, canvas)); --btn-wipe: color-mix(in srgb, var(--elite-accent, currentColor) 76%, black); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 24%, transparent); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn:disabled::before { display: none; } .btn:disabled:active { transform: none; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 3. FAMILY 1 — ENTRANCE * * Four entrances, and they are not interchangeable. * * `.hero-rise` moves transform ONLY; opacity stays 1. padlock-park's note: * an opacity fade on the largest above-the-fold element GATES the Largest * Contentful Paint, because the browser will not count a fully transparent * element as painted. The rise reads the same and costs nothing. * * `.fade-up` is for everything below the fold, where opacity is free. * * `.elite-sundown` is the CSS-only scroll reveal (stillroof). It runs on * `animation-timeline: view()` with no JavaScript at all, and — this is the * part worth copying — the AT-REST state is the VISIBLE one. The animation * only ever hides an element that the browser has confirmed it can also * un-hide. A missing polyfill, a disabled script, an unsupported browser: * the content is simply there. Compare `.reveal`, which starts at opacity 0 * and needs JavaScript to arrive. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { @keyframes elite-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .fade-up { animation: elite-fade-up var(--elite-dur-entrance) var(--elite-ease-editorial) both; } /* ScrollFadeSection sets --fade-delay; nothing else needs wiring. */ .fade-up-lazy { opacity: 0; animation: elite-fade-up var(--elite-dur-entrance) var(--elite-ease-editorial) forwards; animation-delay: var(--fade-delay, 0ms); } @keyframes elite-hero-rise { from { transform: translateY(22px); } to { transform: none; } } .hero-rise { animation: elite-hero-rise 1100ms var(--elite-ease-editorial) both; } /* The bouncing arrival, for a badge or a stat that should feel placed. */ @keyframes elite-hero-reveal { 0% { opacity: 0; transform: scale(.85) translateY(30px); } 50% { opacity: .5; transform: scale(.95) translateY(10px); } 100% { opacity: 1; transform: none; } } .hero-reveal { animation: elite-hero-reveal 1.2s var(--elite-ease-bounce) both; } /* The kinetic headline (flash-repair): blur clears as the line lands. */ @keyframes elite-flash-rise { from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .flash-rise { animation: elite-flash-rise 900ms var(--elite-ease-editorial) both; } /* Staggered children without per-child wiring (fusion-overwatch). */ @keyframes elite-slide-up-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .elite-stagger > * { animation: elite-slide-up-fade var(--elite-dur-entrance) var(--elite-ease-editorial) both; } .elite-stagger > *:nth-child(1) { animation-delay: 0ms; } .elite-stagger > *:nth-child(2) { animation-delay: 60ms; } .elite-stagger > *:nth-child(3) { animation-delay: 120ms; } .elite-stagger > *:nth-child(4) { animation-delay: 180ms; } .elite-stagger > *:nth-child(5) { animation-delay: 240ms; } .elite-stagger > *:nth-child(6) { animation-delay: 300ms; } .elite-stagger > *:nth-child(7) { animation-delay: 360ms; } .elite-stagger > *:nth-child(8) { animation-delay: 420ms; } /* Reveal on scroll — once only, never on scroll-out. Driven by the shared rAF pass in motion/Reveal.tsx. */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.in { opacity: 1; transform: none; transition: opacity 800ms var(--elite-ease), transform 800ms var(--elite-ease); } /* The no-JavaScript reveal. At rest: visible. */ .elite-sundown { opacity: 1; filter: none; transform: none; } @keyframes elite-sundown-in { from { opacity: 0; filter: blur(6px); transform: translateY(32px); } to { opacity: 1; filter: none; transform: none; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .elite-sundown { animation: elite-sundown-in linear both; animation-timeline: view(block); animation-range: entry 0% entry 34%; } } } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 4. FAMILY 2 — PHOTOGRAPHIC * * Ken Burns is TWO animations, not one, and picking the wrong one costs * Lighthouse points. * * `.hero-zoom` is FINITE — it settles once and stops (padlock-park). An * infinite animation on the LCP element keeps the page off idle and inflates * the measured LCP. Use it on the static hero photograph. * * `.hero-kenburns` is infinite and belongs on a BACKGROUND plate that is not * the LCP element, where the drift is ambience rather than an entrance. * * `.hero-breathe` (stillroof) is the smallest of the three: a 3.5% scale over * 14s, alternating. On video it is the difference between a still frame and * a held shot. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { @keyframes elite-hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } } .hero-zoom { animation: elite-hero-zoom 5s var(--elite-ease-editorial) forwards; will-change: transform; } @keyframes elite-kenburns { 0% { transform: translate3d(-1.5%, -1%, 0) scale(1.06); } 50% { transform: translate3d(1.5%, 1%, 0) scale(1.10); } 100% { transform: translate3d(-1.5%, -1%, 0) scale(1.06); } } .hero-kenburns { animation: elite-kenburns var(--elite-dur-ambient) ease-in-out infinite; will-change: transform; } @keyframes elite-hero-breathe { to { transform: scale(1.035); } } .hero-breathe { animation: elite-hero-breathe 14s ease-in-out infinite alternate; } /* Lens float (stillroof) — a decorative overlay that drifts a few pixels off its anchor, so a pinned label never looks pasted on. */ @keyframes elite-lens-float { to { transform: translate(-10px, 14px) rotate(-4deg); } } .lens-float { animation: elite-lens-float 9s var(--elite-ease) infinite alternate; } /* The raking light sweep across a photographic hero. `screen` blend so it only ever ADDS light — it can never muddy the photograph underneath. */ .hero-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--elite-sheen) 0%, transparent) 20%, color-mix(in srgb, var(--elite-trim) 28%, transparent) 48%, color-mix(in srgb, var(--elite-sheen) 42%, transparent) 52%, color-mix(in srgb, var(--elite-trim) 0%, transparent) 80%, transparent 100%); filter: blur(6px); transform: skewX(-12deg); mix-blend-mode: screen; } /* The word mask. GSAP (or a transition) slides .hero-word up from behind the clip. The padding-bottom is not decorative: without it the clip cuts the descenders off every g, y and p in the headline. */ .hero-word-mask { display: inline-block; overflow: hidden; padding-bottom: .08em; vertical-align: bottom; } .hero-word { display: inline-block; will-change: transform; } .reveal-line { display: block; overflow: hidden; padding-bottom: .08em; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 5. FAMILY 3 — TEXTURE * * Grain is what stops a flat dark panel from reading as a PDF. All four are * pure CSS: the noise is an inline SVG feTurbulence, so there is no image * request, no 404 risk and nothing to put on a CDN. (The harvested original * pulled a PNG off Wikimedia — a third-party asset on the critical path of a * hero. Replaced.) * ═════════════════════════════════════════════════════════════════════════ */ @layer components { @keyframes elite-grain-shift { from { transform: translate(0, 0); } to { transform: translate(-4%, 3%); } } .film-grain { position: absolute; inset: -50%; pointer-events: none; opacity: var(--elite-grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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"); background-size: 160px 160px; animation: elite-grain-shift .6s steps(2) infinite; } /* Drifting dust motes. `screen` again — dust adds light, it never subtracts. */ @keyframes elite-hero-dust { 0% { background-position: 0 0, 40px 60px; opacity: var(--elite-dust-opacity); } 50% { opacity: calc(var(--elite-dust-opacity) * 1.6); } 100% { background-position: -120px -180px, -80px -120px; opacity: var(--elite-dust-opacity); } } .hero-dust { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background-image: radial-gradient(1.5px 1.5px at 20% 30%, color-mix(in srgb, var(--elite-sheen) 55%, transparent) 50%, transparent 51%), radial-gradient(1px 1px at 70% 65%, color-mix(in srgb, var(--elite-sheen) 40%, transparent) 50%, transparent 51%); background-size: 220px 220px, 160px 160px; animation: elite-hero-dust 18s linear infinite; } /* Scan lines. A repeating-linear-gradient, so it costs one paint. */ .film-scanlines { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, color-mix(in srgb, var(--elite-shade) 14%, transparent) 3px, color-mix(in srgb, var(--elite-shade) 14%, transparent) 4px); } /* Wood grain: a 120s cycle. That is not a typo — at two minutes per pass the surface never appears to move, it only ever looks alive. */ @keyframes elite-grain-slide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .wood-grain { background-size: 200% 200%; animation: elite-grain-slide 120s ease-in-out infinite; } /* Film bars — the three-bar sound indicator on a video invite. */ @keyframes elite-film-bars { from { transform: scaleY(.55); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: no-preference) { .film-bars > i { animation: elite-film-bars 1.1s ease-in-out infinite alternate; } .film-bars > i:nth-child(2) { animation-delay: .18s; } .film-bars > i:nth-child(3) { animation-delay: .36s; } } .film-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .film-bars > i { width: 2px; height: 10px; border-radius: 1px; background: var(--elite-accent, currentColor); transform-origin: bottom; } .film-bars > i:nth-child(2) { height: 14px; } .film-bars > i:nth-child(3) { height: 6px; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 6. FAMILY 4 — SHIMMER * * Every shimmer here is DETERMINISTIC. The harvested originals gave each * instance a `Math.random()` animation-delay inline, which produced a * different value on the server and in the browser and threw a hydration * mismatch on every render. Phase offsets are done with nth-child instead. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { /* Background-position shimmer: for gradient-filled text and metal. */ @keyframes elite-shimmer-bg { from { background-position: -200% center; } to { background-position: 200% center; } } /* Transform shimmer: for a moving highlight band over a solid element. */ @keyframes elite-shimmer-x { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* The band that crosses a card. Clipped by the parent's overflow. */ .shimmer-effect { position: relative; overflow: hidden; } .shimmer-effect::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--elite-sheen) 40%, transparent) 50%, transparent 100%); animation: elite-shimmer-x 3s ease-in-out infinite; } .shimmer-slow::before { animation-duration: 5s; } .shimmer-effect:nth-child(2n)::before { animation-delay: -1.1s; } .shimmer-effect:nth-child(3n)::before { animation-delay: -2.3s; } /* Sheen — the slow premium pass over a whole surface. */ .sheen { background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--elite-sheen) 50%, transparent) 50%, transparent 65%); background-size: 200% 100%; animation: elite-shimmer-bg 6s linear infinite reverse; } /* Metallic sweep — the diagonal bar that crosses a badge or a plate. */ @keyframes elite-metallic-sweep { from { transform: translate(-100%, -100%) rotate(45deg); } to { transform: translate(100%, 100%) rotate(45deg); } } .metallic-sweep { position: relative; overflow: hidden; isolation: isolate; } .metallic-sweep::after { content: ""; position: absolute; inset: -50%; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--elite-trim) 45%, transparent), transparent); animation: elite-metallic-sweep 4.5s ease-in-out infinite; } /* Metallic TEXT — brushed metal, built from the trim colour, not from a fixed set of greys, so a bronze product gets bronze and a steel one steel. */ .metallic-text { background: linear-gradient(to bottom, color-mix(in srgb, var(--elite-trim) 30%, var(--elite-sheen)) 0%, var(--elite-trim) 45%, color-mix(in srgb, var(--elite-trim) 70%, var(--elite-shade)) 50%, var(--elite-trim) 55%, color-mix(in srgb, var(--elite-trim) 30%, var(--elite-sheen)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 4px var(--elite-shade)); } /* Text shimmer — the light travelling THROUGH the letterforms. */ .text-shimmer { background: linear-gradient(100deg, var(--elite-ink, currentColor) 20%, var(--elite-trim) 45%, color-mix(in srgb, var(--elite-sheen) 90%, transparent) 50%, var(--elite-trim) 55%, var(--elite-ink, currentColor) 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: elite-shimmer-bg 4s linear infinite; } /* Logo shine — the bar crosses, then WAITS. The 20%/80% hold is what keeps a header logo from looking like a loading spinner. */ @keyframes elite-logo-shine { 0%, 100% { transform: translateX(-100%); } 20%, 80% { transform: translateX(100%); } } .logo-shine { position: relative; overflow: hidden; isolation: isolate; display: inline-block; } .logo-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--elite-sheen) 55%, transparent), transparent); animation: elite-logo-shine 6s ease-in-out infinite; } /* Glass shimmer — the long, low-opacity pass across a glass hero card. */ @keyframes elite-hero-sheen { 0% { transform: translateX(-130%) skewX(-18deg); opacity: 0; } 12% { opacity: .5; } 38% { opacity: 0; } 100% { transform: translateX(240%) skewX(-18deg); opacity: 0; } } .glass-shimmer { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .glass-shimmer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--elite-sheen) 10%, transparent), transparent); animation: elite-hero-sheen 7s ease-in-out infinite; } /* Animated gradient text — the signature two-line hero move's second line. */ @keyframes elite-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .elite-heading-gradient { background: linear-gradient(135deg, var(--elite-accent, currentColor) 0%, var(--elite-trim) 50%, var(--elite-accent-2, var(--elite-accent, currentColor)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .elite-heading-gradient.is-animated { background-size: 200% 200%; animation: elite-gradient-shift 6s ease infinite; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 7. FAMILY 5 — GLOW * * appredding shipped six @keyframes — glowPulseGreen / Blue / Purple / * Orange / Gold / Red — that were byte-identical except for the colour. * Adding a seventh accent meant writing twenty-four more lines of box-shadow. * * There is one keyframe here. It reads `--elite-glow`, and a modifier class * repoints that single property. A new accent costs one line. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { /* The four-layer halo: near bloom, far bloom, cast shadow, inner lip. */ .edge-glow { box-shadow: 0 0 40px color-mix(in srgb, var(--elite-glow) 40%, transparent), 0 0 80px color-mix(in srgb, var(--elite-glow) 20%, transparent), 0 8px 32px var(--elite-shade), inset 0 1px 2px color-mix(in srgb, var(--elite-glow) 20%, transparent); } .edge-glow-strong { box-shadow: 0 0 60px color-mix(in srgb, var(--elite-glow) 60%, transparent), 0 0 120px color-mix(in srgb, var(--elite-glow) 30%, transparent), 0 12px 40px var(--elite-shade), inset 0 1px 3px color-mix(in srgb, var(--elite-glow) 30%, transparent); } @keyframes elite-glow-pulse { 0%, 100% { box-shadow: 0 0 40px color-mix(in srgb, var(--elite-glow) 40%, transparent), 0 0 80px color-mix(in srgb, var(--elite-glow) 20%, transparent), 0 8px 32px var(--elite-shade), inset 0 1px 2px color-mix(in srgb, var(--elite-glow) 20%, transparent); } 50% { box-shadow: 0 0 60px color-mix(in srgb, var(--elite-glow) 60%, transparent), 0 0 120px color-mix(in srgb, var(--elite-glow) 30%, transparent), 0 12px 40px var(--elite-shade), inset 0 1px 3px color-mix(in srgb, var(--elite-glow) 30%, transparent); } } .animate-glow-pulse { animation: elite-glow-pulse 3s var(--elite-ease) infinite; } /* A wall of cards must not breathe in unison. Offsets, not randomness. */ .animate-glow-pulse:nth-child(2n) { animation-delay: -1s; } .animate-glow-pulse:nth-child(3n) { animation-delay: -2s; } /* Repoint the channel. This is the whole per-accent API. */ .glow-accent { --elite-glow: var(--elite-accent, currentColor); } .glow-trim { --elite-glow: var(--elite-trim); } .glow-ok { --elite-glow: var(--elite-ok, currentColor); } .glow-warn { --elite-glow: var(--elite-warn, currentColor); } .glow-bad { --elite-glow: var(--elite-bad, currentColor); } .glow-info { --elite-glow: var(--elite-info, currentColor); } /* Underglow — the warm bloom UNDER a card, blooming on hover. -20px spread keeps the glow beneath the card instead of haloing its edges. */ .underglow { transition: box-shadow 500ms var(--elite-ease-editorial), transform 500ms var(--elite-ease-editorial); } .underglow:hover { box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--elite-trim) 45%, transparent); } /* Ambient radial glow — the blurred blob that sits behind a section. It is `position:absolute` and `pointer-events:none` by definition: an ambient glow that eats clicks is a bug report waiting to happen. */ .ambient-glow { position: absolute; pointer-events: none; z-index: 0; border-radius: var(--elite-radius-pill); filter: blur(70px); background: radial-gradient(circle, color-mix(in srgb, var(--elite-glow) 16%, transparent) 0%, transparent 70%); } /* Corner pulse — the four L-brackets on a hero card, breathing (flash-repair). */ @keyframes elite-corner-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .hero-corner { position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--elite-trim) 50%, transparent)); animation: elite-corner-pulse 3.2s ease-in-out infinite; --c: color-mix(in srgb, var(--elite-trim) 85%, transparent); } .hero-corner.tl { top: 14px; left: 14px; border-top: 2px solid var(--c); border-left: 2px solid var(--c); border-top-left-radius: 10px; } .hero-corner.tr { top: 14px; right: 14px; border-top: 2px solid var(--c); border-right: 2px solid var(--c); border-top-right-radius: 10px; } .hero-corner.bl { bottom: 14px; left: 14px; border-bottom: 2px solid var(--c); border-left: 2px solid var(--c); border-bottom-left-radius: 10px; } .hero-corner.br { bottom: 14px; right: 14px; border-bottom: 2px solid var(--c); border-right: 2px solid var(--c); border-bottom-right-radius: 10px; } /* Corner brackets — the targeting frame on a mini card (the north-star "YOUR PANELS CATCH IT" mini-cards). Two pseudo elements, two corners. */ .corner-bracket { position: relative; } .corner-bracket::before, .corner-bracket::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: color-mix(in srgb, var(--elite-glow) 80%, transparent); border-style: solid; border-width: 0; pointer-events: none; } .corner-bracket::before { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; } .corner-bracket::after { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; } /* Energy pulse — a glow that breathes without a cast shadow, for a live indicator rather than a card (flash-repair). */ @keyframes elite-energy-pulse { 0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--elite-glow) 30%, transparent), 0 0 20px color-mix(in srgb, var(--elite-glow) 10%, transparent); } 50% { box-shadow: 0 0 25px color-mix(in srgb, var(--elite-glow) 70%, transparent), 0 0 50px color-mix(in srgb, var(--elite-glow) 30%, transparent), 0 0 80px color-mix(in srgb, var(--elite-trim) 15%, transparent); } } .animate-energy-pulse { animation: elite-energy-pulse 2.5s ease-in-out infinite; } /* Live pulse and record pulse — opacity only, so they are cheap enough to sit in a header on every page. */ @keyframes elite-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .live-pulse { animation: elite-live-pulse 2.4s ease-in-out infinite; } .record-pulse { animation: elite-live-pulse 1.6s ease-in-out infinite; } /* Orb pulse — the expanding ring that leaves a live dot (stillroof). */ @keyframes elite-orb-pulse { 60% { transform: scale(1.14); opacity: 0; } 100% { opacity: 0; } } .orb-pulse { position: relative; } .orb-pulse::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; border: 1px solid color-mix(in srgb, var(--elite-glow) 40%, transparent); animation: elite-orb-pulse 2.7s var(--elite-ease) infinite; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 8. FAMILY 6 — BORDERS * * Four kinds, all built the same way: a pseudo element inset by 1px, filled * with a gradient, and masked to a ring with `mask-composite: exclude`. That * mask trick is why these are borders and not backgrounds — the fill is * punched out and only the 1px band survives, so the card's own background * shows through untouched. * * The rotating ones animate an `@property`-registered rather than a * background-position. A registered custom property INTERPOLATES; an * unregistered one snaps between keyframes, which is why the naive version * of this effect stutters. * ═════════════════════════════════════════════════════════════════════════ */ @property --elite-angle { syntax: ""; initial-value: 0deg; inherits: false; } @layer components { /* Rotating ring — the conic comet that runs the perimeter (appredding's "watt-run", flash-repair's hero beam). */ @keyframes elite-angle-run { to { --elite-angle: 360deg; } } .border-rotate { position: relative; isolation: isolate; } .border-rotate::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1; background: conic-gradient(from var(--elite-angle), transparent 0deg, transparent 295deg, color-mix(in srgb, var(--elite-trim) 35%, transparent) 305deg, var(--elite-trim) 335deg, color-mix(in srgb, var(--elite-sheen) 90%, transparent) 348deg, var(--elite-trim) 357deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--elite-trim) 70%, transparent)); animation: elite-angle-run 5.5s linear infinite; } /* Reverse + a different period so two adjacent cards never sync. */ .border-rotate.is-alt::before { animation-duration: 6.5s; animation-direction: reverse; } /* Neon ring — the full-spectrum version, for a HUD panel. Runs the accent, the trim and the second accent rather than a fixed violet/cyan/pink. */ .border-neon { position: relative; isolation: isolate; } .border-neon::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1; background: conic-gradient(from var(--elite-angle), var(--elite-accent, currentColor), var(--elite-trim), var(--elite-accent-2, var(--elite-accent, currentColor)), var(--elite-trim), var(--elite-accent, currentColor)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: elite-angle-run 4s linear infinite; } /* Flowing border — a linear gradient sliding along the ring. Cheaper than the conic version (no @property, no drop-shadow) and correct on a long rectangle, where a conic sweep looks fastest at the corners. */ @keyframes elite-border-flow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } } .border-flow { position: relative; isolation: isolate; } .border-flow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, var(--elite-trim), var(--elite-accent, currentColor), color-mix(in srgb, var(--elite-trim) 25%, transparent), var(--elite-trim)); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: elite-border-flow 6s linear infinite; } /* Following border — a single lit dot travelling the perimeter. The `left/top` keyframes are deliberate: they are cheap here because the dot is a 1-2px absolutely positioned element with nothing to reflow. */ @keyframes elite-border-follow { 0% { left: 0; top: 0; } 25% { left: 100%; top: 0; } 50% { left: 100%; top: 100%; } 75% { left: 0; top: 100%; } 100% { left: 0; top: 0; } } .border-follow { position: relative; } .border-follow::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; margin: -3px; pointer-events: none; background: var(--elite-trim); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--elite-trim) 70%, transparent); animation: elite-border-follow 6s linear infinite; } /* Pulsing border — the quietest of the four. Colour only, no geometry. */ @keyframes elite-border-pulse { 0%, 100% { border-color: color-mix(in srgb, var(--elite-glow) 25%, transparent); } 50% { border-color: color-mix(in srgb, var(--elite-glow) 70%, transparent); } } .border-pulse { border: 1px solid color-mix(in srgb, var(--elite-glow) 25%, transparent); animation: elite-border-pulse 2s ease-in-out infinite; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 9. FAMILY 7 — AMBIENT * * The layer that makes a dark section look lit rather than painted. All of it * is `pointer-events: none` and z-index 0, and every host needs * `isolation: isolate` so the blobs cannot escape their section. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { /* Orb drift (stillroof). One keyframe, three orbs, negative delays so they start mid-cycle instead of all leaving the same corner together. */ @keyframes elite-orb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3vw, -4vw, 0) scale(1.14); } } .orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .orbs > i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .3; background: radial-gradient(circle, var(--elite-glow) 0%, transparent 68%); animation: elite-orb-drift var(--elite-dur-ambient) var(--elite-ease) infinite alternate; } .orbs > i:nth-child(1) { width: 42vw; height: 42vw; top: -14vw; left: -10vw; } .orbs > i:nth-child(2) { width: 30vw; height: 30vw; bottom: -12vw; right: -8vw; animation-delay: -9s; } .orbs > i:nth-child(3) { width: 20vw; height: 20vw; top: 42%; right: 22%; animation-delay: -17s; opacity: .22; } /* Blob float (fusion-overwatch) — a four-point wander, less linear than the two-point drift. Use where the section is watched for a long time. */ @keyframes elite-blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.05); } 50% { transform: translate(-20px, 30px) scale(.95); } 75% { transform: translate(10px, 10px) scale(1.02); } } .blob-float { animation: elite-blob-float 24s ease-in-out infinite; } /* Mesh move (appredding) — three layers on three different paths, screen blended, so the section ground never sits still. */ @keyframes elite-mesh-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.1); } 66% { transform: translate(-20px, 30px) scale(.9); } } @keyframes elite-mesh-2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-30px, 20px) rotate(5deg); } 66% { transform: translate(20px, -30px) rotate(-5deg); } } @keyframes elite-mesh-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(15px, 15px) scale(1.05); } } .gradient-mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .gradient-mesh > i { position: absolute; inset: 0; opacity: .6; mix-blend-mode: screen; } .gradient-mesh > i:nth-child(1) { background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--elite-accent, currentColor) 40%, transparent) 0%, transparent 50%); animation: elite-mesh-1 20s ease-in-out infinite; } .gradient-mesh > i:nth-child(2) { background: radial-gradient(circle at 80% 40%, color-mix(in srgb, var(--elite-trim) 34%, transparent) 0%, transparent 50%); animation: elite-mesh-2 26s ease-in-out infinite; } .gradient-mesh > i:nth-child(3) { background: radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--elite-accent-2, var(--elite-accent, currentColor)) 30%, transparent) 0%, transparent 50%); animation: elite-mesh-3 32s ease-in-out infinite; } /* Particle float — a starfield in ONE element. Six radial gradients on a 200% canvas, panned. No DOM nodes, no rAF, no per-particle cost. */ @keyframes elite-particle-float { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } .particle-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(2px 2px at 20% 30%, color-mix(in srgb, var(--elite-sheen) 15%, transparent), transparent), radial-gradient(2px 2px at 60% 70%, color-mix(in srgb, var(--elite-sheen) 10%, transparent), transparent), radial-gradient(1px 1px at 50% 50%, color-mix(in srgb, var(--elite-sheen) 10%, transparent), transparent), radial-gradient(1px 1px at 80% 10%, color-mix(in srgb, var(--elite-accent, currentColor) 15%, transparent), transparent), radial-gradient(2px 2px at 90% 60%, color-mix(in srgb, var(--elite-trim) 12%, transparent), transparent), radial-gradient(1px 1px at 33% 90%, color-mix(in srgb, var(--elite-accent-2, var(--elite-accent, currentColor)) 10%, transparent), transparent); background-size: 200% 200%; animation: elite-particle-float 30s ease-in-out infinite; } /* A single rising mote, for the handful of cases that want real particles. --particle-x / --particle-y are set per instance. */ @keyframes elite-mote { 0% { transform: translate(0, 0) scale(1); opacity: .8; } 50% { transform: translate(calc(var(--particle-x, 15px)), calc(var(--particle-y, -30px))) scale(1.2); opacity: 1; } 100% { transform: translate(calc(var(--particle-x, 15px) * -.6), calc(var(--particle-y, -30px) * 2)) scale(.6); opacity: 0; } } .mote { animation: elite-mote 6s ease-out infinite; } /* Cyber grid — the moving graph paper under a HUD. 50px tile, 50px travel, 20s: the grid moves exactly one cell per cycle, so the loop is invisible. */ @keyframes elite-grid-move { from { background-position: 0 0; } to { background-position: 50px 50px; } } .cyber-grid { background-image: linear-gradient(color-mix(in srgb, var(--elite-accent, currentColor) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--elite-accent, currentColor) 4%, transparent) 1px, transparent 1px); background-size: 50px 50px; animation: elite-grid-move 20s linear infinite; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 10. FAMILY 8 — SOLAR * * Pure CSS rays. The harvested original replaced a with a single * conic-gradient, which removed a script, a resize listener and a whole * animation loop from the hero. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { @keyframes elite-sun-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes elite-ray-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .8; } } /* For an element that is not centre-anchored. */ @keyframes elite-spin { to { transform: rotate(360deg); } } .css-rays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .css-rays::before { content: ""; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; transform-origin: center; --ray: color-mix(in srgb, var(--elite-trim) 30%, transparent); background: conic-gradient(from 0deg, transparent 0deg, var(--ray) 10deg, transparent 20deg, transparent 60deg, var(--ray) 70deg, transparent 80deg, transparent 120deg, var(--ray) 130deg, transparent 140deg, transparent 180deg, var(--ray) 190deg, transparent 200deg, transparent 240deg, var(--ray) 250deg, transparent 260deg, transparent 300deg, var(--ray) 310deg, transparent 320deg, transparent 360deg); animation: elite-sun-rotate 8s linear infinite, elite-ray-pulse 2s ease-in-out infinite; } /* The sun presence: concentric rings, the outer two rotating in opposite directions, the core a soft radial. */ .sun-presence { position: relative; } .sun-presence > i { position: absolute; inset: 12%; border-radius: 50%; pointer-events: none; border: 1px solid color-mix(in srgb, var(--elite-trim) 22%, transparent); animation: elite-spin 90s linear infinite; } .sun-presence > i:nth-child(2) { inset: 27%; border-style: dashed; animation-duration: 60s; animation-direction: reverse; } .sun-presence > i:nth-child(3) { inset: 43%; border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--elite-trim) 70%, transparent), transparent 70%); animation: elite-ray-pulse 4s ease-in-out infinite; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 11. FAMILY 9 — MOTION FURNITURE * * The small pieces that make a page feel maintained rather than generated. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { /* Marquee. The track holds TWO copies of the content and travels -50%, so the loop point is a seam between identical halves and is invisible. Halving the travel to -100% with one copy leaves a gap on every pass. */ @keyframes elite-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { overflow: hidden; } .marquee > * { display: inline-flex; will-change: transform; animation: elite-marquee 40s linear infinite; } .marquee:hover > * { animation-play-state: paused; } /* A marquee is a moving band of text. Someone reading it must be able to stop it, and hover is not available on a phone or to a keyboard. */ .marquee:focus-within > * { animation-play-state: paused; } /* Scroll cue: the filled bar that runs down the inside of a hollow capsule. */ @keyframes elite-scroll-cue { 55%, 100% { transform: translateY(100%); } } .scroll-cue { position: relative; overflow: hidden; width: 22px; height: 34px; border-radius: var(--elite-radius-pill); border: 1px solid var(--elite-rule-strong); } .scroll-cue > span { position: absolute; inset: 0; background: var(--elite-accent, currentColor); transform: translateY(-100%); animation: elite-scroll-cue 2.4s ease-in-out infinite; } /* Scroll bob: the chevron under a hero. */ @keyframes elite-scroll-bob { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(4px); opacity: 1; } } .scroll-bob { animation: elite-scroll-bob 2.4s var(--elite-ease-editorial) infinite; } /* Hover lift. Two values, deliberately: -3px for a card in a grid (any more and the grid ripples), -6px for a single feature panel with room. */ .hover-lift { transition: transform 500ms var(--elite-ease-editorial), box-shadow 500ms var(--elite-ease-editorial), border-color 350ms var(--elite-ease); will-change: transform; } .hover-lift:hover { transform: translateY(-3px); } .hover-lift-lg:hover { transform: translateY(-6px); } /* Tab crossfade. Driven by a data attribute rather than a class so the state is readable in the DOM inspector and in tests. */ .tab-crossfade { transition: opacity 300ms var(--elite-ease-editorial), transform 300ms var(--elite-ease-editorial); } .tab-crossfade[data-state="enter"] { opacity: 1; transform: translateY(0); } .tab-crossfade[data-state="exit"] { opacity: 0; transform: translateY(8px); } /* Scroll progress rail (see motion/ScrollRail.tsx, which writes scaleX). */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; will-change: transform; background: linear-gradient(90deg, var(--elite-trim), var(--elite-accent, currentColor)); box-shadow: 0 0 12px color-mix(in srgb, var(--elite-glow) 60%, transparent); } /* The pinned statement's track. The track height IS the pin duration: the stage is one viewport tall and sticks for the track height minus one viewport. Under reduced motion the track collapses to a single viewport, the stage stops sticking, and the section reads as one ordinary full-bleed statement instead of two screens of scrolling past a frozen photograph. See motion/Pinned.tsx. */ .pin-track { height: var(--pin-h, 190vh); } /* Magnetic: the transform is written by JS on pointermove; this only owns the return. */ .magnetic { transition: transform 400ms var(--elite-ease-editorial); } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 12. FAMILY 10 — DATA * * Status is a PAIR — a colour and a glow — so a chip reads at a glance * without a legend (thinkllp.dev). The glow is not decoration: it is the * second channel that survives being photographed, screenshotted into Slack, * or read by somebody with a red/green deficiency, because the bloom differs * in size and softness even where the hue does not separate. * * The kit names five statuses and colours none of them. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--elite-radius-pill); font-size: var(--elite-t6); line-height: 1.4; font-weight: 600; letter-spacing: .01em; white-space: nowrap; --chip: var(--elite-ink-2, currentColor); color: color-mix(in srgb, var(--chip) 92%, var(--elite-ink, currentColor)); background: color-mix(in srgb, var(--chip) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 32%, transparent); } /* The dot carries the glow. A 6px dot with a 6px bloom reads as "lit" at any size the chip is rendered. */ .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--chip); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--chip) 70%, transparent); } .chip-ok { --chip: var(--elite-ok, currentColor); } .chip-warn { --chip: var(--elite-warn, currentColor); } .chip-bad { --chip: var(--elite-bad, currentColor); } .chip-info { --chip: var(--elite-info, currentColor); } .chip-idle { --chip: var(--elite-ink-3, currentColor); } .chip-idle::before { box-shadow: none; } /* A chip that must pull the eye — an incident, a breach, a hard stop. */ .chip-live::before { animation: elite-live-pulse 1.8s ease-in-out infinite; } /* Skeleton trace — the loading placeholder. The band travels across a tinted surface, never across white, so it does not flash on a dark page. */ @keyframes elite-skeleton-trace { from { background-position: -200% 0; } to { background-position: 200% 0; } } .skeleton { border-radius: 6px; color: transparent; user-select: none; background-image: linear-gradient(90deg, var(--elite-surface-1) 0%, var(--elite-surface-2) 45%, color-mix(in srgb, var(--elite-sheen) 8%, var(--elite-surface-2)) 50%, var(--elite-surface-2) 55%, var(--elite-surface-1) 100%); background-size: 200% 100%; animation: elite-skeleton-trace 1.6s ease-in-out infinite; } /* Text skeletons should be text-shaped: the last line of a paragraph is short. Getting this wrong is what makes a loading state look broken. */ .skeleton-line { height: 1em; margin: .35em 0; } .skeleton-line:last-child { width: 62%; } /* Load bar — the indeterminate progress sliver. It travels 540% of its own width so the pause between passes reads as work, not as a stall. */ @keyframes elite-loadbar { from { transform: translateX(-120%); } to { transform: translateX(420%); } } .loadbar { position: relative; overflow: hidden; height: 3px; border-radius: 2px; background: var(--elite-surface-2); } .loadbar::before { content: ""; position: absolute; inset: 0; width: 22%; border-radius: inherit; background: var(--elite-accent, currentColor); box-shadow: 0 0 10px color-mix(in srgb, var(--elite-glow) 60%, transparent); animation: elite-loadbar 1.4s var(--elite-ease) infinite; } /* Count-up arrival (fusion-overwatch). The NUMBER is animated in motion/Counter.tsx; this is only the entrance of the figure itself. */ @keyframes elite-count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .animate-count-up { animation: elite-count-up var(--elite-dur-entrance) var(--elite-ease-bounce) both; } /* A stat figure is always tabular. A column of numbers whose digits are different widths is the fastest way to look amateur. */ .stat-value { font-family: var(--elite-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; font-weight: 700; color: var(--elite-accent, currentColor); } .stat-label { font-family: var(--elite-font-mono, ui-monospace, monospace); font-size: var(--elite-t7); line-height: var(--elite-lh7); letter-spacing: .18em; text-transform: uppercase; color: var(--elite-ink-3, currentColor); } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 13. FAMILY 11 — LUXURY TRIM (savvy-fsbo-WL's polish.css) * * Named as such in the source, and rightly. Every value here reads * --elite-trim. The originals hardcoded #b8935f in eleven places; changing * the metal meant eleven edits and one of them was always missed. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { /* Corner ticks — 5px L-brackets. Smaller and quieter than .corner-bracket: ticks are for an editorial card, brackets are for a HUD mini-card. */ .corner-ticks { position: relative; } .corner-ticks::before, .corner-ticks::after { content: ""; position: absolute; width: 5px; height: 5px; pointer-events: none; z-index: 3; } .corner-ticks::before { top: 6px; left: 6px; border-top: 1px solid var(--elite-trim); border-left: 1px solid var(--elite-trim); } .corner-ticks::after { bottom: 6px; right: 6px; border-bottom: 1px solid var(--elite-trim); border-right: 1px solid var(--elite-trim); } /* Four corners needs two extra elements; pseudo elements only give two. */ .corner-ticks-4 { position: relative; } .corner-ticks-4 > .tick { position: absolute; width: 5px; height: 5px; pointer-events: none; z-index: 3; } .corner-ticks-4 > .tick-tr { top: 6px; right: 6px; border-top: 1px solid var(--elite-trim); border-right: 1px solid var(--elite-trim); } .corner-ticks-4 > .tick-bl { bottom: 6px; left: 6px; border-bottom: 1px solid var(--elite-trim); border-left: 1px solid var(--elite-trim); } /* Hairline — a trim border at 20% that lights to 80% on hover. */ .hairline-trim { border: 1px solid color-mix(in srgb, var(--elite-trim) 20%, transparent); transition: border-color 400ms var(--elite-ease-editorial), box-shadow 400ms var(--elite-ease-editorial); } .hairline-trim:hover { border-color: color-mix(in srgb, var(--elite-trim) 80%, transparent); } /* Inner ring — three stacked insets: the ring, a highlight on the top edge, a shadow on the bottom. That triple is what makes a flat panel read as a milled one rather than as a rectangle with a border. */ .inner-ring { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 6%, transparent), inset 0 -1px 0 var(--elite-shade); } /* Glossy top — the sheen across the upper 45% of a panel. The children are lifted to z-index 2 so the gloss passes UNDER the content; without that the sheen washes out the first line of type. */ .glossy-top { position: relative; isolation: isolate; } .glossy-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%; pointer-events: none; border-radius: inherit; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--elite-sheen) 22%, transparent) 0%, color-mix(in srgb, var(--elite-sheen) 8%, transparent) 40%, transparent 100%); } .glossy-top > * { position: relative; z-index: 2; } /* Stat card — the trim-ringed panel. Radius 2px on purpose: the editorial register's cards are nearly square, which is what separates it from the 28px-everything look. */ .stat-card-trim { position: relative; isolation: isolate; padding: 24px; border-radius: 2px; background: radial-gradient(ellipse at 20% -10%, color-mix(in srgb, var(--elite-trim) 14%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--elite-surface-2) 0%, var(--elite-surface, transparent) 55%, color-mix(in srgb, var(--elite-shade) 30%, var(--elite-surface, transparent)) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 5%, transparent), 0 18px 36px -18px var(--elite-shade), 0 6px 14px -6px var(--elite-shade); color: var(--elite-ink, currentColor); transition: transform 500ms var(--elite-ease-editorial), box-shadow 500ms var(--elite-ease-editorial); } .stat-card-trim:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 75%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 8%, transparent), 0 24px 48px -20px var(--elite-shade), 0 10px 20px -8px var(--elite-shade); } /* Section rule — two fading hairlines with a mark between them. The mark is an inline-SVG mask filled with currentColor, so it takes the trim colour automatically and needs no second asset per product. */ .section-rule { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin: 2.5rem 0; color: var(--elite-trim); } .section-rule::before, .section-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--elite-trim) 55%, transparent) 50%, transparent 100%); } .section-rule__mark { flex: none; width: 10px; height: 10px; display: inline-block; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 14. FAMILY 12 — HUD (fusion-overwatch, flash-repair) * * The instrument register. Everything here is decorative and must be * `pointer-events: none`; a scan line that intercepts a click on the panel * beneath it is the classic version of this bug. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { @keyframes elite-hud-scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } } .hud-scanline { position: absolute; inset: 0; height: 2px; width: 100%; opacity: .15; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--elite-accent, currentColor), transparent); animation: elite-hud-scan 4s linear infinite; } /* Speed trails. Two directions, because a single direction on a symmetric panel reads as a scroll bar rather than as speed. */ @keyframes elite-speed-trail { 0% { transform: translateX(-120%) scaleX(.5); opacity: 0; } 15% { opacity: 1; } 85% { opacity: .8; } 100% { transform: translateX(120%) scaleX(1.2); opacity: 0; } } @keyframes elite-speed-trail-rev { 0% { transform: translateX(120%) scaleX(.5); opacity: 0; } 15% { opacity: .7; } 85% { opacity: .5; } 100% { transform: translateX(-120%) scaleX(1.2); opacity: 0; } } .speed-trail, .speed-trail-rev { position: absolute; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--elite-trim), transparent); } .speed-trail { animation: elite-speed-trail var(--trail-dur, 2.6s) linear infinite; } .speed-trail-rev { animation: elite-speed-trail-rev var(--trail-dur, 3.4s) linear infinite; } /* Bolt drift — the watermark motif that moves just enough to be noticed once and then never again. Opacity peaks at .10; a watermark that reads clearly is a logo, and a logo in a footer background is a mistake. */ @keyframes elite-bolt-drift { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: .06; } 50% { transform: translateY(-10px) rotate(2deg); opacity: .10; } } .bolt-motif { animation: elite-bolt-drift 7s ease-in-out infinite; } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 15. TABLES AND DATA GRIDS * * The owner judges a build on its tables. Everything below is a rule from * THE STANDARD, in CSS. * * The hairline under the sticky header is `inset 0 -1px 0`, not * `border-bottom`. A border on a sticky header changes the row's box and the * whole grid shifts by one pixel the moment the header sticks — the classic * "table jumps on scroll" bug. An inset shadow paints inside the existing box * and cannot move anything. * ═════════════════════════════════════════════════════════════════════════ */ @layer components { .elite-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--elite-radius-card); background: var(--elite-surface, transparent); box-shadow: inset 0 0 0 1px var(--elite-rule-1); } .elite-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink, currentColor); } .elite-table thead th { position: sticky; top: 0; z-index: 2; background: var(--elite-surface-2); box-shadow: inset 0 -1px 0 var(--elite-rule-strong); padding: 10px 14px; text-align: left; white-space: nowrap; font-family: var(--elite-font-mono, ui-monospace, monospace); font-size: var(--elite-t7); line-height: var(--elite-lh7); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--elite-ink-2, currentColor); } .elite-table tbody td { padding: 11px 14px; vertical-align: middle; box-shadow: inset 0 -1px 0 var(--elite-rule-1); } .elite-table tbody tr:last-child td { box-shadow: none; } /* Row hover is a SURFACE change, not an outline. An outline on a row reflows nothing but reads as a selection; a surface change reads as "you are here". */ .elite-table tbody tr { transition: background-color 120ms var(--elite-ease); } .elite-table tbody tr:hover td { background: var(--elite-surface-hover); } .elite-table tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--elite-accent, currentColor) 10%, var(--elite-surface, transparent)); } /* Zebra ONLY when the data is dense enough to need it. Opt in. */ .elite-table.is-zebra tbody tr:nth-child(even) td { background: var(--elite-surface-1); } .elite-table.is-zebra tbody tr:nth-child(even):hover td { background: var(--elite-surface-hover); } /* Numbers right, text left, tabular everywhere. Non-negotiable. */ .elite-table .num, .elite-table [data-type="number"] { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--elite-font-mono, ui-monospace, monospace); } .elite-table thead .num { text-align: right; } /* Apply .num to the AND to every in that column — an alignment that is right on some rows and left on others is worse than no alignment at all, and is the single most common table defect in review. */ /* Compact and comfortable, since one density never fits a dashboard and a report. */ .elite-table.is-compact tbody td { padding: 6px 10px; } .elite-table.is-compact thead th { padding: 7px 10px; } .elite-table.is-roomy tbody td { padding: 16px 18px; } /* A sticky first column, for a wide grid whose row label must survive the horizontal scroll. */ .elite-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--elite-surface, transparent); box-shadow: inset -1px 0 0 var(--elite-rule-1), inset 0 -1px 0 var(--elite-rule-1); } .elite-table thead .sticky-col { z-index: 3; background: var(--elite-surface-2); } /* The empty state is DESIGNED, and it carries a real next action. The words "No data" are never acceptable — they tell an operator nothing about whether the query is wrong, the filter is wrong, or the work is done. */ .elite-empty { display: grid; place-items: center; gap: 10px; padding: 56px 24px; text-align: center; color: var(--elite-ink-2, currentColor); } .elite-empty__mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--elite-accent, currentColor) 10%, transparent); box-shadow: inset 0 0 0 1px var(--elite-rule-highlight); color: var(--elite-accent, currentColor); } .elite-empty__title { font-size: var(--elite-t2); line-height: var(--elite-lh2); font-weight: 650; color: var(--elite-ink, currentColor); } .elite-empty__body { font-size: var(--elite-t5); line-height: var(--elite-lh5); max-width: 46ch; } /* Column header sort affordance. */ .elite-table th[aria-sort] { cursor: pointer; } .elite-table th[aria-sort]:hover { color: var(--elite-ink, currentColor); } .elite-table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--elite-accent, currentColor); } .elite-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--elite-accent, currentColor); } } /* /components */ /* ═══════════════════════════════════════════════════════════════════════════ * 16. REDUCED MOTION * * OUTSIDE every layer, deliberately. Unlayered rules beat layered ones no * matter what a product's Tailwind layer order is, so nothing a product * writes can accidentally out-specify an accessibility guarantee. * * The rule is REMOVE, not shorten. Collapsing every duration to 0.001ms makes * transitions instant but still LANDS the transform — an element that was * meant to travel 22px simply teleports there, and a marquee that was meant * to scroll snaps to -50% and sits there with half its content off screen. * So every family below has its animation removed and its transform reset. * ═════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Entrance: arrive, do not travel. */ .reveal, .reveal.in, .fade-up, .fade-up-lazy, .hero-rise, .hero-reveal, .flash-rise, .elite-sundown, .elite-stagger > *, .animate-count-up { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } /* Photographic: the plate holds still. Ken Burns on a stopped animation would freeze mid-scale and crop the subject out; removed outright. */ .hero-zoom, .hero-kenburns, .hero-breathe, .lens-float { animation: none !important; transform: none !important; } .hero-sweep, .hero-dust, .film-grain, .film-scanlines { display: none !important; } .hero-word { transform: none !important; } /* Texture and shimmer: the surface keeps its colour, loses its motion. */ .wood-grain, .film-bars > i, .shimmer-effect::before, .sheen, .metallic-sweep::after, .text-shimmer, .logo-shine::after, .glass-shimmer::before, .elite-heading-gradient.is-animated { animation: none !important; transform: none !important; } .shimmer-effect::before, .metallic-sweep::after, .logo-shine::after, .glass-shimmer::before { display: none !important; } /* The gradient text must still be filled, or the headline vanishes. */ .text-shimmer { background-position: 0 center; } /* Glow: hold the low end of the pulse. A glow is colour, not movement, so it stays — it simply stops breathing. */ .animate-glow-pulse, .animate-energy-pulse, .live-pulse, .record-pulse, .orb-pulse::after, .hero-corner { animation: none !important; } .orb-pulse::after { display: none !important; } /* Borders: the ring stays, the sweep stops, and the conic gradient is replaced with a static one — a frozen comet is a bright smear on one corner, which looks like a rendering bug rather than a border. */ .border-rotate::before, .border-neon::before, .border-flow::before, .border-follow::after, .border-pulse { animation: none !important; } .border-rotate::before, .border-neon::before { background: linear-gradient(135deg, color-mix(in srgb, var(--elite-trim) 50%, transparent), color-mix(in srgb, var(--elite-trim) 20%, transparent)) !important; filter: none !important; } .border-follow::after { display: none !important; } /* Ambient and solar: the light stays, the drift goes. */ .orbs > i, .blob-float, .gradient-mesh > i, .particle-field, .mote, .cyber-grid, .css-rays::before, .sun-presence > i { animation: none !important; transform: none !important; } .mote { display: none !important; } /* Furniture. A marquee under reduced motion is a static row: it stops AND wraps, so the second copy of the content is hidden rather than left hanging off the edge. */ .marquee > * { animation: none !important; transform: none !important; } .marquee > * ~ * { display: none !important; } .scroll-cue > span, .scroll-bob { animation: none !important; transform: none !important; } .scroll-cue > span { transform: translateY(40%) !important; } .hover-lift:hover, .hover-lift-lg:hover, .stat-card-trim:hover, .magnetic { transform: none !important; } .tab-crossfade { transition: none !important; } .tab-crossfade[data-state="exit"] { transform: none !important; } /* The pin collapses to one screen: nothing sticks, nothing scrubs. */ .pin-track { height: 100svh; } /* Data. The skeleton keeps a visible tint so a loading region is still legible as "loading" without a travelling band. */ .skeleton { animation: none !important; background: var(--elite-surface-2) !important; } .loadbar::before { animation: none !important; width: 100% !important; transform: none !important; opacity: .5; } .chip-live::before { animation: none !important; } /* HUD. */ .hud-scanline, .speed-trail, .speed-trail-rev, .bolt-motif { animation: none !important; } .hud-scanline, .speed-trail, .speed-trail-rev { display: none !important; } /* Buttons: state is kept, movement is removed. */ .btn:hover > svg:last-child:not(:first-child) { transform: none !important; } .btn:active { transform: none !important; } .btn::before { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * 17. THE ONE GLOBAL RULE * * `clip`, never `hidden`. Setting `overflow-x: hidden` on makes * the scroll container, which freezes `window.scrollY` at 0 — and every * scroll-driven thing in motion/ reads exactly that value. Reveals never * fire, the rail never fills, the pin never scrubs, and nothing in the * console says why. `clip` clips without creating a scroll container. * * Scoped to phones because that is where a fixed decoration usually causes * the sideways scroll this is fixing. * ═════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { html, body { overflow-x: clip; max-width: 100vw; } } /* ═══════════════════════════════════════════════════════════════════════════ * PARCEL DATA — the contract for the FDC elite kit. * * Register: "Verdigris and Brass". The palette is taken from the thing the * product actually is — a county records room. Oxidised steel map cabinets, * brass drawer pulls, a single lamp. It is deliberately nothing like the * amber-over-navy this store used to wear and nothing like any other FDC * product: the accent is a patina teal, the trim is brass, and the ground is * a cold near-black with a green cast rather than a blue one. * * CONTRAST, measured with the WCAG relative-luminance formula (contrast.py), * not eyeballed. Against --elite-surface #0D1518: * * ink #F2F7F6 17.06 : 1 * ink-2 #C0D0CE 11.56 : 1 <- body copy AND every field label * ink-3 #93A8A6 7.38 : 1 <- eyebrows, captions, table meta * accent #3ED9BE 10.44 : 1 * accent-2 #86E8C4 12.62 : 1 * trim #D9A441 8.21 : 1 * ok #52D98A 10.24 : 1 * warn #E8B23C 9.55 : 1 * bad #F2766B 6.66 : 1 * info #6BB6F0 8.42 : 1 * #04100D on accent (button label) 10.94 : 1 * * Every tier clears AA (4.5:1) and every tier a buyer reads clears 7:1. * ═════════════════════════════════════════════════════════════════════════ */ :root { /* ── grounds ─────────────────────────────────────────────────────────── */ --elite-bg: #070C0E; --elite-surface: #0D1518; --panel: #121C20; /* surface-1, named for the product's own CSS */ /* ── ink ─────────────────────────────────────────────────────────────── */ --elite-ink: #F2F7F6; --elite-ink-2: #C0D0CE; --elite-ink-3: #93A8A6; /* ── the accent: patina on old brass ─────────────────────────────────── */ --elite-accent: #3ED9BE; --elite-accent-2: #86E8C4; --elite-accent-deep: #0E8F7C; --elite-accent-on: #04100D; /* ── the trim: the drawer pulls ──────────────────────────────────────── */ --elite-trim: #D9A441; --elite-trim-on: #160F02; /* ── status, as colour AND glow (the kit pairs them on .chip) ────────── */ --elite-ok: #52D98A; --elite-warn: #E8B23C; --elite-bad: #F2766B; --elite-info: #6BB6F0; /* ── light and shade. A dark register wants a bright sheen. ──────────── */ --elite-sheen: color-mix(in srgb, #E8FFFA 88%, transparent); --elite-shade: color-mix(in srgb, #000 62%, transparent); --elite-rule: color-mix(in srgb, #9FC4BD 16%, transparent); /* ── shape: a scale, not one radius stamped on everything ────────────── */ --elite-radius: 18px; /* hero */ --elite-radius-card: 12px; --elite-radius-input: 8px; /* ── faces ───────────────────────────────────────────────────────────── */ --elite-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-head: "Space Grotesk", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* ── texture strength (dark register: full grain, half dust) ─────────── */ --elite-grain-opacity: .05; --elite-dust-opacity: .34; } /* ═══════════════════════════════════════════════════════════════════════════ * PARCEL DATA — the product layer on top of the elite kit. * * The kit supplies the level (motion, glow, trim, tables, chips). This file * supplies THIS product's personality: a cartographic register — a hairline * coordinate grid behind the ground, mono figures everywhere a number is a * fact, and section heads that read like sheet titles on a survey plat. * * Nothing here re-declares a colour. Every hue is one of the tokens. * ═════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; } body { margin: 0; background: var(--elite-bg); color: var(--elite-ink-2); font-family: var(--font-body); font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* THE global rule from the kit README: clip, never hidden. `overflow-x:hidden` on makes the scroll container, freezing window.scrollY at 0 — and every scroll-driven behaviour in motion.js reads exactly that value. */ @media (max-width: 767px) { html, body { overflow-x: clip; max-width: 100vw; } } img { max-width: 100%; display: block; } a { color: var(--elite-accent); text-underline-offset: 3px; } a:hover { color: var(--elite-accent-2); } ::selection { background: color-mix(in srgb, var(--elite-accent) 30%, transparent); color: var(--elite-ink); } :focus-visible { outline: 2px solid var(--elite-accent); outline-offset: 3px; border-radius: 4px; } /* ── the coordinate grid ─────────────────────────────────────────────────── A survey sheet's ground, at 3% so it reads as paper texture rather than as a graph. Fixed, so the page moves over it and the grid stays put — which is what makes it read as the sheet the content is drawn on. */ .plat-ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--elite-accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--elite-accent) 8%, transparent) 1px, transparent 1px); background-size: 56px 56px, 56px 56px; opacity: .34; mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 72%); } /* ── grain over the whole sheet ──────────────────────────────────────────── The kit's .film-grain is position:absolute, which grains one section. A survey sheet's tooth is a property of the paper, not of one panel, so this pins it to the viewport and lets the page travel under it. --elite-grain- opacity is .05 in this register: enough to break the flatness of a large dark ground, not enough to fur the type. It is behind everything and takes no pointer events, and the kit's reduced-motion block display:none's it outright rather than freezing it — a static noise plate is worse than none. ───────────────────────────────────────────────────────────────────────── */ .grain-ground { position: fixed; inset: -50%; z-index: 0; } /* A figure plate that drifts against the scroll. 4.5% is deliberately small: the plate sits inside a bordered figure, and anything larger pulls the image off its own frame. Driven by the one shared rAF pass, and skipped under 768px, where the address bar resizing the viewport turns depth into jitter. */ .figure--parallax { overflow: hidden; } .figure--parallax img { will-change: transform; } /* ── layout ───────────────────────────────────────────────────────────── */ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } .wrap-narrow { max-width: 840px; } section { position: relative; padding: 84px 0 0; } section:last-of-type { padding-bottom: 24px; } /* ── type ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-head); color: var(--elite-ink); letter-spacing: -.022em; line-height: 1.08; margin: 0 0 .55em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 1.35rem + 3.0vw, 3.9rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); font-weight: 650; } h3 { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.35rem); font-weight: 620; } h4 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 1.05em; } strong, b { color: var(--elite-ink); font-weight: 620; } em { font-style: italic; color: var(--elite-ink); } .lede { font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); color: var(--elite-ink-2); max-width: 64ch; } .fine { font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink-3); max-width: 74ch; } .mono { font-family: var(--elite-font-mono); font-variant-numeric: tabular-nums; } .muted { color: var(--elite-ink-3); } /* The eyebrow. A sheet title on a plat: mono, tracked, with a trim tick. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--elite-font-mono); font-size: var(--elite-t7); line-height: var(--elite-lh7); letter-spacing: .19em; text-transform: uppercase; color: var(--elite-ink-3); margin: 0 0 14px; } .eyebrow::before { content: ""; width: 22px; height: 1px; flex: none; background: var(--elite-trim); } .pill { display: inline-block; font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .17em; text-transform: uppercase; color: var(--elite-accent); padding: 6px 14px; border-radius: var(--elite-radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-accent) 34%, transparent); background: color-mix(in srgb, var(--elite-accent) 7%, transparent); } .grad { background: linear-gradient(102deg, var(--elite-accent) 0%, var(--elite-accent-2) 48%, var(--elite-trim) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── the back link ────────────────────────────────────────────────────── */ .back { /* Its own line. As an inline-flex it sat beside the eyebrow that follows it and the eyebrow's leading trim tick ran straight through the link text. */ display: flex; width: fit-content; align-items: center; gap: 9px; font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .13em; text-transform: uppercase; color: var(--elite-ink-3); text-decoration: none; padding: 9px 0; } .back:hover { color: var(--elite-accent); } .back svg { width: 13px; height: 13px; transition: transform 220ms var(--elite-ease); } .back:hover svg { transform: translateX(-3px); } /* ── masthead ─────────────────────────────────────────────────────────── */ .mast { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--elite-bg) 82%, transparent); box-shadow: inset 0 -1px 0 var(--elite-rule-1); } .mast__in { max-width: 1120px; margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; gap: 18px; } .mast__logo { font-family: var(--elite-font-mono); font-size: var(--elite-t6); letter-spacing: .15em; text-transform: uppercase; color: var(--elite-ink); text-decoration: none; white-space: nowrap; } .mast__logo b { color: var(--elite-accent); font-weight: 500; } .mast__nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; } .mast__nav a { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .13em; text-transform: uppercase; color: var(--elite-ink-3); text-decoration: none; } .mast__nav a:hover { color: var(--elite-accent); } @media (max-width: 640px) { .mast__nav a:not(.is-key) { display: none; } } /* ── hero: full-bleed plate with the type over it ─────────────────────── */ .hero { position: relative; isolation: isolate; overflow: hidden; } .hero__plate { position: absolute; inset: -8% 0 0; z-index: -2; width: 100%; height: 116%; object-fit: cover; opacity: .5; } .hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--elite-bg) 62%, transparent) 0%, color-mix(in srgb, var(--elite-bg) 74%, transparent) 46%, var(--elite-bg) 100%), radial-gradient(ellipse 70% 60% at 18% 30%, color-mix(in srgb, var(--elite-accent) 12%, transparent), transparent 70%); } .hero__in { padding: 104px 0 68px; } .hero--tall .hero__in { padding: 132px 0 84px; } .hero h1 { max-width: 19ch; } .hero .lede { color: var(--elite-ink-2); } /* ── the pull-date seal — the differentiator, given its own object ────── */ .seal { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: start; padding: 18px 22px; margin: 26px 0 0; border-radius: var(--elite-radius-card); background: color-mix(in srgb, var(--elite-ok) 8%, var(--elite-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-ok) 34%, transparent); max-width: 74ch; } .seal__date { grid-column: 1; grid-row: 1 / span 2; font-family: var(--elite-font-mono); font-variant-numeric: tabular-nums; font-size: var(--elite-t1); color: var(--elite-ok); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; padding-right: 18px; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--elite-ok) 26%, transparent); } .seal__label { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .16em; text-transform: uppercase; color: var(--elite-ok); } .seal__body { font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink-2); } .seal__body b { color: var(--elite-ink); } @media (max-width: 560px) { .seal { grid-template-columns: 1fr; } .seal__date { grid-row: auto; box-shadow: none; padding: 0; } } /* ── stats ────────────────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 30px 0 0; } .stat { padding: 20px 22px; border-radius: var(--elite-radius-card); background: linear-gradient(180deg, var(--elite-surface-1), var(--elite-surface)); box-shadow: inset 0 0 0 1px var(--elite-rule-1), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 6%, transparent); transition: box-shadow 300ms var(--elite-ease), transform 300ms var(--elite-ease); } .stat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-accent) 34%, transparent), 0 18px 34px -22px var(--elite-shade); } .stat .n { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); letter-spacing: -.03em; line-height: 1.05; color: var(--elite-ink); font-variant-numeric: tabular-nums; } .stat .n .u { color: var(--elite-accent); } .stat .l { font-family: var(--elite-font-mono); font-size: var(--elite-t7); line-height: var(--elite-lh7); letter-spacing: .13em; text-transform: uppercase; color: var(--elite-ink-3); margin-top: 7px; } .stat .s { font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink-2); margin-top: 9px; } .stat.is-key .n { color: var(--elite-accent); } /* ── panels ───────────────────────────────────────────────────────────── */ .panel { padding: 24px 26px; border-radius: var(--elite-radius-card); background: linear-gradient(180deg, var(--elite-surface-1), var(--elite-surface)); box-shadow: inset 0 0 0 1px var(--elite-rule-1), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 5%, transparent); } .panel > :last-child { margin-bottom: 0; } .panel h3 { color: var(--elite-accent); } .panel--trim { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 40%, transparent); } .panel--warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-warn) 42%, transparent); background: color-mix(in srgb, var(--elite-warn) 6%, var(--elite-surface)); } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .two.is-top { align-items: start; } .three { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; } @media (max-width: 780px) { .two { grid-template-columns: 1fr; } } /* ── the bar list: label left, figure right, share drawn underneath ───── */ ul.bars { list-style: none; margin: 0; padding: 0; } ul.bars li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 14px; padding: 9px 0 10px; position: relative; box-shadow: inset 0 -1px 0 var(--elite-rule-1); font-size: var(--elite-t4); line-height: var(--elite-lh4); } ul.bars li:last-child { box-shadow: none; } ul.bars li > span { color: var(--elite-ink-2); } ul.bars li > b { font-family: var(--elite-font-mono); font-variant-numeric: tabular-nums; color: var(--elite-ink); font-weight: 500; } /* The share bar is drawn from --w, set inline by the generator. It sits on the bottom hairline rather than in its own row, so a list of eight reads as one object instead of sixteen. */ ul.bars li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: var(--w, 0%); background: linear-gradient(90deg, var(--elite-accent), color-mix(in srgb, var(--elite-accent) 20%, transparent)); box-shadow: 0 0 8px color-mix(in srgb, var(--elite-accent) 45%, transparent); } ul.bars.is-trim li::after { background: linear-gradient(90deg, var(--elite-trim), transparent); box-shadow: none; } /* ── the field manifest: what is in the file, what is not ─────────────── */ .fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .fields li { display: grid; grid-template-columns: auto minmax(0, 9.5rem) minmax(0, 1fr); align-items: baseline; gap: 6px 12px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--elite-rule-1); font-size: var(--elite-t4); } .fields li:last-child { box-shadow: none; } .fields .fname { font-family: var(--elite-font-mono); font-size: var(--elite-t6); color: var(--elite-ink); letter-spacing: .02em; } .fields .fdesc { color: var(--elite-ink-3); font-size: var(--elite-t5); text-align: left; } @media (max-width: 720px) { .fields li { grid-template-columns: auto 1fr; } .fields .fdesc { grid-column: 2 / -1; } } /* ── buy panel ────────────────────────────────────────────────────────── */ .buy-panel { margin-top: 26px; padding: 30px 32px; border-radius: var(--elite-radius-hero); background: radial-gradient(ellipse at 12% -20%, color-mix(in srgb, var(--elite-accent) 15%, transparent) 0%, transparent 58%), linear-gradient(180deg, var(--elite-surface-2), var(--elite-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-accent) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 7%, transparent), 0 30px 60px -34px var(--elite-shade); } .buy-panel h2 { margin-top: 0; } .btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--elite-radius-input); font-family: var(--font-head); font-weight: 620; font-size: .95rem; text-decoration: none; border: 0; cursor: pointer; } .btn-primary { background: var(--elite-accent); color: var(--elite-accent-on); } .btn-primary:hover { color: var(--elite-accent-on); } .btn-ghost { color: var(--elite-ink); box-shadow: inset 0 0 0 1px var(--elite-rule-strong); } .btn-ghost:hover { color: var(--elite-ink); } .btn-trim { color: var(--elite-trim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 46%, transparent); } /* ── price cards ──────────────────────────────────────────────────────── */ .buys { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 16px; } /* The milled ring, composed rather than borrowed. The kit's .inner-ring sets * box-shadow outright, so putting it on a card that already draws its hairline * as an inset shadow deletes that hairline. The three insets are the same three * the kit describes - the trim ring, a highlight on the top edge, a shade on * the bottom - written here where they can sit beside the card's own shadow * instead of replacing it. Not a border: a border would grow the box by 2px and * ripple every other card in the grid. */ .buycard { display: flex; flex-direction: column; padding: 26px; border-radius: var(--elite-radius-card); background: linear-gradient(180deg, var(--elite-surface-1), var(--elite-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 7%, transparent), inset 0 -1px 0 var(--elite-shade), 0 20px 40px -26px var(--elite-shade); transition: box-shadow 420ms var(--elite-ease-editorial), transform 420ms var(--elite-ease-editorial); } .buycard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-trim) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 10%, transparent), inset 0 -1px 0 var(--elite-shade), 0 26px 52px -26px var(--elite-shade); } /* The key figure carries the glow. Set --elite-glow on the element, never * globally: the kit ships ONE glow keyframe that reads that property, and a * global value would breathe every glowing thing on the page in unison. */ .stat.is-key { --elite-glow: var(--elite-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-accent) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 7%, transparent), 0 0 44px -18px color-mix(in srgb, var(--elite-glow) 70%, transparent); } .stat.is-key:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-accent) 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--elite-sheen) 10%, transparent), 0 0 60px -16px color-mix(in srgb, var(--elite-glow) 85%, transparent); } .buycard .price { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; letter-spacing: -.035em; color: var(--elite-ink); font-variant-numeric: tabular-nums; } .buycard .price .mo { font-size: 1rem; color: var(--elite-ink-3); } .buycard .per { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .13em; text-transform: uppercase; color: var(--elite-ink-3); margin: 4px 0 15px; } .buycard p { color: var(--elite-ink-2); font-size: var(--elite-t5); line-height: var(--elite-lh5); flex: 1; } .buycard .btn { margin-top: 16px; justify-content: center; } /* ── the place grid ───────────────────────────────────────────────────── */ .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-top: 26px; } .ccard { display: flex; flex-direction: column; gap: 3px; padding: 15px 17px; border-radius: var(--elite-radius-card); text-decoration: none; background: var(--elite-surface); box-shadow: inset 0 0 0 1px var(--elite-rule-1); transition: box-shadow 200ms var(--elite-ease), transform 200ms var(--elite-ease); } .ccard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-accent) 45%, transparent); } .ccard b { font-family: var(--font-head); font-size: 1rem; color: var(--elite-ink); font-weight: 620; } .ccard span { font-family: var(--elite-font-mono); font-variant-numeric: tabular-nums; font-size: var(--elite-t6); color: var(--elite-ink-3); } .ccard .hi { color: var(--elite-accent); } /* ── infographics ─────────────────────────────────────────────────────── */ .figure { margin: 34px 0 0; } .figure__cap { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .14em; text-transform: uppercase; color: var(--elite-ink-3); margin-top: 12px; } /* The mono, uppercase, .14em caption is a LABEL treatment. It reads at four * words and stops reading at forty: tracking that wide turns a sentence into a * row of separate items, and 11px uppercase has no ascender/descender profile * left for a reader to skim on. A caption that carries an argument and a * verified figure is body copy, so it gets the body face, sentence case, 15px * with its paired line-height, and ink-2 (12.3:1 on the page ground) instead of * ink-3. Same element, same slot, two registers - pick by length. */ .figure__cap--prose { font-family: var(--font-body); font-size: var(--elite-t4); line-height: var(--elite-lh4); letter-spacing: normal; text-transform: none; color: var(--elite-ink-2); max-width: 62ch; margin-top: 14px; } .figure__cap--prose b, .figure__cap--prose strong { color: var(--elite-ink); font-variant-numeric: tabular-nums; font-weight: 600; } .figure img { border-radius: var(--elite-radius-card); box-shadow: inset 0 0 0 1px var(--elite-rule-1); } /* Record anatomy — one row of the file, exploded. Built in HTML, not generated as an image: a model that renders type gets the type wrong, and a column name a buyer is about to pay for cannot be approximately right. */ .anatomy { display: grid; gap: 10px; } .anatomy__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 1px; border-radius: var(--elite-radius-input); overflow: hidden; box-shadow: inset 0 0 0 1px var(--elite-rule-1); background: var(--elite-rule-1); } .anatomy__cell { background: var(--elite-surface); padding: 11px 13px; min-width: 0; } .anatomy__k { font-family: var(--elite-font-mono); font-size: 9.5px; line-height: 1.7; letter-spacing: .13em; text-transform: uppercase; color: var(--elite-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anatomy__v { font-family: var(--elite-font-mono); font-size: var(--elite-t6); line-height: var(--elite-lh6); color: var(--elite-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anatomy__n { font-size: var(--elite-t5); color: var(--elite-ink-3); } /* The flow: five steps with a rule running through them. */ .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 0; position: relative; } .flow__step { position: relative; padding: 26px 18px 20px; } .flow__step::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--elite-trim) 55%, transparent), color-mix(in srgb, var(--elite-trim) 22%, transparent)); } .flow__step:first-child::before { left: 50%; } .flow__step:last-child::before { right: 50%; } .flow__dot { position: absolute; top: 8px; left: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--elite-trim); box-shadow: 0 0 0 4px color-mix(in srgb, var(--elite-trim) 16%, transparent); } .flow__k { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .15em; text-transform: uppercase; color: var(--elite-trim); text-align: center; } .flow__t { font-family: var(--font-head); font-weight: 620; color: var(--elite-ink); text-align: center; margin: 8px 0 6px; font-size: 1rem; } .flow__d { font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink-3); text-align: center; } /* ── the pinned statement ─────────────────────────────────────────────── */ .pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; } .pin-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .58; } .pin-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, color-mix(in srgb, var(--elite-bg) 88%, transparent) 78%), linear-gradient(180deg, var(--elite-bg) 0%, transparent 22%, transparent 78%, var(--elite-bg) 100%); } .pin-copy { max-width: min(90vw, 760px); text-align: center; padding: 0 24px; will-change: transform; } .pin-copy .k { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .2em; text-transform: uppercase; color: var(--elite-trim); } .pin-copy .big { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.1rem); letter-spacing: -.035em; line-height: 1.02; color: var(--elite-ink); margin: 14px 0 16px; } .pin-copy p { color: var(--elite-ink-2); max-width: 46ch; margin-inline: auto; } /* ── marquee band ─────────────────────────────────────────────────────── */ .band { margin-top: 68px; padding: 16px 0; box-shadow: inset 0 1px 0 var(--elite-rule-1), inset 0 -1px 0 var(--elite-rule-1); background: color-mix(in srgb, var(--elite-accent) 3%, transparent); } .band .marquee > * { gap: 0; } .band a { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 22px; text-decoration: none; white-space: nowrap; font-family: var(--elite-font-mono); font-size: var(--elite-t6); letter-spacing: .06em; color: var(--elite-ink-2); } .band a:hover { color: var(--elite-accent); } .band a i { font-style: normal; color: var(--elite-ink-3); font-variant-numeric: tabular-nums; } .band a::after { content: "·"; color: var(--elite-ink-3); margin-left: 22px; } /* ── the sample table ─────────────────────────────────────────────────── */ .sample-note { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 14px; font-size: var(--elite-t5); color: var(--elite-ink-3); } /* ── six real rows: the CSS-only state tabs ─────────────────────────────── * Radios, not buttons and not JavaScript. The panel that is open is decided by * :checked, so the page renders correct with scripting off, with scripting * broken, and in the half-second before a script would have run. The tabs are * focusable and operable with the arrow keys for free, because that is what a * radio group already is. * * The trim underline is on a pseudo element that is always present and scales * from 0, so the strip's box never changes and the row of labels cannot shift * by a pixel when the selection moves. * ───────────────────────────────────────────────────────────────────────── */ .rowtabs { position: relative; margin-top: 30px; padding: 18px 18px 22px; border-radius: var(--elite-radius-card); background: color-mix(in srgb, var(--elite-surface) 62%, transparent); box-shadow: inset 0 0 0 1px var(--elite-rule-1); } /* Registration ticks, in brass. On a plat sheet these are the marks that say the sheet is registered and can be trusted against the ground; on this panel they say it about the rows. Four corners needs two real elements, because ::before and ::after only ever give you two. */ .rowtabs > .tick { z-index: 3; } .rowtabs__r { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .rowtabs__strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 18px; border-radius: var(--elite-radius-card); background: var(--elite-surface-1); box-shadow: inset 0 0 0 1px var(--elite-rule-1); } .rowtabs__t { position: relative; cursor: pointer; user-select: none; flex: 1 1 auto; min-width: 148px; padding: 11px 16px 12px; border-radius: var(--elite-radius-input); font-family: var(--font-head); font-weight: 600; font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink-2); /* 11.56:1 at rest, never grey */ transition: color 160ms var(--elite-ease), background-color 160ms var(--elite-ease); } .rowtabs__t:hover { color: var(--elite-ink); background: var(--elite-surface-hover); } .rowtabs__t i { display: block; margin-top: 3px; font-style: normal; font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .06em; font-variant-numeric: tabular-nums; /* ink-2, not ink-3. This is the parcel count for the state, which is a figure a buyer reads and weighs, and ink-3 on surface-1 measures 6.75:1 — over AA but under the 7:1 this page holds itself to for read numbers. ink-2 on surface-1 is 10.57:1. */ color: var(--elite-ink-2); } .rowtabs__t::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--elite-trim); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--elite-ease); } /* The panels. Hidden by attribute-free display so a closed panel is out of the accessibility tree as well as out of sight. */ .rowtabs__p { display: none; } #rt-florida:checked ~ .rowtabs__strip .rowtabs__t[for="rt-florida"], #rt-connecticut:checked ~ .rowtabs__strip .rowtabs__t[for="rt-connecticut"], #rt-vermont:checked ~ .rowtabs__strip .rowtabs__t[for="rt-vermont"], #rt-new-jersey:checked ~ .rowtabs__strip .rowtabs__t[for="rt-new-jersey"] { color: var(--elite-ink); background: var(--elite-surface-2); } #rt-florida:checked ~ .rowtabs__strip .rowtabs__t[for="rt-florida"]::after, #rt-connecticut:checked ~ .rowtabs__strip .rowtabs__t[for="rt-connecticut"]::after, #rt-vermont:checked ~ .rowtabs__strip .rowtabs__t[for="rt-vermont"]::after, #rt-new-jersey:checked ~ .rowtabs__strip .rowtabs__t[for="rt-new-jersey"]::after { transform: scaleX(1); } #rt-florida:checked ~ .rowtabs__p--florida, #rt-connecticut:checked ~ .rowtabs__p--connecticut, #rt-vermont:checked ~ .rowtabs__p--vermont, #rt-new-jersey:checked ~ .rowtabs__p--new-jersey { display: block; } /* Keyboard focus has to be visible on a label whose input is off-screen. */ #rt-florida:focus-visible ~ .rowtabs__strip .rowtabs__t[for="rt-florida"], #rt-connecticut:focus-visible ~ .rowtabs__strip .rowtabs__t[for="rt-connecticut"], #rt-vermont:focus-visible ~ .rowtabs__strip .rowtabs__t[for="rt-vermont"], #rt-new-jersey:focus-visible ~ .rowtabs__strip .rowtabs__t[for="rt-new-jersey"] { outline: 2px solid var(--elite-accent); outline-offset: 2px; color: var(--elite-ink); } .rowtabs__meta { font-size: var(--elite-t6); line-height: var(--elite-lh6); color: var(--elite-ink-2); /* provenance is read, so 11.56:1 */ margin-bottom: 12px; } .rowtabs__meta code { font-family: var(--elite-font-mono); font-size: .94em; color: var(--elite-accent); padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--elite-accent) 10%, transparent); } .rowtabs__note { margin: 14px 0 0; color: var(--elite-ink-2); max-width: 84ch; } .rowtabs__cta { margin-top: 18px; } /* The table itself is the kit's. Two product rules on top: the parcel number is the row's identity so it holds the horizontal scroll, and it is set in the mono face because an APN is a code, not a word. */ .rowtabs .elite-table-wrap { max-height: min(62vh, 560px); } .rowtabs .elite-table tbody td:first-child, .rowtabs .elite-table thead th:first-child { font-family: var(--elite-font-mono); font-size: var(--elite-t6); white-space: nowrap; } .rowtabs .elite-table tbody td:last-child { white-space: nowrap; } @media (max-width: 620px) { .rowtabs__t { min-width: 0; flex: 1 1 44%; padding: 10px 12px; } .rowtabs__t::after { left: 12px; right: 12px; } } /* ── the ROI calculator ───────────────────────────────────────────────── */ .calc { display: grid; grid-template-columns: 1fr .9fr; gap: 24px; } @media (max-width: 860px) { .calc { grid-template-columns: 1fr; } } .field { margin-bottom: 22px; } .field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .12em; text-transform: uppercase; color: var(--elite-ink-2); /* never grey-on-dark for a field label */ margin-bottom: 9px; } .field label b { color: var(--elite-ink); font-size: .98rem; letter-spacing: 0; font-variant-numeric: tabular-nums; } input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--elite-surface-2); outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--elite-accent); cursor: pointer; box-shadow: 0 0 12px color-mix(in srgb, var(--elite-accent) 55%, transparent); } input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--elite-accent); cursor: pointer; } .out { padding: 26px; border-radius: var(--elite-radius-card); background: color-mix(in srgb, var(--elite-warn) 7%, var(--elite-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-warn) 32%, transparent); } .out .big { font-family: var(--font-head); font-weight: 700; font-size: 2.8rem; letter-spacing: -.035em; color: var(--elite-warn); line-height: 1; font-variant-numeric: tabular-nums; } .out .row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--elite-rule-1); font-size: var(--elite-t5); color: var(--elite-ink-2); } .out .row:last-child { box-shadow: none; } .out .row span:last-child { font-family: var(--elite-font-mono); font-variant-numeric: tabular-nums; color: var(--elite-ink); } /* ── the pain / solution cards ────────────────────────────────────────── */ .pain { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 26px 28px; border-radius: var(--elite-radius-card); background: color-mix(in srgb, var(--elite-bad) 5%, var(--elite-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--elite-bad) 24%, transparent); } @media (max-width: 700px) { .pain { grid-template-columns: 1fr; } } .pain .idx { font-family: var(--elite-font-mono); font-size: 1.5rem; font-weight: 600; color: color-mix(in srgb, var(--elite-bad) 74%, transparent); line-height: 1; font-variant-numeric: tabular-nums; } .pain h3 { color: var(--elite-ink); } .lvl { margin-top: 15px; padding-left: 16px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--elite-bad) 34%, transparent); } .lvl .tag { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .15em; text-transform: uppercase; color: var(--elite-bad); } .lvl p { margin: 5px 0 0; color: var(--elite-ink-2); font-size: var(--elite-t4); line-height: var(--elite-lh4); } .ref { font-family: var(--elite-font-mono); font-size: 9.5px; color: var(--elite-ink-3); vertical-align: super; text-decoration: none; padding: 0 1px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--elite-ink-3) 55%, transparent); } .ref:hover { color: var(--elite-accent); } /* ── footer ───────────────────────────────────────────────────────────── */ footer { margin-top: 76px; padding: 34px 0 56px; box-shadow: inset 0 1px 0 var(--elite-rule-1); font-size: var(--elite-t5); line-height: var(--elite-lh5); color: var(--elite-ink-3); } footer p { max-width: 82ch; } footer a { color: var(--elite-ink-2); } footer a:hover { color: var(--elite-accent); } .srcs { padding-left: 0; list-style: none; columns: 2; column-gap: 36px; margin: 14px 0 0; } @media (max-width: 760px) { .srcs { columns: 1; } } .srcs li { margin-bottom: 9px; break-inside: avoid; display: grid; grid-template-columns: 26px 1fr; gap: 8px; } .srcs .sn { font-family: var(--elite-font-mono); font-variant-numeric: tabular-nums; color: var(--elite-trim); font-size: var(--elite-t6); } .footlinks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; } .footlinks a { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } /* ── legal pages ──────────────────────────────────────────────────────── */ .legal h2 { font-size: 1.28rem; margin: 34px 0 10px; color: var(--elite-accent); } .legal p, .legal li { color: var(--elite-ink-2); font-size: var(--elite-t3); line-height: var(--elite-lh3); } .legal table { width: 100%; border-collapse: collapse; margin: 14px 0 24px; font-size: var(--elite-t5); } .legal th, .legal td { text-align: left; padding: 10px 12px; box-shadow: inset 0 -1px 0 var(--elite-rule-1); vertical-align: top; } .legal th { font-family: var(--elite-font-mono); font-size: var(--elite-t7); letter-spacing: .13em; text-transform: uppercase; color: var(--elite-ink-3); font-weight: 400; } .legal td { color: var(--elite-ink-2); } /* ── skip link ────────────────────────────────────────────────────────── */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--elite-accent); color: var(--elite-accent-on); padding: 10px 16px; border-radius: 0 0 8px 0; font-family: var(--elite-font-mono); font-size: var(--elite-t6); } .skip:focus { left: 0; color: var(--elite-accent-on); } /* Cinematic terrain study: imagery remains visible, with source claims in HTML. */ .hero--cinematic { min-height: 790px; min-height: min(940px,100svh); } .hero--cinematic .hero__plate { opacity: 1; inset: 0; height: 100%; object-position: 65% center; } .hero--cinematic .hero__scrim { background: linear-gradient(90deg,rgba(7,20,20,.91) 0%,rgba(7,20,20,.73) 32%,rgba(7,20,20,.12) 75%),linear-gradient(0deg,var(--elite-bg),transparent 38%); } .hero--cinematic .hero__in { padding: clamp(70px,9vw,150px) 0 28px; } .hero--cinematic h1 { font-size:clamp(3.2rem,6.6vw,6.5rem);line-height:1.02;letter-spacing:-.055em;max-width:12ch;margin:20px 0 25px; } .hero--cinematic .lede { max-width:43ch;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--elite-ink); } .cinema-kicker { font: .7rem var(--elite-font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--elite-trim,var(--elite-accent));margin-top:35px; } .cinema-index { display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:65px;padding-top:22px;border-top:1px solid var(--elite-rule-1);max-width:760px; } .cinema-index a { display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--elite-ink);font-size:.88rem; } .cinema-index a span { font:.64rem var(--elite-font-mono);color:var(--elite-accent); } .cinema-index a:hover { color:var(--elite-accent); } .cinema-caption { font:.62rem var(--elite-font-mono);color:var(--elite-ink-3);margin:25px 0 0; } .collection-metrics { padding:15px 0 50px; } .collection-metrics .stats { margin-top:0; } .delivery-atlas { border:1px solid var(--elite-rule-1);border-radius:20px;overflow:hidden;margin-top:35px;background:linear-gradient(130deg,var(--elite-surface-1),var(--elite-bg));box-shadow:inset 0 1px 0 var(--elite-rule-1); } .delivery-atlas__head,.delivery-atlas__foot { padding:23px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--elite-rule-1); } .delivery-atlas__head>.mono { font-size:.7rem;color:var(--elite-ink-3); } .delivery-route { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:40px 30px 30px;margin:0;gap:32px; } .delivery-route li { position:relative; } .delivery-route li:not(:last-child)::after { content:'→';position:absolute;top:7px;right:0;color:var(--elite-accent); } .delivery-route__number { display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--elite-accent);border-radius:50%;font:.85rem var(--elite-font-mono);color:var(--elite-accent);margin-bottom:25px; } .delivery-route h3,.delivery-destination h3 { font-size:1.1rem; } .delivery-route p,.delivery-destination p { color:var(--elite-ink-2);font-size:.87rem;line-height:1.7; } .delivery-fork { margin:0 30px 32px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;border-top:1px solid var(--elite-rule-1);padding-top:30px; } .delivery-fork__origin { display:flex;flex-direction:column;justify-content:center;gap:10px; } .delivery-fork__origin strong { color:var(--elite-ink);font-size:1.1rem;max-width:15ch; } .delivery-destination { display:flex;gap:15px;padding:22px;border:1px solid var(--elite-rule-1);border-radius:12px;background:var(--elite-surface); } .delivery-destination__symbol { color:var(--elite-accent);font:1.7rem var(--elite-font-mono); } .delivery-destination .eyebrow { font-size:.58rem; } .delivery-destination h3 { margin:9px 0; } .delivery-destination p { margin:0; } .delivery-atlas__foot { border-bottom:0;border-top:1px solid var(--elite-rule-1);font-size:.8rem; } .delivery-atlas__foot a { white-space:nowrap; } @media(max-width:760px) { .hero--cinematic { min-height:auto; } .hero--cinematic .hero__plate { object-position:60% center; } .hero--cinematic .hero__scrim { background:linear-gradient(90deg,rgba(7,20,20,.9),rgba(7,20,20,.5)),linear-gradient(0deg,var(--elite-bg),transparent 80%); } .cinema-index { margin-top:40px;gap:15px 22px; } .delivery-route,.delivery-fork { grid-template-columns:1fr; } .delivery-route { gap:26px; } .delivery-route li { padding-left:60px; } .delivery-route__number { position:absolute;left:0;top:0; } .delivery-route li:not(:last-child)::after { content:none; } .delivery-atlas__head,.delivery-atlas__foot { padding:20px;flex-wrap:wrap; } .delivery-fork__origin strong { max-width:none; } } /* ── the buy form and the order panel (added 2026-09-14) ─────────────────── */ .buyform{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin-top:4px} .buyform label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--elite-ink-2);min-width:min(100%,320px)} .buyform select{min-height:46px;padding:0 40px 0 14px;border-radius:var(--elite-radius-input,12px);background:color-mix(in srgb,var(--elite-surface) 94%,transparent);color:var(--elite-ink);border:1px solid var(--elite-rule,rgba(255,255,255,.12));font:inherit;font-size:.98rem;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b39a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px} .buyform select:focus-visible{outline:2px solid var(--elite-accent);outline-offset:2px} .buyform .btn{min-height:46px} .buyform + .fine{margin-top:12px} .order-panel{max-width:74ch} .order-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 18px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--elite-rule,rgba(255,255,255,.1))} .order-facts div{display:flex;flex-direction:column;gap:3px} .order-facts dt{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--elite-ink-3)} .order-facts dd{margin:0;color:var(--elite-ink);font-size:.98rem;word-break:break-word} .demo-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px}