/* kyc.cryptolisting.ws — brand theme ported from cryptoListingWebSocket/web/shared.css + homepage template. CSS custom properties are copied VERBATIM (several values are WCAG-AA-tuned — do not alter them). English-only portal, zero third-party requests. */ /* ── Variables (verbatim from shared.css) ── */ /* --tg-a/--tg-b: Telegram CTA gradient, darkened for WCAG AA (white text >=4.5:1 across the whole gradient: 5.37:1 at --tg-a, 6.15:1 at --tg-b). --btn-bg: primary button bg; the dark value is a touch deeper than --accent so white text clears 4.5:1 (was 4.47:1). */ :root{--bg:#06060a;--surface:#0e0e15;--border:#1a1a2e;--border-hover:#2a2a45;--text:#eaeaf0;--text-muted:#9292a8;--accent:#6366f1;--accent-light:#818cf8;--green:#22c55e;--btn-bg:#5457e0;--tg-a:#176FAD;--tg-b:#15669C;--nav-shadow:0 4px 20px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04)} [data-theme="light"]{--bg:#f5f5f7;--surface:#ffffff;--border:#d4d4d8;--border-hover:#a1a1aa;--text:#18181b;--text-muted:#52525b;--accent:#4f46e5;--accent-light:#6366f1;--green:#16a34a;--btn-bg:#4f46e5;--nav-shadow:0 2px 12px rgba(0,0,0,.08)} /* Site-local additions (new tokens only — the copied set above is untouched). --error: 4.6:1 on --bg dark / 4.5:1 on --surface light. */ :root{--error:#f87171} [data-theme="light"]{--error:#dc2626} /* ── Reset ── */ *{margin:0;padding:0;box-sizing:border-box} html{background:var(--bg)} /* Solid opaque bar filling the top safe-area (notch + status-bar "ears") ABOVE everything, so neither scrolled content nor the fixed .bg-glow aurora shows behind the status bar on notched iPhones. env() is 0 on non-notch devices → zero height, invisible. Needs viewport-fit=cover to resolve. */ html::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:9999;pointer-events:none} body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;overflow-x:hidden} /* ── Background: aurora glow + faint grid texture (signature look) ── */ .bg-glow{position:fixed;inset:0;background:radial-gradient(58% 44% at 50% -8%,rgba(99,102,241,.30) 0%,transparent 62%),radial-gradient(40% 32% at 88% 4%,rgba(167,139,250,.16) 0%,transparent 64%),radial-gradient(44% 36% at 8% 2%,rgba(34,197,94,.07) 0%,transparent 60%);pointer-events:none;z-index:0} [data-theme="light"] .bg-glow{background:radial-gradient(ellipse,rgba(99,102,241,.06) 0%,transparent 70%)} /* Grid anchored to the page (absolute, not fixed), fading out below the hero. */ body::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.20) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% -2%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 75% 55% at 50% -2%,#000 0%,transparent 72%)} [data-theme="light"] body::before{background-image:linear-gradient(rgba(0,0,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.25) 1px,transparent 1px)} /* ── Layout ── */ .container{max-width:1040px;margin:0 auto;padding:0 24px;position:relative;z-index:1} /* ── Nav (static skeleton: