/* ============================================================ jobyweeks.com — design system + home page HBO prestige doc aesthetic · pure black · gold accent ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Anchor scroll offset ---------- Every anchorable element gets a scroll-margin equal to the fixed nav height exactly, so the section's top gold divider lands FLUSH with the nav's bottom shimmer line — they read as one continuous gold rule, not two separate lines with a black gap between them. The fixed nav is calc(var(--nav-h) + 16px) = 96px tall. */ [id]:not(body):not(html) { scroll-margin-top: 96px; } body { min-height: 100vh; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; } ul, ol { list-style: none; } /* ---------- Tokens ---------- */ :root { /* Palette */ --bg: #0A0A0A; --bg-elev: #131110; --bg-veil: rgba(10, 10, 10, 0.78); --text: #F5F1E8; /* warm off-white */ --text-dim: #C8C1B4; /* brighter — less dull */ --text-muted:#8A857B; /* brighter — less dull */ /* Rich gold (upgraded) */ --accent: #F0C85F; /* luminous gold */ --accent-hot: #FDE58C; /* highlight */ --accent-deep: #9E6E26; /* shadow */ --accent-light: #FFF7CD; /* near-white gold */ --accent-faint: rgba(240, 200, 95, 0.14); /* Lines / rules — solid opaque gold matching the logo's primary stop. No more semi-transparent fade. All site dividers render as clean gold. */ --rule: #F0C85F; --rule-soft: rgba(240, 200, 95, 0.55); --alert: #B53A36; /* Gold gloss gradient for text — bottom stops lifted so descenders (y, g, p, j) and the bottom rows of large numbers stay legible on black */ --gold-gloss: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 12%, #F0C85F 33%, #C89637 47%, #AF7A26 50%, #D2A03E 54%, #F2CA64 68%, #D2A03C 84%, #9E6E26 96%, #76501C 100%); /* Gold shimmer horizontal line — solid polished metallic bar (matches the logo's reflection-band shine, no transparent fade). */ --gold-shimmer: linear-gradient(90deg, #AF7A26 0%, #D2A03E 10%, #F0C85F 30%, #FDE58C 50%, #F0C85F 70%, #D2A03E 90%, #AF7A26 100%); /* Rounded corner tokens */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* Typography */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Scale (modular — 1.25 ratio, fluid where it matters) */ --fs-micro: 0.72rem; /* tiny caps label */ --fs-small: 0.875rem; /* meta */ --fs-body: 1.0625rem; /* body */ --fs-lead: 1.25rem; /* section lead */ --fs-h4: 1.5rem; --fs-h3: clamp(1.75rem, 2.4vw, 2.25rem); --fs-h2: clamp(2.5rem, 5vw, 4.25rem); --fs-h1: clamp(3rem, 9vw, 8rem); --fs-hero: clamp(3rem, 12vw, 11rem); /* Spacing (8pt grid) */ --s-0: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 192px; --s-10:256px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 600ms; --dur-slow: 1200ms; /* Layout */ --max-w: 1240px; --max-w-narrow: 780px; --nav-h: 80px; /* bumped for larger wordmark */ } /* ---------- Base ---------- */ /* Full-bleed body (fills any viewport cleanly); content stays within containers */ html { background: var(--bg); min-height: 100vh; /* Force modern lining numerals (cap-height digits) everywhere. Cormorant Garamond defaults to old-style figures where "1" reads as Roman numeral "I" and 3/5/7/9 have descenders. Override. */ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } body { width: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; font-weight: 400; letter-spacing: -0.005em; position: relative; overflow-x: hidden; } /* ---------- Scroll progress (polished-gold bar at top of viewport) ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold-shimmer); box-shadow: 0 0 12px rgba(253, 229, 140, 0.55), 0 0 2px rgba(253, 229, 140, 0.85); z-index: 200; pointer-events: none; will-change: width; border-radius: 0 1px 1px 0; } @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } } /* ---------- Custom Bitcoin Cursor (26px gold coin — 80% of 32px per design) ---------- */ html, body, a, button, input, textarea { cursor: url("../img/cursor_btc_glow.png?v=2") 16 16, auto; } /* ---------- Cursor trail (Nirvani-style fading gold dots) ---------- */ .trail-dot { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; background: radial-gradient(circle, #FFF7CD 0%, #FDE58C 35%, #F0C85F 70%, transparent 100%); box-shadow: 0 0 10px rgba(253, 229, 140, 0.6), 0 0 18px rgba(240, 200, 95, 0.4); opacity: 0.9; transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .trail-dot.is-fading { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } @media (prefers-reduced-motion: reduce) { .trail-dot { display: none; } } /* ---------- Universal rounded corners on media ---------- */ img, video { border-radius: var(--r-md); } /* Subtle film-grain overlay (gives the premium cinematic feel) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: var(--accent); color: #000; } /* ---------- Typography ---------- */ .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 0.96; } .display em, .italic { font-style: italic; font-weight: 500; } /* Gold-gloss text treatment (applies on em inside headings for metallic sheen) */ .gold-gloss { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 0 rgba(253, 229, 140,0.15)); } /* Subtle sheen on all display headings */ .display, .hero__title, .section__title, .split__title, .dossier__title, .interrupted__line, .closing__quote, .parallel__quote, .timeline__head, .pedigree__name, .footer__brand, .media-tile__label, .action-card__title, .endorsement__quote { text-shadow: 0 0 40px rgba(253, 229, 140, 0.08), 0 1px 0 rgba(255, 255, 255, 0.06); } /* All em inside these headings get the rich gold gloss. background-size/position trick shifts the gradient so the darkest stop lives below the visible descender zone — italic y/g/p/j now render fully in warm gold instead of fading to near-black. */ .hero__title em, .section__title em, .split__title em, .dossier__title em, .interrupted__line em, .timeline__head em, .pedigree__name em, .media-tile__label em, .action-card__title em, .parallel__quote em, .footer__brand em { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: italic; filter: drop-shadow(0 0 18px rgba(253, 229, 140, 0.35)); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.28em; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 500; text-shadow: 0 0 16px rgba(253, 229, 140, 0.35); } .eyebrow--gold { color: var(--accent); } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-dim); max-width: 52ch; } /* Section kicker — every section eyebrow on every page. Gold-gloss to match the logo. */ .kicker { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 14px rgba(253, 229, 140, 0.28); font-weight: 500; } .quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; color: var(--text); max-width: 28ch; } .quote::before { content: "\201C"; color: var(--accent); margin-right: 0.1em; } .quote::after { content: "\201D"; color: var(--accent); margin-left: 0.05em; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-4); } .container--narrow { max-width: var(--max-w-narrow); } .stack > * + * { margin-top: var(--s-3); } .stack-lg > * + * { margin-top: var(--s-5); } .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* Rule */ .rule { height: 1px; background: var(--rule-soft); border: 0; margin: var(--s-6) 0; } .rule--gold { background: var(--rule); } .rule--dot { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0; } .rule--dot::before, .rule--dot::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); } .rule--dot span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Navigation ---------- */ .nav { position: fixed; /* back to fixed now that body spans full viewport */ top: 0; left: 0; right: 0; z-index: 50; height: calc(var(--nav-h) + 16px); display: flex; align-items: center; padding: 0 var(--s-3); /* tighter so the logo sits near the edge */ background: rgba(10, 10, 10, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--dur) var(--ease); } .nav.is-scrolled { background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Gold shimmer separator line under the nav */ .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-shimmer); box-shadow: 0 0 18px rgba(253, 229, 140, 0.32), 0 0 2px rgba(253, 229, 140, 0.6); pointer-events: none; } /* Hard-capped nav row — fills viewport up to 1920px max so on ultra-wide screens the header doesn't sprawl past the page's natural canvas. Centers itself on wider viewports. Logo at left, dropdowns centered, CTA at right. */ .nav__inner { width: 100%; max-width: 1920px; margin: 0 auto; display: flex; align-items: center; gap: var(--s-4); } .nav__brand { flex-shrink: 0; } .nav__links { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; /* center the dropdown row in the available space */ gap: clamp(20px, 2.4vw, 44px); /* even gap between every dropdown trigger */ } .nav__cta { flex-shrink: 0; /* 50% of the prior 2x gap — Donate sits the same distance from Press as the dropdown triggers do from each other (cohesive, not isolated) */ margin-left: clamp(20px, 2.4vw, 44px); } .nav__brand { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 0.92rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); font-weight: 500; text-shadow: 0 0 24px rgba(253, 229, 140,0.18); } /* Hero hashtag — #FreeJoby in the kicker line beside eyebrow */ .hero__eyebrow-sep { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0.5; margin: 0 0.6em; } .hero__hashtag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.3em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 18px rgba(253, 229, 140, 0.4); font-weight: 600; } /* Hero hashtag — BIG version, sits right above the "Six years" title */ .hero__hashtag-big { font-family: var(--font-mono); font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; line-height: 1; text-align: center; margin: 0 auto var(--s-4); background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 28px rgba(253, 229, 140, 0.55)) drop-shadow(0 0 10px rgba(255, 247, 205, 0.35)); padding: 6px 0; } .nav__logo { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(253, 229, 140, 0.35)); transition: filter 400ms var(--ease), transform 400ms var(--ease); } .nav__brand:hover .nav__logo { filter: drop-shadow(0 0 22px rgba(253, 229, 140, 0.65)); transform: rotate(-4deg) scale(1.05); } /* Wordmark logo — Tektur Medium wordmark PNG, burnished gradient baked in (sized 33% larger than prior version) */ .nav__logo-img { height: 72px; width: auto; max-width: 460px; flex-shrink: 0; filter: drop-shadow(0 0 16px rgba(253, 229, 140, 0.34)) drop-shadow(0 1px 0 rgba(10, 10, 10, 0.4)); transition: filter 400ms var(--ease), transform 400ms var(--ease); /* One-time gold-shimmer pulse on page load */ animation: shimmerSweep 2.0s cubic-bezier(0.22, 1, 0.36, 1) 0.3s 1 both; } .nav__brand:hover .nav__logo-img { filter: drop-shadow(0 0 28px rgba(253, 229, 140, 0.72)) drop-shadow(0 0 8px rgba(255, 247, 205, 0.55)); transform: translateY(-1px); } @keyframes shimmerSweep { 0% { filter: drop-shadow(0 0 10px rgba(253, 229, 140, 0.18)) brightness(0.95) saturate(0.9); opacity: 0.6; } 35% { filter: drop-shadow(0 0 34px rgba(255, 247, 205, 0.85)) drop-shadow(0 0 10px rgba(255, 247, 205, 0.55)) brightness(1.25) saturate(1.15); opacity: 1; } 100% { filter: drop-shadow(0 0 14px rgba(253, 229, 140, 0.32)) drop-shadow(0 1px 0 rgba(10, 10, 10, 0.4)) brightness(1) saturate(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nav__logo-img { animation: none; } } @media (max-width: 820px) { .nav__logo-img { height: 54px; max-width: 320px; } } @media (max-width: 480px) { .nav__logo-img { height: 44px; max-width: 260px; } } .nav__links > a { font-family: var(--font-mono); font-size: 1.0rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); font-weight: 500; transition: color 220ms var(--ease), text-shadow 220ms var(--ease), transform 220ms var(--ease); text-shadow: 0 0 16px rgba(253, 229, 140, 0.15); } .nav__links > a:hover { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 26px rgba(253, 229, 140, 0.55); transform: translateY(-1px); } /* ---------- Joby dropdown (homepage section jump-links) ---------- */ .nav__dropdown { position: relative; display: inline-flex; align-items: center; } .nav__dropdown-trigger { font-family: var(--font-mono); font-size: 1.0rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); font-weight: 500; background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color 220ms var(--ease), text-shadow 220ms var(--ease), transform 220ms var(--ease); text-shadow: 0 0 16px rgba(253, 229, 140, 0.15); } .nav__dropdown-trigger:hover { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 26px rgba(253, 229, 140, 0.55); } /* Active (open) state — strong differentiation: bolder text + glowing gold underline beneath the trigger. Underline animates in. */ .nav__dropdown.is-open .nav__dropdown-trigger { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; text-shadow: 0 0 30px rgba(253, 229, 140, 0.75); position: relative; } .nav__dropdown.is-open .nav__dropdown-trigger::after { content: ""; position: absolute; left: 0; right: 14px; /* leave gap so the underline doesn't run under the chevron */ bottom: -10px; height: 2px; background: var(--gold-shimmer); box-shadow: 0 0 14px rgba(253, 229, 140, 0.7); border-radius: 1px; animation: dropdownActivate 320ms var(--ease) both; } @keyframes dropdownActivate { 0% { transform: scaleX(0); transform-origin: left center; opacity: 0; } 100% { transform: scaleX(1); transform-origin: left center; opacity: 1; } } .nav__dropdown-chev { width: 10px; height: 7px; transition: transform 280ms var(--ease), filter 280ms var(--ease); margin-top: 2px; color: var(--accent); /* gold chevron stroke (path uses currentColor) */ filter: drop-shadow(0 0 6px rgba(253, 229, 140, 0.45)); } .nav__dropdown-trigger:hover .nav__dropdown-chev, .nav__dropdown.is-open .nav__dropdown-chev { color: var(--accent-hot); filter: drop-shadow(0 0 10px rgba(253, 229, 140, 0.7)); } .nav__dropdown.is-open .nav__dropdown-chev { transform: rotate(180deg); } .nav__dropdown-panel { position: absolute; top: calc(100% + 22px); left: -18px; min-width: 260px; background: rgba(15, 13, 11, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms; box-shadow: 0 24px 64px rgba(0,0,0,0.68), 0 0 48px rgba(253, 229, 140,0.14), inset 0 1px 0 rgba(253, 229, 140,0.14); z-index: 60; } .nav__dropdown.is-open .nav__dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Gold shimmer rule at the top of the panel */ .nav__dropdown-panel::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--gold-shimmer); opacity: 0.55; } .nav__dropdown-panel a { position: relative; /* anchors the ::before bullet to each link individually */ font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: #FFFFFF; /* crispy pure white on every dropdown item */ padding: 11px 16px 11px 3.6em; /* left padding reserves space for the larger 1.5em bullet */ border-radius: var(--r-sm); transition: color 200ms var(--ease), background 200ms var(--ease), padding-left 200ms var(--ease); white-space: nowrap; text-shadow: 0 0 12px rgba(253, 229, 140, 0.1); display: block; } .nav__dropdown-panel a:hover, .nav__dropdown-panel a:focus-visible { background-color: rgba(253, 229, 140, 0.07); background-image: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-left: 4em; /* slight rightward indent on hover (bullet stays at 0.9em) */ text-shadow: 0 0 18px rgba(253, 229, 140, 0.45); outline: none; } /* "Home" link at the top of each dropdown — flamboyant solid gold CTA matching Donate */ .nav__dropdown-panel a.nav__dropdown-home { background: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 22%, #F0C85F 55%, #D2A03E 85%, #C89637 100%); color: #0A0807; -webkit-text-fill-color: #0A0807; font-weight: 700; letter-spacing: 0.22em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 247, 205, 0.7); border-radius: var(--r-sm); margin-bottom: var(--s-1); padding: 12px 14px; position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 247, 205, 0.28), 0 0 0 1px rgba(240, 200, 95, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 22px rgba(253, 229, 140, 0.5), 0 0 44px rgba(253, 229, 140, 0.22); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease); } /* Remove the gold BTC bullet on home — it'd be invisible against the gold background */ .nav__dropdown-panel a.nav__dropdown-home::before { display: none !important; } /* Animated sheen sweep, like the other CTAs */ .nav__dropdown-panel a.nav__dropdown-home::after { content: ""; position: absolute; top: -50%; left: -120%; width: 70%; height: 200%; background: linear-gradient( 100deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: skewX(-22deg); pointer-events: none; z-index: 2; animation: btn-sheen 4.6s cubic-bezier(0.55, 0.06, 0.42, 0.98) infinite; } @media (prefers-reduced-motion: reduce) { .nav__dropdown-panel a.nav__dropdown-home::after { animation: none; } } .nav__dropdown-panel a.nav__dropdown-home:hover, .nav__dropdown-panel a.nav__dropdown-home:focus-visible { transform: translateY(-1px); border-color: rgba(255, 247, 205, 1); background: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 22%, #F0C85F 55%, #D2A03E 85%, #C89637 100%); -webkit-text-fill-color: #0A0807; color: #0A0807; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); padding-left: 14px; /* override the slide-right hover from generic anchor rule */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 247, 205, 0.7), 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 36px rgba(253, 229, 140, 0.85), 0 0 70px rgba(253, 229, 140, 0.4); } /* BTC coin bullet on every dropdown item across every dropdown (Joby / Story / Case / Action / Podcast / Press) */ /* Universal bullet anchor — every dropdown item gets a 1em icon to its left. Per-dropdown rules (below) provide the actual icon glyph via background-image. Position/padding for the bullet is reserved on .nav__dropdown-panel a above. */ .nav__dropdown-panel a::before { content: ""; position: absolute; left: 0.9em; top: 50%; transform: translateY(-50%); width: 1.5em; /* 1.5x — larger BTC favicons */ height: 1.5em; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 0 6px rgba(240, 200, 95, 0.5)); transition: transform 280ms var(--ease), filter 280ms var(--ease); } .nav__dropdown-panel a:hover::before, .nav__dropdown-panel a:focus-visible::before { transform: translateY(-50%) scale(1.15); filter: drop-shadow(0 0 8px rgba(253, 229, 140, 0.8)); } /* === Per-dropdown bullet glyphs === */ /* JOBY — BTC favicon (the man, the Bitcoin pioneer) */ .nav__dropdown--joby .nav__dropdown-panel a::before { background-image: url("../img/favicon-32.png?v=2"); } /* STORY — open book (chapters of his life) */ .nav__dropdown--story .nav__dropdown-panel a::before { background-image: url("data:image/svg+xml;utf8,"); } /* CASE — scales of justice */ .nav__dropdown--case .nav__dropdown-panel a::before { background-image: url("data:image/svg+xml;utf8,"); } /* ACTION — megaphone (raise the call) */ .nav__dropdown--action .nav__dropdown-panel a::before { background-image: url("data:image/svg+xml;utf8,"); } /* PODCAST — microphone */ .nav__dropdown--podcast .nav__dropdown-panel a::before { background-image: url("data:image/svg+xml;utf8,"); } /* On-page YouTube section heading — small red logo before the title */ .pod-section__platform-icon { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.12em; filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.4)); } /* Inline platform icon used INSIDE dropdown link text (sits between the themed gold bullet and the link label). Currently used for YouTube. */ .dropdown-platform-icon { display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.4em; vertical-align: -0.18em; filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5)); flex-shrink: 0; } /* PRESS — newspaper */ .nav__dropdown--press .nav__dropdown-panel a::before { background-image: url("data:image/svg+xml;utf8,"); } /* Reduce gap in nav at tighter widths so 6 dropdowns fit */ @media (max-width: 1180px) { .nav__links { gap: var(--s-3); } } .nav__cta { position: relative; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; padding: 10px 22px; border: 1px solid rgba(255, 247, 205, 0.7); /* Solid metallic gold fill — pops in the header */ background: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 22%, #F0C85F 55%, #D2A03E 85%, #C89637 100%); color: #0A0807; -webkit-text-fill-color: #0A0807; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); border-radius: var(--r-sm); overflow: hidden; isolation: isolate; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(240, 200, 95, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 22px rgba(253, 229, 140, 0.5), 0 0 44px rgba(253, 229, 140, 0.22); /* Donate sits within the same 24px edge padding as the logo on the left, so the two have symmetric breathing room from the viewport edges. */ margin-right: 0; } .nav__cta::before { content: ""; position: absolute; top: -50%; left: -120%; width: 70%; height: 200%; background: linear-gradient( 100deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: skewX(-22deg); pointer-events: none; z-index: 2; animation: btn-sheen 4.6s cubic-bezier(0.55, 0.06, 0.42, 0.98) infinite; } .nav__cta:hover { transform: translateY(-1px); border-color: rgba(255, 247, 205, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 247, 205, 0.7), 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 36px rgba(253, 229, 140, 0.85), 0 0 70px rgba(253, 229, 140, 0.4); } @media (prefers-reduced-motion: reduce) { .nav__cta::before { animation: none; } } /* ========================================================================== MOBILE NAVIGATION — hamburger toggle + slide-in overlay On desktop the hamburger is hidden and .nav__links is the centered horizontal row of dropdowns. On mobile (<=820px) the row is replaced by a full-screen slide-in panel triggered by the hamburger. The existing dropdown click behavior repurposes itself as accordion expansion inside the panel — same JS, different layout context. ========================================================================== */ /* Drawer-only DONATE — hidden on desktop, shown inside the mobile drawer */ .nav__cta--drawer { display: none; } .nav__menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-left: 8px; background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(240, 200, 95, 0.32); border-radius: 10px; cursor: pointer; position: relative; z-index: 60; transition: border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease); } .nav__menu-toggle:hover, .nav__menu-toggle:focus-visible { border-color: var(--accent); background: rgba(253, 229, 140, 0.08); box-shadow: 0 0 18px rgba(253, 229, 140, 0.35); outline: none; } .nav__hamburger { display: block; position: relative; width: 22px; height: 16px; } .nav__hamburger > span { display: block; position: absolute; left: 0; width: 100%; height: 1.6px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 6px rgba(253, 229, 140, 0.5); transition: transform 320ms var(--ease), opacity 240ms var(--ease), top 320ms var(--ease); } .nav__hamburger > span:nth-child(1) { top: 0; } .nav__hamburger > span:nth-child(2) { top: 7px; } .nav__hamburger > span:nth-child(3) { top: 14px; } .nav.is-menu-open .nav__hamburger > span:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav.is-menu-open .nav__hamburger > span:nth-child(2) { opacity: 0; } .nav.is-menu-open .nav__hamburger > span:nth-child(3) { top: 7px; transform: rotate(-45deg); } @media (max-width: 820px) { /* Show the hamburger toggle */ .nav__menu-toggle { display: inline-flex; } /* Convert .nav__links from inline row → fixed full-screen overlay panel. Slides in from the right when .nav.is-menu-open is set. Explicit height (rather than top + bottom auto-stretch) because flex column on a fixed element doesn't always stretch to fill via top/bottom alone — explicit height locks it to the viewport remainder below the nav header. */ .nav__links { position: fixed; top: calc(var(--nav-h) + 16px); right: 0; left: 0; width: 100%; height: calc(100vh - var(--nav-h) - 16px); height: calc(100dvh - var(--nav-h) - 16px); /* dvh handles iOS URL bar */ flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom)); background: rgba(8, 8, 8, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow-y: auto; overflow-x: hidden; border-top: 1px solid rgba(240, 200, 95, 0.24); box-shadow: 0 0 24px rgba(253, 229, 140, 0.1), inset 0 1px 0 rgba(253, 229, 140, 0.18); transform: translateX(100%); visibility: hidden; transition: transform 360ms var(--ease), visibility 0s linear 360ms; z-index: 49; } .nav.is-menu-open .nav__links { transform: translateX(0); visibility: visible; transition: transform 360ms var(--ease), visibility 0s linear 0s; } /* Mobile dropdowns become accordion sections — full-width vertical stacks instead of inline-flex row containers (which would put the dropdown panel side-by-side with the trigger button instead of below it). */ .nav__dropdown { display: block; width: 100%; border-bottom: 1px solid rgba(240, 200, 95, 0.14); } .nav__dropdown:last-child { border-bottom: none; } .nav__dropdown-trigger { width: 100%; padding: 18px 12px; justify-content: space-between; text-align: left; font-size: 1rem; letter-spacing: 0.22em; border-radius: 0; } .nav__dropdown-chev { width: 14px; height: 10px; } /* Panel becomes inline collapsible accordion content */ .nav__dropdown-panel { position: relative !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: hidden; pointer-events: auto; width: 100%; min-width: 0; max-height: 0; overflow: hidden; margin: 0; padding: 0; background: rgba(20, 20, 20, 0.5); border: none; box-shadow: inset 0 1px 0 rgba(240, 200, 95, 0.1); border-radius: 0; transition: max-height 360ms var(--ease), padding 360ms var(--ease); } .nav__dropdown.is-open .nav__dropdown-panel { visibility: visible; max-height: 720px; padding: 8px 0 12px; } .nav__dropdown-panel::before { display: none; } .nav__dropdown-panel a { /* Preserve the left-padding that reserves space for the ::before bullet icon (the BTC coin / book / scales etc.). The bullet sits at left: 0.9em and is 1.5em wide, so text needs ~3.4em+ of left padding to clear it. */ padding: 14px 16px 14px 3.6em; font-size: 0.95rem; } /* "Start Here" gold button stays full-width with normal padding */ .nav__dropdown-panel a.nav__dropdown-home { padding: 14px 16px; } /* On mobile the HEADER DONATE is hidden — DONATE moves inside the drawer as the last item so the header stays clean (logo + hamburger only). */ .nav__cta:not(.nav__cta--drawer) { display: none !important; } /* The drawer DONATE — prominent full-width gold button at the END of the mobile slide-in panel. Solid metallic fill, dark text, small glow. */ .nav__cta--drawer { display: block !important; margin-top: 24px; width: 100%; text-align: center; padding: 16px 24px !important; font-size: 0.95rem !important; letter-spacing: 0.22em; font-weight: 700; border-radius: var(--r-sm); } /* Lock body scroll when menu is open */ body.menu-open-no-scroll { overflow: hidden; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: clamp(720px, 100vh, 900px); /* capped so it doesn't stretch on zoom-out / tall viewports */ display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + var(--s-5)) var(--s-4) var(--s-6); overflow: hidden; } /* Ambient gold glow (very subtle) */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(240, 200, 95, 0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 0%, rgba(240, 200, 95, 0.06), transparent 60%); pointer-events: none; } .hero__inner { position: relative; text-align: center; max-width: 1632px; width: 100%; padding: 0 var(--s-3); } .hero__eyebrow { margin-bottom: var(--s-5); display: flex; align-items: center; justify-content: center; gap: var(--s-2); } .hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } } .hero__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero); line-height: 0.92; letter-spacing: -0.025em; margin-bottom: var(--s-5); } /* ============================================================ CTA Buttons — Flamboyant, jewelry-grade gold - .btn--primary : SOLID gold metallic fill, black text, animated shimmer sweep - .btn / .btn--ghost : outlined gold-gloss text, layered halo glow, animated breathing radiance Both have multi-ring shadows + outer halo + animated highlight on idle ============================================================ */ /* ---------- Base shared structure ---------- */ .btn, .btn--primary, .btn--ghost { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); text-align: center; padding: 16px 34px; font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease); } /* Animated sheen — diagonal highlight glides across the button every ~4s */ .btn::before, .btn--primary::before, .btn--ghost::before { content: ""; position: absolute; top: -50%; left: -120%; width: 70%; height: 200%; background: linear-gradient( 100deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: skewX(-22deg); pointer-events: none; z-index: 2; animation: btn-sheen 4.6s cubic-bezier(0.55, 0.06, 0.42, 0.98) infinite; } /* Outer pulsating gold halo — soft, breathes on idle */ .btn::after, .btn--primary::after, .btn--ghost::after { content: ""; position: absolute; inset: -8px; border-radius: calc(var(--r-sm) + 8px); background: radial-gradient( ellipse 70% 60% at 50% 50%, rgba(253, 229, 140, 0.45) 0%, rgba(240, 200, 95, 0.18) 45%, transparent 75%); filter: blur(12px); pointer-events: none; z-index: -1; animation: btn-halo-breathe 3.8s ease-in-out infinite; } @keyframes btn-sheen { 0% { left: -120%; } 55% { left: 160%; } 100% { left: 160%; } } @keyframes btn-halo-breathe { 0%, 100% { opacity: 0.65; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .btn::before, .btn--primary::before, .btn--ghost::before, .btn::after, .btn--primary::after, .btn--ghost::after { animation: none; } } /* ---------- Primary CTA — solid metallic gold (Rolex grade) ---------- */ .btn--primary { background: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 22%, #F0C85F 55%, #D2A03E 85%, #C89637 100%); color: #0A0807; -webkit-text-fill-color: #0A0807; border: 1px solid rgba(255, 247, 205, 0.7); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), /* top inner highlight */ inset 0 -1px 0 rgba(0, 0, 0, 0.28), /* bottom inner shadow */ inset 0 0 0 1px rgba(255, 247, 205, 0.28), /* polished edge */ 0 0 0 1px rgba(240, 200, 95, 0.55), /* outer edge ring */ 0 8px 24px rgba(0, 0, 0, 0.45), /* drop */ 0 0 36px rgba(253, 229, 140, 0.55), /* near halo */ 0 0 64px rgba(253, 229, 140, 0.28); /* far halo */ } .btn--primary:hover { transform: translateY(-2px); border-color: rgba(255, 247, 205, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 247, 205, 0.45), 0 0 0 1px rgba(255, 247, 205, 0.7), 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 56px rgba(253, 229, 140, 0.85), 0 0 96px rgba(253, 229, 140, 0.42); } .btn--primary::after { filter: blur(14px); } /* ---------- All CTAs (.btn, .btn--ghost, default) match the Donate flagship — solid metallic gold, black text, sheen + halo. No more outlined ghost. ---------- */ .btn, .btn--ghost { background: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 22%, #F0C85F 55%, #D2A03E 85%, #C89637 100%); color: #0A0807; -webkit-text-fill-color: #0A0807; border: 1px solid rgba(255, 247, 205, 0.7); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 247, 205, 0.28), 0 0 0 1px rgba(240, 200, 95, 0.55), 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 36px rgba(253, 229, 140, 0.55), 0 0 64px rgba(253, 229, 140, 0.28); } .btn:hover, .btn--ghost:hover { transform: translateY(-2px); border-color: rgba(255, 247, 205, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 247, 205, 0.45), 0 0 0 1px rgba(255, 247, 205, 0.7), 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 56px rgba(253, 229, 140, 0.85), 0 0 96px rgba(253, 229, 140, 0.42); } .btn__arrow { transition: transform 260ms var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .hero__scroll { display: none !important; } /* removed per design direction */ /* ---------- Section — generic (tightened) ---------- */ .section { /* Fluid section padding — generous on desktop, tight on mobile (no wasted vertical space) */ padding: clamp(56px, 7.5vw, 96px) 0; position: relative; } .section--tight { padding: clamp(36px, 4.5vw, 64px) 0; } .section--dark { background: #050505; } .section__header { max-width: 680px; margin: 0 auto var(--s-5); text-align: center; } .section__header .kicker { display: block; margin-bottom: var(--s-2); } .section__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.0; letter-spacing: -0.02em; } .section__title em { font-style: italic; color: var(--accent); } .section__lead { margin-top: var(--s-3); } .endorsement__kicker { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: var(--s-5); display: block; } .endorsement__poster { max-width: 780px; margin: 0 auto var(--s-5); position: relative; aspect-ratio: 16/9; overflow: hidden; border: 2px solid var(--accent-hot); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.45), 0 0 0 1px rgba(240, 200, 95, 0.5), 0 0 32px rgba(253, 229, 140, 0.5), 0 0 80px -10px rgba(240, 200, 95, 0.4), 0 40px 100px -30px rgba(0, 0, 0, 0.9); transition: box-shadow 520ms var(--ease); } .endorsement__poster:hover { box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.6), 0 0 0 1px rgba(240, 200, 95, 0.65), 0 0 50px rgba(253, 229, 140, 0.75), 0 0 120px -10px rgba(240, 200, 95, 0.55), 0 40px 100px -30px rgba(0, 0, 0, 0.9); } .endorsement__poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.5s var(--ease); border-radius: 0; } .endorsement__poster:hover img { transform: scale(1.03); } /* Film block consolidated INTO the hero section (wraps kicker + player + quote + attribution + action-pill, sits beneath the CTAs, framed by a gold shimmer rule on top) */ .hero__film { width: 100%; max-width: 1120px; margin: var(--s-7) auto 0; padding: var(--s-6) var(--s-3) 0; position: relative; text-align: center; } /* Lead variant — film is the hero, wrapped in the same bespoke bracket case as every other card on the site (8 gold L-brackets at corners + diagonal shimmer + hover lift). 2× the prior size — fills most of the viewport so the video is the dominant inspiring element of the page. */ .hero__film--lead { margin-top: var(--s-3); padding: var(--s-3) var(--s-3); max-width: 100%; /* fill the hero width with the case */ width: 100%; position: relative; background: linear-gradient(var(--accent), var(--accent)) top 14px left 14px / 28px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 14px left 14px / 1px 28px no-repeat, linear-gradient(var(--accent), var(--accent)) top 14px right 14px / 28px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 14px right 14px / 1px 28px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 14px left 14px / 28px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 14px left 14px / 1px 28px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 14px right 14px / 28px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 14px right 14px / 1px 28px no-repeat, var(--bg); overflow: hidden; transition: background 460ms var(--ease), transform 460ms var(--ease); } .hero__film--lead::before { /* shimmer overlay (matches bespoke card mixin) — overrides the prior top-divider */ content: ""; position: absolute; inset: 0; display: block; background: linear-gradient(115deg, transparent 32%, rgba(253, 229, 140, 0.10) 50%, transparent 68%); background-size: 220% 100%; background-position: -100% 0; transition: background-position 1400ms var(--ease); pointer-events: none; z-index: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; opacity: 1; /* override base .hero__film::before */ top: auto; left: auto; right: auto; transform: none; } .hero__film--lead > * { position: relative; z-index: 1; } .hero__film--lead:hover { background: linear-gradient(var(--accent-hot), var(--accent-hot)) top 14px left 14px / 40px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 14px left 14px / 1px 40px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 14px right 14px / 40px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 14px right 14px / 1px 40px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 14px left 14px / 40px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 14px left 14px / 1px 40px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 14px right 14px / 40px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 14px right 14px / 1px 40px no-repeat, radial-gradient(ellipse 80% 60% at 50% 0%, rgba(253, 229, 140, 0.06), transparent 70%), var(--bg); } .hero__film--lead:hover::before { background-position: 200% 0; } .hero__film--lead .endorsement__player { /* -25% from the prior effective ~1632px parent-cap to ~1224px, so both video width AND height (16:9) shrink by 25%. Centered in the case. */ max-width: 1224px; width: 75%; margin-left: auto; margin-right: auto; border-width: 2px; border-color: rgba(255, 247, 205, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.5), 0 0 0 1px rgba(240, 200, 95, 0.7), 0 0 90px rgba(253, 229, 140, 0.6), 0 0 220px -20px rgba(240, 200, 95, 0.55), 0 60px 140px -30px rgba(0, 0, 0, 0.9); } @media (max-width: 900px) { .hero__film--lead { padding: var(--s-2) var(--s-2); } .hero__film--lead .endorsement__player { width: 100%; max-width: 100%; } } @media (max-width: 600px) { .hero__film--lead { padding: var(--s-1) var(--s-1); } .hero__inner { padding: 0 var(--s-2); } } .hero__film--lead .endorsement__quote { font-size: clamp(1.75rem, 3vw, 2.4rem); margin-top: var(--s-5); } .hero__film--lead .endorsement__attr { font-size: var(--fs-small); } .hero__film::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(320px, 40%); height: 1px; background: var(--gold-shimmer); opacity: 0.9; box-shadow: 0 0 16px rgba(253, 229, 140, 0.4); } .hero__film .endorsement__kicker, .hero__film .endorsement__quote, .hero__film .endorsement__attr { text-align: center; } /* Film player (YouTube facade — iframe loads on click) */ .endorsement__player { position: relative; max-width: 920px; /* -18% from previous 1120 per design direction */ width: 100%; margin: 0 auto var(--s-5); aspect-ratio: 16/9; border: 2px solid var(--accent-hot); border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.45), 0 0 0 1px rgba(240, 200, 95, 0.5), 0 0 48px rgba(253, 229, 140, 0.45), 0 0 120px -10px rgba(240, 200, 95, 0.35), 0 50px 120px -30px rgba(0, 0, 0, 0.9); transition: box-shadow 520ms var(--ease); } .endorsement__player:hover { box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.6), 0 0 0 1px rgba(240, 200, 95, 0.7), 0 0 70px rgba(253, 229, 140, 0.7), 0 0 160px -10px rgba(240, 200, 95, 0.5), 0 50px 120px -30px rgba(0, 0, 0, 0.9); } /* Facade and iframe are both absolutely positioned to fill the player frame exactly — guarantees the video stays the same size when play is pressed. */ .endorsement__player-facade, .endorsement__player-iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; border-radius: 0; } .endorsement__player-facade { padding: 0; background: #000; cursor: pointer; overflow: hidden; } .endorsement__player-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform 1.5s var(--ease), filter 520ms var(--ease); filter: brightness(0.92); } .endorsement__player-facade:hover .endorsement__player-poster-img { transform: scale(1.02); filter: brightness(1); } .endorsement__player-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(72px, 10vw, 120px); height: clamp(72px, 10vw, 120px); filter: drop-shadow(0 0 32px rgba(253, 229, 140, 0.55)); transition: transform 400ms var(--ease), filter 400ms var(--ease); } .endorsement__player-facade:hover .endorsement__player-btn { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 0 48px rgba(253, 229, 140, 0.85)); } .endorsement__player-btn svg { width: 100%; height: 100%; display: block; } .endorsement__player-iframe { background: #000; } .endorsement__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; color: var(--text); max-width: 760px; margin: var(--s-4) auto var(--s-2); letter-spacing: -0.005em; } .endorsement__attr { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-top: var(--s-4); } .endorsement__attr .role { display: block; margin-top: 6px; color: var(--text-muted); font-size: var(--fs-micro); letter-spacing: 0.16em; } /* ---------- Featured Media (Watch + Listen split) ---------- */ .media-section { padding: var(--s-6) var(--s-4); } .media-section__header { max-width: 700px; margin: 0 auto var(--s-5); text-align: center; } .media-section__cta { text-align: center; margin: var(--s-6) auto 0; max-width: var(--max-w); } .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); max-width: 1240px; margin: 0 auto; padding: 0 var(--s-4); } @media (max-width: 900px) { .media-grid { grid-template-columns: 1fr; gap: var(--s-6); } } /* Podcast page sections use the same 2-col media-grid layout for consistency */ .pod-section .media-grid { margin: 0 auto; padding: 0; } .media-tile { display: flex; flex-direction: column; align-items: center; text-align: center; } .media-tile__kicker { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: var(--s-2); text-align: center; display: block; width: 100%; } .media-tile__label { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.15; margin-bottom: var(--s-3); text-align: center; width: 100%; } /* XL variant — used on featured tiles (e.g. "Bitcoin Kingpin" first-interview embed on the home page). Scales from h3 territory up to dramatic h2 size on larger screens so the headline carries the gravity of the moment. */ .media-tile__label--xl { font-size: clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing: -0.01em; line-height: 1.05; margin-bottom: var(--s-4); } .media-tile__frame { width: 100%; } .media-tile__caption { text-align: center; } .media-tile__label em { font-style: italic; color: var(--accent); } .media-tile__frame { position: relative; aspect-ratio: 16/9; background: #000; border: 2px solid var(--accent-hot); overflow: hidden; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.4), 0 0 0 1px rgba(240, 200, 95, 0.45), 0 0 28px rgba(253, 229, 140, 0.45), 0 0 70px -10px rgba(240, 200, 95, 0.35), 0 24px 60px -24px rgba(0, 0, 0, 0.8); transition: box-shadow 480ms var(--ease); } .media-tile__frame:hover { box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.55), 0 0 0 1px rgba(240, 200, 95, 0.6), 0 0 44px rgba(253, 229, 140, 0.65), 0 0 100px -10px rgba(240, 200, 95, 0.5), 0 24px 60px -24px rgba(0, 0, 0, 0.8); } .media-tile__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .media-tile__caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-dim); line-height: 1.5; } .media-tile__caption strong { color: var(--text); font-weight: 500; } /* Non-embeddable platform — placeholder frame that links externally */ .media-tile__frame--link { display: flex; align-items: center; justify-content: center; text-decoration: none; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(253, 229, 140, 0.08), transparent 70%), linear-gradient(180deg, #0A0807 0%, #050505 100%); cursor: pointer; transition: filter 380ms var(--ease), box-shadow 380ms var(--ease); } .media-tile__frame--link:hover { filter: brightness(1.18); } .media-tile__link-poster { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; height: 100%; text-align: center; padding: var(--s-4); } .media-tile__platform-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.1; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 18px rgba(253, 229, 140, 0.45)); } .media-tile__open-cta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; } .media-tile__frame--link:hover .media-tile__open-cta { color: var(--text); text-shadow: 0 0 14px rgba(253, 229, 140, 0.45); } /* ---------- The Dossier (3-column verbatim pillars) ---------- */ .dossier { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-4); } .dossier__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-6); } @media (max-width: 900px) { .dossier__grid { grid-template-columns: 1fr; gap: var(--s-6); } } .dossier__col { display: flex; flex-direction: column; padding: 0; position: relative; text-align: center; } .dossier__portrait { aspect-ratio: 4/5; margin-bottom: var(--s-4); overflow: hidden; background: #0A0A0A; border: 2px solid var(--accent-hot); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.35), 0 0 0 1px rgba(240, 200, 95, 0.4), 0 0 26px rgba(253, 229, 140, 0.35), 0 0 70px -14px rgba(240, 200, 95, 0.28), 0 20px 50px -20px rgba(0, 0, 0, 0.75); transition: box-shadow 520ms var(--ease); } .dossier__col:hover .dossier__portrait { box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.55), 0 0 0 1px rgba(240, 200, 95, 0.6), 0 0 44px rgba(253, 229, 140, 0.6), 0 0 100px -10px rgba(240, 200, 95, 0.45), 0 20px 50px -20px rgba(0, 0, 0, 0.75); } .dossier__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05) brightness(0.95); transition: filter 700ms var(--ease), transform 1.2s var(--ease); display: block; } .dossier__col:hover .dossier__portrait img { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.03); } .dossier__inner { padding: 0 var(--s-2) var(--s-5); } .dossier__kicker { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; /* LOGO GOLD — solid luminous gold, same hue as the JOBY WEEKS wordmark. Subtle text-shadow gives it a soft glow against dark bg. */ color: var(--accent); text-shadow: 0 0 12px rgba(253, 229, 140, 0.45), 0 0 2px rgba(255, 247, 205, 0.6); font-weight: 500; margin-bottom: var(--s-2); } .dossier__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--s-4); } .dossier__title em { font-style: italic; color: var(--accent); } .dossier__body p { font-size: var(--fs-body); line-height: 1.65; color: var(--text-dim); margin-bottom: var(--s-3); text-align: left; } .dossier__body p:last-child { margin-bottom: 0; } /* Political titles list — editorial numbered progression (local → national climb) */ /* ---------- Titles Held — the Rank Ascent ladder ---------- */ /* Strip border from the last pair of grid items so the bottom edge of the two columns doesn't double-rule above the crown */ /* Crown item — VII / the RNC '08 culmination */ /* ============================================================ FLAMBOYANT WOW-FACTOR LAYER ============================================================ */ /* ---------- Ambient gold particles (hero background) ---------- */ .hero__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero__particles span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, #FFF7CD 0%, #FDE58C 40%, transparent 70%); box-shadow: 0 0 8px rgba(253, 229, 140, 0.6); opacity: 0; animation: particle-float 18s ease-in-out infinite; } .hero__particles span:nth-child(1){ left: 10%; animation-delay: 0s; animation-duration: 22s; } .hero__particles span:nth-child(2){ left: 25%; animation-delay: 3s; animation-duration: 26s; width: 3px; height: 3px; } .hero__particles span:nth-child(3){ left: 42%; animation-delay: 6s; animation-duration: 20s; width: 5px; height: 5px; } .hero__particles span:nth-child(4){ left: 58%; animation-delay: 2s; animation-duration: 24s; } .hero__particles span:nth-child(5){ left: 72%; animation-delay: 8s; animation-duration: 28s; width: 3px; height: 3px; } .hero__particles span:nth-child(6){ left: 85%; animation-delay: 5s; animation-duration: 21s; } .hero__particles span:nth-child(7){ left: 16%; animation-delay: 11s; animation-duration: 25s; width: 3px; height: 3px; } .hero__particles span:nth-child(8){ left: 93%; animation-delay: 14s; animation-duration: 19s; width: 5px; height: 5px; } @keyframes particle-float { 0% { transform: translateY(110vh) scale(0.5); opacity: 0; } 10% { opacity: 0.55; } 50% { opacity: 0.9; } 90% { opacity: 0.4; } 100% { transform: translateY(-20vh) scale(1.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero__particles { display: none; } } /* Keep hero content above particles */ .hero__inner { position: relative; z-index: 2; } /* ---------- Action Pill row (three unified gold-outlined CTAs) ---------- */ .action-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); margin: var(--s-5) auto 0; padding: 0; background: transparent; border: none; box-shadow: none; } /* All action-pill items (Sign · Donate · Share) match the Donate flagship */ .action-pill__item { position: relative; font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; background: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 22%, #F0C85F 55%, #D2A03E 85%, #C89637 100%); color: #0A0807; -webkit-text-fill-color: #0A0807; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); padding: 16px 30px; border: 1px solid rgba(255, 247, 205, 0.7); border-radius: var(--r-sm); transition: border-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease); white-space: nowrap; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 247, 205, 0.28), 0 0 0 1px rgba(240, 200, 95, 0.55), 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 36px rgba(253, 229, 140, 0.55), 0 0 64px rgba(253, 229, 140, 0.28); } .action-pill__item::before { content: ""; position: absolute; top: -50%; left: -120%; width: 70%; height: 200%; background: linear-gradient( 100deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); transform: skewX(-22deg); pointer-events: none; z-index: 2; animation: btn-sheen 4.6s cubic-bezier(0.55, 0.06, 0.42, 0.98) infinite; } .action-pill__item::after { content: ""; position: absolute; inset: -6px; border-radius: calc(var(--r-sm) + 6px); background: radial-gradient( ellipse 70% 60% at 50% 50%, rgba(253, 229, 140, 0.4) 0%, rgba(240, 200, 95, 0.16) 45%, transparent 75%); filter: blur(10px); pointer-events: none; z-index: -1; animation: btn-halo-breathe 3.8s ease-in-out infinite; } /* Donate variant — visually identical now that all items share the flagship treatment */ .action-pill__item--primary { /* same as default — kept for semantics */ } .action-pill__item:hover, .action-pill__item--primary:hover { transform: translateY(-2px); border-color: rgba(255, 247, 205, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 247, 205, 0.45), 0 0 0 1px rgba(255, 247, 205, 0.7), 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 56px rgba(253, 229, 140, 0.85), 0 0 96px rgba(253, 229, 140, 0.42); } .action-pill__item--primary { /* no special fill — unified format */ } @media (max-width: 600px) { .action-pill { gap: 8px; flex-wrap: wrap; } .action-pill__item { padding: 12px 20px; font-size: 0.72rem; letter-spacing: 0.18em; } } /* ---------- Count-up stat number enhancement ---------- */ .facts__num.is-counting { opacity: 0.5; } .facts__num.is-counted { opacity: 1; transition: opacity 280ms var(--ease); } /* ---------- FREE JOBY Poster Lightbox Modal ---------- */ .poster-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease); } .poster-modal.is-open { opacity: 1; pointer-events: auto; } .poster-modal__close { position: absolute; top: 32px; right: 32px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent); background: rgba(10, 10, 10, 0.6); background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 22px; line-height: 1; cursor: pointer; transition: all 240ms var(--ease); z-index: 2; } .poster-modal__close:hover { background: var(--accent); color: #000; box-shadow: 0 0 24px rgba(253, 229, 140, 0.55); } .poster-modal__content { max-width: min(1200px, 92vw); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); transform: scale(0.94); transition: transform 520ms var(--ease); } .poster-modal.is-open .poster-modal__content { transform: scale(1); } .poster-modal__img { width: 100%; max-height: 72vh; object-fit: contain; border: 2px solid var(--accent-hot); border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(240, 200, 95, 0.5), 0 0 60px rgba(253, 229, 140, 0.55), 0 40px 100px -20px rgba(0, 0, 0, 0.9); } .poster-modal__caption { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 18px rgba(253, 229, 140, 0.35); } /* Clickable poster cursor hint */ .endorsement__poster { cursor: zoom-in; } /* ============================================================ WAVE 2 — Kinetic cinema mode ============================================================ */ /* ---------- Page transition fade ---------- */ body { animation: page-in 520ms var(--ease) both; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } body.page-leave { opacity: 0; transition: opacity 320ms var(--ease); } /* ---------- Kinetic hero entrance (letter stagger + shimmer) ---------- */ .hero__title .kin-word { display: inline-block; white-space: nowrap; /* keep each word atomic so letters never break mid-word */ } .hero__title .kin-letter { display: inline-block; opacity: 0; transform: translateY(60px) rotateX(55deg); transform-origin: 50% 100%; animation: letter-rise 900ms cubic-bezier(0.18, 0.9, 0.2, 1.1) forwards; animation-delay: calc(var(--d, 0) * 70ms + 240ms); will-change: transform, opacity; } .hero__title .kin-space { display: inline; white-space: normal; } /* let italic em stay inline so kin-word inside can flex */ @keyframes letter-rise { to { opacity: 1; transform: translateY(0) rotateX(0); } } .hero__title { position: relative; padding: 0.12em 0.18em 0.22em; /* breathing room for italic descenders + letter rotate */ margin: -0.12em -0.18em var(--s-5); } @keyframes shimmer-sweep { 0% { opacity: 0; background-position: -100% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .hero__title .kin-letter { opacity: 1; transform: none; animation: none; } } /* ---------- Coin shower ---------- */ /* Default (BTC) — warm gold halo */ img.gold-coin, .gold-coin { position: fixed; top: -80px; left: 0; width: 70px; /* meet-in-the-middle between 56 and 84 */ height: 70px; border-radius: 0 !important; /* override the global img { border-radius: var(--r-md) } */ display: block; filter: drop-shadow(0 0 18px rgba(253, 229, 140, 0.85)) drop-shadow(0 0 32px rgba(253, 229, 140, 0.45)); pointer-events: none; z-index: 150; animation: coin-fall var(--dur, 2600ms) cubic-bezier(0.3, 0.3, 0.7, 1) forwards; user-select: none; -webkit-user-drag: none; } /* ETH coins — silver/platinum halo to match the silver coin face. The attribute selector targets any falling coin whose src points at the eth-coin sprite, so no JS plumbing is needed. */ img.gold-coin[src*="eth-coin"] { filter: drop-shadow(0 0 18px rgba(220, 224, 232, 0.85)) drop-shadow(0 0 32px rgba(220, 224, 232, 0.45)); } @keyframes coin-fall { 0% { transform: translateY(-60px) rotate(0deg) scale(0.6); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(calc(100vh + 80px)) rotate(var(--rot, 720deg)) scale(1); opacity: 0; } } /* Mobile: shower coins at 72% of desktop size (70px → 50px). The original 60% (42px) was too small to read once we have higher-detail ETH coins in the mix; +20% brings them to a size where the engraving is legible without dominating the small viewport. */ @media (max-width: 600px) { img.gold-coin, .gold-coin { width: 50px; height: 50px; } } /* ---------- "World Is Watching" ticker ---------- */ .ticker { position: relative; padding: var(--s-4) 0; background: linear-gradient(90deg, #050505, #0A0807 50%, #050505); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; box-shadow: inset 0 0 60px rgba(253, 229, 140, 0.06); } .ticker__track { display: inline-flex; gap: var(--s-7); white-space: nowrap; animation: ticker-scroll 45s linear infinite; padding-left: 100%; } .ticker__item { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--text); display: inline-flex; align-items: center; gap: var(--s-3); } .ticker__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(253, 229, 140, 0.6); flex-shrink: 0; } .ticker__attr { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; margin-left: var(--s-3); background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 12px rgba(253, 229, 140, 0.28); font-weight: 500; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } } /* ---------- Life portrait parallax tilt ---------- */ .life__portrait { transform-style: preserve-3d; transition: transform 180ms var(--ease), box-shadow 520ms var(--ease); will-change: transform; } /* ---------- Pedigree name tooltip ---------- */ .pedigree__row { position: relative; } .pedigree__bio { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 620ms var(--ease), opacity 420ms var(--ease), margin-top 420ms var(--ease); font-family: var(--font-display); font-style: italic; font-size: 0.98rem; line-height: 1.5; color: #FFFFFF; max-width: 52ch; margin: 0 auto; } .pedigree__row:hover .pedigree__bio, .pedigree__row:focus-within .pedigree__bio { max-height: 240px; opacity: 1; margin-top: var(--s-3); } .pedigree__row { cursor: default; } .pedigree__row:hover { background: rgba(253, 229, 140, 0.03); } /* ---------- Timeline scroll-progress line (case.html) ---------- */ .timeline { position: relative; } .timeline__progress { position: absolute; left: 86px; top: 0; width: 2px; height: var(--progress, 0%); background: var(--accent); box-shadow: 0 0 12px rgba(253, 229, 140, 0.6); transition: height 80ms linear; pointer-events: none; z-index: 1; } @media (max-width: 700px) { .timeline__progress { left: 4px; } } /* ---------- Gold constellation canvas (Why Now background) ---------- */ .why-now { position: relative; overflow: hidden; } .constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.55; } .why-now .container { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .constellation { display: none; } } /* ---------- Ambient audio toggle ---------- */ /* Coin trigger - fixed circular button bottom-left that fires a coin shower when clicked. Replaces the old music/ambient-audio toggle. */ .coin-trigger { position: fixed; bottom: 24px; left: 24px; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid var(--accent); z-index: 35; display: flex; align-items: center; justify-content: center; transition: transform 240ms var(--ease), background-color 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); box-shadow: 0 0 24px rgba(253, 229, 140, 0.45), 0 0 0 1px rgba(240, 200, 95, 0.35), inset 0 0 0 1px rgba(255, 247, 205, 0.18); cursor: pointer; animation: coin-trigger-pulse 2.4s ease-in-out infinite alternate; } .coin-trigger img { width: 30px; height: 30px; border-radius: 0 !important; filter: drop-shadow(0 0 8px rgba(253, 229, 140, 0.7)); pointer-events: none; user-select: none; -webkit-user-drag: none; transition: transform 240ms var(--ease), filter 240ms var(--ease); } .coin-trigger:hover { transform: scale(1.08); background: rgba(253, 229, 140, 0.12); border-color: var(--accent-hot); box-shadow: 0 0 36px rgba(253, 229, 140, 0.75), 0 0 0 1px rgba(255, 247, 205, 0.6), inset 0 0 0 1px rgba(255, 247, 205, 0.35); } .coin-trigger:hover img { transform: rotate(-15deg) scale(1.1); filter: drop-shadow(0 0 14px rgba(253, 229, 140, 0.95)); } .coin-trigger:active { transform: scale(0.96); } @keyframes coin-trigger-pulse { from { box-shadow: 0 0 18px rgba(253, 229, 140, 0.35), 0 0 0 1px rgba(240, 200, 95, 0.3), inset 0 0 0 1px rgba(255, 247, 205, 0.15); } to { box-shadow: 0 0 32px rgba(253, 229, 140, 0.65), 0 0 0 1px rgba(240, 200, 95, 0.5), inset 0 0 0 1px rgba(255, 247, 205, 0.28); } } @media (prefers-reduced-motion: reduce) { .coin-trigger { animation: none; } } @media (max-width: 600px) { .coin-trigger { bottom: 80px; width: 46px; height: 46px; } .coin-trigger img { width: 26px; height: 26px; } } /* Inline word-coin — small clickable shower trigger placed directly BEFORE a specific word in body copy (e.g. "Bitcoins" or "Ethereum" in the BitClub mining sentence). The button sits inline at the text baseline and fires the appropriate shower on click. Sized 1.33x larger than the original stacked version (35px / 22px sprite) so it reads as a substantial inline token rather than a decorative dot. */ .word-coin { display: inline-flex; flex-direction: row; align-items: center; vertical-align: middle; gap: 0.3em; line-height: 1; } .word-coin__btn { width: 35px; height: 35px; padding: 0; border-radius: 50%; background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 240ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); flex-shrink: 0; } .word-coin__btn img { width: 22px; height: 22px; pointer-events: none; user-select: none; -webkit-user-drag: none; border-radius: 0 !important; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); } .word-coin__btn:active { transform: scale(0.94); } /* BTC variant — gold ring matching the bottom-left corner trigger */ .word-coin--btc .word-coin__btn { border: 1.5px solid var(--accent); box-shadow: 0 0 12px rgba(253, 229, 140, 0.4), 0 0 0 1px rgba(240, 200, 95, 0.3); } .word-coin--btc .word-coin__btn:hover { background: rgba(253, 229, 140, 0.14); border-color: var(--accent-hot); box-shadow: 0 0 22px rgba(253, 229, 140, 0.75), 0 0 0 1px rgba(255, 247, 205, 0.5); transform: scale(1.14); } .word-coin--btc .word-coin__btn:hover img { filter: drop-shadow(0 0 6px rgba(253, 229, 140, 0.9)); } /* ETH variant — silver/platinum ring matching the bottom-right corner trigger */ .word-coin--eth .word-coin__btn { border: 1.5px solid #E8EAEE; box-shadow: 0 0 12px rgba(220, 224, 232, 0.4), 0 0 0 1px rgba(200, 204, 210, 0.3); } .word-coin--eth .word-coin__btn:hover { background: rgba(220, 224, 232, 0.14); border-color: #FFFFFF; box-shadow: 0 0 22px rgba(220, 224, 232, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.5); transform: scale(1.14); } .word-coin--eth .word-coin__btn:hover img { filter: drop-shadow(0 0 6px rgba(245, 246, 248, 0.95)); } /* ETH coin trigger — bottom-right twin of the BTC coin. Same diameter, same ring weight, same hover physics — but silver/platinum instead of gold so the two read as a matched pair (BTC left, ETH right). Click fires an ETH-coin shower (same physics as the BTC shower, different sprite). */ .eth-trigger { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid #E8EAEE; z-index: 35; display: flex; align-items: center; justify-content: center; transition: transform 240ms var(--ease), background-color 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); box-shadow: 0 0 24px rgba(220, 224, 232, 0.42), 0 0 0 1px rgba(200, 204, 210, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.18); cursor: pointer; animation: eth-trigger-pulse 2.4s ease-in-out infinite alternate; } .eth-trigger img { width: 30px; height: 30px; border-radius: 0 !important; filter: drop-shadow(0 0 8px rgba(220, 224, 232, 0.7)); pointer-events: none; user-select: none; -webkit-user-drag: none; transition: transform 240ms var(--ease), filter 240ms var(--ease); } .eth-trigger:hover { transform: scale(1.08); background: rgba(220, 224, 232, 0.12); border-color: #FFFFFF; box-shadow: 0 0 36px rgba(220, 224, 232, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.32); } .eth-trigger:hover img { transform: rotate(15deg) scale(1.1); filter: drop-shadow(0 0 14px rgba(245, 246, 248, 0.95)); } .eth-trigger:active { transform: scale(0.96); } @keyframes eth-trigger-pulse { from { box-shadow: 0 0 18px rgba(220, 224, 232, 0.32), 0 0 0 1px rgba(200, 204, 210, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.15); } to { box-shadow: 0 0 32px rgba(220, 224, 232, 0.62), 0 0 0 1px rgba(220, 224, 232, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.28); } } @media (prefers-reduced-motion: reduce) { .eth-trigger { animation: none; } } @media (max-width: 600px) { .eth-trigger { bottom: 80px; width: 46px; height: 46px; } .eth-trigger img { width: 26px; height: 26px; } } /* ---------- "The Interrupted Day" — cinematic opener + arrest-reel embed ---------- */ .interrupted { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-6); overflow: hidden; padding: clamp(56px, 7vw, 96px) var(--s-4); background: radial-gradient(ellipse at center top, rgba(240, 200, 95,0.04) 0%, transparent 60%), #0A0A0A; } .interrupted__img { display: none; } /* deprecated — replaced by reel */ .interrupted__reel { position: relative; z-index: 2; width: min(100%, 1000px); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); } .interrupted__video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; object-fit: cover; box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(240, 200, 95,0.35), 0 0 60px rgba(253, 229, 140,0.18); } .interrupted__poster-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(240, 200, 95,0.35), 0 0 60px rgba(253, 229, 140,0.18); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); } .interrupted__poster-wrap:hover { transform: translateY(-2px); box-shadow: 0 40px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(253, 229, 140,0.55), 0 0 80px rgba(253, 229, 140,0.28); } /* Chapter-card variant — no hover lift, no play button, static prestige display */ .interrupted__poster-wrap--static { cursor: default; } .interrupted__poster-wrap--static:hover { transform: none; } .interrupted__poster-wrap--static .interrupted__poster { filter: none; } .interrupted__poster-wrap--static:hover .interrupted__poster { transform: none; filter: none; } .interrupted__poster { width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: grayscale(0.1) contrast(1.05) brightness(0.88); transition: filter 400ms var(--ease), transform 2s var(--ease); } .interrupted__poster-wrap:hover .interrupted__poster { filter: grayscale(0) contrast(1.08) brightness(0.95); transform: scale(1.03); } .interrupted__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; pointer-events: none; filter: drop-shadow(0 0 24px rgba(253, 229, 140,0.45)); transition: transform 400ms var(--ease), filter 400ms var(--ease); } .interrupted__poster-wrap:hover .interrupted__play { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 0 38px rgba(253, 229, 140,0.7)); } .interrupted__play svg { width: 100%; height: 100%; } .interrupted__caption { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); text-align: center; } .interrupted__caption em { background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: normal; } .interrupted__content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-4); text-align: center; order: -1; /* text block appears above the reel on stacked layout */ } .interrupted__content .interrupted__line, .interrupted__content .interrupted__follow { margin-left: auto; margin-right: auto; } .interrupted__date { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.3em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: var(--s-3); } .interrupted__line { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 22ch; margin-bottom: var(--s-4); } .interrupted__line em { font-style: italic; color: var(--accent); } .interrupted__follow { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.75rem); color: var(--text-dim); max-width: 38ch; } /* ---------- "Life" — stacked centered layout with hero portrait + family gallery ---------- */ .life { max-width: 980px; margin: 0 auto; padding: 0 var(--s-4); text-align: center; } /* Match .section__header width so the H2 wraps the same way as every other section title — keeps "A life most only hear about in whispers" reading at the same visual scale as the rest of the page's titles. */ .life__header { max-width: 680px; margin: 0 auto var(--s-5); } .life__portrait { aspect-ratio: 5/4; width: 100%; max-width: 720px; margin: 0 auto var(--s-5); background-size: cover; background-position: center 20%; filter: grayscale(0.08) contrast(1.02); border: 2px solid var(--accent-hot); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.4), 0 0 0 1px rgba(240, 200, 95, 0.45), 0 0 32px rgba(253, 229, 140, 0.45), 0 0 90px -10px rgba(240, 200, 95, 0.35), 0 30px 80px -30px rgba(0, 0, 0, 0.9); transition: box-shadow 520ms var(--ease); } .life__portrait:hover { box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.6), 0 0 0 1px rgba(240, 200, 95, 0.6), 0 0 48px rgba(253, 229, 140, 0.65), 0 0 120px -10px rgba(240, 200, 95, 0.5), 0 30px 80px -30px rgba(0, 0, 0, 0.9); } .life__body { max-width: 820px; margin: 0 auto; } .life__body p { color: var(--text-dim); margin-bottom: var(--s-3); text-align: left; } .life__body p:first-of-type { color: var(--text); font-size: var(--fs-lead); line-height: 1.55; text-align: center; margin-top: var(--s-4); } /* Portrait sits as the visual lead INSIDE the bespoke body card */ .life__body .life__portrait { margin: 0 auto var(--s-4); max-width: 100%; border-radius: var(--r-lg); border: 1px solid rgba(240, 200, 95, 0.5); } /* Family/life gallery — 3 top, 3 bottom (6 photos), rounded and dressed */ .life-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); max-width: 1240px; margin-left: auto; margin-right: auto; padding: 0 var(--s-4); } @media (max-width: 820px) { .life-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .life-gallery { grid-template-columns: 1fr; } } .life-gallery__item { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: var(--r-lg); transition: transform 460ms var(--ease), box-shadow 460ms var(--ease); filter: grayscale(0.1) contrast(1.03); overflow: hidden; } .life-gallery__item:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 247, 205, 0.5), 0 0 32px rgba(253, 229, 140, 0.55), 0 0 0 1px rgba(240, 200, 95, 0.55), 0 18px 40px -12px rgba(0, 0, 0, 0.7); filter: grayscale(0) contrast(1.05); } /* Caption sits in a legit dark gradient backdrop at the bottom of each photo, always partially visible so the title reads on the photo frame, and intensifies on hover (deeper backdrop, brighter gold text). */ .life-gallery__caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; /* sit above shimmer (1) and brackets (2) */ padding: var(--s-5) var(--s-3) var(--s-3); background: linear-gradient( 180deg, transparent 0%, rgba(10, 8, 7, 0.55) 35%, rgba(10, 8, 7, 0.88) 75%, rgba(10, 8, 7, 0.96) 100%); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; text-align: center; color: var(--accent); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 14px rgba(253, 229, 140, 0.45); opacity: 0.94; transition: opacity 360ms var(--ease), background 360ms var(--ease), color 360ms var(--ease), text-shadow 360ms var(--ease); } .life-gallery__item:hover .life-gallery__caption { opacity: 1; color: var(--accent-hot); background: linear-gradient( 180deg, transparent 0%, rgba(10, 8, 7, 0.7) 25%, rgba(10, 8, 7, 0.95) 65%, rgba(10, 8, 7, 1) 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 22px rgba(253, 229, 140, 0.85); } /* Stats grid — 4 individual bespoke bracket cards */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); max-width: 1100px; margin: var(--s-6) auto; padding: 0 var(--s-4); } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } .stat-card { position: relative; padding: var(--s-5) var(--s-3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-2); min-height: 220px; background: linear-gradient(var(--accent), var(--accent)) top 10px left 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px left 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px right 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px right 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px left 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px left 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px right 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px right 10px / 1px 22px no-repeat, var(--bg); overflow: hidden; transition: transform 460ms var(--ease), background 460ms var(--ease); transform-origin: center center; } .stat-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(253, 229, 140, 0.13) 50%, transparent 68%); background-size: 220% 100%; background-position: -100% 0; transition: background-position 1100ms var(--ease); pointer-events: none; z-index: 0; } .stat-card > * { position: relative; z-index: 1; } .stat-card:hover { transform: perspective(1000px) translateY(-4px) rotateX(2.5deg); background: linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px left 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px left 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px right 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px right 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px left 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px left 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px right 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px right 10px / 1px 32px no-repeat, radial-gradient(ellipse 70% 60% at 50% 0%, rgba(253, 229, 140, 0.06), transparent 70%), var(--bg); } .stat-card:hover::before { background-position: 200% 0; } .stat-card__num { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 4.5vw, 3.75rem); line-height: 1.0; letter-spacing: -0.03em; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 22px rgba(253, 229, 140, 0.4)); } .stat-card__num em { font-style: italic; font-size: 0.6em; opacity: 0.85; } .stat-card__num sup { font-size: 0.5em; margin-left: 0.04em; letter-spacing: 0; vertical-align: super; } .stat-card__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); font-weight: 500; line-height: 1.4; max-width: 22ch; } /* Legacy .stats (no longer rendered, but keep harmless) */ .stats { margin: var(--s-6) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); max-width: 720px; } @media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stats li { padding: var(--s-3) var(--s-2); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text-dim); text-align: center; } .stats li strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; margin-bottom: 6px; letter-spacing: -0.01em; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .split__body { max-width: 680px; } .split__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.0; letter-spacing: -0.02em; margin-bottom: var(--s-5); } .split__body p { color: var(--text-dim); margin-bottom: var(--s-3); text-align: left; } .split__body p:first-of-type { color: var(--text); font-size: var(--fs-lead); line-height: 1.55; text-align: center; } /* Stat list — centered */ .stats { margin: var(--s-6) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); max-width: 720px; } @media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stats li { padding: var(--s-3) var(--s-2); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text-dim); text-align: center; } .stats li strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; margin-bottom: 6px; letter-spacing: -0.01em; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Pedigree (centered) ---------- */ .pedigree { max-width: 780px; margin: 0 auto; padding: 0 var(--s-4); text-align: center; } .pedigree__row { padding: var(--s-5) 0; border-top: 1px solid var(--rule-soft); } .pedigree__row:last-child { border-bottom: 1px solid var(--rule-soft); } .pedigree__era { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: var(--s-2); display: block; } .pedigree__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; margin-bottom: var(--s-2); } .pedigree__name em { font-style: italic; } .pedigree__role { color: #FFFFFF; font-size: var(--fs-small); max-width: 56ch; margin: 0 auto; } /* ---------- Facts (BitClub) ---------- */ .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); max-width: var(--max-w); margin: 0 auto; } .facts__cell { position: relative; /* Documentary-credential corners: 8 thin gold L-brackets via background gradients */ background: linear-gradient(var(--accent), var(--accent)) top 10px left 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px left 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px right 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px right 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px left 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px left 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px right 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px right 10px / 1px 22px no-repeat, var(--bg); padding: var(--s-5) var(--s-4); min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: transform 460ms var(--ease), background 460ms var(--ease); overflow: hidden; transform-origin: center center; } .facts__cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(253, 229, 140, 0.13) 50%, transparent 68%); background-size: 220% 100%; background-position: -100% 0; transition: background-position 1100ms var(--ease); pointer-events: none; z-index: 0; } .facts__cell > * { position: relative; z-index: 1; } .facts__cell:hover { transform: perspective(1000px) translateY(-4px) rotateX(2.5deg); background: linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px left 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px left 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px right 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px right 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px left 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px left 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px right 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px right 10px / 1px 32px no-repeat, radial-gradient(ellipse 70% 60% at 50% 0%, rgba(253, 229, 140, 0.06), transparent 70%), var(--bg); } .facts__cell:hover::before { background-position: 200% 0; } .facts__num { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 4.5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--s-3); background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 26px rgba(253, 229, 140,0.4)); padding-bottom: 2px; } .facts__label { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.5; max-width: 28ch; } @media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } } /* ---------- The Record (life in facts) ---------- */ .record-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); max-width: var(--max-w); margin: 0 auto; } .record-cell { position: relative; /* Same documentary-credential treatment as .facts__cell */ background: linear-gradient(var(--accent), var(--accent)) top 10px left 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px left 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px right 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) top 10px right 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px left 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px left 10px / 1px 22px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px right 10px / 22px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom 10px right 10px / 1px 22px no-repeat, var(--bg); padding: var(--s-5) var(--s-4); min-height: 280px; display: flex; flex-direction: column; gap: var(--s-2); text-align: left; transition: transform 460ms var(--ease), background 460ms var(--ease); overflow: hidden; transform-origin: center center; } .record-cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(253, 229, 140, 0.13) 50%, transparent 68%); background-size: 220% 100%; background-position: -100% 0; transition: background-position 1100ms var(--ease); pointer-events: none; z-index: 0; } .record-cell > * { position: relative; z-index: 1; } .record-cell:hover { transform: perspective(1000px) translateY(-4px) rotateX(2.5deg); background: linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px left 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px left 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px right 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) top 10px right 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px left 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px left 10px / 1px 32px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px right 10px / 32px 1px no-repeat, linear-gradient(var(--accent-hot), var(--accent-hot)) bottom 10px right 10px / 1px 32px no-repeat, radial-gradient(ellipse 80% 60% at 0% 0%, rgba(253, 229, 140, 0.07), transparent 70%), var(--bg); } .record-cell:hover::before { background-position: 200% 0; } /* Gold rule animates in beneath the number on hover */ .record-num, .facts__num { position: relative; display: inline-block; } .record-num::after, .facts__num::after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 0; height: 1px; background: var(--gold-shimmer); transform: translateX(-50%); transition: width 520ms var(--ease); box-shadow: 0 0 12px rgba(253, 229, 140, 0.4); } .record-cell:hover .record-num::after, .facts__cell:hover .facts__num::after { width: 80%; } .record-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.75rem, 4.2vw, 3.75rem); line-height: 1.05; /* room for digit bottoms */ letter-spacing: -0.03em; background: var(--gold-gloss); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 28px rgba(253, 229, 140,0.45)); padding-bottom: 2px; } .record-num sup { font-size: 0.5em; margin-left: 0.08em; letter-spacing: 0; } .record-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); font-weight: 500; line-height: 1.4; margin-top: var(--s-2); } .record-body { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.6; margin-top: auto; padding-top: var(--s-3); max-width: 32ch; } @media (max-width: 1024px) { .record-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .record-grid { grid-template-columns: 1fr; } .record-cell { min-height: auto; } } /* ---------- Titles Held variant — 3-column grid, crown card centered alone on row 3. Six rank cards in a tidy 3×2, with the National Delegate apex sitting solo and centered beneath, flanked by transparent spacer cells that fill the empty grid positions so the gold container bg never bleeds through where there's no rank. ---------- */ .record-grid--titles { grid-template-columns: repeat(3, 1fr); } .record-grid--titles .record-cell .record-num { /* Roman numerals stay in classical proportions, slightly tighter tracking */ letter-spacing: 0; font-feature-settings: "lnum" 0; font-variant-numeric: normal; } /* Coin cells — desktop bookends to the National Delegate apex. They share the FULL .record-cell treatment (bracket corners, hover tilt, shimmer sweep) so they read as part of the rank ladder rather than empty filler. Click either coin to fire its respective shower. On tablet, the right spacer reverts to a plain dark fill (no card, no coin, no chrome) so it just covers the gold container bg without looking out of place. */ .record-cell-spacer { /* .record-cell provides bg/brackets/padding/min-height/transition. We override flex column → center alignment so the coin centers in the cell instead of stacking from the top. */ align-items: center; justify-content: center; cursor: pointer; /* Reset