/* /css/site-chrome.css * * Shared nav + footer styling, paired with /js/site-chrome.js (which * injects the markup). Edit THIS FILE to change how the nav/footer looks * sitewide, no need to touch individual pages. * * USAGE: add in the * of any page using the shared nav/footer partial. * * Extracted from index.html (the original canonical source) as part of * the sitewide nav/footer rollout. If a page still has its own local * copy of these same rules, that's harmless duplication, not a conflict, * but new pages going forward only need this one link, nothing pasted in. */ :root { --charcoal: #1A1A2E; --charcoal-light: #24243e; --gold: #F5C518; --gold-dark: #d4a912; --gold-muted: rgba(245,197,24,0.12); --grey-mid: #6B7280; --grey-light: #F4F4F5; --white: #ffffff; --text-on-dark: #e8e8f0; --text-muted-dark: #9399a6; --text-muted: #9399a6; } /* NAV */ nav { position: sticky; top: 0; z-index: 100; background: rgba(26,26,46,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(245,197,24,0.15); padding: 0 2.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: 'Spectral', serif; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--white); text-decoration: none; } .nav-logo .logo-light { font-weight:300; } .nav-logo .logo-bold { font-weight:700; color:var(--gold); } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--text-muted-dark); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--white); } /* Previously missing entirely — ACTIVE_NAV was already wired up in site-chrome.js, but nothing ever styled the resulting .active class, so the current-section highlight has never actually been visible until now. */ .nav-links a.active { color: var(--gold); } .nav-cta { background: var(--gold); color: var(--charcoal) !important; padding: 0.45rem 1.1rem; border-radius: 6px; font-weight: 600 !important; font-size: 0.8rem !important; letter-spacing: 0.02em; } .nav-cta:hover { background: var(--gold-dark) !important; color: var(--charcoal) !important; } .nav-toggle { display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; line-height:1; padding:0.25rem; } @media (max-width:860px) { .nav-toggle { display:block; } .nav-links { display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:rgba(26,26,46,0.98); backdrop-filter:blur(12px); border-bottom:1px solid rgba(245,197,24,0.15); padding:0.5rem 1.25rem 1rem; } .nav-links.open { display:flex; } .nav-links li { width:100%; } .nav-links li a { display:block; padding:0.75rem 0; width:100%; } .nav-links li a.nav-cta { display:inline-block; margin-top:0.5rem; } } /* FOOTER */ footer { background: #111122; border-top: 1px solid rgba(255,255,255,0.06); padding: 3.5rem 2.5rem 2rem; } .footer-inner { max-width: 1200px; margin: 0 auto; } .footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; align-items:start; } .footer-brand-logo { font-family:'Spectral',serif; font-size:1.2rem; margin-bottom:0.5rem; } .footer-brand-logo .logo-light { font-weight:300; } .footer-brand-logo .logo-bold { font-weight:700; color:var(--gold); } .footer-brand > p { color:var(--text-muted); font-size:0.82rem; max-width:260px; line-height:1.6; margin-bottom:1.25rem; } .footer-signup { display:flex; gap:0.5rem; flex-wrap:wrap; } .footer-signup-input { flex:1; min-width:140px; padding:0.55rem 0.8rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:6px; color:#fff; font-size:0.8rem; font-family:'Inter',sans-serif; outline:none; transition:border-color 0.2s; } .footer-signup-input::placeholder { color:var(--text-muted); } .footer-signup-input:focus { border-color:rgba(245,197,24,0.4); } .footer-signup-btn { background:var(--gold); color:#1A1A2E; border:none; border-radius:6px; padding:0.55rem 1rem; font-size:0.78rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; white-space:nowrap; transition:background 0.2s; } .footer-signup-btn:hover { background:var(--gold-dark); } .footer-signup-thanks { font-size:0.8rem; color:#22c55e; display:none; padding-top:0.25rem; } .footer-col h4 { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:0.9rem; } .footer-col ul { list-style:none; } .footer-col ul li { margin-bottom:0.5rem; } .footer-col ul li a { color:var(--text-on-dark); text-decoration:none; font-size:0.85rem; transition:color 0.2s; } .footer-col ul li a:hover { color:var(--gold); } .footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; } .footer-bottom p { font-size:0.75rem; color:var(--text-muted); } .footer-legal { display:flex; gap:1.25rem; } .footer-legal a { font-size:0.75rem; color:var(--text-muted); text-decoration:none; } .footer-legal a:hover { color:var(--gold); } @media(max-width:900px){ .footer-top { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } } @media(max-width:560px){ .footer-top { grid-template-columns:1fr; } }