/* GTC shared chrome — ONE nav + footer + newsletter + search across every page. Scoped to .site-nav / .site-footer so it wins over per-page mockup/site CSS. Load this LAST in every page . Colors assume the design tokens from the page's base stylesheet (site.css or a mockup-*.css) are already defined. */ /* fallback tokens so chrome is self-sufficient if a page ever omits them */ .site-nav, .site-footer, .search-overlay, .nl-strip { --_gold: var(--gold, #d4af37); --_gold-bright: var(--gold-bright, #f4cf5a); --_ink: var(--ink, #0a0b0d); --_ink2: var(--ink-2, #14161a); --_ink3: var(--ink-3, #1c1f24); --_ivory: var(--ivory, #f5f0e1); --_ivory-dim: var(--ivory-dim, #d9d3c4); --_muted: var(--muted, #8a8578); --_line: var(--line, rgba(212,175,55,0.15)); } /* ── Announcement bar ── */ .site-announce{ background:linear-gradient(90deg,var(--gold-deep,#8b6914),var(--_gold),var(--gold-deep,#8b6914)); color:var(--_ink);text-align:center;padding:10px 20px; font-family:'Inter',sans-serif;font-size:13px;font-weight:600; letter-spacing:0.4px;text-transform:uppercase; } .site-announce a{color:var(--_ink);text-decoration:underline;text-underline-offset:3px;font-weight:700} /* ── Nav ── */ nav.site-nav{ position:sticky;top:0;z-index:200; background:rgba(10,11,13,0.85); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border-bottom:1px solid var(--_line); } .site-nav .nav-inner{ max-width:1400px;margin:0 auto; display:flex;align-items:center;gap:24px; padding:16px 40px; } .site-nav .logo{ font-family:'Fraunces',serif;font-size:24px;font-weight:900; color:var(--_gold);letter-spacing:-0.5px;text-decoration:none; display:flex;align-items:center;gap:10px;white-space:nowrap; } .site-nav .logo-mark{ width:36px;height:36px; background:linear-gradient(135deg,var(--_gold),var(--gold-deep,#8b6914)); display:flex;align-items:center;justify-content:center; color:var(--_ink);font-weight:900;font-size:15px;border-radius:6px; transform:rotate(45deg); } .site-nav .logo-mark span{transform:rotate(-45deg)} .site-nav .nav-links{ display:flex;gap:30px;list-style:none;align-items:center;margin:0 auto 0 20px;padding:0; } .site-nav .nav-links a{ color:var(--_ivory-dim);text-decoration:none; font-family:'Inter',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.3px; transition:color 0.2s; } .site-nav .nav-links a:hover,.site-nav .nav-links a.active{color:var(--_gold)} .site-nav .nav-right{display:flex;align-items:center;gap:16px;margin-left:auto} .site-nav .nav-search{ background:transparent;border:1px solid var(--_line);border-radius:50%; width:38px;height:38px;color:var(--_ivory-dim);cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:15px; transition:all 0.2s;flex-shrink:0; } .site-nav .nav-search:hover{border-color:var(--_gold);color:var(--_gold)} .site-nav .nav-cta{ background:var(--_gold);color:var(--_ink) !important; padding:11px 20px;border-radius:4px; font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px; text-decoration:none;letter-spacing:0.5px;text-transform:uppercase; transition:all 0.2s;white-space:nowrap; } .site-nav .nav-cta:hover{background:var(--_gold-bright);transform:translateY(-1px)} .site-nav .nav-toggle{display:none;background:none;border:none;color:var(--_ivory);font-size:24px;cursor:pointer} /* ── Search overlay ── */ .search-overlay{ position:fixed;inset:0;z-index:500; background:rgba(10,11,13,0.92); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); display:none;align-items:flex-start;justify-content:center;padding-top:16vh; } .search-overlay.open{display:flex} .search-box{width:100%;max-width:640px;padding:0 24px} .search-box form{display:flex;gap:12px;border-bottom:2px solid var(--_gold);padding-bottom:14px} .search-box input{ flex:1;background:transparent;border:none;outline:none; color:var(--_ivory);font-family:'Fraunces',serif;font-size:32px;font-weight:600; } .search-box input::placeholder{color:var(--_muted)} .search-box button{ background:var(--_gold);color:var(--_ink);border:none;border-radius:4px; padding:0 22px;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;cursor:pointer; } .search-hint{margin-top:16px;color:var(--_muted);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase} .search-close{position:absolute;top:28px;right:32px;background:none;border:none;color:var(--_muted);font-size:30px;cursor:pointer} .search-close:hover{color:var(--_gold)} /* ── Newsletter footer strip ── */ .nl-strip{ background: radial-gradient(ellipse at 20% 50%, rgba(212,175,55,0.10) 0%, transparent 60%), var(--_ink2); border-top:1px solid var(--_line); padding:64px 40px; } .nl-inner{ max-width:1100px;margin:0 auto; display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center; } .nl-eyebrow{ font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px; color:var(--_gold);text-transform:uppercase;margin-bottom:14px; } .nl-inner h3{font-family:'Fraunces',serif;font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.1;letter-spacing:-0.02em;margin-bottom:12px} .nl-inner h3 em{font-style:italic;color:var(--_gold);font-weight:400} .nl-inner p{color:var(--_ivory-dim);font-size:15.5px;line-height:1.6} .nl-form{display:flex;flex-direction:column;gap:12px} .nl-form .nl-row{display:flex;gap:10px} .nl-form input{ flex:1;background:var(--_ink);border:1px solid var(--_line);border-radius:6px; color:var(--_ivory);font-family:'Inter',sans-serif;font-size:15px;padding:14px 16px;outline:none; } .nl-form input:focus{border-color:var(--_gold)} .nl-form button{ background:var(--_gold);color:var(--_ink);border:none;border-radius:6px; padding:14px 24px;font-weight:700;font-size:13px;letter-spacing:0.8px;text-transform:uppercase;cursor:pointer;white-space:nowrap; } .nl-form button:hover{background:var(--_gold-bright)} .nl-fineprint{color:var(--_muted);font-size:12px} .nl-fineprint a{color:var(--_gold)} .nl-ok{background:rgba(26,85,64,0.3);border:1px solid rgba(111,206,158,0.3);color:#6fce9e;border-radius:8px;padding:18px 20px;font-size:15px} /* ── Footer ── */ .site-footer{background:var(--_ink);padding:72px 40px 36px;border-top:1px solid var(--_line)} .site-footer .footer-inner{ max-width:1400px;margin:0 auto; display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px; } .site-footer .footer-brand .logo{ font-family:'Fraunces',serif;font-size:22px;font-weight:900;color:var(--_gold); text-decoration:none;display:flex;align-items:center;gap:10px;margin-bottom:18px; } .site-footer .footer-brand .logo-mark{ width:34px;height:34px;background:linear-gradient(135deg,var(--_gold),var(--gold-deep,#8b6914)); display:flex;align-items:center;justify-content:center;color:var(--_ink);font-weight:900;font-size:14px;border-radius:6px;transform:rotate(45deg); } .site-footer .footer-brand .logo-mark span{transform:rotate(-45deg)} .site-footer .footer-brand p{color:var(--_ivory-dim);font-size:14.5px;line-height:1.6;max-width:360px;margin-bottom:24px} .site-footer .footer-contact{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--_muted);letter-spacing:1px;line-height:2} .site-footer .footer-contact a{color:var(--_gold);text-decoration:none} .site-footer h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--_gold);text-transform:uppercase;margin-bottom:20px} .site-footer .footer-links{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0} .site-footer .footer-links a{color:var(--_ivory-dim);text-decoration:none;font-size:14.5px;transition:color 0.2s} .site-footer .footer-links a:hover{color:var(--_gold)} .site-footer .footer-bottom{ max-width:1400px;margin:0 auto;padding-top:28px;border-top:1px solid var(--_line); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--_muted);letter-spacing:1px;text-transform:uppercase; } .site-footer .footer-bottom a{color:inherit;text-decoration:none} .site-footer .footer-bottom a:hover{color:var(--_gold)} .site-footer .footer-disclaimer{ max-width:1400px;margin:36px auto 0;padding:22px; background:var(--_ink2);border:1px solid var(--_line); color:var(--_muted);font-size:12px;line-height:1.6;text-align:center; } @media (max-width:1024px){ .site-nav .nav-links{display:none} .site-nav .nav-toggle{display:block} .site-nav.menu-open .nav-links{ display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column; gap:0;margin:0;background:var(--_ink);border-bottom:1px solid var(--_line); } .site-nav.menu-open .nav-links li{width:100%;border-top:1px solid var(--_line)} .site-nav.menu-open .nav-links a{display:block;padding:16px 40px} .nl-inner{grid-template-columns:1fr;gap:28px} .site-footer .footer-inner{grid-template-columns:repeat(2,1fr)} } @media (max-width:600px){ .site-nav .nav-inner{padding:14px 20px;gap:14px} .site-nav .nav-cta{display:none} .nl-form .nl-row{flex-direction:column} .site-footer .footer-inner{grid-template-columns:1fr} }