/* ============================================================ site.css — shared VRX styling (single source of truth) Loaded LAST in each page's so it governs the nav, mobile drawer and footer across every page. Design tokens (:root) intentionally stay inline per-page because --accent and --white legitimately differ between pages. Responsive nav collapse (show hamburger / hide links on mobile) currently lives inline per-page and still applies. ============================================================ */ /* ============================================================ DESIGN TOKENS — single source of truth These used to be declared inline on every page, which is how the gate ended up with a pink-tinted --white and 404 with a different --bg without anyone noticing. Change a colour here and it changes everywhere. Every value below is measured with APCA (the perceptual contrast model that replaces WCAG 2 ratios for dark mode) against --bg #0f0f11. The Lc number is what matters: Lc 90+ ideal for body text Lc 75 minimum for body text Lc 60 large text and UI labels Lc 45 non-text UI only (icons, borders, fills) Lc 15 effectively invisible ============================================================ */ :root{ /* -- surfaces -- */ --bg:#0f0f11;--bg2:#161618;--bg3:#1d1d1f;--bg4:#242426; --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);--border3:rgba(255,255,255,0.22); /* -- text ramp (cool neutrals; the old ramp bottomed out at Lc 39, which is below readable for the small labels using it) -- */ --text:#F5F7FA; /* Lc 102 headings, primary copy */ --text2:#C3C9D4; /* Lc 73 body, descriptions (was #a0a0a0, Lc 50) */ --text3:#9AA1AE; /* Lc 51 labels, meta, captions (was #8a8a8a, Lc 39) */ --text4:#6E7681; /* Lc 29 decorative only — never text */ --white:#fff;--off-white:#e8e8e8; /* -- brand accent -- accent3 is the readable one, accent2 is a FILL. Measured on --bg: accent3 Lc 78 (clears the body-text threshold), accent2 Lc 34 on the background but white-on-it scores Lc 73, which is exactly what a button background needs. Blue on near-black is only a problem when blue runs far ahead of green — green carries the luminance the eye focuses on. These are picked so the blue-minus-green gap stays low (0.16), avoiding the chromatic blur that makes indigo accents smear on dark backgrounds. The -rgb pairs exist so translucent tints can be written as rgba(var(--accent3-rgb), 0.12) instead of a hardcoded colour. Change the hex here and every tint follows. */ --accent:#0f0f11; --accent2:#0284c7; /* fills, button backgrounds */ --accent2-rgb:2,132,199; --accent3:#a9d5fd; /* text, links, active states */ --accent3-rgb:169,213,253; --gold:#e6c25c; /* Lc 72 */ --glow:rgba(255,255,255,0.10); --pa:var(--accent3); /* -- semantic -- Each has a fill and a text variant, because the saturated version that reads well as a dot or a border is too dark for small type. */ --success:#4ade80; /* Lc 71 fills, icons, borders */ --success-text:#86efac; /* Lc 83 success messages */ --warning:#F59E0B; /* Lc 60 — only 3% blue, so the least chromatic blur of any accent here */ --warning-text:#f5c877; /* Lc 77 */ --error:#f87171; /* Lc 49 fills, borders, destructive buttons */ --error-text:#fda4af; /* Lc 66 error messages */ --info:var(--accent3); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} @keyframes navbarIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}} /* ============ NAV ============ */ .nav{position:fixed;top:0;left:0;right:0;height:72px;background:transparent;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(26px,calc((100% - 1400px)/2 + 26px));z-index:100;animation:navbarIn 0.5s ease forwards;transition:background 0.3s ease,backdrop-filter 0.3s ease,-webkit-backdrop-filter 0.3s ease,border-color 0.3s ease} .nav.gp-nav-transparent{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent} .nav.gp-nav-transparent.gp-nav-scrolled{background:transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--border)} .nav-left{display:flex;align-items:center;gap:14px} .nav-logo{font-family:'Geist',sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;color:var(--white);text-decoration:none;letter-spacing:0.02em;display:flex;align-items:center;gap:9px} .nav-logo-mark{height:25px;width:25px;flex-shrink:0;display:block;object-fit:contain} .nav-divider{width:1px;height:16px;background:var(--border2)} .nav-sub{font-size:0.82rem;color:var(--text3);letter-spacing:0.04em} .nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px} .nav-right{display:flex;align-items:center;gap:8px} .nav-link{color:var(--text2);text-decoration:none;font-size:13px;font-weight:550;text-transform:uppercase;letter-spacing:0.03em;padding:8px 10px;border-radius:5px;transition:color 0.25s,background 0.25s;font-family:'Geist',sans-serif} .nav-link:hover{color:var(--white)} .nav-link.active{color:var(--white);font-weight:600} .nav-discord{display:flex;align-items:center;background:none;border:none;border-radius:50%;padding:0;width:34px;height:34px;justify-content:center;text-decoration:none;color:var(--text2);transform:scale(1);transform-origin:center;will-change:transform;transition:color 0.4s ease,transform 0.4s cubic-bezier(0.34,1.4,0.64,1)} .nav-discord:hover{color:#5865F2;transform:scale(1.06)} .nav-discord i{display:block;backface-visibility:hidden;transform:translateZ(0);transition:color 0.28s ease} .nav-discord:hover i{color:#5865F2!important} .nav-fade{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:98;height:160px;background:linear-gradient(to bottom,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.1) 70%,transparent 100%)} /* ============ HAMBURGER + DRAWER ============ */ .hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px} .hamburger span{display:block;width:18px;height:2px;background:var(--text2);border-radius:5px;transition:all 0.2s} .hamburger:hover span{background:var(--white)} /* Nav collapse breakpoint. This used to live per-page, but site.css loads AFTER each page's inline styles — so the unconditional .nav-center/ .hamburger rules always won the cascade regardless of what a page's own @media block said, and the hamburger never actually appeared at any screen size. Must come AFTER both base rules above (same specificity, last in source wins) or it gets clobbered the same way. */ @media(max-width:900px){ .nav-center{display:none} .hamburger{display:flex} } .drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:150} .drawer-overlay.open{display:block} .drawer{position:fixed;top:0;right:0;width:280px;height:100vh;background:var(--bg2);border-left:1px solid var(--border2);z-index:200;transform:translateX(100%);transition:transform 0.25s ease;overflow-y:auto;scrollbar-width:none} .drawer.open{transform:translateX(0)} .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--border)} .drawer-title{font-size:0.9rem;font-weight:600;color:var(--off-white)} .drawer-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1rem;padding:4px 8px} .drawer-item{display:block;padding:10px 18px;font-size:0.88rem;color:var(--text2);text-decoration:none;transition:all 0.1s;border:none;background:none;width:100%;text-align:left;font-family:'Geist',sans-serif;cursor:pointer} .drawer-item:hover{background:rgba(255,255,255,0.05);color:var(--white)} .drawer-label{font-family:'Geist Mono',monospace;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);padding:16px 18px 6px} .drawer-divider{height:1px;background:var(--border);margin:4px 0} /* ============ FOOTER ============ */ .site-footer{border-top:1px solid var(--border);margin-top:60px;padding:48px 24px 28px;background:var(--bg2)} .site-footer-inner{max-width:1100px;margin:0 auto} .site-footer-top{display:flex;flex-wrap:wrap;gap:48px;margin-bottom:32px} .site-footer-brand{flex:1 1 240px;min-width:220px;max-width:320px} .site-footer-logo{font-family:'Geist',sans-serif;font-weight:700;font-size:1.2rem;color:var(--white);text-decoration:none;letter-spacing:0.02em} .site-footer-tagline{font-size:0.82rem;color:var(--text3);margin-top:8px;line-height:1.5} .site-footer-social{display:flex;gap:10px;margin-top:16px} .site-footer-social a{width:32px;height:32px;border-radius:50%;background:none;border:none;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .15s;flex-shrink:0} .site-footer-social a:hover{background:rgba(255,255,255,0.1);color:var(--white);border-color:var(--accent2)} .site-footer-cols{display:flex;gap:56px;flex-wrap:wrap;flex:2 1 300px} .site-footer-col{flex:1 1 130px;min-width:130px} .site-footer-heading{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:14px} .site-footer-col a{display:block;font-size:0.85rem;color:var(--text2);text-decoration:none;margin-bottom:10px;transition:color .15s} .site-footer-col a:hover{color:var(--white)} .site-footer-bottom{border-top:1px solid var(--border);padding-top:20px;text-align:center;font-size:0.76rem;color:var(--text3)} @media(max-width:640px){.site-footer-top{flex-direction:column;gap:28px}.site-footer-brand{max-width:none}} /* ============ SHARED USER MENU (auth dropdown) ============ Same widget on every page that has an account — was duplicated in full on 14 separate files with zero deviation, so it's centralized here now. Avatar size and chevron color still vary slightly on a few transparent- nav pages (login/characters/series), so .auth-user/.auth-avatar/ .auth-chev themselves stay local to those pages — only the parts that were byte-identical everywhere moved here. */ .auth-btn{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--border2);border-radius:5px;padding:6px 16px;color:var(--text2);font-size:13px;font-family:'Geist',sans-serif;text-decoration:none;transition:all 0.15s;cursor:pointer;white-space:nowrap;font-weight:500} .auth-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:5px;min-width:210px;padding:6px 0;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:200} .auth-dropdown-avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--border2)} .auth-dropdown-divider{height:1px;background:var(--border);margin:4px 0} .auth-dropdown-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)} .auth-dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:0.85rem;color:var(--text2);text-decoration:none;transition:all 0.1s;cursor:pointer;border:none;background:none;width:100%;font-family:'Geist',sans-serif} .auth-dropdown-item svg{color:var(--text3);flex-shrink:0} .auth-dropdown-item.danger svg{color:var(--error-text)} .auth-dropdown-item.danger:hover{background:rgba(248,113,113,0.1)} .auth-dropdown-item:hover{background:rgba(255,255,255,0.07);color:var(--white)} .auth-dropdown-item:hover svg{color:var(--accent3)} .auth-dropdown-name{font-size:0.88rem;font-weight:600;color:var(--white)} .auth-dropdown-sub{font-size:0.68rem;color:var(--text3)} /* ============ LEGAL / CONTENT PAGE SHARED PATTERNS ============ Breadcrumb + prose section styling shared by dmca/help/privacy/terms. */ .breadcrumb{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--text3);margin-bottom:28px;animation:fadeUp 0.4s ease 0.05s both} .breadcrumb a{color:var(--text3);transition:color 0.15s} .breadcrumb a:hover{color:var(--accent3)} .breadcrumb-sep{color:var(--text3);opacity:0.5} .page-updated{font-size:0.78rem;color:var(--text3);font-family:'Geist Mono',monospace;margin-bottom:36px;animation:fadeUp 0.4s ease 0.15s both} .section h2{font-size:0.9rem;font-weight:600;color:var(--accent3);text-transform:uppercase;letter-spacing:0.08em;font-family:'Geist Mono',monospace;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)} .section ol{font-size:0.88rem;color:var(--text2);line-height:1.8;padding-left:20px} .section ol li{margin-bottom:6px} .section p{font-size:0.88rem;color:var(--text2);line-height:1.8} /* ============ SHARED ANIMATIONS ============ */ @keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} a:hover{color:var(--white)}