/* ============================================================ site.css. page-level chrome for the four full pages. Layered on top of design-system.css (which carries tokens + component blocks). Variant B (white-dominant) is locked. ============================================================ */ html, body { margin: 0; padding: 0; background: #FFFFFF; min-height: 100vh; font-family: 'Instrument Sans', system-ui, sans-serif; color: #374151; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The page root re-uses .fyv-surface tokens at the body level */ body[data-variant="light"] { --bg: #FFFFFF; --surface: #F5F5F7; --raised: #EEEEF0; --border: #D1D5DB; --border-2: #B5BAC4; --text: #1A1A2E; --text-body: #374151; --text-sec: #6B7280; --text-dim: #9CA3AF; --pill-bg: rgba(124,58,237,0.06); --pill-border: rgba(124,58,237,0.22); --pill-text: #5B21B6; --hairline-soft: rgba(15,22,41,0.04); --wave-mid: rgba(91,33,182,0.85); --wave-tail: rgba(91,33,182,0.10); --wave-bar: rgba(91,33,182,0.55); --peak-glow: 0 1px 0 rgba(245,158,11,0.0); --cta-text: #FFFFFF; background: var(--bg); color: var(--text-body); } body[data-variant="light"]::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 35% at 80% 6%, rgba(124,58,237,0.04) 0%, transparent 60%), radial-gradient(ellipse 45% 50% at 5% 90%, rgba(59,130,246,0.03) 0%, transparent 60%); z-index: 0; } /* Subtle graph-paper dot grid, applied to every page via data-variant="light" on . Reads like the printed-paper texture you'd see on a dirty white screen: there but not asking for attention. */ body[data-variant="light"] { background-color: #FFFFFF; background-image: radial-gradient(circle, rgba(15,22,41,0.07) 1px, transparent 1.4px); background-size: 22px 22px; background-position: 0 0; background-attachment: fixed; } main, .page-wrap { position: relative; z-index: 1; } /* ── Sticky top bar on full pages ──────────────────────── */ .site-nav-host { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.78); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .site-nav-host .topbar { border-bottom: none; padding: 18px 0; } /* The mobile-friendly hide-on-scroll variant uses .hidden */ .site-nav-host.hidden { transform: translateY(-100%); transition: transform 0.25s ease; } .site-nav-host { transition: transform 0.25s ease; } .topbar .logomark { font-size: 1.5rem; } /* ── Homepage hero rhythm ──────────────────────────────── */ .home-hero { padding: 88px 0 36px; position: relative; } /* Two-column layout on desktop: copy left, pencil-draft graphic right. Stacks below 980px. */ .home-hero .home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; } .home-hero .home-hero-copy { min-width: 0; } /* ── Hero pencil-draft graphic ─────────────────────────── */ .hero-pencil-draft { width: 100%; max-width: 600px; justify-self: end; position: relative; } .hero-pencil-draft svg { width: 100%; height: auto; display: block; overflow: visible; } /* The horizon line is revealed via stroke-dashoffset so the right edge stays a rounded pencil cap at every pause point. The line is 538px long (x=30 → x=568) so dashoffset = (538 − revealed_px). Anchors live at x=120 (Pulse), x=290 (Works), x=450 (Agents); the line stops just past each anchor before pausing. */ .hpd-stroke { transition: stroke-dashoffset 1.0s cubic-bezier(0.42, 0, 0.58, 1); } .hpd-phase-1 .hpd-stroke, .hpd-phase-2 .hpd-stroke { stroke-dashoffset: 428; } /* reveal 110px → just past Pulse */ .hpd-phase-3 .hpd-stroke, .hpd-phase-4 .hpd-stroke { stroke-dashoffset: 258; } /* reveal 280px → just past Works */ .hpd-phase-5 .hpd-stroke, .hpd-phase-6 .hpd-stroke { stroke-dashoffset: 98; } /* reveal 440px → just past Agents */ .hpd-phase-7 .hpd-stroke, .hpd-phase-8 .hpd-stroke, .hpd-phase-9 .hpd-stroke { stroke-dashoffset: 0; transition-duration: 0.9s; } /* Pencil tip. Translated along the horizon, matching the line's advance. The pencil's graphite tip is anchored at its local origin (0,0), so the translate values place the tip exactly. y=158 sits the tip on the line. */ .hpd-pencil { transform: translate(30px, 158px); transition: transform 1.0s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.5s ease; } .hpd-phase-1 .hpd-pencil, .hpd-phase-2 .hpd-pencil { transform: translate(140px, 158px); } .hpd-phase-3 .hpd-pencil, .hpd-phase-4 .hpd-pencil { transform: translate(310px, 158px); } .hpd-phase-5 .hpd-pencil, .hpd-phase-6 .hpd-pencil { transform: translate(470px, 158px); } .hpd-phase-7 .hpd-pencil { transform: translate(568px, 158px); transition-duration: 0.9s; } .hpd-phase-8 .hpd-pencil, .hpd-phase-9 .hpd-pencil { transform: translate(568px, 158px); opacity: 0; transition: opacity 0.6s ease 0.1s; } .hpd-phase-0 .hpd-pencil { opacity: 0; } .hpd-phase-1 .hpd-pencil { opacity: 1; } /* Anchor dots. Appear at each pause. */ .hpd-anc { opacity: 0; transition: opacity 0.4s ease; } .hpd-phase-2 .hpd-anc-1, .hpd-phase-3 .hpd-anc-1, .hpd-phase-4 .hpd-anc-1, .hpd-phase-5 .hpd-anc-1, .hpd-phase-6 .hpd-anc-1, .hpd-phase-7 .hpd-anc-1, .hpd-phase-8 .hpd-anc-1, .hpd-phase-9 .hpd-anc-1 { opacity: 1; } .hpd-phase-4 .hpd-anc-2, .hpd-phase-5 .hpd-anc-2, .hpd-phase-6 .hpd-anc-2, .hpd-phase-7 .hpd-anc-2, .hpd-phase-8 .hpd-anc-2, .hpd-phase-9 .hpd-anc-2 { opacity: 1; } .hpd-phase-6 .hpd-anc-3, .hpd-phase-7 .hpd-anc-3, .hpd-phase-8 .hpd-anc-3, .hpd-phase-9 .hpd-anc-3 { opacity: 1; } /* Specimens + labels. Held at 0, fade in at their pause phase, stay on. */ .hpd-spec, .hpd-lab, .hpd-sig { opacity: 0; transition: opacity 0.7s ease; } .hpd-phase-2 .hpd-spec-pulse, .hpd-phase-2 .hpd-lab-1, .hpd-phase-3 .hpd-spec-pulse, .hpd-phase-3 .hpd-lab-1, .hpd-phase-4 .hpd-spec-pulse, .hpd-phase-4 .hpd-lab-1, .hpd-phase-5 .hpd-spec-pulse, .hpd-phase-5 .hpd-lab-1, .hpd-phase-6 .hpd-spec-pulse, .hpd-phase-6 .hpd-lab-1, .hpd-phase-7 .hpd-spec-pulse, .hpd-phase-7 .hpd-lab-1, .hpd-phase-8 .hpd-spec-pulse, .hpd-phase-8 .hpd-lab-1, .hpd-phase-9 .hpd-spec-pulse, .hpd-phase-9 .hpd-lab-1 { opacity: 1; } .hpd-phase-4 .hpd-spec-works, .hpd-phase-4 .hpd-lab-2, .hpd-phase-5 .hpd-spec-works, .hpd-phase-5 .hpd-lab-2, .hpd-phase-6 .hpd-spec-works, .hpd-phase-6 .hpd-lab-2, .hpd-phase-7 .hpd-spec-works, .hpd-phase-7 .hpd-lab-2, .hpd-phase-8 .hpd-spec-works, .hpd-phase-8 .hpd-lab-2, .hpd-phase-9 .hpd-spec-works, .hpd-phase-9 .hpd-lab-2 { opacity: 1; } .hpd-phase-6 .hpd-spec-agents, .hpd-phase-6 .hpd-lab-3, .hpd-phase-7 .hpd-spec-agents, .hpd-phase-7 .hpd-lab-3, .hpd-phase-8 .hpd-spec-agents, .hpd-phase-8 .hpd-lab-3, .hpd-phase-9 .hpd-spec-agents, .hpd-phase-9 .hpd-lab-3 { opacity: 1; } .hpd-phase-8 .hpd-sig, .hpd-phase-9 .hpd-sig { opacity: 1; transition-duration: 1.0s; } @media (prefers-reduced-motion: reduce) { .hpd-stroke { stroke-dashoffset: 0 !important; transition: none !important; } .hpd-pencil { display: none; } .hpd-spec, .hpd-lab, .hpd-sig, .hpd-anc { opacity: 1 !important; transition: none !important; } } .home-hero .anchor-top { display: inline-flex; align-items: center; gap: 12px; font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1rem; color: var(--text-sec); margin-bottom: 36px; } .home-hero .anchor-top::before { content: ''; width: 28px; height: 2px; background: var(--fyv-gradient); border-radius: 1px; } .home-hero h1.hero-display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--text); margin: 0 0 8px; max-width: 22ch; text-wrap: balance; } .home-hero .hero-display-2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 44px; max-width: 24ch; background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; /* italic ascenders + descenders need a little breathing room */ padding-bottom: 0.12em; } .home-hero h1.hero-display .grad { background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; } .home-hero .hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--text-body); max-width: 56ch; margin: 0 0 0; } /* Quiet brand-mark waveform under the hero, before the prong cards */ .brand-band { margin: 56px 0 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 0 40px; position: relative; } .brand-band .topline { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 24px; flex-wrap: wrap; } .brand-band .topline .lead { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--text); } .brand-band .topline .lead em { font-style: italic; background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-band .topline .right { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--text-sec); letter-spacing: 0.06em; } /* ── Homepage prong section ─────────────────────────────── */ .home-prongs { padding: 56px 0 40px; } .home-prongs .lead { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; margin-bottom: 36px; align-items: end; } .home-prongs .lead.lead-solo, .home-team .lead.lead-solo { display: block; } .home-prongs .lead .label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sec); margin-bottom: 12px; } .home-prongs .lead h2 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--text); margin: 0; line-height: 1.15; letter-spacing: -0.005em; max-width: 20ch; } .home-prongs .lead p { font-size: 1.02rem; color: var(--text-body); max-width: 50ch; margin: 0; line-height: 1.6; } /* Larger, hero-weight prong cards on the homepage */ .prongs.prongs-hero .prong { min-height: 380px; padding: 36px 32px 32px; } .prongs.prongs-hero .prong .name { font-size: 2rem; } .prongs.prongs-hero .prong .descriptor { font-size: 1.08rem; line-height: 1.45; } /* ── Homepage founder thread ─────────────────────────────── */ .home-team { padding: 80px 0 60px; border-top: 1px solid var(--border); } .home-team .lead { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; margin-bottom: 44px; align-items: end; } .home-team .lead .label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sec); margin-bottom: 12px; } .home-team .lead h2 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--text); margin: 0; line-height: 1.15; letter-spacing: -0.005em; max-width: 22ch; } .home-team .lead h2 .grad { background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; } .home-team .lead p { font-size: 1.02rem; color: var(--text-body); max-width: 52ch; margin: 0; line-height: 1.6; } .home-team .closing { margin-top: 44px; padding: 44px 56px 44px 60px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; position: relative; overflow: hidden; } .home-team .closing::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--fyv-gradient); } .home-team .closing p { font-family: 'DM Serif Display', serif; font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.4; color: var(--text); margin: 0; max-width: none; text-wrap: pretty; letter-spacing: -0.003em; } /* ============================================================ Homepage closing block. Brand exhale. "Find your Voice" set large in DM Serif gradient italic, with the canonical fyv audio waveform scrolling beneath, three labeled peaks anchored to the three prongs. The page's final visual beat. ============================================================ */ /* ============================================================ Brand moment. "Find your Voice" set large in gradient italic, with a soft artistic splatter wash sitting behind it. ============================================================ */ .home-closing { padding: 0; border-top: none; position: relative; overflow: hidden; } .brand-moment { position: relative; width: 100%; text-align: center; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 180px; isolation: isolate; } .brand-moment-splatter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1080px, 96%); height: 100%; display: block; pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: 0.34; filter: saturate(1.05); } .brand-moment-text { position: relative; z-index: 1; font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1.1; letter-spacing: -0.018em; background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.14em; display: inline-block; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.55)) drop-shadow(0 8px 22px rgba(124,58,237,0.22)) drop-shadow(0 2px 8px rgba(59,130,246,0.18)); } @media (max-width: 720px) { .brand-moment { padding: 0; min-height: 140px; } .brand-moment-text { font-size: 2.2rem; } } /* Splatter blobs drift on slow staggered loops, so the wash breathes rather than sitting static. Pure ambient polish. */ @keyframes splatter-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--dx, 0), var(--dy, 0)); } 100% { transform: translate(0, 0); } } .splatter-blob { transform-box: fill-box; transform-origin: center; animation-name: splatter-drift; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .splatter-blob { animation: none; } } /* ── Inter-prong band (prong pages only) ─────────────────── */ .interprong { padding: 64px 0 48px; border-top: 1px solid var(--border); } .interprong-head { margin-bottom: 24px; } .interprong-head .meta { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sec); } .interprong-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .interprong-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .interprong-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fyv-gradient); opacity: 0.85; } .interprong-card:hover { background: var(--raised); border-color: var(--border-2); transform: translateY(-2px); } .interprong-card .name { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: var(--text); line-height: 1; } .interprong-card .name .accent { background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; } .interprong-card .desc { color: var(--text); font-size: 0.98rem; line-height: 1.5; flex: 1; } .interprong-card .learn { font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; color: var(--text); display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-weight: 500; } .interprong-card .learn .chev { background: var(--fyv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Page footer container ───────────────────────────────── */ .site-footer-host { border-top: 1px solid var(--border); margin-top: 24px; background: var(--bg); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 980px) { .wrap { padding: 0 32px; } .home-hero { padding: 64px 0 28px; } .home-hero .home-hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-pencil-draft { max-width: 520px; justify-self: center; margin: 0 auto; } .home-prongs .lead, .home-team .lead { grid-template-columns: 1fr; gap: 18px; align-items: start; } .prongs, .prongs.prongs-hero { grid-template-columns: 1fr; } .team { grid-template-columns: 1fr; } .interprong-grid { grid-template-columns: 1fr; } .footer { grid-template-columns: 1fr; gap: 28px; } .footer-base { flex-direction: column; gap: 12px; text-align: left; } .topbar nav { gap: 16px; } .topbar nav a { font-size: 0.88rem; } .topbar .anchor { display: none; } } @media (max-width: 640px) { .wrap { padding: 0 22px; } .home-hero h1.hero-display { font-size: 2.4rem; } .home-team .closing p { font-size: 1.1rem; } }