/* ===================================================================== Allistar Center — shared site header (site-nav.css) Used by every page. Pair with assets/site-nav.js. Width: each page may set --sn-max (outer width incl. side padding) and --sn-pad (side padding) on :root to align with its content. ===================================================================== */ @font-face{font-family:"SN Cinzel";font-style:normal;font-weight:400 900;font-display:swap; src:url("../fonts/Cinzel-Latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"SN Montserrat";font-style:normal;font-weight:100 900;font-display:swap; src:url("../fonts/Montserrat-Latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* keep #anchor targets clear of the sticky bar */ html:has(.sn-header){scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))} /* sticky breaks if becomes a scroll container (pages that set overflow-x:hidden on both html and body). "clip" still hides sideways overflow without creating one. */ body:has(> .sn-header){overflow-x:clip} .sn-header{ --sn-bg:rgba(13,10,46,.92);--sn-line:#2B2566;--sn-panel:#141040; --sn-text:#EEE9DC;--sn-muted:#A59FC4;--sn-gold:#C9A84C;--sn-gold-hi:#E4C977; --sn-body:"SN Montserrat","Montserrat",system-ui,sans-serif; --sn-display:"SN Cinzel","Cinzel",Georgia,serif; position:sticky;top:env(safe-area-inset-top,0px);z-index:1000; display:block;box-sizing:border-box;width:100%;margin:0;padding:0; background:var(--sn-bg); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border-bottom:1px solid var(--sn-line); font-family:var(--sn-body);font-size:12.5px;line-height:1.4;font-weight:400; color:var(--sn-text);text-align:left;letter-spacing:normal; } .sn-header *,.sn-header *::before,.sn-header *::after{box-sizing:border-box} .sn-inner{ display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:var(--sn-max,1212px);margin:0 auto; padding:12px var(--sn-pad,16px); } /* ---------- Logo ---------- */ .sn-brand{display:flex;align-items:center;gap:12px;flex:none; color:var(--sn-text);text-decoration:none;background:none;border:0;padding:0;margin:0} .sn-brand img{display:block;width:46px;height:46px;flex:none;border-radius:50%;margin:0;padding:0;border:0;box-shadow:none;filter:none} .sn-brand-text{display:flex;flex-direction:column;margin:0;padding:0} .sn-brand-text b{display:block;margin:0;font-family:var(--sn-display);font-weight:700;font-size:15px; letter-spacing:.18em;line-height:1.1;color:var(--sn-text);text-transform:none} .sn-brand-text small{display:block;margin:0;font-family:var(--sn-body);font-weight:400;font-size:9.5px; letter-spacing:.22em;line-height:1.4;color:var(--sn-gold);text-transform:uppercase} /* ---------- Menu (desktop) ---------- */ .sn-nav{display:block;margin:0;padding:0;background:none;border:0} .sn-list{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0} .sn-list > li{position:relative;list-style:none;margin:0;padding:0;background:none;border:0} .sn-list > li::before,.sn-list > li::after{content:none} .sn-link{ display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 0; font-family:var(--sn-body);font-weight:400;font-size:12.5px;line-height:1.4; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; color:var(--sn-muted);text-decoration:none; background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer; -webkit-appearance:none;appearance:none; } .sn-link::before,.sn-link::after{content:none} .sn-link:hover,.sn-link[aria-current="page"], .sn-dd.sn-open > .sn-trigger{color:var(--sn-gold)} .sn-link:focus{outline:none} .sn-link:focus-visible,.sn-panel a:focus-visible,.sn-burger:focus-visible,.sn-brand:focus-visible{ outline:2px solid var(--sn-gold-hi);outline-offset:3px;border-radius:4px} .sn-chev{width:9px;height:9px;flex:none;transition:transform .2s ease} .sn-dd.sn-open .sn-chev{transform:rotate(180deg)} /* Dropdown panel */ .sn-panel{ position:absolute;top:calc(100% + 10px);left:-12px;z-index:2; display:none;min-width:210px;margin:0;padding:6px; background:var(--sn-panel);border:1px solid var(--sn-line);border-radius:10px; box-shadow:0 14px 36px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.2); } .sn-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .sn-dd.sn-open > .sn-panel{display:block} .sn-panel a{ display:block;margin:0;padding:8px 12px;border-radius:6px; font-family:var(--sn-body);font-weight:400;font-size:13.5px;line-height:1.4; letter-spacing:normal;text-transform:none;white-space:nowrap; color:var(--sn-text);text-decoration:none;background:none;border:0; } .sn-panel a:hover{background:rgba(201,168,76,.10);color:var(--sn-gold-hi)} .sn-panel a[aria-current="page"]{color:var(--sn-gold)} .sn-sep{display:block;height:1px;margin:4px 6px;padding:0;background:var(--sn-line);border:0} /* ---------- Burger / close (mobile only) ---------- */ .sn-burger{ display:none;position:relative;flex:none;width:40px;height:40px;margin:0 -8px 0 0;padding:0; background:none;border:0;border-radius:6px;cursor:pointer;color:var(--sn-gold); -webkit-appearance:none;appearance:none; } .sn-burger span{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:currentColor; transition:transform .25s ease,opacity .2s ease} .sn-burger span:nth-child(1){top:13px} .sn-burger span:nth-child(2){top:19px} .sn-burger span:nth-child(3){top:25px} /* the × exists only as the open state of the burger, so it can never show at desktop width */ .sn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .sn-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .sn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- Mobile (≤ 900px) ---------- */ @media (max-width:900px){ .sn-inner{padding:12px 16px} .sn-burger{display:block} .sn-nav{ display:none;position:absolute;top:100%;left:0;right:0; max-height:calc(100vh - 71px);max-height:calc(100dvh - 71px);overflow-y:auto; /* rgba(13,10,46,.97) per spec, backed by solid navy so page text never bleeds through */ background:linear-gradient(rgba(13,10,46,.97),rgba(13,10,46,.97)),#0D0A2E;border-bottom:1px solid var(--sn-line); box-shadow:0 18px 40px rgba(0,0,0,.35); } .sn-header.sn-menu-open .sn-nav{display:block} .sn-list{flex-direction:column;align-items:stretch;gap:0;padding:6px 16px 14px} .sn-list > li{border-bottom:1px solid rgba(43,37,102,.6)} .sn-list > li:last-child{border-bottom:0} .sn-link{display:flex;width:100%;justify-content:space-between;padding:14px 0;font-size:15px;letter-spacing:.08em} .sn-chev{width:11px;height:11px} .sn-panel{position:static;min-width:0;margin:0 0 12px;padding:4px;box-shadow:none;border-radius:10px} .sn-panel::before{content:none} .sn-panel a{font-size:15px;padding:11px 12px;white-space:normal} } @media (prefers-reduced-motion:reduce){ .sn-chev,.sn-burger span{transition:none} }