/* ───────────────────────────────────────────────────────────────────── * RidgeAI v4 — Editorial Bone * Architectural Digest meets Stripe Press. * Bone-white paper, oxblood accent, magazine-grade type, hybrid 3D. * ─────────────────────────────────────────────────────────────────── */ /* Scoped under [data-theme="ridge-v4"] (B5, 2026-06-25) so the system is symmetric with v2 (tokens.dark.css) and v4 tokens can't leak into a bare :root. Every page that loads v4.css sets data-theme="ridge-v4". */ :root[data-theme="ridge-v4"] { /* Surface */ --bg: #F6F2EC; --surface: #FFFFFF; --surface-2: #F0EBE2; --surface-3: #E8E1D5; /* Lines */ --line: #DAD3C7; --line-strong: #B7AE9F; --line-accent: rgba(139, 31, 26, 0.20); /* Text */ --text: #1A1715; --text-soft: #4A433D; --text-muted: #756E64; --text-on-dark: #F6F2EC; /* Accent — oxblood */ --accent: #8B1F1A; --accent-deep: #6B1612; --accent-soft: rgba(139, 31, 26, 0.10); --accent-glow: rgba(139, 31, 26, 0.18); /* Dark — espresso (for CTAs/contrast blocks) */ --dark: #2F2A26; --dark-deep: #1F1B18; /* Status (used sparingly) */ --ok: #3E6B3E; --warn: #9B7222; --err: #8B1F1A; /* Spacing — 4pt grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-18: 72px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; /* Radius — used sparingly, editorial favors sharp corners */ --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --r-pill: 999px; /* Elevation — subtle, paper-tier */ --el-1: 0 1px 2px rgba(31, 27, 24, 0.04); --el-2: 0 8px 24px rgba(31, 27, 24, 0.06), 0 1px 2px rgba(31, 27, 24, 0.04); --el-3: 0 24px 60px rgba(31, 27, 24, 0.10), 0 4px 12px rgba(31, 27, 24, 0.06); --el-paper: 0 1px 0 rgba(31, 27, 24, 0.06), 0 12px 30px rgba(31, 27, 24, 0.08); /* Motion */ --t-fast: 120ms; --t-base: 240ms; --t-slow: 420ms; --t-stage: 720ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1); /* Type */ --font-display: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif; --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Reset / base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Sticky nav is 72px tall — keep anchored sections clear of it for the native/scrollIntoView path. The Lenis path uses an explicit -84 offset. */ scroll-padding-top: 84px; } /* Reduced-motion (Lenis is never instantiated): anchor jumps are instant. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ── Lenis smooth scroll — required runtime CSS ─────────────────── * Lenis adds .lenis / .lenis-smooth / .lenis-stopped to at runtime. * The scroll-behavior:auto override stops the native smooth-scroll above * from fighting Lenis's own rAF-driven scrolling. Folded in here (governed * by style-src 'unsafe-inline') rather than injected by the library. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Subtle paper grain */ background-image: radial-gradient(rgba(31, 27, 24, 0.018) 1px, transparent 1px), radial-gradient(rgba(31, 27, 24, 0.012) 1px, transparent 1px); background-size: 6px 6px, 13px 13px; background-position: 0 0, 3px 7px; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; } img, svg, canvas { display: block; max-width: 100%; } ::selection { background: var(--accent-soft); color: var(--text); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--dark); color: var(--text-on-dark); padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; z-index: 1000; } .skip-link:focus { left: 16px; top: 16px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-1); } /* ── Wrap ─────────────────────────────────────────────────────── */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-6); } @media (min-width: 768px) { .wrap { padding: 0 var(--s-10); } } /* ── Nav ──────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(246, 242, 236, 0.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav__brand { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); display: inline-flex; align-items: baseline; gap: 0; } .nav__brand .b { color: var(--accent); font-weight: 500; } .nav__brand .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-left: var(--s-2); align-self: center; } .nav__links { display: none; align-items: center; gap: var(--s-8); } @media (min-width: 900px) { .nav__links { display: flex; } } .nav__links a { position: relative; display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-soft); padding: 8px 0; transition: color var(--t-fast) var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--t-base) var(--ease-out); } .nav__links a:hover { color: var(--accent); } .nav__links a:hover::after { transform: scaleX(0.5); } .nav__links a[aria-current="page"], .nav__links a.is-active { color: var(--accent); } .nav__links a[aria-current="page"]::after, .nav__links a.is-active::after { transform: scaleX(1); } .nav__brand { /* (drops the prior `.sub` subtitle — element no longer rendered) */ } .nav__cta { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--dark); color: var(--text-on-dark); padding: 11px 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; min-height: 40px; transition: background var(--t-fast) var(--ease); } .nav__cta:hover { background: var(--accent); } /* ── Eyebrow ──────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-6); } .eyebrow::before { content: ""; width: var(--s-8); height: 1px; background: var(--accent); } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); padding: 14px 24px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; min-height: 48px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 80ms var(--ease); } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--accent); color: var(--text-on-dark); } .btn--primary:hover { background: var(--accent-deep); } .btn--dark { background: var(--dark); color: var(--text-on-dark); } .btn--dark:hover { background: var(--dark-deep); } .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn__arrow { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; transition: transform var(--t-fast) var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* ── HERO with WebGL ──────────────────────────────────────────── */ /* Hero is intentionally tall — sticky inner lets the camera dolly through the paper-stack scene as the user scrolls. ~180vh of scroll gives the WebGL animation room to evolve without scroll-jacking. */ .hero { position: relative; isolation: isolate; min-height: 180vh; } @media (max-width: 768px) { .hero { min-height: 140vh; } } .hero__sticky { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; align-items: center; padding: var(--s-10) 0; } .hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-10); align-items: center; width: 100%; } @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1fr 1.05fr; gap: var(--s-12); } } /* Hero copy fades and parallaxes up as the user scrolls into the paper stack. The WebGL dolly takes over visually. JS sets a CSS variable --hp (hero progress 0→1) on this section. */ .hero[data-hero-scroll] { --hp: 0; } .hero__copy { transform: translateY(calc(var(--hp, 0) * -48px)); opacity: calc(1 - var(--hp, 0) * 1.4); transition: none; } .hero__stage { transform: perspective(1400px) translateZ(calc(var(--hp, 0) * 60px)) translateY(calc(var(--hp, 0) * -20px)) rotateY(calc(var(--hp, 0) * -6deg)); transition: none; } /* ───────────────────────────────────────────────────────────────── * SCROLL-DRIVEN 3D JOURNEY * Sections with [data-scroll] receive --p (0→1 overall progress), * --pe (entry 0→1), --px (exit 0→1), --pc (-1 → 0 → +1 signed center). * Child elements transform off these to create flythrough motion. * ─────────────────────────────────────────────────────────────── */ /* PIPELINE — tilt and "fly past" effect. Stations enter from below (rotated outward), settle when centered, then tilt away as they exit upward. */ .section[data-scroll] { --p: 0; --pe: 0; --px: 0; --pc: 0; } .section[data-scroll] .section__head { /* Pure fade-up — no rotateX, which was clipping the title. */ transform: translateY(calc((1 - var(--pe)) * 36px)); opacity: calc(0.05 + var(--pe) * 0.95); transition: none; } #pipeline .pipeline-tunnel { transform: rotateX(calc(var(--pc) * -4deg)); transition: none; } #pipeline .pipeline-station { /* override the in/out classes — purely scroll-driven now */ transform: translateZ(calc((1 - var(--pe)) * -160px + var(--px) * 80px)) rotateY(calc((1 - var(--pe)) * 12deg - var(--px) * 8deg)) translateY(calc((1 - var(--pe)) * 40px - var(--px) * 30px)); opacity: calc(0.2 + var(--pe) * 0.8 - var(--px) * 0.4); transition: none; } #pipeline .pipeline-station:nth-child(1) { transform: translateZ(calc((1 - var(--pe)) * -200px + var(--px) * 80px)) rotateY(calc((1 - var(--pe)) * 18deg - var(--px) * 6deg)) translateY(calc((1 - var(--pe)) * 48px - var(--px) * 30px)); } #pipeline .pipeline-station:nth-child(2) { transform: translateZ(calc((1 - var(--pe)) * -140px + var(--px) * 60px)) rotateY(calc((1 - var(--pe)) * 10deg - var(--px) * 4deg)) translateY(calc((1 - var(--pe)) * 36px - var(--px) * 24px)); } #pipeline .pipeline-station:nth-child(3) { transform: translateZ(calc((1 - var(--pe)) * -140px + var(--px) * 60px)) rotateY(calc((1 - var(--pe)) * -10deg + var(--px) * 4deg)) translateY(calc((1 - var(--pe)) * 36px - var(--px) * 24px)); } #pipeline .pipeline-station:nth-child(4) { transform: translateZ(calc((1 - var(--pe)) * -200px + var(--px) * 80px)) rotateY(calc((1 - var(--pe)) * -18deg + var(--px) * 6deg)) translateY(calc((1 - var(--pe)) * 48px - var(--px) * 30px)); } /* PROOF — papers rotate with scroll position. Carrier estimate tips away from the viewer; supplement tips toward as you scroll. */ #proof .diorama__inner { transform: rotateY(calc(var(--pc) * 4deg)) rotateX(calc(var(--pc) * -2deg)); transition: none; } #proof .paper--before { transform: translateZ(calc(-100px - var(--p) * 60px)) translateX(calc(var(--pe) * -20px)) rotateY(calc(14deg + var(--p) * 6deg)) rotateX(calc(-2deg + var(--p) * 3deg)); transition: none; } #proof .paper--after { transform: translateZ(calc(60px + var(--pe) * 40px)) translateX(calc((1 - var(--pe)) * 60px)) rotateY(calc(-10deg - var(--p) * 4deg)) rotateX(calc(2deg - var(--p) * 2deg)); transition: none; } #proof .diorama__arrow { opacity: calc(var(--pe) * (1 - var(--px) * 1.3)); transform: translate(-50%, -50%) scale(calc(0.7 + var(--pe) * 0.3)); transition: none; } /* Proof "build the supplement" parallax beat — v4-scroll.js adds .proof-anim only when the beat is active (desktop + fine pointer + wide). The supplement sheet and its rows are GSAP-driven and held hidden until the scrubbed timeline swings the sheet in and generates the text. Without the class (no-JS / reduced motion / mobile) everything shows at its CSS resting pose. opacity-only → no reflow, no layout shift. */ .proof-anim .paper--after, .proof-anim .paper--after .paper__row, .proof-anim .paper--after .paper__total { opacity: 0; } /* CITATIONS — cards rise from below with staggered Z-depth based on their order; rotate gently with center distance. */ #citations .citations-grid { perspective: 1600px; perspective-origin: 50% calc(50% + var(--pc) * 40%); } #citations .cited { transform: translateZ(calc((1 - var(--pe)) * -120px)) translateY(calc((1 - var(--pe)) * 40px)) rotateX(calc((1 - var(--pe)) * 8deg + var(--px) * -4deg)); opacity: calc(0.3 + var(--pe) * 0.7 - var(--px) * 0.5); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } #citations .cited:hover { transform: translateZ(20px) rotateY(-3deg) rotateX(2deg) !important; box-shadow: var(--el-3); border-color: var(--line-strong); } /* PRICING — tier cards lift in sequence; featured rises higher. */ #pricing .pricing-grid { perspective: 1800px; perspective-origin: 50% calc(50% - var(--pc) * 30%); } #pricing .tier { transform: translateY(calc((1 - var(--pe)) * 80px)) translateZ(calc((1 - var(--pe)) * -80px)) rotateX(calc((1 - var(--pe)) * 10deg)); opacity: calc(0.2 + var(--pe) * 0.8); } #pricing .tier:hover { transform: translateY(-6px) translateZ(20px) !important; } #pricing .tier--featured { transform: translateY(calc((1 - var(--pe)) * 100px - var(--pe) * 6px)) translateZ(calc((1 - var(--pe)) * -100px + var(--pe) * 20px)) rotateX(calc((1 - var(--pe)) * 10deg)); } #pricing .tier--featured:hover { transform: translateY(-12px) translateZ(40px) !important; } /* ENDCTA — paper stack tilts with scroll. The "front" paper now stays behind the headline so it never covers text. */ .endcta-scene[data-scroll] .endcta__papers { transform: rotateX(calc(var(--pc) * -8deg)) rotateY(calc(var(--pc) * 4deg)); transition: none; } .endcta-scene[data-scroll] .endcta__paper:nth-child(1) { transform: translate3d(calc(-160px + var(--pc) * -40px), -40px, -300px) rotateZ(calc(-8deg + var(--pc) * 3deg)) rotateY(8deg); } .endcta-scene[data-scroll] .endcta__paper:nth-child(2) { transform: translate3d(calc(180px + var(--pc) * 40px), -10px, -240px) rotateZ(calc(6deg - var(--pc) * 3deg)) rotateY(-6deg); } .endcta-scene[data-scroll] .endcta__paper:nth-child(3) { transform: translate3d(calc(-80px - var(--pc) * 20px), 50px, -180px) rotateZ(calc(-3deg + var(--pc) * 2deg)); } .endcta-scene[data-scroll] .endcta__paper:nth-child(4) { transform: translate3d(calc(120px + var(--pc) * 20px), 80px, -120px) rotateZ(calc(4deg - var(--pc) * 2deg)) rotateY(-3deg); } .hero__copy { position: relative; z-index: 2; } .hero__headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 7.5vw, 88px); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 var(--s-6); color: var(--text); } .hero__headline em { font-style: italic; font-weight: 500; color: var(--accent); } .hero__sub { font-size: 19px; line-height: 1.55; color: var(--text-soft); max-width: 480px; margin: 0 0 var(--s-10); } @media (min-width: 768px) { .hero__sub { font-size: 20px; } } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-10); } .hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .hero__trust .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--text-muted); } /* ── ContainerScroll-style hero stage ───────────────────────────── * The hero stage holds a real drone photo of a roof inside a tilted * frame. Scroll progress (--hp 0→1) rotates the frame from a 22° * tilt-away to flat, scales it from 1.04 to 1.0, and translates it * upward — the classic "camera flying down onto the subject" reveal. * ─────────────────────────────────────────────────────────────── */ .hero__stage { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 720px; margin: 0 auto; perspective: 1400px; perspective-origin: 50% 0%; } @media (min-width: 1024px) { .hero__stage { margin: 0 0 0 auto; aspect-ratio: 4 / 4; max-width: none; } } .hero__frame { position: relative; width: 100%; height: 100%; background: var(--surface-2); border: 8px solid var(--surface); outline: 1px solid var(--line); box-shadow: 0 30px 60px rgba(31, 27, 24, 0.18), 0 12px 24px rgba(31, 27, 24, 0.10), 0 2px 4px rgba(31, 27, 24, 0.06); overflow: hidden; transform-style: preserve-3d; transform: rotateX(calc((1 - var(--hp, 0)) * 24deg)) scale(calc(1.04 - var(--hp, 0) * 0.04)) translateY(calc(var(--hp, 0) * -56px)); transform-origin: 50% 0%; transition: none; will-change: transform; } .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; /* Fallback while the image loads or if it fails */ background: radial-gradient(ellipse at 50% 30%, rgba(139, 31, 26, 0.10) 0%, transparent 60%), linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--line) 100%); filter: saturate(0.96) contrast(1.04); } /* Subtle warm overlay so the photo blends with the bone palette */ .hero__photo-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(246, 242, 236, 0.08) 0%, rgba(31, 27, 24, 0.0) 25%, rgba(31, 27, 24, 0.0) 75%, rgba(31, 27, 24, 0.12) 100%), radial-gradient(ellipse at 50% 50%, rgba(246, 242, 236, 0.0) 50%, rgba(31, 27, 24, 0.18) 100%); mix-blend-mode: multiply; } /* Paper grain over the photo — keeps it on-brand */ .hero__photo-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.5; background-image: radial-gradient(rgba(31, 27, 24, 0.10) 1px, transparent 1px), radial-gradient(rgba(31, 27, 24, 0.06) 1px, transparent 1px); background-size: 4px 4px, 9px 9px; background-position: 0 0, 2px 5px; mix-blend-mode: multiply; } /* Inner frame border */ .hero__photo-frame-line { position: absolute; inset: 12px; z-index: 4; pointer-events: none; border: 1px solid rgba(246, 242, 236, 0.5); } /* ── Pin annotations layered over the photo ─────────────────── */ .hero__annots { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .hero__annot { position: absolute; display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text); opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity var(--t-stage) var(--ease-out), transform var(--t-stage) var(--ease-out); /* Reveal as the frame flattens — driven by --hp on the section */ --reveal: clamp(0, calc((var(--hp, 0) - 0.20) * 4), 1); } .hero[data-hero-scroll] .hero__annot { opacity: var(--reveal); transform: translate(-50%, -50%) scale(calc(0.94 + var(--reveal) * 0.06)); } /* Editorial photo-callout pin — small, refined, warm-tinted to blend with the photo instead of stickering it. */ .hero__annot-pin { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px rgba(246, 242, 236, 0.92), 0 0 0 3px rgba(31, 27, 24, 0.55), 0 2px 4px rgba(31, 27, 24, 0.45); flex-shrink: 0; z-index: 2; } .hero__annot-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(139, 31, 26, 0.4); animation: hero-pin-pulse 2.4s ease-in-out infinite; } @keyframes hero-pin-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.7); opacity: 0; } } /* Thin hairline leader connecting dot to label */ .hero__annot-leader { flex-shrink: 0; width: 22px; height: 1px; background: rgba(31, 27, 24, 0.65); box-shadow: 0 0 0 0.5px rgba(246, 242, 236, 0.55); } /* Warm cream label with backdrop blur — reads as part of the photo not a sticker on it. */ .hero__annot-label { background: rgba(246, 242, 236, 0.88); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); padding: 4px 9px; border: 0; outline: 1px solid rgba(31, 27, 24, 0.15); box-shadow: 0 6px 14px rgba(31, 27, 24, 0.22), 0 1px 2px rgba(31, 27, 24, 0.12); white-space: nowrap; color: var(--text); font-size: 10px; letter-spacing: 0.04em; } .hero__annot-label .amt { color: var(--accent); font-weight: 600; margin-left: 6px; } /* Mobile: smaller frame border, tighter labels */ @media (max-width: 768px) { .hero__frame { border-width: 6px; } .hero__annot { font-size: 9px; } .hero__annot-pin { width: 7px; height: 7px; } .hero__annot-leader { width: 16px; } .hero__annot-label { padding: 3px 7px; font-size: 9px; } } /* ── Section primitives ───────────────────────────────────────── */ .section { position: relative; padding: var(--s-24) 0; } @media (min-width: 1024px) { .section { padding: var(--s-32) 0; } } .section__head { max-width: 760px; margin: 0 auto var(--s-16); text-align: center; } .section__head--left { margin-left: 0; text-align: left; } .section__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--s-5); color: var(--text); } .section__title em { font-style: italic; color: var(--accent); font-weight: 500; } .section__sub { font-size: 19px; line-height: 1.55; color: var(--text-soft); margin: 0; } .section__rule { display: block; width: 56px; height: 1px; background: var(--accent); margin: var(--s-12) auto var(--s-6); } .section__head--left .section__rule { margin-left: 0; } /* Divider between major sections */ .divider { border: 0; border-top: 1px solid var(--line); margin: 0; max-width: 1240px; margin-inline: auto; } /* ── Pipeline tunnel — CSS 3D ─────────────────────────────────── */ .pipeline-scene { position: relative; perspective: 1400px; perspective-origin: 50% 50%; } .pipeline-tunnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); transform-style: preserve-3d; } @media (max-width: 760px) { .pipeline-tunnel { grid-template-columns: 1fr; gap: var(--s-6); } } .pipeline-station { background: var(--surface); border: 1px solid var(--line); padding: var(--s-8) var(--s-6) var(--s-10); position: relative; transform: translateZ(0) rotateY(0deg); transition: transform var(--t-stage) var(--ease-out), box-shadow var(--t-stage) var(--ease-out), border-color var(--t-stage) var(--ease-out); transform-style: preserve-3d; will-change: transform; } .pipeline-station:nth-child(1) { transform: translateZ(-80px) rotateY(8deg); } .pipeline-station:nth-child(2) { transform: translateZ(-30px) rotateY(3deg); } .pipeline-station:nth-child(3) { transform: translateZ(-30px) rotateY(-3deg); } .pipeline-station:nth-child(4) { transform: translateZ(-80px) rotateY(-8deg); } .pipeline-scene.is-in .pipeline-station { transform: translateZ(0) rotateY(0deg); box-shadow: var(--el-2); } .pipeline-scene.is-in .pipeline-station:nth-child(1) { transition-delay: 60ms; } .pipeline-scene.is-in .pipeline-station:nth-child(2) { transition-delay: 120ms; } .pipeline-scene.is-in .pipeline-station:nth-child(3) { transition-delay: 180ms; } .pipeline-scene.is-in .pipeline-station:nth-child(4) { transition-delay: 240ms; } .pipeline-station__num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.20em; color: var(--accent); margin-bottom: var(--s-3); } .pipeline-station__name { font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--text); margin: 0 0 var(--s-3); } .pipeline-station__desc { font-size: 15px; line-height: 1.5; color: var(--text-soft); margin: 0; } .pipeline-station__rule { display: block; width: 32px; height: 1px; background: var(--line-strong); margin: var(--s-4) 0 var(--s-3); } /* ── The Flywheel — compounding intelligence section ──────────── */ .flywheel__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-8); margin-bottom: var(--s-16); } @media (min-width: 900px) { .flywheel__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } } .flywheel__panel { position: relative; padding: var(--s-8) var(--s-6) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .flywheel__panel:hover { transform: translateY(-4px); box-shadow: var(--el-2); } .flywheel__num { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.20em; color: var(--accent); margin-bottom: var(--s-4); } .flywheel__head { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin: 0 0 var(--s-3); } .flywheel__body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-soft); margin: 0; } .flywheel__body em { font-style: italic; color: var(--accent); font-weight: 500; } /* Live counter — pulls from /api/transparency/stats */ .flywheel__live { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center; padding: var(--s-8) var(--s-6); background: var(--dark); color: var(--text-on-dark); position: relative; overflow: hidden; } @media (min-width: 720px) { .flywheel__live { grid-template-columns: auto 1fr; gap: var(--s-10); padding: var(--s-10) var(--s-12); } } .flywheel__live::before { /* Pulsing red dot — "live database" indicator */ content: ""; position: absolute; top: var(--s-5); right: var(--s-6); width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(139, 31, 26, 0.25); animation: fw-live-pulse 1.8s ease-in-out infinite; } @keyframes fw-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } .flywheel__live-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -0.025em; color: var(--accent); font-variant-numeric: tabular-nums; } .flywheel__live-body { display: flex; flex-direction: column; gap: var(--s-2); } .flywheel__live-lbl { font-family: var(--font-body); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.4; color: var(--text-on-dark); max-width: 480px; } .flywheel__live-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 242, 236, 0.55); } .flywheel__live-meta span { color: rgba(246, 242, 236, 0.8); } /* ── Document transforms — 3D diorama ─────────────────────────── */ .diorama { position: relative; perspective: 1600px; perspective-origin: 50% 50%; min-height: 560px; display: grid; place-items: center; } .diorama__inner { position: relative; width: 100%; max-width: 980px; transform-style: preserve-3d; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; } @media (max-width: 820px) { .diorama__inner { grid-template-columns: 1fr; gap: var(--s-8); } } .paper { background: var(--surface); padding: var(--s-8) var(--s-6); box-shadow: var(--el-paper); transform-style: preserve-3d; position: relative; transition: transform var(--t-stage) var(--ease-out); will-change: transform; } .paper--before { transform: translateZ(-120px) rotateY(14deg) rotateX(-2deg); } .paper--after { transform: translateZ(40px) rotateY(-10deg) rotateX(2deg); } .paper__corner-fold { position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, var(--bg) 50%, transparent 50%); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); } .paper__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-3); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); } .paper__title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); } .paper__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .paper__rows { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--text-soft); } .paper__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: 5px 0; border-bottom: 1px dashed var(--line); } .paper__row:last-child { border-bottom: 0; } .paper__row .amt { font-variant-numeric: tabular-nums; color: var(--text); } .paper--after .paper__row { border-bottom-color: var(--line-accent); } .paper--after .paper__row .amt { color: var(--accent); font-weight: 500; } .paper__total { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 2px solid var(--text); display: flex; justify-content: space-between; align-items: baseline; } .paper__total .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); } .paper__total .val { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--text); } .paper--after .paper__total .val { color: var(--accent); } /* Small oxblood arrow disc pointing from carrier paper to supplement. */ .diorama__arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--accent); border-radius: 999px; box-shadow: 0 0 0 8px rgba(246, 242, 236, 0.85), 0 8px 20px rgba(31, 27, 24, 0.28), 0 2px 4px rgba(31, 27, 24, 0.18); } .diorama__arrow-glyph { font-family: var(--font-body); font-size: 22px; font-weight: 500; line-height: 1; color: var(--text-on-dark); /* Subtle nudge so the arrow sits visually centered in the disc */ transform: translateY(-1px); } @media (max-width: 820px) { .diorama__arrow { position: static; transform: none; margin: var(--s-2) auto; } .diorama__arrow-glyph { transform: rotate(90deg); } } /* Guardian-grade legend — small editorial heads-up. */ .cited-legend { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-6); margin: 0 auto var(--s-10); max-width: 920px; background: var(--surface); border-left: 2px solid var(--accent); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cited-legend__head { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent); } .cited-legend__row { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; } .cited-legend__item { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-soft); } .cited-legend__item b { color: var(--text); font-weight: 600; } .cited-legend__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; } .cited-legend__dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(62, 107, 62, 0.12); } .cited-legend__dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(155, 114, 34, 0.12); } .cited-legend__dot--err { background: var(--err); box-shadow: 0 0 0 3px rgba(139, 31, 26, 0.12); } @media (max-width: 640px) { .cited-legend__row { flex-direction: column; align-items: flex-start; gap: var(--s-2); } } /* ── Citations — floating cards ───────────────────────────────── */ .citations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); perspective: 1400px; } .cited { background: var(--surface); border: 1px solid var(--line); padding: var(--s-8) var(--s-6) var(--s-6); transform: translateZ(0) rotateY(0deg); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); transform-style: preserve-3d; cursor: default; } .cited:hover { transform: translateZ(20px) rotateY(-3deg) rotateX(2deg); box-shadow: var(--el-3); border-color: var(--line-strong); } .cited__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); } .cited__id { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--accent); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); } .pill__dot { width: 5px; height: 5px; border-radius: 999px; } .pill--ok { color: var(--ok); } .pill--ok .pill__dot { background: var(--ok); } .pill--warn { color: var(--warn); } .pill--warn .pill__dot { background: var(--warn); } .pill--err { color: var(--err); } .pill--err .pill__dot { background: var(--err); } .cited__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--text); margin: 0 0 var(--s-2); } .cited__cite { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--s-5); } .cited__amt { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); font-variant-numeric: tabular-nums; } /* ── Pricing ──────────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); perspective: 1600px; } .tier { background: var(--surface); border: 1px solid var(--line); padding: var(--s-8) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); position: relative; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); transform-style: preserve-3d; } .tier:hover { transform: translateY(-6px) translateZ(20px); box-shadow: var(--el-3); border-color: var(--line-strong); } .tier--featured { background: var(--dark); color: var(--text-on-dark); border-color: var(--dark); z-index: 2; } .tier--featured .tier__name, .tier--featured .tier__price .amt { color: var(--text-on-dark); } .tier--featured .tier__desc { color: rgba(246, 242, 236, 0.72); } .tier--featured:hover { transform: translateY(-10px) translateZ(40px); } .tier__badge { position: absolute; top: -10px; left: var(--s-6); background: var(--accent); color: var(--text-on-dark); padding: 3px 9px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .tier__name { font-family: var(--font-display); font-size: 30px; font-weight: 500; color: var(--text); margin: 0; } .tier__price { display: flex; align-items: baseline; gap: 4px; } .tier__price .amt { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } .tier__price .per { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); } .tier--featured .tier__price .per { color: rgba(246, 242, 236, 0.6); } .tier__desc { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 0; min-height: 76px; } .tier__cta { display: inline-flex; align-items: center; justify-content: space-between; margin-top: auto; background: transparent; color: var(--text); border: 1px solid var(--line-strong); padding: 12px var(--s-4); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; min-height: 44px; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .tier__cta:hover { border-color: var(--accent); color: var(--text-on-dark); background: var(--accent); } .tier--featured .tier__cta { background: var(--accent); color: var(--text-on-dark); border-color: var(--accent); } .tier--featured .tier__cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); } /* ── Final CTA — 3D paper stack ──────────────────────────────── */ .endcta-scene { perspective: 1800px; perspective-origin: 50% 30%; } .endcta { position: relative; background: var(--dark); color: var(--text-on-dark); padding: var(--s-24) var(--s-6); text-align: center; transform-style: preserve-3d; overflow: hidden; } @media (min-width: 768px) { .endcta { padding: var(--s-32) var(--s-12); } } .endcta__papers { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; transform-style: preserve-3d; } .endcta__paper { position: absolute; width: clamp(180px, 26vw, 280px); aspect-ratio: 1 / 1.3; background: rgba(246, 242, 236, 0.04); border: 1px solid rgba(246, 242, 236, 0.12); } .endcta__paper:nth-child(1) { transform: translate3d(-160px, -40px, -300px) rotateZ(-8deg) rotateY(8deg); } .endcta__paper:nth-child(2) { transform: translate3d(180px, -10px, -240px) rotateZ(6deg) rotateY(-6deg); } .endcta__paper:nth-child(3) { transform: translate3d(-80px, 50px, -180px) rotateZ(-3deg); } .endcta__paper:nth-child(4) { transform: translate3d(120px, 80px, -120px) rotateZ(4deg) rotateY(-3deg); } /* No solid foreground paper — was covering the headline. Replaced with a wider, distant tinted plane that acts as a "spotlight backdrop" rather than competing with the text. */ .endcta__paper:nth-child(5) { background: rgba(246, 242, 236, 0.025); border: 1px solid rgba(246, 242, 236, 0.08); width: clamp(280px, 40vw, 460px); aspect-ratio: 1 / 1.1; transform: translate3d(0, 30px, -360px) rotateZ(-2deg); box-shadow: none; } /* Animated WebGL shader backdrop (vanilla port of the 21st.dev Animated Shader Hero, recolored to Editorial Bone). */ .endcta__shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; opacity: 0.95; } .endcta__papers { z-index: 1; } .endcta__content { position: relative; z-index: 2; } /* Spline scene container (loaded as web component, drop a inside to activate). */ .spline-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .spline-frame spline-viewer { width: 100%; height: 100%; display: block; } .endcta .eyebrow { color: var(--text-on-dark); justify-content: center; } .endcta .eyebrow::before { background: var(--text-on-dark); } .endcta__headline { font-family: var(--font-display); font-size: clamp(48px, 6.5vw, 80px); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; margin: 0 auto var(--s-6); max-width: 720px; } .endcta__headline em { color: var(--accent); font-style: italic; font-weight: 500; } .endcta__sub { font-size: 19px; color: rgba(246, 242, 236, 0.7); max-width: 540px; margin: 0 auto var(--s-10); } .endcta .btn { font-size: 13px; padding: 18px var(--s-8); min-height: 56px; } /* ── Footer ──────────────────────────────────────────────────── */ .footer { padding: var(--s-12) 0 var(--s-14); border-top: 1px solid var(--line); background: var(--bg); } .footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; color: var(--text-muted); } .footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); } .footer__links a { text-transform: uppercase; transition: color var(--t-fast) var(--ease); } .footer__links a:hover { color: var(--accent); } /* ── Reveal-on-scroll ─────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-stage) var(--ease-out), transform var(--t-stage) var(--ease-out); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: translateY(0); } [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--t-stage) var(--ease-out), transform var(--t-stage) var(--ease-out); } [data-reveal-stagger].is-in > * { opacity: 1; transform: translateY(0); } [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 40ms; } [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 120ms; } [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 200ms; } [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 280ms; } [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 360ms; } [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 440ms; } /* ── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .pipeline-station, .paper, .cited, .tier { transform: none !important; } [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; } } /* ── FAQ ──────────────────────────────────────────────────────── */ .faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { list-style: none; cursor: pointer; padding: var(--s-5) var(--s-8) var(--s-5) 0; position: relative; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text); transition: color var(--t-fast) var(--ease); } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--accent); } .faq__q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 22px; font-weight: 400; color: var(--accent); transition: transform var(--t-base) var(--ease-spring); } .faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(45deg); } .faq__a { margin: 0; padding: 0 var(--s-8) var(--s-6) 0; color: var(--text-soft); font-family: var(--font-body); font-size: 17px; line-height: 1.6; max-width: 64ch; } @media (max-width: 600px) { .faq__q { font-size: 19px; } }