/* ============================================================= Acousmos — shared site shell (header + footer + shared motion) SINGLE SOURCE OF TRUTH for the persistent UI that frames every page: the .nav, the .footer, and the .read-progress bar. Every page loads this AFTER base.css, components.css, and its page stylesheet so the shell renders byte-identically everywhere — the header/footer markup is already shared via partials/, this shares the styling, and scripts/shell.js shares the behaviour (scroll progress, reveal-on-scroll, and click resonance). Do NOT redefine .nav* / .footer* / .read-progress in page styles. Change them here. This file consumes shared tokens from styles/tokens.css and owns only the persistent shell components. ============================================================= */ @import url("./tokens.css?v=20260531-numbering"); /* ---- header / nav ---- position: sticky (not fixed) — sticky anchors to the scroll container, so it never jitters even when is a scroll container, and it reserves its own height in flow so page content never hides beneath it. */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); background: rgba(250, 248, 243, 0.82); border-bottom: 1px solid var(--color-border); } .nav-inner { width: 100%; max-width: var(--width-shell); margin: 0 auto; padding: 0.9rem 24px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wordmark { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-serif); font-size: 1.3rem; line-height: 1; font-weight: 600; letter-spacing: 0.03em; color: var(--color-ink); text-decoration: none; } .wordmark-text { line-height: 1; } .wordmark-mark { width: 22px; height: 22px; color: var(--color-amber); flex-shrink: 0; align-self: center; } .wordmark-sub { font-family: var(--font-sans); font-size: 0.72rem; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-amber-deep); font-weight: 700; align-self: baseline; padding-left: 0.1rem; opacity: 0.94; } .nav-links { display: flex; align-items: center; gap: 1.6rem; } .nav-links a { font-size: 0.92rem; color: var(--color-ink-soft); font-weight: 500; text-decoration: none; letter-spacing: 0.01em; transition: color 0.2s; } .nav-links a:hover { color: var(--color-ink); } .nav-links a:visited { color: var(--color-ink-soft); } .nav-cta { padding: 0.5rem 1.1rem; border-radius: 10px; background: var(--color-ink); color: var(--color-paper) !important; font-weight: 600; } .nav-cta:hover { opacity: 0.9; } /* ---- footer ---- Header, footer, and modern page containers share the same 1140px width. */ .footer { border-top: 1px solid var(--color-border); padding: 2.5rem 0; background: var(--color-paper); position: relative; z-index: 1; } .footer .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; max-width: var(--width-shell); margin: 0 auto; padding: 0 24px; } .footer-left { display: flex; align-items: center; gap: 0.8rem; } .footer-mark { width: 30px; height: 30px; color: var(--color-amber); flex-shrink: 0; } .footer-text { display: grid; gap: 0.1rem; } .footer-brand { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--color-ink); } .footer-tag { color: var(--color-ink-muted); font-size: 0.85rem; } .footer-right { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; font-size: 0.88rem; color: var(--color-ink-soft); } .footer-right a, .footer-right a:visited { color: var(--color-ink-soft); text-decoration: none; transition: color 0.2s; } .footer-right a:hover { color: var(--color-amber); } /* ---- responsive ---- */ @media (max-width: 900px) { .nav-links { gap: 1rem; } .nav-cta { display: none; } } @media (max-width: 640px) { .nav-inner { padding: 0.8rem 18px; gap: 0.8rem; } .wordmark { font-size: 1.15rem; gap: 0.5rem; } .wordmark-mark { width: 20px; height: 20px; } .wordmark-sub { font-size: 0.66rem; letter-spacing: 0.15em; } .nav-links { gap: 0.85rem; } .nav-links a { font-size: 0.86rem; } .footer .footer-inner { flex-direction: column; text-align: center; gap: 1.5rem; } .footer-left { flex-direction: column; gap: 0.75rem; } .footer-text { text-align: center; } .footer-right { justify-content: center; gap: 0.75rem 1.2rem; } } @media (max-width: 440px) { .nav-inner { flex-wrap: wrap; justify-content: center; padding-inline: 16px; } .wordmark, .nav-links { width: 100%; justify-content: center; } } /* ---- reading-progress bar ---- Thin amber line pinned at the very top that fills as you scroll. The element is created/animated by scripts/shell.js, so every page gets it for free. Uses transform: scaleX for a compositor-only (jank-free) animation. */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: linear-gradient(90deg, var(--color-amber) 0%, #d8a64e 100%); transform: scaleX(0); transform-origin: 0 0; transition: transform 0.1s linear; pointer-events: none; box-shadow: 0 0 10px rgba(184, 128, 31, 0.35); } /* ---- reveal-on-scroll ---- Single reveal contract for every modern page. scripts/shell.js applies both .is-visible and .in so older markup stays compatible while CSS is centralized. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard); } .reveal.in, .reveal.is-visible { opacity: 1; transform: none; } /* ---- site resonance ---- Canvas overlay for click and pointer resonance. It is fixed and pointer-events:none, so it cannot create layout shifts or intercept controls. */ .shell-resonance-canvas { position: fixed; inset: 0; z-index: 90; pointer-events: none; width: 100vw; height: 100vh; } /* ---- shared card motion ---- Loaded after page styles so reveal animations cannot accidentally override card hover transitions on one page but not another. Keep this as the only source for the site-wide card lift/glow treatment. */ .step, .duality-card, .feature, .plan, .priceband-tier, .product-panel, .guide-list-row, .guide-pref-card, .arena-card { transition: opacity 0.7s var(--ease-standard), transform 0.4s var(--ease-standard), box-shadow 0.4s var(--ease-standard), border-color 0.4s ease; } .step:hover, .duality-card:hover, .feature:hover, .plan:hover, .priceband-tier:hover, .product-panel:hover, .guide-list-row:hover, .guide-pref-card:hover, .arena-card:hover { transform: translateY(-5px); border-color: var(--color-border-strong); box-shadow: 0 18px 44px rgba(27, 24, 34, 0.12), 0 8px 24px rgba(184, 128, 31, 0.12); } .plan.featured:hover { transform: translateY(-13px); box-shadow: 0 14px 44px rgba(184, 128, 31, 0.20); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in, .reveal.is-visible { opacity: 1; transform: none; transition: none; } }