/* ============================================================================ Aphelion Engineering — SHARED SITE CHROME (header + footer) ============================================================================ The single blessed cross-page stylesheet. It styles ONLY the unified header and footer; it never defines a page palette, body, hero, or product rules. Each page supplies its own palette tokens (--bg/--text/--accent/…); chrome only CONSUMES them via var(), with literal fallbacks for robustness. This deliberately, narrowly amends the "no shared base.css" rule in PRODUCT-PAGES.md — for chrome only. See PRODUCT-PAGES.md → "Shared chrome". Pages that have no light theme set — chrome.js then never applies .theme-light and the toggle is hidden, so the chrome can never render half-light over a dark body. ============================================================================ */ /* Self-hosted fonts — duplicated here so chrome works without base.css. Browsers de-dupe identical @font-face src, so loading both is free. */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/geist.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/geist-mono.woff2') format('woff2'); } .mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } /* ---- Header ---- */ header.nav { position: fixed; top: 0; left: 0; right: 0; padding: 24px 32px; z-index: 60; pointer-events: none; display: flex; justify-content: space-between; align-items: center; } header.nav > * { pointer-events: auto; } .brandmark { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--text, #ECEDEE); text-decoration: none; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5em; } .brandmark .brandlogo { width: 17px; height: 17px; flex: none; display: block; } nav.links { display: flex; align-items: center; gap: 28px; } nav.links a { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted, #8B8E94); text-decoration: none; text-transform: uppercase; transition: color 200ms ease; } nav.links a:hover { color: var(--text, #ECEDEE); } nav.links .sep { color: var(--text-faint, #5A5D63); } /* Theme toggle (lives inside nav) */ .theme-toggle { appearance: none; background: rgba(11,13,17,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-mid, #1A1D22); border-radius: 999px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted, #8B8E94); cursor: pointer; margin-left: 18px; transition: color 220ms ease, border-color 220ms ease, background 220ms ease; pointer-events: auto; } .theme-toggle:hover { color: var(--text, #ECEDEE); border-color: var(--text-faint, #5A5D63); } .theme-toggle svg { width: 14px; height: 14px; display: block; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } body.theme-light .theme-toggle { background: rgba(255,253,246,0.55); } body.theme-light .theme-toggle .icon-sun { display: none; } body.theme-light .theme-toggle .icon-moon { display: block; } /* Dark-only pages (no light palette): hide the toggle entirely. */ body.dark-only .theme-toggle { display: none; } /* Fixed-bar legibility on text-first sub-pages: translucent blurred backdrop so content scrolling beneath the fixed header stays readable. The landing omits this class (its dark hero sits behind a transparent bar). */ body.has-fixed-chrome header.nav { background: color-mix(in srgb, var(--bg, #07080A) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-hair, rgba(236,237,238,0.08)); } /* The first content block clears the fixed bar. Pages mark their top wrapper with .below-chrome (or rely on their own generous top padding). */ body.has-fixed-chrome .below-chrome { padding-top: 72px; } /* ---- Footer (orbital) ---- */ footer.site-footer { position: relative; border-top: 1px solid var(--border-mid, #1A1D22); padding: 64px 32px; margin-top: 128px; } footer.site-footer .arc { position: absolute; top: -1px; left: 0; right: 0; height: 64px; pointer-events: none; overflow: hidden; } footer.site-footer .arc svg { display: block; width: 100%; height: 100%; } footer.site-footer .grid { max-width: var(--max, 1400px); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; align-items: start; font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } footer.site-footer .brand-block .mark { color: var(--text, #ECEDEE); } footer.site-footer .brand-block .mark .dot { color: var(--accent, #F4A340); margin-right: 0.4em; } footer.site-footer .brand-block .tag { margin-top: 18px; color: var(--text-faint, #5A5D63); line-height: 1.85; letter-spacing: 0.1em; } footer.site-footer .col-label { color: var(--text-faint, #5A5D63); margin-bottom: 14px; } footer.site-footer .contact .line { color: var(--text, #ECEDEE); } footer.site-footer .contact .line.sub { color: var(--text-muted, #8B8E94); margin-top: 6px; } footer.site-footer .contact a { color: var(--text, #ECEDEE); text-decoration: none; transition: color 200ms ease; } footer.site-footer .contact a:hover { color: var(--accent, #F4A340); } footer.site-footer .system { text-align: right; } footer.site-footer .system .links { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } footer.site-footer .system a { color: var(--text-muted, #8B8E94); text-decoration: none; transition: color 200ms ease; } footer.site-footer .system a:hover { color: var(--text, #ECEDEE); } body.theme-light footer.site-footer .arc svg path { stroke: rgba(20,18,14,0.16); } /* Per-page legal + disclaimer slot — uniform styling, per-page text. */ footer.site-footer .footer-legal { max-width: var(--max, 1400px); margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--border-hair, rgba(236,237,238,0.08)); font-family: "Geist", system-ui, -apple-system, sans-serif; font-size: 12px; line-height: 1.65; letter-spacing: 0; color: var(--text-faint, #5A5D63); text-transform: none; text-align: center; } footer.site-footer .footer-legal a { color: var(--text-muted, #8B8E94); text-decoration: none; } footer.site-footer .footer-legal a:hover { color: var(--text, #ECEDEE); } /* ---- Responsive (chrome only) ---- */ @media (max-width: 900px) { footer.site-footer .grid { grid-template-columns: 1fr; gap: 40px; } footer.site-footer .system, footer.site-footer .system .links { text-align: left; align-items: flex-start; } } @media (max-width: 768px) { header.nav { padding: 18px 18px; } nav.links { gap: 14px; } nav.links a { font-size: 10px; letter-spacing: 0.14em; } .theme-toggle { margin-left: 10px; width: 28px; height: 28px; } .theme-toggle svg { width: 12px; height: 12px; } } @media (max-width: 480px) { nav.links .sep { display: none; } nav.links { gap: 12px; } header.nav { padding: 16px 16px; } } @media (max-width: 360px) { header.nav { padding: 14px 12px; } nav.links { gap: 8px; } nav.links a { font-size: 9.5px; letter-spacing: 0.1em; } .brandmark { font-size: 10px; letter-spacing: 0.15em; } .theme-toggle { margin-left: 8px; width: 26px; height: 26px; } .theme-toggle svg { width: 11px; height: 11px; } }