/* ============================================================ HC WEB LABS — heather-cooper.com · V2 FOUNDATION Built on: Neon Glow Style Guide v2 STATUS (building section by section): ✓ Tokens / reset / base / layout · nav header + mobile menu ◐ Hero · Services · Portfolio (scroll-window cards + case modal) · About (coin-flip photo reveal) · Review console — all BUILT; COPY + SCREENSHOT PASSES PENDING (hero copy = Claude in Heather's voice — HER SEO PASS FINAL) ● Footer — floating chip console (straddles the seam 768+) over a 3-zone glass basement: logo / Reach
/ Resources; legal bar = (c) left, Legal nav right ⚑ BRAND DIRECTION: all avenues — custom code, CMS, page builders — whatever serves the client ✗ Own pages, footer-linked (OFF the homepage): Connect, Pricing, Paperwork, FAQ, Standards COMPATIBILITY CONTRACT (audited): - Hard floor: early-2022 engines — Safari/iOS 15.4+, Chrome 99+ (incl. 109 LTS on Win7/8.1), Firefox 97+/ESR. (@layer is the floor-setter: below it, layered styles drop entirely.) - Graceful above the floor: scroll-driven anims -> JS fallback; @starting-style/allow-discrete -> instant open/close; :has() lock -> .menu-open JS class; missing -> .no-dialog static row; oklch -> hex; dvh -> vh; scrollbar-gutter -> no-op on overlay-scrollbar platforms (which never had the shift). - Accepted perf exception: the bar's condense animates height — a bounded 140px-range layout animation, chosen over transform tricks that would distort the bar's content. Rules of the house: - Mobile-first from 320px; min-width queries ONLY (480/640/768/1024/1280/1440) - No inline style attributes, ever (nonce CSP won't allow them) - All colors hex-first + oklch override; gradients are the 4 tokens - Fluid type + spacing; icon sizes from the --icon scale - transform/opacity-only animation; everything motion-gated - Never style the FA for layout (FA is unlayered, it wins) ============================================================ */ @layer reset, base, layout, components, sections, utilities; /* ---------------- TOKENS (custom props only — unlayered on purpose) ---------------- */ :root { /* Accents — HEX ONLY here. Custom properties accept any token stream at parse time, so the classic "hex first, modern second" double-declaration NEVER falls back — the later oklch line wins the cascade even in browsers that can't render oklch, and every var() use becomes invalid-at-computed-value-time (IACVT: the property collapses to inherit/initial, NOT the hex). The oklch overrides live in the @supports block AFTER this :root — same specificity, later in the sheet, applied only where supported. (oklch: Chrome 111+/FF 113+/Safari 15.4+ — the contract floor's Chrome 99-110 incl. 109 LTS, and FF 97-112, take the hex.) */ --neon-pink: #ff2e97; --neon-purple: #C74AC0; --neon-aqua: #73FDFC; --neon-yellow: #FFD700; /* Glass tint — the coin backdrop's blue (purple sibling retired with the old single-gradient glow; the pools use the soft set) */ --glass-blue: #3b82f6; /* Soft alphas (ported) — every accent's paired fill + hairline. The full pair set is kept as a SYSTEM even where a -line side is currently unconsumed: components reach for these in pairs. */ --pink-soft: rgba(255, 46, 151, 0.13); --pink-line: rgba(255, 46, 151, 0.5); --purple-soft: rgba(199, 74, 192, 0.14); --purple-line: rgba(199, 74, 192, 0.5); --aqua-soft: rgba(115, 253, 252, 0.11); --aqua-line: rgba(115, 253, 252, 0.5); --yellow-soft: rgba(255, 215, 0, 0.12); --yellow-line: rgba(255, 215, 0, 0.5); /* Full-strength neon glow stacks (ported) — one token per accent */ --glow-aqua: 0 0 7px var(--neon-aqua), 0 0 21px rgba(115, 253, 252, 0.6), 0 0 42px rgba(115, 253, 252, 0.3); --glow-pink: 0 0 7px var(--neon-pink), 0 0 21px rgba(255, 46, 151, 0.6), 0 0 42px rgba(255, 46, 151, 0.3); --glow-purple: 0 0 7px var(--neon-purple), 0 0 21px rgba(199, 74, 192, 0.6), 0 0 42px rgba(199, 74, 192, 0.3); --glow-yellow: 0 0 7px var(--neon-yellow), 0 0 21px rgba(255, 215, 0, 0.55), 0 0 42px rgba(255, 215, 0, 0.28); /* Glass surface kit (ported) */ /* SOLID-FIRST GLASS: 0.42 relied on backdrop-filter for all its substance — but blur is a compositor effect that lags first paint, flashing every card transparent before the frost lands (field-caught). At 0.68 the film stands alone as a dark panel pre-blur; the frost arrives as enhancement, not structure. */ --glass-bg: rgba(27, 20, 56, 0.68); --glass-border: rgba(182, 175, 214, 0.16); --glass-blur: 22px; /* Surfaces & text */ --bg-base: #0e0a1f; --bg-deep: #1a1030; --text-primary: #f2effc; /* ported: softer than pure white — less glare on the void */ --text-secondary: #e8e8f5; --text-muted: #c9c3e4; /* lightened from #b6afd6 — body copy read too dim on inner pages and the footer (field-caught) */ /* Gradients — the only four in the system */ --grad-cta: linear-gradient(135deg, var(--neon-pink), var(--neon-purple)); --grad-hero: linear-gradient(90deg, var(--neon-yellow) 20%, var(--neon-pink) 50%, var(--neon-purple) 80%); --grad-separator: linear-gradient(90deg, transparent 0%, var(--neon-yellow) 25%, var(--neon-pink) 50%, var(--neon-purple) 75%, transparent 100%); /* Brand gradient: the hero stops rotated to 135deg with tuned positions (10/50/90) — the tag's diagonal, now shared by the social icons. Distinct from --grad-hero, which stays 90deg. */ --grad-brand: linear-gradient(135deg, var(--neon-yellow) 10%, var(--neon-pink) 50%, var(--neon-purple) 90%); /* CTA-deep: the CTA gradient tuned 7-15% darker so WHITE text passes WCAG AA. Measured: white on #d82780 = 4.64:1, on #b944b2 = 4.63:1 (standard --grad-cta maxes at 3.45:1). */ --grad-cta-deep: linear-gradient(135deg, #d82780, #b944b2); /* Type */ --font-tech: 'Orbitron', sans-serif; --font-body: 'Saira', sans-serif; --fs-h1: clamp(1.85rem, 1.05rem + 4vw, 4rem); /* ~30px -> 64px. Floor tuned for 320 (longest word 'Improving' ~171px vs 288 usable); cap eased to 64px so the full-sentence H1 wraps in two comfortable lines on desktop instead of three tight ones. */ --fs-h2: clamp(1.75rem, 1.2rem + 2.75vw, 2.75rem); /* 28 -> 44px — section titles are neon signs now; they earn sign-sized type */ --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); --fs-body: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); /* 16 -> 18px */ --fs-md: 0.9375rem; /* 15px — card/support copy */ --fs-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); /* section lede — 18->22px (was used, never defined) */ --fs-sm: 0.875rem; /* 14px — UI labels, buttons, eyebrows */ --fs-xs: 0.8125rem; /* 13px — metadata, fine print */ --fs-2xs: 0.75rem; /* 12px — decorative micro-labels ONLY */ --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* tl-log stamps (production set) */ --error: #ff5470; /* danger — deliberately NOT the brand pink: #ff2e97 is an action color (CTAs, links) and using it for errors would poison those associations */ --fs-3xs: 0.6875rem; /* 11px — sub-floor exception class: tracked/uppercase DECORATIVE micro-labels (eyebrow mobile floor, card affordances). The 12px floor protects reading text; these are not that. */ /* Menu display rows: viewport-HEIGHT fluid (20.8 -> 29.6px) — a full-screen composition scales with the screen's height */ --fs-menu: clamp(1.3rem, 5vh, 1.85rem); /* Hero buttons: 13 -> 14px (floor tuned so the 25-char primary label fits a 320px viewport) */ --fs-btn: clamp(0.8125rem, 0.76rem + 0.27vw, 0.875rem); /* Eyebrows: 11 -> 13px (mobile floor in --fs-3xs territory) */ --fs-eyebrow: clamp(0.6875rem, 0.62rem + 0.35vw, 0.8125rem); --lh-heading: 1.25; /* was 1.15 — too tight for Orbitron's tall glyphs at 800 weight; multi-line h2s stacked shoulder-to-shoulder (field-caught) */ --lh-subhead: 1.3; --lh-snug: 1.5; --lh-base: 1.65; --lh-tight: 1.25; /* alias used by display titles (was undefined) */ --lh-normal: 1.6; /* alias used by card/prose bodies (was undefined) */ /* px steps for FIXED-SIZE text (labels, caps, UI chrome). Fluid DISPLAY type (hero/section titles) tracks in em as one-offs instead — em scales with the clamp; px doesn't. */ --ls-base: 0.3px; --ls-wide: 1px; --ls-wider: 2px; /* Spacing philosophy: TOKENS govern the space BETWEEN things (section rhythm, act transitions, the wrap's lane). INSIDE a component, spacing is bespoke to that component — a chip's padding doesn't answer to a global scale. */ --spacing-sm: 1rem; /* the wrap gutter at base */ /* Section rhythm — ONE tuning point for the page's vertical breathing. --space-section is the base block padding; the act tokens are the section-transition recipe (incoming clearance / outgoing runway) that used to live as per-section clamps. Retuned DOWN ~30%: the neon separators now mark the act boundaries, so the raw distance can relax. */ --space-section: clamp(4.5rem, 3rem + 6.5vw, 7.5rem); /* widened — sections sat too close even with separators (field-caught) */ --space-act-in: clamp(5.5rem, 13vh, 9.5rem); --space-act-out: clamp(5rem, 12vh, 8.5rem); --icon-sm: 1.05rem; /* the working icon size; larger glyphs size in em, in context */ --radius-sm: 0.5rem; /* Nav link type: fluid — 15px floor, 16px+ from tablet up, 17px cap. (Body text itself is 16px/1rem at 320, scaling to 18px.) */ --fs-nav: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem); /* Brand tag dimensions — the single tuning point for the logo tile. Faces are inset:0, so they follow automatically. */ /* Coin sized to MATCH the 44px burger beside it — the two header objects read as one family now */ --tag-w: 48px; --tag-h: 44px; /* Motion kit (ported): one curve, three speeds. --transition keeps its old name so every existing use upgrades in place. */ --ease: cubic-bezier(0.33, 1, 0.68, 1); --fast: 160ms; --med: 320ms; --slow: 640ms; --transition: var(--med) var(--ease); /* Bar height: slim on mobile, stately on desktop (1024 media below). Everything derived — scroll-padding, hero offset — follows automatically. (Condense tokens retired with the scroll-condense; the floating panel holds its height.) */ --header-h: 5.5rem; /* grown AGAIN by request — the panel now renders ~72px tall (bar minus its block margins) */ /* Header offer tier RETIRED (strip + pill both) — the review CTAs live in the hero, services row, and footer. --header-total keeps its name so every derived offset (scroll-padding, hero pad, console math) tracks the bar unchanged. */ --header-total: var(--header-h); /* 1240 leaves a deliberate 20px/side of breathing room at the 1280 breakpoint (border-box: the 2rem gutters live inside). Held flat at all desktop widths — no 1440 step-up. */ --wrap-max: 1240px; /* Z LADDER — the page-level stack, lowest to highest. Native s ride the browser's TOP LAYER above all of these (no z-index needed — the modern win). Values inside components (coin shine -1, card overlays 1-2, etc.) are LOCAL stacking-context numbers and stay literal. */ --z-atmosphere: 0; /* body::before radial glow */ --z-canvas: 1; /* starfield canvas */ --z-content: 2; /* sections, hero, footer */ --z-console: 3; /* floating footer console */ --z-header: 1000; /* fixed header */ --z-skip: 10001; /* skip link — beats the header */ --z-scanlines: 1001; /* CRT whisper — above the header glass; dialogs (top layer) still beat it */ /* Lets block-size transition to `auto` (FAQ accordion, later) */ interpolate-size: allow-keywords; scrollbar-color: var(--neon-purple) rgba(168, 85, 247, 0.1); scrollbar-width: thin; } /* oklch overrides — the ONLY correct fallback mechanism for tokens (see the note at the hex declarations). Gate probes a full oklch color; browsers below the feature skip the whole block and keep the hex values from :root. */ @supports (color: oklch(60% 0.1 200)) { :root { --neon-pink: oklch(66.7% 0.249 356.7); --neon-purple: oklch(62% 0.208 330); --neon-aqua: oklch(91.8% 0.12 194.6); --neon-yellow: oklch(88.7% 0.182 95.3); --glass-blue: oklch(62.3% 0.188 259.8); --bg-base: oklch(16.4% 0.043 289.6); --bg-deep: oklch(20.6% 0.061 294.9); --text-secondary: oklch(93.5% 0.017 286.1); } } @media (min-width: 1024px) { :root { --header-h: 6rem; } } /* ---------------- RESET ---------------- */ @layer reset { *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } img, svg, video, canvas { max-width: 100%; display: block; } input, select, textarea { font: inherit; color: inherit; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-align: inherit; } ul[class], ol[class] { list-style: none; } } /* ---------------- BASE ---------------- */ @layer base { @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { /* WCAG 2.4.11 — anchored targets land clear of the fixed bar */ scroll-padding-top: calc(var(--header-total) + 1rem); /* Reserve the scrollbar's lane permanently. Without this, the menu's scroll-lock hides the scrollbar, the viewport gains ~15px, and the whole page lurches sideways — then lurches back on close (extra visible through the circle reveal). With the gutter stable, hiding the scrollbar leaves an empty dark strip instead of reflowing the page. Safari <18.2 and all overlay-scrollbar platforms (macOS/iOS/Android) simply never had the problem, so the fallback is a no-op. KNOWN COSMETIC TRADEOFF: fixed layers (starfield, glow, header glass) can't paint into the gutter, so on classic- scrollbar platforms the lane reads as a faint flat seam at the right edge. Explicit background below keeps it exactly bg-base so the seam is tonal only, never a random color. */ scrollbar-gutter: stable; background-color: var(--bg-base); } body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); letter-spacing: var(--ls-base); overflow-x: hidden; /* Safari 15.4-15.6 fallback (clip is 16.0+) */ overflow-x: clip; } /* Background stack layer 2: fixed radial glow (layer 3 = starfield canvas) */ /* Scanlines (ported) — the locked-vocabulary CRT whisper. Fixed, blend-overlay, pointer-transparent. */ .scanlines { position: fixed; inset: 0; z-index: var(--z-scanlines); pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; } body::before { content: ""; position: fixed; inset: 0; z-index: var(--z-atmosphere); /* four-pool recipe (ported) — corners breathe in the triad */ background: radial-gradient(42rem 28rem at 85% 0%, var(--purple-soft), transparent 68%), radial-gradient(36rem 24rem at 0% 30%, var(--aqua-soft), transparent 70%), radial-gradient(40rem 28rem at 100% 75%, var(--pink-soft), transparent 70%), radial-gradient(30rem 22rem at 15% 100%, var(--purple-soft), transparent 72%); pointer-events: none; } /* Scroll lock lives on html — the actual scroller — rather than relying on body-to-viewport overflow propagation. Pairs with scrollbar-gutter: stable above: locked, but no layout shift. Two routes to the same lock: :has() for free, plus a JS-toggled class covering browsers without :has() (Safari <15.4 relatives, Chromium <105). Same rule, either trigger. */ /* SCROLL LOCK — at the BODY, never the root: overflow:hidden on makes Chromium clamp the root scroller to 0, which is the notorious "page jumps to the top when a modal opens" bug. Body-level overflow propagates to the viewport (html stays visible), locking scroll while PRESERVING position. scrollbar-gutter keeps layout width stable when the bar vanishes, so the lock doesn't cause a sideways jolt either. */ html:has(dialog[open]) body, html.menu-open body, html.modal-open body { overflow: hidden; } /* ^ .modal-open is the JS-toggled fallback for browsers without :has() — the case modal and lightbox set it, the nav dialog keeps its own .menu-open. Same lock, three triggers, zero browsers left out. */ ::selection { background: var(--neon-pink); color: var(--bg-base); } /* ported: brand pink */ /* The hidden LAW: author display rules (flex/grid on components) silently defeat the hidden attribute — this makes hidden mean hidden, everywhere, no exceptions (pagination depends on it) */ [hidden] { display: none !important; } /* Ported hardening: where backdrop-filter doesn't exist, glass surfaces get a near-opaque fill instead of going see-through */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header__inner, .site-footer, .service-row, .form-panel, .element, .tl-log__card, .table-pane, .pay-panel, .post__body, .signal-card, .panel__chip, .note-card, .footer-console a { background: rgba(21, 15, 45, 0.94); } } :focus-visible { outline: 3px solid var(--neon-aqua); outline-offset: 3px; } /* Mobile: the OS's translucent blue tap box read as a stuck highlight on the logo (field-caught). Focus feedback is ours (:focus-visible above); the OS layer retires. */ a, button, summary, [tabindex] { -webkit-tap-highlight-color: transparent; } /* The dialog's focus landing pad: real to the focus system, invisible to everything else */ .nav-dialog__focus-pad { position: absolute; width: 1px; height: 1px; overflow: hidden; outline: none; } /* Instant close: link-tap navigation must not race a dying animation (field-caught stacking) */ dialog.nav-dialog--instant, dialog.nav-dialog--instant::backdrop { transition: none !important; animation: none !important; } h1 { line-height: var(--lh-heading); text-wrap: balance; } h2 { line-height: var(--lh-heading); text-wrap: balance; } h3 { line-height: var(--lh-subhead); text-wrap: balance; } p { max-width: 65ch; } a { color: var(--neon-aqua); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-skip); padding: 0.75rem 1.25rem; background: var(--bg-deep); color: var(--neon-aqua); font-family: var(--font-tech); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; border: 1px solid var(--neon-aqua); border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus-visible { left: 0; outline-offset: 0; } } /* ---------------- LAYOUT ---------------- */ @layer layout { .wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--spacing-sm); } @media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } } @media (min-width: 1280px) { .wrap { padding-inline: 2rem; } } .section { position: relative; z-index: var(--z-content); padding-block: var(--space-section); scroll-margin-top: calc(var(--header-total) + 1rem); } /* Act separators: the sanctioned gradient line rides each section's top edge — a lit boundary between the acts (the tightened rhythm leans on these to mark the transitions) */ .section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(60%, 600px); height: 2px; border-radius: 999px; background: var(--grad-separator); box-shadow: 0 0 12px rgba(255, 46, 151, 0.3), 0 0 24px rgba(199, 74, 192, 0.18); pointer-events: none; } } /* ---------------- COMPONENTS (shared primitives the nav needs) ---------------- */ @layer components { /* Aurora ribbons — ambient light. Blur rasterizes once; only transform animates (compositor-cheap). Decorative always. */ .aurora { position: absolute; border-radius: 999px; pointer-events: none; z-index: -1; filter: blur(28px); opacity: 0.16; transform: rotate(var(--tilt, -14deg)); } .aurora--pink { background: linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-purple), transparent); } .aurora--aqua { background: linear-gradient(90deg, transparent, var(--neon-aqua), var(--glass-blue), transparent); } @media (prefers-reduced-motion: no-preference) { .aurora { animation: aurora-drift var(--dur, 26s) ease-in-out var(--delay, 0s) infinite alternate; } } @keyframes aurora-drift { from { transform: rotate(var(--tilt, -14deg)) translateX(-5%) scaleY(1); } to { transform: rotate(var(--tilt, -14deg)) translateX(5%) scaleY(1.18); } } /* Circular icon buttons — 44px (WCAG 2.5.8) */ .icon-circle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; /* low-alpha brand glass: the same 135deg sweep as the tag, whispered — gold to pink to purple at ~8-10% opacity */ background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 46, 151, 0.1), rgba(199, 74, 192, 0.08)); border: 1px solid rgba(255, 46, 151, 0.3); border-radius: 50%; color: var(--text-primary); font-size: var(--icon-sm); text-decoration: none; transition: var(--transition); } .icon-circle:hover { /* pink glass — a quiet lift, not the full brand sweep */ background: rgba(255, 46, 151, 0.15); border-color: rgba(255, 46, 151, 0.5); color: #fff; transform: translateY(-3px); } } /* ---------------- SECTIONS ---------------- */ @layer sections { /* ================================================== NAVIGATION — v2. IA: Services / Portfolio / About / Connect as peers; the Free-Review OFFER = pill CTA on desktop, top-tier strip on mobile. Two tiers below 768 (strip + bar with burger); at 768 the strip retires and links + CTA enter the bar; 1024 the bar rises to 4.5rem with true-center links; 1280 wrap gutters widen. The bar is a FLOATING GLASS PANEL (ported skin) — rounded, ringed, always glass, hovering inside the wrap; the header shell stays transparent. Reading progress rides the panel's bottom edge; active link = glowing dot; links wear the //-prefix brand mark. ================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); /* two stacked tiers: skinny offer strip + main bar. Height is the folded total; strip is fixed, inner flexes to the rest, so condensing the total shrinks only the bar portion. */ display: flex; flex-direction: column; height: var(--header-total); /* the shell stays TRANSPARENT at all times — the floating glass panel (site-header__inner) carries the surface */ background: transparent; } /* No-JS: the bar can't condense or collapse links into the dialog, so it relaxes to a static, wrappable strip that always works */ html:not(.js) .site-header { position: static; height: auto; background: rgba(14, 10, 31, 0.85); border-bottom-color: rgba(168, 85, 247, 0.25); padding-block: 0.5rem; } /* No-JS companion: the header is static (in-flow) above the hero, so the fixed-bar offset padding would be a dead band — relax it */ html:not(.js) .hero { padding-top: var(--space-section); } /* Reading progress on the bottom edge: scroll-driven where supported, fills in on condense elsewhere */ .site-header__inner::after { content: ""; position: absolute; left: 10px; /* inset past the panel's rounded corners */ right: 10px; bottom: -1px; height: 2px; background: var(--grad-separator); transform: scaleX(0); transform-origin: left; pointer-events: none; transition: transform var(--transition); } @supports (animation-timeline: scroll()) { .site-header__inner::after { animation: progress-grow linear both; animation-timeline: scroll(); } } @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Scroll-glass + condense RETIRED with the floating panel — the bar is always dressed and holds its height. .is-scrolled lives on solely as the progress bar's fallback hook (browsers without scroll-driven animations). */ .site-header.is-scrolled .site-header__inner::after { transform: scaleX(1); } /* --- Bar layout: flex at base, 3-column grid at 1024 so the links sit at the TRUE center of the viewport --- */ /* Main bar tier: takes whatever height the header has after the strip. min-height:0 lets it shrink cleanly during condense. width:100% is REQUIRED: as a flex item, .wrap's margin-inline auto would otherwise shrink-wrap the bar to its content and center it (flex auto-margins absorb free space — unlike block layout, where auto+max-width fills then centers). */ .site-header__inner { position: relative; /* the progress bar's anchor */ flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; /* the floating glass panel (ported): rounded, ringed, blurred. Width backs off the viewport edges so the panel never kisses them on small screens (wrap-max still caps it on desktop) */ width: min(var(--wrap-max), 100% - 1.5rem); margin-inline: auto; margin-block: 0.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 10px; backdrop-filter: blur(var(--glass-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); gap: 0.75rem; } /* 1024 true-center grid RETIRED: with the offer pill gone the bar is two clusters — brand LEFT, links RIGHT — and the base flex space-between already produces exactly that. */ /* --- Brand: 3D coin mark + wordmark --- The mark is a two-faced coin (HC / ) that flips vertically on hover AND keyboard focus. perspective on the wrapper gives real depth; backface-visibility hides each face mid-flip. */ .brand { display: inline-flex; align-items: center; gap: 0.4rem; /* tight coupling: tag + wordmark read as one lockup */ min-height: 44px; font-family: var(--font-tech); font-weight: 800; /* LOGO GEOMETRY, deliberately not on the type scale: the lockup's proportions are fixed brand dimensions (like the 38x34 coin) and must not move if the scale is retuned */ font-size: 1rem; letter-spacing: var(--ls-wide); text-decoration: none; color: var(--text-primary); white-space: nowrap; } .brand__coin-wrap { display: block; /* spans are inline — width/height are IGNORED without this, collapsing the whole 3D stage */ position: relative; width: var(--tag-w); height: var(--tag-h); flex-shrink: 0; perspective: 400px; /* the 3D stage */ } /* Glow auras: clip-path clips box-shadow off the chamfered faces, and filter:drop-shadow() is a grouping property that can flatten preserve-3d — so the glow lives on the WRAPPER as two radial pseudos (pink for the HC front, aqua for the back) that crossfade with the flip. perspective makes the wrap a stacking context, so z-index:-1 keeps them behind the coin but inside it. */ .brand__coin-wrap::before, .brand__coin-wrap::after { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: 50%; pointer-events: none; transition: opacity 0.7s ease; /* paced to the flip */ } .brand__coin-wrap::before { /* halo blends the hero gradient's dominant tones (pink core, warm gold fringe) so the glow matches the face it lights */ background: radial-gradient(circle, rgba(255, 46, 151, 0.5) 0%, rgba(255, 215, 0, 0.18) 45%, transparent 70%); opacity: 1; } .brand__coin-wrap::after { background: radial-gradient(circle, rgba(115, 253, 252, 0.5), transparent 70%); opacity: 0; } .brand:hover .brand__coin-wrap::before, .brand:focus-visible .brand__coin-wrap::before { opacity: 0; } .brand:hover .brand__coin-wrap::after, .brand:focus-visible .brand__coin-wrap::after { opacity: 1; } .brand__coin { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1); } .brand__face { position: absolute; inset: 0; display: grid; place-items: center; /* chamfered top-RIGHT + bottom-LEFT — mirrored from the CTA's TL/BR cut, so the two marks bookend the bar as opposites. Also puts the cuts perpendicular to the 135deg gradient flow. */ clip-path: polygon( 0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px) ); /* glyphs fill the tile — big letters, minimal breathing room. The back face's icon inherits this size too. */ font-size: 1.125rem; /* 18px in the 38px tile — ~10px per side */ line-height: 1; /* OPTICAL centering: grid centers the em-box, but Orbitron's metrics leave the ink sitting low inside it — the tile reads top-heavy. padding-bottom shrinks the centering area so the glyphs ride ~1.5px higher. Tune this, not the grid. */ padding-bottom: 2px; letter-spacing: 0; /* keeps white glyphs crisp over the gradient's yellow edge */ text-shadow: 0 1px 2px rgba(14, 10, 31, 0.45); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .brand__face--front { /* THE brand gradient (hero stops: yellow 20 / pink 50 / purple 80) rotated to 135deg for the tile — diagonal sweep, top-left gold corner to bottom-right purple. The --grad-hero token itself stays 90deg per the style guide. */ background: var(--grad-brand); color: #fff; } .brand__face--back { background: linear-gradient(135deg, var(--neon-aqua), var(--glass-blue)); color: var(--bg-base); transform: rotateY(180deg); /* pre-turned: shows only mid-flip */ } /* Vertical 3D flip — hover and keyboard focus alike */ .brand:hover .brand__coin, .brand:focus-visible .brand__coin { transform: rotateY(180deg); } /* Wordmark stays at every width — the full logo (coin + WEB LABS) is always present. The caret is the wordmark's ::after, so it rides along automatically. */ .brand__word { display: inline-block; line-height: 1; } /* Typing-cursor underscore after the wordmark. An EMPTY pseudo (styled box) rather than content:"_" — pseudo text content is announced by screen readers; an empty box is silent. Blink is motion-gated: reduced-motion users see a steady underscore. */ .brand__word::after { content: ""; display: inline-block; width: 0.55em; height: 0.14em; margin-left: 0.18em; background: var(--neon-aqua); vertical-align: baseline; } @media (prefers-reduced-motion: no-preference) { .brand__word::after { animation: caret-blink 1.1s steps(2, start) infinite; } } @keyframes caret-blink { to { visibility: hidden; } } .brand__accent { color: var(--neon-aqua); } /* --- Desktop links --- Alignment progression: 640-1023 the links cluster RIGHT beside the (768+) CTA; at 1024 the grid moves them to true center. Without the margin, 640-767 was only "centered" by accident — the empty actions div happened to have zero width. --- */ .site-nav { min-width: 0; } @media (min-width: 768px) { .site-nav { margin-left: auto; } } .site-nav__links { display: flex; flex-wrap: nowrap; /* the row must never break and escape the bar */ gap: 0.1rem; align-items: center; } @media (min-width: 1024px) { .site-nav__links { gap: 0.3rem; } } /* No-JS below 640: let the row wrap gracefully in the static bar */ html:not(.js) .site-nav__links { flex-wrap: wrap; } .site-nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: var(--fs-nav); letter-spacing: var(--ls-wide); /* 1px — airier tech tracking */ white-space: nowrap; color: var(--text-secondary); text-decoration: none; transition: var(--transition); } @media (min-width: 1024px) { .site-nav__links a { padding: 0.45rem 0.95rem; } } /* //-prefix (ported): the brand mark rides every link — aqua at rest, flips GOLD on hover while the label ignites aqua */ .site-nav__links a::before { content: "//"; margin-right: 0.4rem; color: var(--neon-aqua); transition: color var(--fast) var(--ease); } .site-nav__links a:hover { color: var(--neon-aqua); /* softened from --glow-aqua (a 3-layer 42px bloom) — too hot for nav text; the // prefix inherits this, so both calm */ text-shadow: 0 0 8px rgba(115, 253, 252, 0.7), 0 0 18px rgba(115, 253, 252, 0.35); background: rgba(115, 253, 252, 0.08); } .site-nav__links a:hover::before { color: var(--neon-yellow); } /* Active link = aqua glow on the label (the dot marker is retired — the glow carries the state on its own) */ .site-nav__links a[aria-current] { color: var(--neon-aqua); text-shadow: var(--glow-aqua); } .site-nav__links a[aria-current]::before { color: var(--neon-yellow); } /* gold //, matching hover (field request) */ /* --- Actions cluster: the burger (mobile only — the cluster retires entirely at 768 with it) --- */ .site-header__actions { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; } @media (min-width: 768px) { /* the burger retires at 768 and it's the cluster's only tenant — hide the cluster so its flex gap goes with it */ .site-header__actions { display: none; } } /* --- Burger: hand-built, two bars that trade widths on hover. Chamfered TL/BR (the action corner language, shared with the close button and desktop CTA). No border: clip-path severs borders at the cut corners, so it's a gradient tag with a drop-shadow glow that follows the cuts. --- */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; /* Deep gradient (swapped with the CTA): the menu is the primary mobile control and earns the vivid finish. White bars on these stops measure 4.6:1 — non-text needs 3:1. */ background: var(--grad-cta-deep); clip-path: polygon( 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px ); transition: var(--transition); } .nav-toggle:hover { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(255, 46, 151, 0.55)); } .nav-toggle__box { display: grid; gap: 5px; width: 18px; justify-items: end; } .nav-toggle__bar { display: block; height: 2px; border-radius: 2px; background: #fff; /* on the gradient now — 4.6:1, non-text pass */ transition: width 0.25s ease; } .nav-toggle__bar:nth-child(1) { width: 100%; } .nav-toggle__bar:nth-child(2) { width: 62%; } .nav-toggle:hover .nav-toggle__bar:nth-child(1) { width: 62%; } .nav-toggle:hover .nav-toggle__bar:nth-child(2) { width: 100%; } /* JS collapses links into the dialog below 768; no-JS keeps them. .no-dialog = JS ran but is unsupported (old Safari): restore the static row, retire the burger — never a dead control. */ .js .site-nav { display: none; } .js .nav-toggle { display: flex; } .js.no-dialog .site-nav { display: block; } .js.no-dialog .nav-toggle { display: none; } @media (min-width: 768px) { .js .site-nav { display: block; } .js .nav-toggle { display: none; } } /* ================================================== MOBILE MENU — full-screen , v2 Opens as a circular reveal expanding from the burger's corner (clip-path + @starting-style; older browsers get instant open/close). Editorial ruled rows, sliding arrows, contact chips. Tap any empty area to close. ================================================== */ dialog.nav-dialog { display: none; position: fixed; inset: 0; margin: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; /* real breathing at both poles — the head row was kissing the top edge and the contact footer the bottom */ padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.25rem, 6vw, 2.5rem) clamp(1.5rem, 4.5vh, 2.75rem); border: none; background: radial-gradient(ellipse at 20% 10%, rgba(168, 85, 247, 0.14), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(59, 130, 246, 0.12), transparent 55%), linear-gradient(160deg, rgba(20, 13, 40, 0.99), rgba(14, 10, 31, 1)); color: var(--text-primary); overflow: hidden; /* Layout template lives on the BASE rule (inert under display:none) so it survives the closing transition. On close, allow-discrete holds display:grid until the end, but any layout prop left only on [open] reverts INSTANTLY — the 1fr row was collapsing and the head/footer visibly jumped a half-second before the circle finished closing. */ grid-template-rows: auto 1fr auto; /* closed state: a zero-radius circle at the burger's corner */ clip-path: circle(0% at calc(100% - 2.4rem) 2rem); transition: clip-path 0.5s ease, display 0.5s ease allow-discrete, overlay 0.5s ease allow-discrete; } @media (min-width: 480px) { dialog.nav-dialog { padding-inline: clamp(1.75rem, 8vw, 3rem); } } dialog.nav-dialog[open] { display: grid; clip-path: circle(150% at calc(100% - 2.4rem) 2rem); } /* Entry starts collapsed; the exit transition mirrors it */ @starting-style { dialog.nav-dialog[open] { clip-path: circle(0% at calc(100% - 2.4rem) 2rem); } } dialog.nav-dialog::backdrop { background: rgba(10, 10, 15, 0.7); opacity: 0; transition: opacity 0.5s ease, display 0.5s ease allow-discrete, overlay 0.5s ease allow-discrete; } dialog.nav-dialog[open]::backdrop { opacity: 1; } @starting-style { dialog.nav-dialog[open]::backdrop { opacity: 0; } } .nav-dialog__head { display: flex; align-items: center; justify-content: space-between; } /* Close: chamfered TL/BR like the burger and CTA — the action corner language, now consistent across all three controls. No border-radius (clip-path defines the shape); the hover rotation lives on the ICON, not the container — spinning a chamfered box would visibly swing the cuts to wrong corners. */ .dialog-close { width: 40px; height: 40px; background: var(--grad-cta); /* Icon = NON-text: WCAG bar is 3:1, and white measures 3.45:1 on this gradient — compliant as-is. */ color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--icon-sm); clip-path: polygon( 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px ); transition: transform var(--transition), filter var(--transition); } .dialog-close i { transition: transform var(--transition); } .dialog-close:hover { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 46, 151, 0.55)); } .dialog-close:hover i { transform: rotate(90deg); } /* Link BLOCK: middle of the screen (both axes), text left-aligned. max-content width means taps beside it land on the dialog — close. */ .nav-dialog nav { align-self: center; justify-self: center; width: min(26rem, 100%); } .nav-dialog__links { display: grid; } /* Editorial rules between rows */ .nav-dialog__links li + li { border-top: 1px solid rgba(168, 85, 247, 0.18); } .nav-dialog__links a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1rem; min-height: 52px; padding: clamp(0.5rem, 1.6vh, 0.9rem) 0.25rem; font-family: var(--font-tech); font-weight: 700; font-size: var(--fs-menu); line-height: var(--lh-subhead); letter-spacing: var(--ls-wide); color: var(--text-secondary); text-decoration: none; transition: var(--transition); } @media (min-width: 480px) { .nav-dialog__links a { gap: 1.25rem; } } .nav-dialog__num { font-family: var(--font-tech); font-weight: 700; font-size: var(--fs-sm); color: var(--neon-pink); min-width: 2rem; transition: var(--transition); } /* Sliding arrow: hidden until hover/active */ .nav-dialog__arrow { align-self: center; color: var(--neon-aqua); font-size: var(--icon-sm); opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.25s ease; } .nav-dialog__links a:hover, .nav-dialog__links a[aria-current] { color: var(--neon-aqua); } .nav-dialog__links a:hover .nav-dialog__num, .nav-dialog__links a[aria-current] .nav-dialog__num { color: var(--neon-aqua); } .nav-dialog__links a:hover .nav-dialog__arrow, .nav-dialog__links a[aria-current] .nav-dialog__arrow { opacity: 1; transform: translateX(0); } /* Staggered row entrance — entry only, motion-safe */ @media (prefers-reduced-motion: no-preference) { dialog.nav-dialog[open] .nav-dialog__links li { animation: menu-item-in 0.4s ease 0.12s both; } dialog.nav-dialog[open] .nav-dialog__links li:nth-child(2) { animation-delay: 0.18s; } dialog.nav-dialog[open] .nav-dialog__links li:nth-child(3) { animation-delay: 0.24s; } dialog.nav-dialog[open] .nav-dialog__links li:nth-child(4) { animation-delay: 0.3s; } dialog.nav-dialog[open] .nav-dialog__footer { animation: menu-item-in 0.4s ease 0.36s both; } @keyframes menu-item-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } /* Footer: contact chips + socials, centered */ .nav-dialog__footer { position: relative; z-index: 1; display: grid; /* breathes on normal phones (~14px), compresses on short viewports — same vh-aware rhythm the link rows use */ gap: clamp(0.6rem, 2vh, 1.1rem); justify-items: center; text-align: center; } .nav-dialog__sep { width: 100%; max-width: 320px; height: 2px; border-radius: 2px; background: var(--grad-separator); margin-block: clamp(0.1rem, 0.8vh, 0.35rem); } .nav-dialog__chips { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; } .nav-dialog__chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; /* slimmer box; still well over the 24px AA floor */ padding: 0.25rem 1rem; border: 1px solid rgba(115, 253, 252, 0.3); /* soft-edged box, not a pill — shape variety against the round socials below and the chamfered controls above */ border-radius: 6px; font-size: var(--fs-xs); color: var(--text-secondary); text-decoration: none; transition: var(--transition); } .nav-dialog__chip:hover { color: var(--neon-aqua); border-color: var(--neon-aqua); } .nav-dialog__chip i { color: var(--neon-pink); } .nav-dialog__social { display: flex; gap: 0.9rem; } /* Aurora bands behind the menu */ .nav-dialog__aurora { --tilt: -18deg; --dur: 32s; width: 140%; height: clamp(120px, 20vh, 200px); inset: 22% auto auto -20%; opacity: 0.13; } .nav-dialog__aurora--b { --tilt: -10deg; --dur: 40s; --delay: -14s; inset: auto -20% 18% auto; opacity: 0.11; } /* ================================================== PLACEHOLDER SECTIONS (scaffolding only) These exist so the scrollspy, condense, and progress behaviors are testable. Each gets replaced by a real v2 section as we build. ================================================== */ /* ===================================================== HERO — center stage. The starfield (fixed, z1) shows through beneath the section; the nebula field sits inside the hero behind its own content. ===================================================== */ .hero { position: relative; z-index: var(--z-content); overflow: hidden; /* ribbons overshoot the edges by design */ min-height: 100vh; min-height: 100dvh; /* header offset + genuine breathing room — without the extra clamp, mobile (where the stack fills the viewport) pinned the eyebrow flush against the bar */ padding-top: calc(var(--header-total) + clamp(1.75rem, 6vh, 4rem)); padding-bottom: var(--space-section); display: grid; place-items: center; scroll-margin-top: 0; /* #top is the top — no offset needed */ } .hero__content { position: relative; z-index: 1; /* above the atmosphere */ /* Hero-specific rails: 1140px for the WHOLE content stack — deliberately inside the site's 1240 wrap, so the hero breathes a little more than the sections below it. This max-width overrides .wrap's (same specificity, later in the sheet). Subhead keeps its own tighter measure. */ max-width: 1140px; display: grid; justify-items: center; gap: clamp(1.1rem, 2.5vh, 1.75rem); text-align: center; } .hero__eyebrow { margin-bottom: 1.15rem; font-family: var(--font-tech); font-size: var(--fs-eyebrow); /* rationale at the token */ font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--neon-aqua); /* solid ink -> text-shadow is safe here: layered neon sign */ text-shadow: 0 0 6px rgba(115, 253, 252, 0.6), 0 0 16px rgba(115, 253, 252, 0.35); } .hero__eyebrow-sep { color: var(--neon-pink); } /* Display headline: WHITE base ink; the reserved 90deg hero gradient highlights only the KEYWORD spans — the searchable phrases literally glow. White on bg measures ~19:1; every gradient stop passes the 3:1 large-text bar. */ .hero__title { margin-bottom: 1.5rem; font-family: var(--font-tech); font-size: var(--fs-h1); font-weight: 800; line-height: 1.24; /* display one-off, opened up from 1.12 — the stacked lines wanted more air between them */ /* em-based so the tracking scales WITH the display size — the px tokens are for fixed-size labels (~1.9px at 64px, ~0.9px at the mobile floor) */ letter-spacing: 0.03em; color: #fff; text-wrap: balance; /* progressive: even rag where supported */ } /* Keyword highlights: gradient ink, NO glow — glow grammar belongs to SOLID neon inks only (aqua glow, pink glow, etc.); the brand gradient stays clean. */ .hero__hl { color: var(--neon-yellow); /* fallback ink if clip:text absent */ background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__sub { margin-bottom: 2.4rem; max-width: 46rem; /* measure holds even as the h1 spreads */ font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text-secondary); /* two shades up from muted */ } /* --- CTA pair. Shape grammar holds: PILL = the offer (primary), CHAMFER = control/navigation (ghost secondary). --- */ .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 0.25rem; } .btn-hero { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; /* fluid inline padding (fit math lives at the --fs-btn token) */ padding: 0.7rem clamp(1.05rem, 4vw, 1.6rem); font-family: var(--font-tech); font-size: var(--fs-btn); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); text-decoration: none; white-space: nowrap; transition: var(--transition); } /* Primary: PINK GLASS pill — translucent, blurred, bordered; lighter-weight than the old solid gradient. White ink over the glass reads ~14:1 (the tint barely lifts the dark base). The pill's radius keeps a real border possible (unlike chamfers). */ .btn-hero--primary { border-radius: 999px; background: rgba(255, 46, 151, 0.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 46, 151, 0.45); color: #fff; box-shadow: 0 6px 22px rgba(255, 46, 151, 0.18); } .btn-hero--primary:hover { transform: translateY(-2px) scale(1.02); background: rgba(255, 46, 151, 0.22); border-color: var(--neon-pink); box-shadow: 0 10px 30px rgba(255, 46, 151, 0.3), 0 0 20px rgba(255, 46, 151, 0.25); } /* Ghost: chamfered aqua GLASSMORPHIC (blur behind the tint; borderless — clip-path severs borders — glow follows the cuts) */ .btn-hero--ghost { background: rgba(115, 253, 252, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--neon-aqua); clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px ); } .btn-hero i { font-size: 1em; transition: transform var(--transition); } .btn-hero:hover i { transform: translateX(3px); } .btn-hero--ghost:hover { background: rgba(115, 253, 252, 0.16); filter: drop-shadow(0 0 12px rgba(115, 253, 252, 0.4)); } /* --- Stretched trigger: the whole card is the click target. A