/* ============================================ Raxxla — shared stylesheet. Base system mirrors the inline CSS on index.html; /work pages load this file instead of inlining. MOBILE-FIRST: base styles target phones. Larger screens are progressive enhancements via min-width media queries further down. ============================================ */ :root{ /* dark — the default identity. Light overrides live in the block below; the head bootstrap stamps data-theme before first paint, so without JS the site stays dark exactly as it always was. */ --bg:#090a0c;--bg-soft:#0f1115;--bg-card:#121519; --line:rgba(255,255,255,0.07);--line-strong:rgba(255,255,255,0.14); --text:#f3f4f6;--text-dim:#959ba6;--text-faint:#565c66; --accent:#d4ff45;--accent-deep:#d4ff45;--accent-ink:#d4ff45;--on-accent:#090a0c; --accent-soft:rgba(212,255,69,0.12); --hover-glow:rgba(212,255,69,0.12); --accent-glow:rgba(212,255,69,.5); --header-bg:rgba(9,10,12,.82); --btn-dark-bg:#090a0c;--btn-dark-fg:#d4ff45; --veil:rgba(255,255,255,.02);--veil-2:rgba(255,255,255,.04); --feature-grad:linear-gradient(155deg,#171a0e 0%,#0d0f0b 70%); --ring-line:rgba(212,255,69,.18); --glow-a:rgba(212,255,69,0.10);--glow-b:rgba(110,135,255,0.06); --grain:.45; --radius:14px;--maxw:1260px; --pad:20px; } /* --accent stays the lime FILL in both themes (it always carries #090a0c text on top). --accent-ink is the same lime used as text/stroke/border, which needs a dark olive on paper to clear 4.5:1. */ :root[data-theme="light"]{ --bg:#f4f4ee;--bg-soft:#fbfbf7;--bg-card:#ffffff; --line:rgba(9,10,12,0.15);--line-strong:rgba(9,10,12,0.28); /* gray on paper reads far lighter than gray on black — body copy is near-ink here, and only true tertiary labels stay gray */ --text:#0a0c0f;--text-dim:#2b3138;--text-faint:#5a616b; --accent:#5b21d6;--accent-deep:#3a1191;--accent-ink:#5320c9;--on-accent:#ffffff; /* the lime survives as the highlighter marker — brand DNA on paper */ --accent-soft:rgba(212,255,69,0.62); /* the cursor-follow mist — same mechanism as dark, purple instead of lime */ --hover-glow:rgba(91,33,214,0.17); --accent-glow:rgba(91,33,214,.30); --header-bg:rgba(250,250,246,.88); --veil:rgba(9,10,12,.03);--veil-2:rgba(9,10,12,.06); --feature-grad:linear-gradient(155deg,#f0ebfe 0%,#ffffff 72%); --ring-line:rgba(83,32,201,.20); --glow-a:rgba(91,33,214,0.07);--glow-b:rgba(212,255,69,0.10); --btn-dark-bg:#ffffff;--btn-dark-fg:#5320c9; --grain:.22; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px} body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5} ::selection{background:var(--accent);color:var(--on-accent)} a{color:inherit;text-decoration:none}img{max-width:100%;display:block} /* tap targets: every interactive element >= 44px touch area */ a,button{touch-action:manipulation} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2} .bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none} .bg-fx::before{content:"";position:absolute;inset:0;background: radial-gradient(420px 360px at 90% -8%,var(--glow-a),transparent 62%), radial-gradient(420px 420px at -10% 105%,var(--glow-b),transparent 58%)} .bg-fx::after{content:"";position:absolute;inset:0;opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")} /* ---------- NAV (mobile base) ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.35s;padding-top:env(safe-area-inset-top)} header.scrolled{background:var(--header-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} /* scoped to the header: /work pages also use