/* ════════════════════════════════════════════════════════════════════════ gnd-site-chrome.css — header + footer SOT for genondemand.com/platform/* Source of truth: /root/genondemand-hq/gnd-site-chrome/chrome.css on brain. Push via /root/genondemand-hq/sync-gnd-chrome.js. Edits propagate site-wide. ────────────────────────────────────────────────────────────────────── Inherits day/night from (existing on /platform). Falls back to its own --gnd-* tokens if data-mode tokens aren't set. ══════════════════════════════════════════════════════════════════════ */ :root, html[data-mode="day"]{ --gnd-bg: #ffffff; --gnd-fg: #000000; --gnd-faint: rgba(0,0,0,0.08); --gnd-cta-bg: #000000; --gnd-cta-fg: #ffffff; } html[data-mode="night"]{ --gnd-bg: #000000; --gnd-fg: #ffffff; --gnd-faint: rgba(255,255,255,0.10); --gnd-cta-bg: #ffffff; --gnd-cta-fg: #000000; } /* ── Header ──────────────────────────────────────────────────────────── */ .gnd-chrome-nav{ position:sticky; top:0; z-index:50; background:var(--gnd-bg); border-bottom:1px solid var(--gnd-fg); font-family:'Space Grotesk', system-ui, sans-serif; color:var(--gnd-fg); transition:background .4s ease, color .4s ease; } .gnd-chrome-nav-inner{ display:flex; align-items:center; gap:18px; max-width:1280px; margin:0 auto; padding:14px 24px; } /* Voice / mute toggle — sits to the LEFT of the brand button. Mirrors the game-site landing.html voice toggle (browser speechSynthesis). */ .gnd-chrome-voice{ flex:none; width:32px; height:32px; padding:0; background:var(--gnd-bg); border:1.5px solid var(--gnd-fg); border-radius:6px; color:var(--gnd-fg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s, transform .12s; } .gnd-chrome-voice:hover{background:var(--gnd-fg); color:var(--gnd-bg)} .gnd-chrome-voice.on{background:var(--gnd-fg); color:var(--gnd-bg)} .gnd-chrome-voice svg{width:18px; height:18px} .gnd-chrome-brand{ display:flex; align-items:center; gap:10px; flex:none; color:inherit; text-decoration:none; font-family:'Space Mono', monospace; font-size:13px; letter-spacing:2.4px; text-transform:uppercase; font-weight:700; } .gnd-chrome-logo{ width:30px; height:30px; border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.2); object-fit:cover; flex:none; } .gnd-chrome-name{display:inline-flex; align-items:center; gap:1px} .gnd-chrome-tm{font-size:.55em; vertical-align:super; margin-left:1px; opacity:.65} .gnd-chrome-moon{ width:18px; height:18px; border-radius:50%; background:var(--gnd-fg); border:0; padding:0; margin-left:8px; cursor:pointer; transition:transform .15s, box-shadow .15s; flex:none; } .gnd-chrome-moon:hover{transform:scale(1.18)} .gnd-chrome-moon:focus-visible{outline:0; box-shadow:0 0 0 3px var(--gnd-faint)} .gnd-chrome-pages{ display:flex; gap:18px; flex:1; flex-wrap:wrap; justify-content:center; font-family:'Space Mono', monospace; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; font-weight:700; } .gnd-chrome-pages a{ color:var(--gnd-fg); text-decoration:none; padding:6px 4px; border-bottom:2px solid transparent; transition:opacity .12s, border-color .12s; opacity:.65; } .gnd-chrome-pages a:hover{opacity:1} .gnd-chrome-pages a.gnd-chrome-active{ opacity:1; border-bottom-color:var(--gnd-fg); } .gnd-chrome-cta{ flex:none; background:var(--gnd-cta-bg); color:var(--gnd-cta-fg); font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; padding:9px 18px; border-radius:999px; text-decoration:none; transition:transform .15s, opacity .15s; } .gnd-chrome-cta:hover{transform:scale(1.04)} /* ── Account area (right side): username pill + bell ──────────────── */ .gnd-chrome-account{display:flex; align-items:center; gap:10px; flex:none} .gnd-chrome-when-in[hidden]{display:none} .gnd-chrome-when-out[hidden]{display:none} .gnd-chrome-user{ display:flex; align-items:center; gap:8px; flex:none; text-decoration:none; color:inherit; padding:5px 12px 5px 5px; border:1.5px solid var(--gnd-fg); border-radius:999px; font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; font-weight:700; transition:background .12s, color .12s; } .gnd-chrome-user:hover{background:var(--gnd-fg); color:var(--gnd-bg)} .gnd-chrome-user-avatar{ width:24px; height:24px; border-radius:50%; background:var(--gnd-fg); color:var(--gnd-bg); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; transition:background .12s, color .12s; } .gnd-chrome-user:hover .gnd-chrome-user-avatar{background:var(--gnd-bg); color:var(--gnd-fg)} .gnd-chrome-user-name{ max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gnd-chrome-bell{ flex:none; position:relative; width:36px; height:36px; padding:0; border:1.5px solid var(--gnd-fg); border-radius:50%; background:var(--gnd-bg); color:var(--gnd-fg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s, transform .12s; } .gnd-chrome-bell:hover{background:var(--gnd-fg); color:var(--gnd-bg)} .gnd-chrome-bell:active{transform:scale(.94)} .gnd-chrome-bell svg{width:18px; height:18px} .gnd-chrome-bell-dot{ position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; background:#c00; border:1.5px solid var(--gnd-bg); } .gnd-chrome-bell-dot[hidden]{display:none} /* ── Footer ──────────────────────────────────────────────────────────── */ .gnd-chrome-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:18px 24px; border-top:1px solid var(--gnd-fg); background:var(--gnd-bg); color:var(--gnd-fg); font-family:'Space Mono', monospace; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; transition:background .4s ease, color .4s ease; } .gnd-chrome-foot-left, .gnd-chrome-foot-center, .gnd-chrome-foot-right{display:flex; align-items:center; flex:none} .gnd-chrome-foot-center{flex:1; justify-content:center; opacity:.65} .gnd-chrome-foot-left{opacity:.85} .gnd-chrome-foot-right{gap:10px; opacity:.85} .gnd-chrome-foot-right a{color:var(--gnd-fg); text-decoration:none; border-bottom:1px solid var(--gnd-faint); padding-bottom:1px} .gnd-chrome-foot-right a:hover{border-bottom-color:var(--gnd-fg)} .gnd-chrome-foot-dotsep{opacity:.4} .gnd-chrome-foot-dot{ display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--gnd-fg); border:0; padding:0; margin-left:6px; cursor:pointer; vertical-align:-2px; transition:transform .15s; } .gnd-chrome-foot-dot:hover{transform:scale(1.18)} /* Hide the footer-center on narrow screens so the toggle + service links breathe */ @media (max-width:760px){ .gnd-chrome-foot-center{display:none} .gnd-chrome-pages{font-size:10px; letter-spacing:1.4px; gap:10px} .gnd-chrome-nav-inner{padding:12px 16px; gap:10px} .gnd-chrome-cta{padding:8px 14px; font-size:9.5px; letter-spacing:2px} .gnd-chrome-logo{width:24px; height:24px} .gnd-chrome-brand{font-size:11px; letter-spacing:1.6px} } /* ════════════════════════════════════════════════════════════════════ COSMIC BACKDROP (v3, lifted from game-site landing.html — single source of truth. chrome.js auto-injects the markup; if a page already ships its own .gnd-bh-stage it's skipped, otherwise this is THE backdrop.) Layers (back→front): stars-bg · stars-bg.layer-2 · particles · dashed orbits · accretion disks · black hole core + spinning atom centered inside. ═══════════════════════════════════════════════════════════════════ */ .gnd-stars-bg{position:fixed;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(0,0,0,0.6) 1px,transparent 1.5px); background-size:38px 38px;opacity:.4} .gnd-stars-bg.gnd-stars-2{background-size:64px 64px;opacity:.25; background-image:radial-gradient(rgba(0,0,0,0.7) 1.4px,transparent 2px)} html[data-mode="night"] .gnd-stars-bg{background-image:radial-gradient(rgba(255,255,255,0.6) 1px,transparent 1.5px)} html[data-mode="night"] .gnd-stars-bg.gnd-stars-2{background-image:radial-gradient(rgba(255,255,255,0.7) 1.4px,transparent 2px)} .gnd-particles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} .gnd-particles .p{position:absolute;width:2px;height:2px;background:#000;border-radius:50%; left:50%;top:50%;animation:gndSuck 7s linear infinite} .gnd-particles .p.lg{width:3px;height:3px;animation-duration:9s} html[data-mode="night"] .gnd-particles .p{background:#fff} @keyframes gndSuck{ 0% {transform:translate(var(--x),var(--y)) scale(1.4); opacity:0} 8% {opacity:.95} 72% {transform:translate(calc(var(--x)*0.18),calc(var(--y)*0.18)) scale(.8); opacity:.85} 94% {transform:translate(calc(var(--x)*0.04),calc(var(--y)*0.04)) scale(.3); opacity:.35} 100% {transform:translate(0,0) scale(0); opacity:0} } .gnd-bh-stage{position:fixed;top:50%;left:50%;width:392px;height:392px;margin:-196px 0 0 -196px; display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none} @media(max-width:540px){.gnd-bh-stage{width:74vw;height:74vw;margin:-37vw 0 0 -37vw}} /* 4-fold symmetric accretion disks — visual mass stays balanced as they spin */ .gnd-bh-stage .gnd-bh-disk{position:absolute;inset:-28px;border-radius:50%; background:conic-gradient(from 0deg, #000 0deg,transparent 45deg,#000 90deg,transparent 135deg, #000 180deg,transparent 225deg,#000 270deg,transparent 315deg,#000 360deg); filter:blur(16px);opacity:.55;animation:gndDiskSpin 14s linear infinite} .gnd-bh-stage .gnd-bh-disk2{position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 45deg, rgba(0,0,0,.85) 0deg,transparent 60deg,rgba(0,0,0,.85) 120deg,transparent 180deg, rgba(0,0,0,.85) 240deg,transparent 300deg,rgba(0,0,0,.85) 360deg); filter:blur(8px);opacity:.7;animation:gndDiskSpin 9s linear infinite reverse} .gnd-bh-stage .gnd-bh-orbit{position:absolute;border:1px dashed rgba(0,0,0,.28);border-radius:50%;pointer-events:none} .gnd-bh-stage .gnd-bh-orbit.o1{inset:-70px} .gnd-bh-stage .gnd-bh-orbit.o2{inset:-126px} html[data-mode="night"] .gnd-bh-stage .gnd-bh-orbit{border-color:rgba(255,255,255,.32)} .gnd-bh-stage .gnd-bh-core{position:relative;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.85) 75%,transparent 85%); box-shadow:0 0 56px rgba(0,0,0,.55), inset 0 0 28px rgba(0,0,0,.85); display:flex;align-items:center;justify-content:center; color:#fff;text-align:center} @media(max-width:540px){.gnd-bh-stage .gnd-bh-core{width:54vw;height:54vw}} .gnd-bh-stage .gnd-bh-core::before{content:"";position:absolute;inset:-9px;border-radius:50%; border:1px solid rgba(0,0,0,.45);animation:gndPulseRing 3s ease-out infinite} .gnd-bh-stage .gnd-bh-core::after{content:"";position:absolute;inset:-18px;border-radius:50%; border:1px solid rgba(0,0,0,.25);animation:gndPulseRing 3s ease-out infinite .8s} @keyframes gndDiskSpin{to{transform:rotate(360deg)}} @keyframes gndPulseRing{0%{transform:scale(.95);opacity:.6}100%{transform:scale(1.4);opacity:0}} /* Spinning atom inside the core — the GenOnDemand mark */ .gnd-bh-stage .gnd-bh-atom{width:130px;height:130px;animation:gndAtomSpin 9s linear infinite} @media(max-width:540px){.gnd-bh-stage .gnd-bh-atom{width:24vw;height:24vw}} .gnd-bh-stage .gnd-bh-atom svg{width:100%;height:100%} @keyframes gndAtomSpin{to{transform:rotate(360deg)}} html[data-mode="night"] .gnd-bh-stage .gnd-bh-disk, html[data-mode="night"] .gnd-bh-stage .gnd-bh-disk2{filter:invert(1) blur(14px);opacity:.55} html[data-mode="night"] .gnd-bh-stage .gnd-bh-core{ background:radial-gradient(circle at 50% 50%,#fff 60%,rgba(255,255,255,.85) 75%,transparent 85%); box-shadow:0 0 56px rgba(255,255,255,.45), inset 0 0 28px rgba(255,255,255,.85);color:#000} html[data-mode="night"] .gnd-bh-stage .gnd-bh-atom svg [stroke="#fff"]{stroke:#000} html[data-mode="night"] .gnd-bh-stage .gnd-bh-atom svg [fill="#fff"]{fill:#000} /* All page-level content sits ABOVE the backdrop */ body > main, body > section, body > article, body > div:not(.gnd-stars-bg):not(.gnd-particles):not(.gnd-bh-stage):not([id^="gnd-strip"]), .gnd-bar, .gnd-foot{position:relative; z-index:5}