/* ── Sub-page shell (matches index h2 / body scale) ─────────────── */ .page-hero { padding: calc(var(--pad-y) * 0.85) 0 calc(var(--pad-y) * 0.25); } .page-hero-inner, .page-body-inner { max-width: 820px; } .page-body-inner { position: relative; padding-top: 26px; } .page-body-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--teal)); } .page-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; margin: 0 0 22px; } .page-h1 { font-family: var(--sans); font-optical-sizing: auto; font-weight: 620; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.015em; line-height: 1.18; color: var(--page-text); margin: 0 0 20px; } .page-lede { font-family: var(--sans); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--page-text-secondary); max-width: 720px; margin: 0; } .page-body { padding: calc(var(--pad-y) * 0.32) 0 calc(var(--pad-y) * 0.62); } .page-p { font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.72; color: var(--page-text-secondary); margin: 0 0 20px; text-align: left; } .page-p:last-child { margin-bottom: 0; } .page-sect { background: transparent !important; border: 0 !important; } /* ── Page tone variants (scoped to page content, not ) ───── Using --page-text / --page-text-secondary so we do NOT stomp the site-wide --text tokens the fixed nav panel relies on. */ .page-tone-warm { background: #f4f0e8; --page-text: #14171f; --page-text-secondary: rgba(20,23,31,0.72); } .page-tone-blue { background: #0d1a2e; --page-text: #ecf1fa; --page-text-secondary: rgba(236,241,250,0.75); } .page-tone-deep { background: #080a10; --page-text: #ecedf1; --page-text-secondary: rgba(236,237,241,0.75); } .page-tone-slate { background: #1a1f2b; --page-text: #ecedf1; --page-text-secondary: rgba(236,237,241,0.75); } /* ── Implementation timeline ─────────────────────────────────────── */ .impl-timeline-sect { padding: calc(var(--pad-y) * 0.65) 0 var(--pad-y); border-top: 1px solid var(--border); } .impl-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); } .impl-phase { border-top: 1px solid var(--border); padding-top: 18px; position: relative; } .impl-phase::after { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .8s cubic-bezier(.16,1,.3,1) .1s; } .impl-phase.in::after { width: 46px; } .impl-phase-dur { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .impl-phase-t { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--page-text); margin-bottom: 10px; } .impl-phase-d { font-family: var(--sans); font-size: 15px; line-height: 1.62; color: var(--page-text-secondary); max-width: 34ch; } @media (max-width: 760px) { .impl-timeline { grid-template-columns: 1fr; gap: 34px; } .impl-phase-d { max-width: none; } } /* ── Sub-page nav stays legible over any tone ───────────────────── */ .page nav#nav { background: rgba(10,12,18,0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); } .page nav#nav .nav-link, .page nav#nav .logo-word { color: #ecedf1; } .page nav#nav .nav-link:hover { color: #fff; }