/* ═══════════════════════════════════════════════════════════════════════ §8 THEME-SPECIFIC FX EXTENSIONS Each block activates only when the matching theme is active. Body-class toggles still control opt-in behaviours; these are the *visual atoms* those toggles drive per IP. TABLE OF CONTENTS ───────────────── §8.1 Shared atoms (rain, fog, bloom, particles, brackets, stamps) §8.2 AW2 Dark Place Noir — flashlight sweep + ink bleed §8.3 AW2 Manuscript — typewriter scanline + red-ink overlay §8.4 AW2 Cult of the Tree — firefly drift + bark grain + sigil etch §8.5 AW2 Saga / FBI Field Kit — evidence stamps + notebook paper §8.6 AW2 Old Gods of Asgard — stage fog + light rig + poster grain §8.7 AW2 Deerfest — marquee bulbs + neon flicker + confetti §8.8 AW2 Bright Falls — rain streaks + fog bloom + streetlamp §8.9 AW2 Night Springs — TV frame + halftone + channel static §8.10 Control Polaris — astral particles + resonance bloom §8.11 Control Hiss — corrupt scan bars + glyph distortion §8.12 Control FBC — CRT bloom + dot-matrix + stamp slam §8.13 Mass Effect Omni-Tool — holo shimmer + HUD brackets + scan sweep §8.14 RE Biohazard Lab — hazard stripes + containment fog + low-health pulse §8.15 RE Umbrella Corp — sterile bloom + biohazard micro-text §8.16 RE Safe Room — typewriter reveal + warm lamp vignette §8.17 RE VHS Found Footage — tracking tear + REC stamp + lens dirt §8.18 KOTOR Holocron — rune glow + force aura + light seams §8.19 Zelda Sheikah Slate — rune overlay + topographic lines + UI pulse §8.20 Marathon Runner HUD — vector scan + HUD brackets + telemetry strip §8.21 Halo 2 UNSC HUD — shield pulse + reticle corners + cortana veil §8.22 Mario Toybox — coin sparkle + confetti pop + sticker badges §8.23 Dragon Age Veilfire — rune circle etch + veilfire mist §8.24 Fallout Pip-Boy — CRT curvature + phosphor bloom + bezel overlay ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── §8.1 SHARED ATOMS Reusable pseudo-element patterns referenced by per-theme blocks. ─────────────────────────────────────────────────────────────────────── */ /* -- Rain streaks atom ------------------------------------------------- */ @keyframes vcRainFall { from { background-position: 0 -100vh; } to { background-position: 0 100vh; } } /* -- Fog drift atom ----------------------------------------------------- */ @keyframes vcFogDrift { 0% { opacity: 0; transform: translateX(-6%) scaleX(1.04); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(6%) scaleX(1.04); } } /* -- Particle/firefly float -------------------------------------------- */ @keyframes vcFireflyFloat { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 20% { opacity: 1; } 80% { opacity: .7; } 100% { transform: translate(var(--ff-dx,12px), var(--ff-dy,-40px)) scale(.6); opacity: 0; } } /* -- Astral particle drift --------------------------------------------- */ @keyframes vcAstralDrift { 0% { transform: translateY(0) opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-60px); opacity: 0; } } /* -- Bloom pulse (resonance glow) -------------------------------------- */ @keyframes vcBloomPulse { 0%, 100% { opacity: .45; filter: blur(18px); } 50% { opacity: .70; filter: blur(14px); } } /* -- Vignette strobe (Hiss / Breach) ----------------------------------- */ @keyframes vcHissStrobe { 0%, 100% { opacity: 0; } 48% { opacity: 0; } 50% { opacity: .18; } 52% { opacity: 0; } 73% { opacity: 0; } 75% { opacity: .10; } 77% { opacity: 0; } } /* -- Scan bar crawl (Hiss corruption / Omni-Tool) ---------------------- */ @keyframes vcScanCrawl { from { top: -8px; } to { top: 100%; } } /* -- TV static flicker ------------------------------------------------- */ @keyframes vcStaticFlicker { 0%, 100% { opacity: .06; } 25% { opacity: .11; } 50% { opacity: .04; } 75% { opacity: .09; } } /* -- Marquee bulb blink ------------------------------------------------ */ @keyframes vcBulbBlink { 0%, 90%, 100% { opacity: 1; } 92% { opacity: .2; } 94% { opacity: 1; } 96% { opacity: .4; } } /* -- Neon flicker ------------------------------------------------------ */ @keyframes vcNeonFlicker { 0%, 100% { opacity: 1; text-shadow: 0 0 6px currentColor; } 18% { opacity: .85; text-shadow: none; } 20% { opacity: 1; text-shadow: 0 0 8px currentColor; } 60% { opacity: 1; } 62% { opacity: .6; } 64% { opacity: 1; text-shadow: 0 0 14px currentColor; } } /* -- Tracking tear (VHS) ----------------------------------------------- */ @keyframes vcTrackingTear { 0%, 85%, 100% { clip-path: none; transform: none; } 87% { clip-path: inset(30% 0 60% 0); transform: translateX(-3px) skewX(-1deg); } 89% { clip-path: inset(60% 0 20% 0); transform: translateX(4px); } 91% { clip-path: none; transform: none; } } /* -- Shield pulse ring (Halo) ------------------------------------------ */ @keyframes vcShieldPulse { 0% { box-shadow: 0 0 0 2px rgba(82,176,0,.25), 0 0 16px rgba(82,176,0,.08); } 50% { box-shadow: 0 0 0 2px rgba(82,176,0,.55), 0 0 32px rgba(82,176,0,.22); } 100% { box-shadow: 0 0 0 2px rgba(82,176,0,.25), 0 0 16px rgba(82,176,0,.08); } } /* -- Force aura rotation (KOTOR) -------------------------------------- */ @keyframes vcForceRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* -- Rune pulse (Zelda / KOTOR / Dragon Age) --------------------------- */ @keyframes vcRunePulse { 0%, 100% { opacity: .12; filter: blur(0px); } 50% { opacity: .28; filter: blur(.5px); } } /* -- Coin sparkle (Mario) ---------------------------------------------- */ @keyframes vcCoinSpin { 0% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(90deg) scale(.5); } 100% { transform: rotateY(0deg) scale(1); } } /* -- Typewriter cursor blink ------------------------------------------- */ @keyframes vcTypeBlink { 0%, 100% { border-right-color: currentColor; } 50% { border-right-color: transparent; } } /* -- Confetti fall ----------------------------------------------------- */ @keyframes vcConfettiFall { 0% { transform: translateY(-10px) rotate(0deg) scaleX(1); opacity: 1; } 100% { transform: translateY(60px) rotate(520deg) scaleX(.4); opacity: 0; } } /* -- Phosphor bloom scanline (Fallout / RE VHS) ------------------------ */ @keyframes vcPhosphorBloom { 0%, 100% { opacity: .55; } 50% { opacity: .75; } } /* -- Stage light sweep (Old Gods) -------------------------------------- */ @keyframes vcLightRig { 0% { left: -30%; opacity: 0; } 10% { opacity: .55; } 90% { opacity: .40; } 100% { left: 130%; opacity: 0; } } /* -- Fog/mist rise ----------------------------------------------------- */ @keyframes vcMistRise { 0% { opacity: 0; transform: translateY(20px) scaleX(1.05); } 30% { opacity: .7; } 70% { opacity: .7; } 100% { opacity: 0; transform: translateY(-30px) scaleX(.98); } } /* -- Stamp slam -------------------------------------------------------- */ @keyframes vcStampSlam { 0% { transform: scale(2.4) rotate(-8deg); opacity: 0; } 40% { transform: scale(.95) rotate(-2deg); opacity: 1; } 55% { transform: scale(1.04) rotate(-2deg); } 100% { transform: scale(1) rotate(-2deg); opacity: 1; } } /* -- Low-health pulse vignette (RE Biohazard) -------------------------- */ @keyframes vcLowHealthPulse { 0%, 100% { box-shadow: inset 0 0 0px 0px rgba(220,20,20,0); } 50% { box-shadow: inset 0 0 80px 20px rgba(220,20,20,.18); } } /* -- Veilfire mist (Dragon Age) ---------------------------------------- */ @keyframes vcVeilfireMist { 0% { opacity: 0; transform: scale(1) translateX(0); } 25% { opacity: .55; } 75% { opacity: .45; } 100% { opacity: 0; transform: scale(1.08) translateX(10px); } } /* -- CRT warp / curvature (Fallout) ------------------------------------ */ @keyframes vcCrtHum { 0%, 100% { filter: brightness(1) contrast(1); } 50% { filter: brightness(1.02) contrast(1.01); } } /* -- Holo shimmer (Mass Effect) ---------------------------------------- */ @keyframes vcHoloShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* -- Evidence stamp appear (FBI Field Kit) ----------------------------- */ @keyframes vcEvidenceStamp { 0% { transform: rotate(-6deg) scale(0); opacity: 0; } 60% { transform: rotate(-6deg) scale(1.08); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } } /* -- Telemetry blip (Marathon) ----------------------------------------- */ @keyframes vcTelemetryBlip { 0%, 100% { opacity: .5; } 10% { opacity: 1; } 12% { opacity: .2; } 14% { opacity: 1; } } /* -- Plasma bloom glow (Halo / KOTOR) ---------------------------------- */ @keyframes vcPlasmaGlow { 0%, 100% { filter: drop-shadow(0 0 4px currentColor); } 50% { filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 24px currentColor); } } /* -- Ripple / Puddle sheen (Bright Falls) ------------------------------ */ @keyframes vcPuddleSheen { 0% { background-position: 0 0; opacity: .3; } 100% { background-position: 0 80px; opacity: .15; } } /* ─────────────────────────────────────────────────────────────────────── §8.2 AW2 — DARK PLACE NOIR Flashlight sweep across the page, plus deep ink-bleed vignette. Active on: [data-vc-theme="aw2_noir"] ─────────────────────────────────────────────────────────────────────── */ /* Ink bleed — permanent deep vignette */ :root[data-vc-theme="aw2_noir"] body::before { background-image: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 55%, rgba(6,6,8,.85) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); background-size: cover, 256px 256px; } /* Flashlight cone — pseudo sweep triggered by vc-fx-trace-on */ :root[data-vc-theme="aw2_noir"] body.vc-fx-trace-on::after { content: ""; position: fixed; top: -30vh; left: -40vw; width: 80vw; height: 160vh; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(212,168,75,.04) 15deg, rgba(212,168,75,.09) 22deg, rgba(212,168,75,.04) 30deg, transparent 45deg); pointer-events: none; z-index: 9998; animation: vcFlashlightSweep 16s ease-in-out infinite; mix-blend-mode: screen; } @keyframes vcFlashlightSweep { 0% { transform: rotate(-18deg) translateY(-5%); opacity: .6; } 30% { transform: rotate(8deg) translateY(2%); opacity: .85; } 60% { transform: rotate(-4deg) translateY(-3%); opacity: .7; } 100% { transform: rotate(-18deg) translateY(-5%); opacity: .6; } } /* Cards get a subtle ink-edge shadow */ :root[data-vc-theme="aw2_noir"] .result-card, :root[data-vc-theme="aw2_noir"] .lib-card { box-shadow: 0 2px 12px rgba(6,6,8,.7), 0 0 0 1px rgba(180,140,70,.08) inset; } /* ─────────────────────────────────────────────────────────────────────── §8.3 AW2 — MANUSCRIPT / WRITER'S ROOM Typewriter scanline + cream page warmth + red ink drips. ─────────────────────────────────────────────────────────────────────── */ /* Page warmth base overlay */ :root[data-vc-theme="aw2_manuscript"] body::before { background-image: linear-gradient(180deg, rgba(240,228,200,.035) 0%, rgba(240,228,200,.02) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-size: cover, 256px 256px; } /* Typewriter scanline — a single slow-crawl line (vc-fx-scanlines-on implies heavier CRT) */ :root[data-vc-theme="aw2_manuscript"] body::after { background-image: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(200,65,60,.018) 3px, rgba(200,65,60,.018) 4px ); } /* Red ink highlight on active nav */ :root[data-vc-theme="aw2_manuscript"] .nav-item.active, :root[data-vc-theme="aw2_manuscript"] .nav-item:hover { border-left: 2px solid rgba(200,65,60,.55) !important; } /* Cards look like manuscript pages */ :root[data-vc-theme="aw2_manuscript"] .result-card, :root[data-vc-theme="aw2_manuscript"] .lib-card, :root[data-vc-theme="aw2_manuscript"] .vc-theme-picker-card { border-top: 1px solid rgba(200,65,60,.18); box-shadow: 0 1px 8px rgba(26,21,16,.55), inset 0 1px 0 rgba(240,228,200,.04); } /* Typewriter cursor on text inputs */ :root[data-vc-theme="aw2_manuscript"] input:focus, :root[data-vc-theme="aw2_manuscript"] textarea:focus { border-right: 2px solid rgba(200,65,60,.7); animation: vcTypeBlink .8s step-end infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.4 AW2 — CULT OF THE TREE (RITUAL BIRCH) Firefly drift + bark-pattern grain + sigil etch on borders. ─────────────────────────────────────────────────────────────────────── */ /* Bark/moss grain overlay */ :root[data-vc-theme="aw2_cult"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35 0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 512px 512px; } /* Deep forest vignette */ :root[data-vc-theme="aw2_cult"] body::after { background-image: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(6,9,8,.9) 0%, transparent 60%), radial-gradient(ellipse 100% 50% at 50% 0%, rgba(6,9,8,.7) 0%, transparent 50%); background-size: cover; animation: none; } /* Card borders get a carved/etched feel */ :root[data-vc-theme="aw2_cult"] .result-card, :root[data-vc-theme="aw2_cult"] .lib-card { border-color: rgba(200,160,64,.14); box-shadow: 0 3px 14px rgba(6,9,8,.65), inset 0 0 0 1px rgba(200,160,64,.06); } /* Sigil etch on active badge */ :root[data-vc-theme="aw2_cult"] .vc-theme-active::after { content: "⛧"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: .55; color: var(--gold); animation: vcRunePulse 3s ease-in-out infinite; pointer-events: none; } /* Fireflies — CSS-only via multi-shadow animation on body */ :root[data-vc-theme="aw2_cult"] .vc-shell::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle 2px at 18% 32%, rgba(200,160,64,.7) 0%, transparent 100%), radial-gradient(circle 1.5px at 72% 18%, rgba(200,160,64,.55) 0%, transparent 100%), radial-gradient(circle 2px at 45% 68%, rgba(200,160,64,.6) 0%, transparent 100%), radial-gradient(circle 1px at 83% 55%, rgba(200,160,64,.5) 0%, transparent 100%), radial-gradient(circle 1.5px at 25% 80%, rgba(200,160,64,.45) 0%, transparent 100%), radial-gradient(circle 2px at 60% 40%, rgba(200,160,64,.65) 0%, transparent 100%), radial-gradient(circle 1px at 90% 75%, rgba(200,160,64,.4) 0%, transparent 100%); animation: vcFirefliesMove 8s ease-in-out infinite alternate; } @keyframes vcFirefliesMove { 0% { transform: translate(0, 0); opacity: .5; } 33% { transform: translate(6px, -8px); opacity: .9; } 66% { transform: translate(-4px, 5px); opacity: .7; } 100% { transform: translate(3px, -12px); opacity: .85; } } /* ─────────────────────────────────────────────────────────────────────── §8.5 AW2 — SAGA ANDERSON / FBI FIELD KIT Evidence stamps + notebook-paper rule lines on cards. ─────────────────────────────────────────────────────────────────────── */ /* Notebook paper rule lines on card surfaces */ :root[data-vc-theme="aw2_saga"] .result-card, :root[data-vc-theme="aw2_saga"] .lib-card, :root[data-vc-theme="aw2_saga"] .vc-theme-picker-card { background-image: repeating-linear-gradient( 0deg, transparent, transparent 23px, rgba(232,160,32,.07) 23px, rgba(232,160,32,.07) 24px ); border-left: 2px solid rgba(232,160,32,.18) !important; } /* Evidence grid overlay when icegrid is on */ :root[data-vc-theme="aw2_saga"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="aw2_saga"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(232,160,32,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(232,160,32,.05) 1px, transparent 1px); background-size: 32px 24px; /* matches notebook lines */ } /* "EVIDENCE" ribbon on locker badges */ :root[data-vc-theme="aw2_saga"] .rb-owned { border-color: rgba(232,160,32,.5) !important; color: rgba(232,160,32,.95) !important; letter-spacing: 1.5px; } :root[data-vc-theme="aw2_saga"] .rb-owned::before { content: "EVIDENCE · "; font-size: 7px; opacity: .7; } /* Map thread lines — horizontal accent on sidebar sections */ :root[data-vc-theme="aw2_saga"] .sidebar-section-label::after { content: ""; display: block; height: 1px; margin-top: 4px; background: linear-gradient(90deg, rgba(232,160,32,.35), transparent); } /* ─────────────────────────────────────────────────────────────────────── §8.6 AW2 — OLD GODS OF ASGARD / TOUR POSTER Stage fog + light-rig sweep + poster grain + bass-thump glitch. ─────────────────────────────────────────────────────────────────────── */ /* Heavy poster grain */ :root[data-vc-theme="aw2_oldgods"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* Stage fog — bottom rise */ :root[data-vc-theme="aw2_oldgods"] .vc-shell::before { content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 35vh; background: linear-gradient(to top, rgba(12,6,8,.65) 0%, rgba(38,18,36,.35) 30%, transparent 100%); pointer-events: none; z-index: 9996; animation: vcMistRise 9s ease-in-out infinite alternate; } /* Light rig sweep — two crossing beams when trace is on */ :root[data-vc-theme="aw2_oldgods"] body.vc-fx-trace-on::after { content: ""; position: fixed; top: -10vh; left: -20vw; width: 40vw; height: 80vh; background: linear-gradient(160deg, transparent 0%, rgba(255,77,200,.06) 40%, rgba(232,96,32,.08) 55%, transparent 100%); pointer-events: none; z-index: 9998; animation: vcLightRig 7s ease-in-out infinite; mix-blend-mode: screen; } /* Neon accent on titles */ :root[data-vc-theme="aw2_oldgods"] .vc-page-title, :root[data-vc-theme="aw2_oldgods"] .sidebar-logo-wordmark { animation: vcNeonFlicker 6s ease-in-out infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.7 AW2 — DEERFEST (NEON FESTIVAL) Marquee bulbs + neon flicker on nav + confetti specks overlay. ─────────────────────────────────────────────────────────────────────── */ /* Marquee bulb border on page header */ :root[data-vc-theme="aw2_deerfest"] .vc-page-header { border-bottom: 2px dotted rgba(245,200,64,.3); position: relative; } :root[data-vc-theme="aw2_deerfest"] .vc-page-header::before { content: "• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •"; display: block; font-size: 6px; letter-spacing: 8px; color: rgba(245,200,64,.5); margin-bottom: 6px; animation: vcBulbBlink 4s ease-in-out infinite; overflow: hidden; } /* Neon flicker on active nav */ :root[data-vc-theme="aw2_deerfest"] .nav-item.active, :root[data-vc-theme="aw2_deerfest"] .nav-item:hover { animation: vcNeonFlicker 4s ease-in-out infinite; text-shadow: 0 0 8px var(--gold-glow); } /* Confetti specks — fixed radial dots */ :root[data-vc-theme="aw2_deerfest"] .vc-shell::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle 3px at 15% 25%, rgba(245,200,64,.55) 0%, transparent 100%), radial-gradient(circle 2px at 78% 12%, rgba(0,144,192,.6) 0%, transparent 100%), radial-gradient(circle 3px at 50% 70%, rgba(245,200,64,.45) 0%, transparent 100%), radial-gradient(circle 2px at 88% 60%, rgba(0,144,192,.5) 0%, transparent 100%), radial-gradient(circle 2px at 33% 88%, rgba(245,200,64,.4) 0%, transparent 100%), radial-gradient(circle 3px at 65% 35%, rgba(0,144,192,.45) 0%, transparent 100%); animation: vcFirefliesMove 12s ease-in-out infinite alternate; opacity: .7; } /* Warm page tint */ :root[data-vc-theme="aw2_deerfest"] body::before { background-image: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,80,100,.25) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: cover, 256px 256px; } /* ─────────────────────────────────────────────────────────────────────── §8.8 AW2 — BRIGHT FALLS (RAIN / FOG / STREETLAMP) Rain streaks overlay + low fog bloom + streetlamp vignette. ─────────────────────────────────────────────────────────────────────── */ /* Rain streaks */ :root[data-vc-theme="aw2_brightfalls"] body::before { background-image: repeating-linear-gradient( 175deg, transparent 0px, transparent 2px, rgba(200,210,220,.04) 2px, rgba(200,210,220,.04) 3px, transparent 3px, transparent 22px ), url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); background-size: cover, 256px 256px; animation: vcRainFall 2.5s linear infinite; } /* Streetlamp vignette — warm amber cone from top-center */ :root[data-vc-theme="aw2_brightfalls"] body::after { background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232,160,64,.12) 0%, transparent 70%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(10,12,14,.8) 0%, transparent 80%); background-size: cover; animation: none; } /* Fog bloom on sidebar */ :root[data-vc-theme="aw2_brightfalls"] .sidebar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(14,26,16,.6) 100%); pointer-events: none; } /* Wet sheen on cards */ :root[data-vc-theme="aw2_brightfalls"] .result-card, :root[data-vc-theme="aw2_brightfalls"] .lib-card { box-shadow: 0 4px 16px rgba(7,8,12,.7), inset 0 1px 0 rgba(200,210,220,.06); } /* ─────────────────────────────────────────────────────────────────────── §8.9 AW2 — NIGHT SPRINGS (PULP TV / RETRO SCI-FI) TV frame overlay + heavy halftone dot-grain + channel static. ─────────────────────────────────────────────────────────────────────── */ /* Halftone dot grain */ :root[data-vc-theme="aw2_nightsprings"] body::before { background-image: radial-gradient(circle 1px at 50% 50%, rgba(216,240,64,.12) 0%, transparent 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='1' fill='rgba(216,240,64,0.07)'/%3E%3C/svg%3E"); background-size: cover, 8px 8px; } /* TV frame — rounded inset border + phosphor edge glow */ :root[data-vc-theme="aw2_nightsprings"] .vc-main::before { content: ""; position: fixed; inset: 6px; border: 2px solid rgba(216,240,64,.12); border-radius: 8px; pointer-events: none; z-index: 9995; box-shadow: inset 0 0 40px rgba(216,240,64,.05), 0 0 0 4px rgba(5,5,8,.8); } /* Channel static flicker */ :root[data-vc-theme="aw2_nightsprings"] body::after { background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(216,240,64,.025) 2px, rgba(216,240,64,.025) 4px ); animation: vcStaticFlicker 0.18s steps(1) infinite; } /* Episode bumper pill on page eyebrow */ :root[data-vc-theme="aw2_nightsprings"] .vc-page-eyebrow { font-family: var(--font-vhs); letter-spacing: 5px; color: rgba(216,240,64,.8) !important; } /* ─────────────────────────────────────────────────────────────────────── §8.10 CONTROL — POLARIS (ASTRAL CALM) Astral particles + resonance bloom + guidance pulse on focus. ─────────────────────────────────────────────────────────────────────── */ /* Subtle aurora shimmer — top edge */ :root[data-vc-theme="control_polaris"] body::after { background-image: linear-gradient(180deg, rgba(122,184,245,.08) 0%, rgba(192,96,220,.05) 10%, transparent 40%); background-size: cover; animation: vcBloomPulse 6s ease-in-out infinite; } /* Astral particle field */ :root[data-vc-theme="control_polaris"] .vc-shell::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle 1.5px at 20% 15%, rgba(122,184,245,.7) 0%, transparent 100%), radial-gradient(circle 1px at 55% 8%, rgba(192,96,220,.6) 0%, transparent 100%), radial-gradient(circle 2px at 80% 22%, rgba(122,184,245,.55) 0%, transparent 100%), radial-gradient(circle 1px at 35% 30%, rgba(192,96,220,.5) 0%, transparent 100%), radial-gradient(circle 1.5px at 70% 40%, rgba(122,184,245,.6) 0%, transparent 100%), radial-gradient(circle 1px at 10% 60%, rgba(192,96,220,.45) 0%, transparent 100%), radial-gradient(circle 2px at 90% 70%, rgba(122,184,245,.5) 0%, transparent 100%), radial-gradient(circle 1px at 45% 80%, rgba(192,96,220,.55) 0%, transparent 100%), radial-gradient(circle 1.5px at 25% 90%, rgba(122,184,245,.45) 0%, transparent 100%); animation: vcAstralDrift 14s ease-in-out infinite alternate; } @keyframes vcAstralDrift { 0% { transform: translateY(0) translateX(0); opacity: .6; } 50% { transform: translateY(-8px) translateX(4px); opacity: 1; } 100% { transform: translateY(-14px) translateX(-3px); opacity: .7; } } /* Resonance bloom ring on focused elements */ :root[data-vc-theme="control_polaris"] *:focus-visible { outline: 1px solid rgba(122,184,245,.55) !important; box-shadow: 0 0 0 3px rgba(122,184,245,.15), 0 0 16px rgba(122,184,245,.2) !important; } /* Guidance pulse — breach-on border pulse */ :root[data-vc-theme="control_polaris"] body.vc-fx-breach-on .vc-modal-dialog { animation: vcShieldPulse 3s ease-in-out infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.11 CONTROL — HISS CORRUPTION Corrupt scan bars + red strobe vignette + glyph distortion. ─────────────────────────────────────────────────────────────────────── */ /* Red strobe vignette — persistent, subtle */ :root[data-vc-theme="control_hiss"] body::after { background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(255,26,64,.10) 100%); background-size: cover; animation: vcHissStrobe 4.3s steps(1) infinite; } /* Scan bar crawl — a single dark bar moving top to bottom */ :root[data-vc-theme="control_hiss"] .vc-main::after { content: ""; position: fixed; left: 0; right: 0; height: 3px; background: linear-gradient(180deg, rgba(255,26,64,.25) 0%, rgba(255,26,64,.08) 50%, transparent 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 3.8s linear infinite; } /* Glyph distortion on card images when hovered */ :root[data-vc-theme="control_hiss"] .result-card:hover .result-poster img, :root[data-vc-theme="control_hiss"] .lib-card:hover .lib-card-poster img { filter: contrast(1.1) saturate(1.2) hue-rotate(8deg); animation: vcGlitchPulse 200ms ease-out; } /* Hiss-corrupted noise — heavier than default */ :root[data-vc-theme="control_hiss"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* ─────────────────────────────────────────────────────────────────────── §8.12 CONTROL — FBC BUREAU TERMINAL CRT bloom + dot-matrix grid on surfaces + stamp slam (JS-driven). ─────────────────────────────────────────────────────────────────────── */ /* CRT phosphor base glow */ :root[data-vc-theme="control_fbc"] body::after { background-image: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212,168,48,.04) 0%, transparent 80%); background-size: cover; animation: vcCrtHum 4s ease-in-out infinite; } /* Dot-matrix grid — tighter than icegrid */ :root[data-vc-theme="control_fbc"] body.vc-fx-icegrid-on .vc-modal-dialog::before, :root[data-vc-theme="control_fbc"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="control_fbc"] body.vc-fx-icegrid-on .lib-card::before { background-image: radial-gradient(circle 1px at center, rgba(212,168,48,.18) 0%, transparent 100%); background-size: 10px 10px; } /* Stamp element — injected by JS, styled here */ .vc-fx-stamp { position: absolute; top: 12px; right: 12px; font-family: var(--font-vhs, monospace); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(212,168,48,.8); border: 2px solid rgba(212,168,48,.6); border-radius: 2px; padding: 2px 6px; opacity: 0; pointer-events: none; transform: rotate(-5deg); z-index: 10; } .vc-fx-stamp.visible { animation: vcStampSlam .35s cubic-bezier(.22,.68,0,1.35) forwards; } /* Folder tab accent on sidebar sections */ :root[data-vc-theme="control_fbc"] .sidebar-section-label { border-left: 3px solid rgba(212,168,48,.4); padding-left: 10px; } /* ─────────────────────────────────────────────────────────────────────── §8.13 MASS EFFECT — OMNI-TOOL HUD Holo shimmer + HUD bracket corners + omni scanline sweep. ─────────────────────────────────────────────────────────────────────── */ /* Omni-tool scanline sweep (uses vc-fx-trace-on) */ :root[data-vc-theme="me_omnitool"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 2px; background: linear-gradient(180deg, rgba(255,140,32,.35) 0%, rgba(255,140,32,.1) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 2.5s linear infinite; } /* Holo shimmer on cards */ :root[data-vc-theme="me_omnitool"] .result-card, :root[data-vc-theme="me_omnitool"] .lib-card { position: relative; overflow: hidden; } :root[data-vc-theme="me_omnitool"] .result-card::after, :root[data-vc-theme="me_omnitool"] .lib-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,140,32,.06) 50%, transparent 70%); background-size: 200% 100%; animation: vcHoloShimmer 4s linear infinite; pointer-events: none; } /* HUD bracket corners — see §8.1 shared .vc-fx-hud-brackets class */ :root[data-vc-theme="me_omnitool"] .vc-modal-dialog, :root[data-vc-theme="me_omnitool"] .result-card { position: relative; } :root[data-vc-theme="me_omnitool"] .vc-modal-dialog::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) top left / 12px 1.5px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) top left / 1.5px 12px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) top right / 12px 1.5px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) top right / 1.5px 12px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) bottom left / 12px 1.5px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) bottom left / 1.5px 12px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) bottom right / 12px 1.5px no-repeat, linear-gradient(rgba(255,140,32,.5), rgba(255,140,32,.5)) bottom right / 1.5px 12px no-repeat; animation: vcBloomPulse 3s ease-in-out infinite; } /* Paragon/Renegade accent — default Paragon (blue) */ :root[data-vc-theme="me_omnitool"] .btn-ritual { border-color: rgba(32,96,232,.55); box-shadow: 0 0 10px rgba(32,96,232,.2); } :root[data-vc-theme="me_omnitool"][data-me-bias="renegade"] .btn-ritual { border-color: rgba(255,80,32,.55); box-shadow: 0 0 10px rgba(255,80,32,.2); } /* ─────────────────────────────────────────────────────────────────────── §8.14 RE — BIOHAZARD LAB Hazard stripes + containment fog vignette + low-health screen pulse. ─────────────────────────────────────────────────────────────────────── */ /* Hazard stripe header accent */ :root[data-vc-theme="re_biohazard"] .vc-page-header { border-bottom: 3px solid transparent; border-image: repeating-linear-gradient( -45deg, rgba(232,200,32,.4) 0px, rgba(232,200,32,.4) 6px, rgba(224,32,32,.35) 6px, rgba(224,32,32,.35) 12px ) 1; } /* Containment fog vignette */ :root[data-vc-theme="re_biohazard"] body::after { background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, rgba(5,8,8,.75) 100%); background-size: cover; animation: vcBloomPulse 5s ease-in-out infinite; } /* Security cam timestamp — fixed bottom corner */ :root[data-vc-theme="re_biohazard"] .vc-main::before { content: "REC ● CAM-01"; position: fixed; bottom: 12px; right: 16px; font-family: var(--font-vhs, monospace); font-size: 9px; letter-spacing: 2px; color: rgba(232,200,32,.5); pointer-events: none; z-index: 9999; animation: vcTelemetryBlip 3s ease-in-out infinite; } /* Low-health pulse — body border when breach is on */ :root[data-vc-theme="re_biohazard"] body.vc-fx-breach-on { animation: vcLowHealthPulse 1.8s ease-in-out infinite; } /* Biohazard badge on locker items */ :root[data-vc-theme="re_biohazard"] .rb-owned::before { content: "☣ "; font-size: 8px; } /* ─────────────────────────────────────────────────────────────────────── §8.15 RE — UMBRELLA CORP CLINICAL Sterile CRT bloom + biohazard microtext watermark + seal stamps. ─────────────────────────────────────────────────────────────────────── */ /* Sterile bloom — cool white center */ :root[data-vc-theme="re_umbrella"] body::after { background-image: radial-gradient(ellipse 50% 30% at 50% 50%, rgba(220,220,240,.03) 0%, transparent 80%); background-size: cover; animation: vcCrtHum 5s ease-in-out infinite; } /* Biohazard microtext watermark on page */ :root[data-vc-theme="re_umbrella"] .vc-main::before { content: "UMBRELLA CORP · CLASSIFIED · UMBRELLA CORP · CLASSIFIED · UMBRELLA CORP · CLASSIFIED · UMBRELLA CORP · CLASSIFIED · UMBRELLA CORP · CLASSIFIED"; position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(204,26,26,.18); pointer-events: none; z-index: 9999; white-space: nowrap; overflow: hidden; } /* Containment seal on active badge */ :root[data-vc-theme="re_umbrella"] .vc-theme-active::before { content: "☂ "; font-size: 9px; opacity: .7; } /* Sterile grid — white on dark */ :root[data-vc-theme="re_umbrella"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="re_umbrella"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(240,240,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(240,240,255,.04) 1px, transparent 1px); background-size: 20px 20px; } /* ─────────────────────────────────────────────────────────────────────── §8.16 RE — SAFE ROOM Typewriter reveal + warm lamp vignette + inventory grid. ─────────────────────────────────────────────────────────────────────── */ /* Lamp glow vignette — warm amber center */ :root[data-vc-theme="re_saferoom"] body::after { background-image: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(200,144,80,.06) 0%, transparent 70%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(16,12,8,.7) 0%, transparent 80%); background-size: cover; animation: vcBloomPulse 7s ease-in-out infinite; } /* Inventory grid on card backgrounds */ :root[data-vc-theme="re_saferoom"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="re_saferoom"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(200,144,80,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(200,144,80,.05) 1px, transparent 1px); background-size: 24px 24px; } /* Typewriter cursor on search input */ :root[data-vc-theme="re_saferoom"] input:focus { border-right: 2px solid rgba(200,144,80,.7) !important; animation: vcTypeBlink .9s step-end infinite; } /* Ribbon accent — the iconic typewriter save ribbon */ :root[data-vc-theme="re_saferoom"] .sidebar-footer { border-top: 2px solid rgba(200,144,80,.22); position: relative; } :root[data-vc-theme="re_saferoom"] .sidebar-footer::before { content: "— GAME SAVED —"; display: block; font-family: var(--font-vhs, monospace); font-size: 8px; letter-spacing: 3px; color: rgba(200,144,80,.45); text-align: center; margin-bottom: 4px; } /* ─────────────────────────────────────────────────────────────────────── §8.17 RE — VHS FOUND FOOTAGE Tracking tear + REC timestamp + lens dirt grain. ─────────────────────────────────────────────────────────────────────── */ /* Lens dirt / moisture grain */ :root[data-vc-theme="re_vhs"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); background-size: 512px 512px; } /* VHS scanlines — heavier than default */ :root[data-vc-theme="re_vhs"] body::after { background-image: repeating-linear-gradient( 0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px ); animation: vcPhosphorBloom 3s ease-in-out infinite; } /* REC timestamp — top-left corner */ :root[data-vc-theme="re_vhs"] .vc-main::before { content: "● REC 00:00"; position: fixed; top: 14px; left: 20px; font-family: var(--font-vhs, monospace); font-size: 10px; letter-spacing: 2px; color: rgba(224,16,16,.8); pointer-events: none; z-index: 9999; animation: vcTelemetryBlip 2s ease-in-out infinite; } /* Tracking tear glitch on main content */ :root[data-vc-theme="re_vhs"] .vc-main { animation: vcTrackingTear 8s ease-in-out infinite; } /* Exposure over-bright flicker on hover */ :root[data-vc-theme="re_vhs"] .result-card:hover img, :root[data-vc-theme="re_vhs"] .lib-card:hover img { filter: brightness(1.08) contrast(1.05) saturate(0.85); transition: filter .1s; } /* ─────────────────────────────────────────────────────────────────────── §8.18 KOTOR — HOLOCRON / JEDI ARCHIVE Hologlyph rune overlay + Force aura ring + light-seam borders. ─────────────────────────────────────────────────────────────────────── */ /* Force aura — slow rotating border ring on modals */ :root[data-vc-theme="kotor_holocron"] .vc-modal-dialog { position: relative; overflow: hidden; } :root[data-vc-theme="kotor_holocron"] .vc-modal-dialog::after { content: ""; position: absolute; inset: -50%; background: conic-gradient( from 0deg, transparent 0deg, rgba(96,200,240,.18) 30deg, rgba(200,32,16,.12) 90deg, transparent 120deg, rgba(96,200,240,.10) 200deg, transparent 240deg, rgba(200,32,16,.08) 300deg, transparent 360deg ); animation: vcForceRotate 18s linear infinite; pointer-events: none; mix-blend-mode: screen; } /* Hologlyph rune overlay on page */ :root[data-vc-theme="kotor_holocron"] .vc-shell::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle 1.5px at 22% 20%, rgba(96,200,240,.55) 0%, transparent 100%), radial-gradient(circle 1px at 68% 14%, rgba(200,32,16,.45) 0%, transparent 100%), radial-gradient(circle 2px at 78% 35%, rgba(96,200,240,.5) 0%, transparent 100%), radial-gradient(circle 1px at 40% 55%, rgba(200,32,16,.4) 0%, transparent 100%), radial-gradient(circle 1.5px at 85% 62%, rgba(96,200,240,.45) 0%, transparent 100%), radial-gradient(circle 1px at 15% 78%, rgba(200,32,16,.5) 0%, transparent 100%); animation: vcRunePulse 4s ease-in-out infinite; } /* Light seam borders */ :root[data-vc-theme="kotor_holocron"] .result-card, :root[data-vc-theme="kotor_holocron"] .lib-card { border-color: rgba(96,200,240,.18); box-shadow: 0 0 0 1px rgba(96,200,240,.06) inset, 0 4px 14px rgba(6,8,15,.7); } /* Force side — Light/Dark aura on active theme badge */ :root[data-vc-theme="kotor_holocron"] .vc-theme-active { animation: vcPlasmaGlow 3s ease-in-out infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.19 ZELDA — SHEIKAH SLATE / ANCIENT TECH Rune overlay + topographic grid lines + UI activation pulse. ─────────────────────────────────────────────────────────────────────── */ /* Sheikah rune watermark overlay */ :root[data-vc-theme="zelda_sheikah"] .vc-shell::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle 2px at 30% 20%, rgba(64,200,232,.6) 0%, transparent 100%), radial-gradient(circle 1.5px at 70% 15%, rgba(64,200,232,.5) 0%, transparent 100%), radial-gradient(circle 1px at 50% 45%, rgba(224,40,56,.4) 0%, transparent 100%), radial-gradient(circle 2px at 20% 65%, rgba(64,200,232,.55) 0%, transparent 100%), radial-gradient(circle 1.5px at 80% 72%, rgba(64,200,232,.45) 0%, transparent 100%), radial-gradient(circle 1px at 55% 88%, rgba(224,40,56,.35) 0%, transparent 100%); animation: vcRunePulse 5s ease-in-out infinite; } /* Topographic contour lines on card surfaces */ :root[data-vc-theme="zelda_sheikah"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="zelda_sheikah"] body.vc-fx-icegrid-on .lib-card::before, :root[data-vc-theme="zelda_sheikah"] body.vc-fx-icegrid-on .vc-modal-dialog::before { background-image: repeating-radial-gradient( ellipse at 50% 50%, transparent, transparent 24px, rgba(64,200,232,.07) 25px ); background-size: 80px 80px; } /* UI activation pulse on button click */ :root[data-vc-theme="zelda_sheikah"] .btn:active { box-shadow: 0 0 0 6px rgba(64,200,232,.2), 0 0 20px rgba(64,200,232,.15) !important; transition: box-shadow .05s; } /* Sheikah eye glyph on active badge */ :root[data-vc-theme="zelda_sheikah"] .vc-theme-active::before { content: "◈ "; font-size: 9px; opacity: .8; color: var(--gold); } /* Rune glow on sidebar logo */ :root[data-vc-theme="zelda_sheikah"] .sidebar-logo-wordmark { text-shadow: 0 0 12px rgba(64,200,232,.4), 0 0 24px rgba(64,200,232,.15); animation: vcRunePulse 4s ease-in-out infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.20 MARATHON — RUNNER HUD / NEON VOID TERMINAL Vector scan diagonal + HUD bracket corners + telemetry strip. ─────────────────────────────────────────────────────────────────────── */ /* Diagonal vector scan lines */ :root[data-vc-theme="marathon_hud"] body::before { background-image: repeating-linear-gradient( -35deg, transparent 0px, transparent 10px, rgba(255,90,32,.025) 10px, rgba(255,90,32,.025) 11px ), url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: cover, 256px 256px; } /* HUD bracket corners on the main viewport */ :root[data-vc-theme="marathon_hud"] .vc-main::before { content: ""; position: fixed; inset: 10px; pointer-events: none; z-index: 9995; background: linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) top left / 20px 2px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) top left / 2px 20px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) top right / 20px 2px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) top right / 2px 20px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) bottom left / 20px 2px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) bottom left / 2px 20px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) bottom right / 20px 2px no-repeat, linear-gradient(rgba(255,90,32,.6), rgba(255,90,32,.6)) bottom right / 2px 20px no-repeat; animation: vcBloomPulse 4s ease-in-out infinite; } /* Telemetry strip — top edge data bar */ :root[data-vc-theme="marathon_hud"] .vc-main::after { content: "RUNNER · ONLINE · SYS:OK · PKT:—— · LAT:—ms · RUN"; position: fixed; top: 0; left: 0; right: 0; height: 18px; background: rgba(4,6,10,.9); border-bottom: 1px solid rgba(255,90,32,.25); font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(255,90,32,.55); display: flex; align-items: center; padding-left: 16px; pointer-events: none; z-index: 9999; animation: vcTelemetryBlip 2.5s ease-in-out infinite; } /* Packet-loss micro-glitch on cards when glitch is on */ :root[data-vc-theme="marathon_hud"] body.vc-fx-glitch-on .result-card:nth-child(7n) { animation: vcTrackingTear 12s ease-in-out infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.21 HALO 2 — UNSC HUD + COVENANT GLOW Shield pulse ring + reticle bracket corners + Cortana circuit veil. ─────────────────────────────────────────────────────────────────────── */ /* Reticle bracket corners on viewport */ :root[data-vc-theme="halo2_unsc"] .vc-main::before { content: ""; position: fixed; inset: 8px; pointer-events: none; z-index: 9995; background: linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) top left / 16px 2px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) top left / 2px 16px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) top right / 16px 2px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) top right / 2px 16px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) bottom left / 16px 2px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) bottom left / 2px 16px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) bottom right / 16px 2px no-repeat, linear-gradient(rgba(48,200,112,.5), rgba(48,200,112,.5)) bottom right / 2px 16px no-repeat; } /* Shield recharge pulse ring on modal */ :root[data-vc-theme="halo2_unsc"] .vc-modal-dialog { animation: vcShieldPulse 4s ease-in-out infinite; } /* Cortana circuit veil — sigil-like shimmer */ :root[data-vc-theme="halo2_unsc"] body.vc-fx-sigils-on .vc-shell::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(circle 1.5px at 25% 30%, rgba(80,128,255,.55) 0%, transparent 100%), radial-gradient(circle 1px at 65% 20%, rgba(168,64,240,.5) 0%, transparent 100%), radial-gradient(circle 2px at 75% 50%, rgba(80,128,255,.5) 0%, transparent 100%), radial-gradient(circle 1px at 40% 70%, rgba(168,64,240,.45) 0%, transparent 100%), radial-gradient(circle 1.5px at 88% 80%, rgba(80,128,255,.4) 0%, transparent 100%); animation: vcRunePulse 5s ease-in-out infinite; } /* Plasma badge glow on rare items */ :root[data-vc-theme="halo2_unsc"] .rb { animation: vcPlasmaGlow 4s ease-in-out infinite; } /* ─────────────────────────────────────────────────────────────────────── §8.22 MARIO — TOYBOX CLEAN Coin sparkle on hover + confetti pop on milestones + sticker badges. ─────────────────────────────────────────────────────────────────────── */ /* Card hover coin flash */ :root[data-vc-theme="mario_toybox"] .result-card:hover, :root[data-vc-theme="mario_toybox"] .lib-card:hover { box-shadow: 0 6px 20px rgba(232,72,48,.15), 0 0 0 2px rgba(245,204,48,.3), 0 0 12px rgba(245,204,48,.12) !important; transition: box-shadow .15s; } /* Star/coin sparkle overlay on result-card hover */ :root[data-vc-theme="mario_toybox"] .result-card::before { content: "★"; position: absolute; top: 8px; right: 8px; font-size: 12px; color: rgba(245,204,48,.8); opacity: 0; pointer-events: none; transition: opacity .15s; filter: drop-shadow(0 0 4px rgba(245,204,48,.6)); } :root[data-vc-theme="mario_toybox"] .result-card:hover::before { opacity: 1; animation: vcCoinSpin .5s ease-in-out; } /* Sticker badges — round pill style */ :root[data-vc-theme="mario_toybox"] .rb { border-radius: 999px !important; font-weight: 700; letter-spacing: 0.5px; } :root[data-vc-theme="mario_toybox"] .rb-owned { background: rgba(232,72,48,.85) !important; border-color: rgba(232,72,48,.9) !important; color: #fff !important; } :root[data-vc-theme="mario_toybox"] .rb-playing { background: rgba(245,204,48,.85) !important; border-color: rgba(245,204,48,.9) !important; color: #2a1800 !important; } /* Confetti pop — sprinkled on .vc-fx-confetti class (added by JS on milestone) */ .vc-fx-confetti-piece { position: fixed; width: 6px; height: 6px; border-radius: 1px; pointer-events: none; z-index: 10000; animation: vcConfettiFall .9s ease-in forwards; } /* Light + bright body for Mario */ :root[data-vc-theme="mario_toybox"] body::after { background-image: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(255,255,255,.04) 0%, transparent 70%); background-size: cover; animation: none; } /* ─────────────────────────────────────────────────────────────────────── §8.23 DRAGON AGE — FADE / VEILFIRE CODEX Rune circle etch + veilfire mist wisps + codex parchment styling. ─────────────────────────────────────────────────────────────────────── */ /* Parchment grain texture */ :root[data-vc-theme="da_veilfire"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45 0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); background-size: 512px 512px; } /* Veilfire mist — teal wisps from bottom */ :root[data-vc-theme="da_veilfire"] .vc-shell::before { content: ""; position: fixed; bottom: 0; left: -10%; right: -10%; height: 50vh; background: radial-gradient(ellipse 80% 60% at 30% 100%, rgba(32,216,200,.09) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 70% 100%, rgba(184,56,220,.07) 0%, transparent 60%); pointer-events: none; z-index: 9996; animation: vcVeilfireMist 10s ease-in-out infinite alternate; } /* Rune circle on page bg — tiled faint pattern */ :root[data-vc-theme="da_veilfire"] body.vc-fx-icegrid-on .vc-modal-dialog::before, :root[data-vc-theme="da_veilfire"] body.vc-fx-icegrid-on .result-card::before { background-image: repeating-radial-gradient( circle at 50% 50%, transparent, transparent 30px, rgba(32,216,200,.06) 31px, transparent 32px ); background-size: 80px 80px; } /* Codex page styling on cards */ :root[data-vc-theme="da_veilfire"] .result-card, :root[data-vc-theme="da_veilfire"] .lib-card { border-color: rgba(32,216,200,.14); box-shadow: 0 4px 16px rgba(7,6,15,.6), inset 0 0 0 1px rgba(32,216,200,.05); } /* Blood accent on destructive buttons */ :root[data-vc-theme="da_veilfire"] .lib-card-remove { border-color: rgba(184,56,220,.5) !important; color: rgba(184,56,220,.9) !important; } /* ─────────────────────────────────────────────────────────────────────── §8.24 FALLOUT — PIP-BOY TERMINAL Full-surface reskin: CRT screen frame, topbar/sidebar/cards/modals/ buttons all styled as if displayed through the same green phosphor screen. See docs note in swift-dazzling-music plan (2026-08-22) for the "everywhere at once" scope this section covers. ─────────────────────────────────────────────────────────────────────── */ /* Heavy phosphor scanlines + ambient bloom + vignette, one rule. (Previously two competing rules fought over this same pseudo-element's background-image — the later one, using --fx-bloom-intensity/ --fx-vignette-depth, silently won and the scanline texture never rendered. Merged here so both layer together and the tuner FX controls still apply.) Respects body.vc-fx-scanlines-off (css ~498). */ :root[data-vc-theme="fallout_pipboy"] body::after { background-image: repeating-linear-gradient( 0deg, rgba(0,0,0,.25) 0px, rgba(0,0,0,.25) 1px, transparent 1px, transparent 2px ), radial-gradient(ellipse 75% 60% at 50% 42%, rgba(78,255,88,var(--fx-bloom-intensity,.15)) 0%, rgba(78,255,88,calc(var(--fx-bloom-intensity,.15)*0.4)) 45%, transparent 72%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(2,5,3,var(--fx-vignette-depth,.60)) 100%); background-size: auto, cover, cover; animation: vcPhosphorBloom 2.5s ease-in-out infinite; } /* CRT phosphor glow grain */ :root[data-vc-theme="fallout_pipboy"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* CRT bezel — rounded border + inner shadow + curvature hint */ :root[data-vc-theme="fallout_pipboy"] .vc-main::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; border-radius: 12px; box-shadow: inset 0 0 80px rgba(0,0,0,.55), inset 0 0 8px rgba(78,255,88,.08); background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 70%, rgba(0,0,0,.4) 100%); animation: vcCrtHum 3s ease-in-out infinite; } /* Terminal bezel frame */ :root[data-vc-theme="fallout_pipboy"] .vc-main::after { content: "PIP-BOY 3000 · ROBCO IND."; position: fixed; bottom: 6px; right: 12px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(78,255,88,.3); pointer-events: none; z-index: 9999; } /* CRT warp + continuous phosphor flicker on whole page */ :root[data-vc-theme="fallout_pipboy"] .vc-shell { filter: contrast(1.06) brightness(1.04); animation: vcCrtHum 4s ease-in-out infinite, vcPhosphorFlicker 6s linear infinite; } @keyframes vcPhosphorFlicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .96; } 94% { opacity: 1; } 96% { opacity: .985; } 97% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :root[data-vc-theme="fallout_pipboy"] .vc-shell { animation: none; } } /* Rad warning badge */ :root[data-vc-theme="fallout_pipboy"] .rb-owned::before { content: "☢ "; font-size: 8px; } /* ── Boot strip clearance (content added in JS, §4 startPipBoyStrip) ── */ :root[data-vc-theme="fallout_pipboy"] .vc-page { padding-top: 28px; } #vc-pipboy-boot-strip { position: fixed; top: 0; left: 0; right: 0; height: 28px; background: rgba(2,5,3,.94); border-bottom: 1px solid rgba(78,255,88,.22); font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; color: rgba(78,255,88,.7); display: flex; align-items: center; padding: 0 16px; pointer-events: none; z-index: 10000; } #vc-pipboy-boot-strip .blink { animation: vcTypeBlink 1.1s step-end infinite; } /* ── Top bar ─────────────────────────────────────────────────────────── */ :root[data-vc-theme="fallout_pipboy"] .games-topbar { background: rgba(2,5,3,.97); border-bottom: 1px solid var(--gold-dim); } :root[data-vc-theme="fallout_pipboy"] .games-topbar-wordmark { font-family: var(--font-display); font-size: 1.5em; letter-spacing: .06em; color: var(--gold); text-shadow: 0 0 8px var(--gold-glow), 0 0 2px var(--gold-glow); } :root[data-vc-theme="fallout_pipboy"] .games-topbar-sub { font-family: var(--font-display); color: var(--blood); letter-spacing: .1em; } :root[data-vc-theme="fallout_pipboy"] .games-topbar-right .btn, :root[data-vc-theme="fallout_pipboy"] .games-topbar-right .btn-ritual { border-radius: 2px; border-width: 1px; font-family: var(--font-display); letter-spacing: .04em; } /* ── Sidebar ─────────────────────────────────────────────────────────── */ :root[data-vc-theme="fallout_pipboy"] .nav-item { font-family: var(--font-display); font-size: 1.05em; letter-spacing: .03em; position: relative; padding-left: 18px; } :root[data-vc-theme="fallout_pipboy"] .nav-item::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: var(--gold); opacity: 0; transition: opacity .12s; } :root[data-vc-theme="fallout_pipboy"] .nav-item:hover::before, :root[data-vc-theme="fallout_pipboy"] .nav-item.active::before { content: ">"; opacity: 1; } :root[data-vc-theme="fallout_pipboy"] .nav-item.active { box-shadow: inset 0 0 12px rgba(78,255,88,.10); text-shadow: 0 0 6px var(--gold-glow); } :root[data-vc-theme="fallout_pipboy"] .sidebar-section-label { font-family: var(--font-display); letter-spacing: .15em; } /* ── Cards: monochrome-phosphor cover art ───────────────────────────── */ :root[data-vc-theme="fallout_pipboy"] .result-poster img, :root[data-vc-theme="fallout_pipboy"] .vc-lib-group-cover, :root[data-vc-theme="fallout_pipboy"] .vc-lm-cover img, :root[data-vc-theme="fallout_pipboy"] .vc-lm-banner { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.9); } :root[data-vc-theme="fallout_pipboy"] .result-title, :root[data-vc-theme="fallout_pipboy"] .vc-lm-title, :root[data-vc-theme="fallout_pipboy"] .vc-game-modal-title, :root[data-vc-theme="fallout_pipboy"] .vc-lm-section-title, :root[data-vc-theme="fallout_pipboy"] .vc-copy-modal-eyebrow { font-family: var(--font-display); letter-spacing: .03em; } /* Screen-corner tick marks — Pip-Boy's own frame language, distinct from the sci-fi HUD_BRACKET_THEMES corners (js §4, applyHudBrackets). Applied to .result-card/.lib-card only (js §4, applyPipBoyFrames) -- NOT the modal dialogs, whose ::before/::after are already spoken for (top-line gradient, banner image). Modals get their CRT frame via the border/box-shadow rule below instead. */ :root[data-vc-theme="fallout_pipboy"] .vc-fx-pipboy-frame { position: relative; } :root[data-vc-theme="fallout_pipboy"] .vc-fx-pipboy-frame::before, :root[data-vc-theme="fallout_pipboy"] .vc-fx-pipboy-frame::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; border-color: var(--gold-dim); z-index: 2; } :root[data-vc-theme="fallout_pipboy"] .vc-fx-pipboy-frame::before { top: 3px; left: 3px; border-top: 1px solid; border-left: 1px solid; } :root[data-vc-theme="fallout_pipboy"] .vc-fx-pipboy-frame::after { bottom: 3px; right: 3px; border-bottom: 1px solid; border-right: 1px solid; } /* ── Modals: CRT screen framing ──────────────────────────────────────── */ :root[data-vc-theme="fallout_pipboy"] .vc-modal-dialog, :root[data-vc-theme="fallout_pipboy"] .vc-locker-modal-dialog, :root[data-vc-theme="fallout_pipboy"] .vc-copy-modal { border-color: var(--border-bright); box-shadow: 0 0 0 1px rgba(78,255,88,.08), inset 0 0 40px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.6); } /* ── DLC completion dial (rendered by vcInjectDlcSection, js §4, only when Pip-Boy is active — markup itself is theme-gated, no selector guard needed here) ─────────────────────────────────────────────── */ .vc-pipboy-dial-wrap { display: flex; align-items: center; gap: 8px; } .vc-pipboy-dial { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 4px rgba(78,255,88,.35); } /* ── Buttons/inputs: chunky terminal look ────────────────────────────── */ :root[data-vc-theme="fallout_pipboy"] .btn-ritual, :root[data-vc-theme="fallout_pipboy"] .btn { border-radius: 2px; border-width: 1px; font-family: var(--font-display); letter-spacing: .03em; } :root[data-vc-theme="fallout_pipboy"] input, :root[data-vc-theme="fallout_pipboy"] textarea, :root[data-vc-theme="fallout_pipboy"] select { border-radius: 2px; font-family: var(--font-vhs, monospace); } /* ═══════════════════════════════════════════════════════════════════════ ╔═ ZELDA — OCARINA OF TIME ══════════════════════════════════════════╗ ═══════════════════════════════════════════════════════════════════════ */ :root[data-vc-theme="zelda_ocarina"] { --void: #0a1408; --abyss: #102010; --deep: #182e18; --chamber: #203c20; --altar: #284828; --surface: #325432; --text: rgba(235,248,228,.93); --static: rgba(220,236,212,.88); --bone: rgba(248,255,240,.96); --fog: rgba(148,195,138,.65); --dust: rgba(100,148,90,.50); --muted: rgba(70,112,62,.55); /* Gold slot → N64 HUD gold, Triforce amber */ --gold: #e8a020; --gold-bright: #f8bc38; --gold-pale: rgba(255,240,195,.96); --gold-dim: rgba(232,160,32,.52); --gold-glow: rgba(232,160,32,.22); /* Blood slot → Kokiri forest green, deep canopy */ --blood: #1a5020; --blood-bright: #286830; --blood-glow: rgba(26,80,32,.50); --border: rgba(100,185,88,.16); --border-bright: rgba(130,212,115,.38); --rim: rgba(80,165,68,.12); --line: rgba(58,138,48,.08); --green: #40d060; --violet: rgba(100,180,240,.80); --sidebar-shell: linear-gradient(180deg, rgba(10,20,8,.99), rgba(6,14,5,.99)); --sidebar-border: rgba(80,165,68,.13); --sidebar-active-bg: rgba(232,160,32,.08); --sidebar-active-border: rgba(232,160,32,.24); --fx-trace-color: rgba(120,220,100,.22); --fx-icegrid-h: rgba(80,165,68,.06); --fx-icegrid-v: rgba(26,80,32,.04); --fx-icegrid-opacity: 0.10; } /* ── Zelda · Ocarina of Time FX ──────────────────────────────────────── */ /* Dusk warmth grain — like the Kokiri Forest at golden hour */ :root[data-vc-theme="zelda_ocarina"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); background-size: 400px 400px; } /* Warm forest canopy light from above */ :root[data-vc-theme="zelda_ocarina"] body::after { background-image: radial-gradient(ellipse 65% 50% at 50% 0%, rgba(232,160,32,var(--fx-bloom-intensity,.07)) 0%, rgba(64,208,96,calc(var(--fx-bloom-intensity,.07)*0.57)) 50%, transparent 75%), radial-gradient(ellipse 100% 60% at 50% 100%, rgba(10,20,8,var(--fx-vignette-depth,.50)) 0%, transparent 70%); background-size: cover; animation: vcBloomPulse 7s ease-in-out infinite; } /* Fairy sweep trace — navi blue-white */ :root[data-vc-theme="zelda_ocarina"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(160,220,255,.35) 30%, rgba(232,160,32,.25) 50%, rgba(160,220,255,.35) 70%, transparent 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 5s ease-in-out infinite; } /* Triforce breach pulse — gold bloom */ :root[data-vc-theme="zelda_ocarina"] body.vc-fx-breach-on .vc-modal-dialog { box-shadow: 0 0 0 1px rgba(232,160,32,.25), 0 0 40px rgba(232,160,32,.12) !important; animation: vcBloomPulse 3s ease-in-out infinite; } /* Forest glow on card hover */ :root[data-vc-theme="zelda_ocarina"] .result-card:hover, :root[data-vc-theme="zelda_ocarina"] .lib-card:hover { box-shadow: 0 4px 20px rgba(40,104,48,.20), 0 0 0 1px rgba(64,208,96,.18) !important; } /* Triforce icon on active badge */ :root[data-vc-theme="zelda_ocarina"] .vc-theme-active::before { content: "▲ "; font-size: 8px; opacity: .8; color: var(--gold); } /* Hey! Listen. footer */ :root[data-vc-theme="zelda_ocarina"] .vc-main::before { content: "HEY! LISTEN. · OCARINA OF TIME"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(232,160,32,.28); pointer-events: none; z-index: 9999; } /* Logo wordmark — forest glow */ :root[data-vc-theme="zelda_ocarina"] .sidebar-logo-wordmark { text-shadow: 0 0 16px rgba(64,208,96,.20), 0 0 40px rgba(232,160,32,.10); } /* ═══════════════════════════════════════════════════════════════════════ §9 PASS 2 THEME EFFECTS New and reworked FX for transformed themes. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── §9.1 AW2 — SAGA ANDERSON Nordic warmth, cork board obsession, mind place amber. She finds the truth. ─────────────────────────────────────────────────────────────────────── */ /* Warm grain — like wool texture or old film photo */ :root[data-vc-theme="aw2_saga"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); background-size: 400px 400px; } /* Warm lamplight vignette — like a living room in Watery */ :root[data-vc-theme="aw2_saga"] body::after { background-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(200,120,90,var(--fx-bloom-intensity,.04)) 0%, transparent 70%), radial-gradient(ellipse 100% 50% at 50% 100%, rgba(18,16,14,.55) 0%, transparent 80%); background-size: cover; animation: vcBloomPulse 8s ease-in-out infinite; } /* Mind place thread trace — amber sweep */ :root[data-vc-theme="aw2_saga"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 1.5px; background: linear-gradient(180deg, rgba(200,120,90,var(--fx-trace-brightness,.30)) 0%, rgba(200,120,90,calc(var(--fx-trace-brightness,.30)*0.27)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 4s linear infinite; } /* Nordic knit pattern on card backgrounds when icegrid on */ :root[data-vc-theme="aw2_saga"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="aw2_saga"] body.vc-fx-icegrid-on .lib-card::before { background-image: repeating-linear-gradient( 0deg, transparent 0px, transparent 7px, rgba(200,120,90,.05) 7px, rgba(200,120,90,.05) 8px ), repeating-linear-gradient( 90deg, transparent 0px, transparent 7px, rgba(200,120,90,.03) 7px, rgba(200,120,90,.03) 8px ); background-size: 8px 8px; } /* Cork board edge on cards */ :root[data-vc-theme="aw2_saga"] .result-card, :root[data-vc-theme="aw2_saga"] .lib-card { border-left: 2px solid rgba(200,120,90,.16) !important; } /* Polaroid-style border on images */ :root[data-vc-theme="aw2_saga"] .result-poster, :root[data-vc-theme="aw2_saga"] .lib-card-poster { box-shadow: 0 2px 8px rgba(18,16,14,.6), inset 0 0 0 3px rgba(248,242,234,.06); } /* ─────────────────────────────────────────────────────────────────────── §9.2 CONTROL — POLARIS REWORK Crystal dark. One cold light. No grain, no warmth. It called you. ─────────────────────────────────────────────────────────────────────── */ /* Remove noise — Polaris is clean void */ :root[data-vc-theme="control_polaris"] body::before { display: none; } /* Cold light bloom from center — the Polaris object */ :root[data-vc-theme="control_polaris"] body::after { background-image: radial-gradient(ellipse 40% 35% at 50% 42%, rgba(168,204,224,var(--fx-bloom-intensity,.06)) 0%, rgba(100,140,180,calc(var(--fx-bloom-intensity,.06)*0.5)) 40%, transparent 70%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(5,8,16,var(--fx-vignette-depth,.75)) 100%); background-size: cover; animation: vcBloomPulse 6s ease-in-out infinite; } /* Single crystalline pulse on breach */ :root[data-vc-theme="control_polaris"] body.vc-fx-breach-on .vc-modal-dialog { animation: vcShieldPulse 4s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(168,204,224,.12), 0 0 40px rgba(168,204,224,.06) !important; } /* Crystal geometry on cards — subtle refraction lines */ :root[data-vc-theme="control_polaris"] .result-card, :root[data-vc-theme="control_polaris"] .lib-card { border-color: rgba(100,140,180,.12); box-shadow: 0 4px 20px rgba(5,8,16,.7), 0 0 0 1px rgba(168,204,224,.04) inset; } /* Cold light logo */ :root[data-vc-theme="control_polaris"] .sidebar-logo-wordmark { text-shadow: 0 0 20px rgba(168,204,224,.25), 0 0 60px rgba(168,204,224,.08); } /* ─────────────────────────────────────────────────────────────────────── §9.3 CONTROL — HISS REWORK Organic crimson. Something breathing in the walls. No scanline. ─────────────────────────────────────────────────────────────────────── */ /* Remove old single scanline */ :root[data-vc-theme="control_hiss"] .vc-main::after { display: none !important; } /* Organic flesh-red noise — heavier, more biological */ :root[data-vc-theme="control_hiss"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.55 0.45' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"); background-size: 512px 512px; mix-blend-mode: overlay; opacity: 0.6; } /* Edge-in organic bloom — the presence filling the room */ :root[data-vc-theme="control_hiss"] body::after { background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 38%, rgba(200,8,32,calc(var(--fx-atmos-opacity,.12)*1.0)) 65%, rgba(200,8,32,calc(var(--fx-atmos-opacity,.12)*1.83)) 100%); background-size: cover; animation: vcHissOrganic 5s ease-in-out infinite; will-change: opacity; } /* Bottom-up pulse flow — ported from Tour Night concept */ :root[data-vc-theme="control_hiss"] .vc-shell::before { content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 40vh; background: radial-gradient(ellipse 70% 80% at 30% 100%, rgba(200,8,32,var(--fx-atmos-opacity,.12)) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 70% 100%, rgba(150,4,20,calc(var(--fx-atmos-opacity,.10)*0.83)) 0%, transparent 65%); pointer-events: none; z-index: 9996; animation: vcHissRise 7s ease-in-out infinite alternate; will-change: opacity, transform; } /* Glitch reality tear */ :root[data-vc-theme="control_hiss"] body.vc-fx-glitch-on .vc-main { animation: vcTrackingTear 6s ease-in-out infinite; } /* Corrupted card hover */ :root[data-vc-theme="control_hiss"] .result-card:hover .result-poster img, :root[data-vc-theme="control_hiss"] .lib-card:hover .lib-card-poster img { filter: contrast(1.15) saturate(0.8) hue-rotate(-10deg); animation: vcGlitchPulse 200ms ease-out; } /* Breach: full organic strobe */ :root[data-vc-theme="control_hiss"] body.vc-fx-breach-on::after { animation: vcHissStrobe 3.2s steps(1) infinite !important; } @keyframes vcHissOrganic { 0%, 100% { opacity: 0.7; } 50% { opacity: 1.0; } } @keyframes vcHissRise { 0% { opacity: 0.5; transform: translateY(8px); } 100% { opacity: 1.0; transform: translateY(-4px); } } /* ─────────────────────────────────────────────────────────────────────── §9.4 CONTROL — FBC BUREAU REWORK Brutalist concrete. Fluorescent hum. OOP classified. ─────────────────────────────────────────────────────────────────────── */ /* Fluorescent overhead light cast */ :root[data-vc-theme="control_fbc"] body::after { background-image: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(184,200,144,var(--fx-bloom-intensity,.05)) 0%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(12,12,12,.50) 100%); background-size: cover; animation: vcCrtHum 5s ease-in-out infinite; } /* Concrete grid texture on cards */ :root[data-vc-theme="control_fbc"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="control_fbc"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(165,180,150,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(165,180,150,.06) 1px, transparent 1px); background-size: 18px 18px; } /* Fluorescent trace sweep */ :root[data-vc-theme="control_fbc"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 2px; background: linear-gradient(180deg, rgba(184,200,144,var(--fx-trace-brightness,.28)) 0%, rgba(184,200,144,calc(var(--fx-trace-brightness,.28)*0.21)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 3.2s linear infinite; } /* Classified stamp on modal */ :root[data-vc-theme="control_fbc"] .vc-modal-dialog { position: relative; } /* Folder accent on sidebar */ :root[data-vc-theme="control_fbc"] .sidebar-section-label { border-left: 3px solid rgba(184,200,144,.30); padding-left: 10px; } /* OOP reference stamp on cards */ :root[data-vc-theme="control_fbc"] .vc-main::before { content: "FBC · CLASSIFIED · OOP-01"; position: fixed; bottom: 10px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(184,200,144,.30); pointer-events: none; z-index: 9999; } /* ─────────────────────────────────────────────────────────────────────── §9.5 RE — UMBRELLA CORP REWORK Clinical white facility. Cold light bloom. Corporate menace. ─────────────────────────────────────────────────────────────────────── */ /* Clinical white bloom — overhead lab lighting */ :root[data-vc-theme="re_umbrella"] body::after { background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,var(--fx-bloom-intensity,.65)) 0%, rgba(240,248,255,calc(var(--fx-bloom-intensity,.65)*0.46)) 40%, transparent 75%); background-size: cover; animation: none; } /* Sterile noise — very faint, just barely there */ :root[data-vc-theme="re_umbrella"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); background-size: 300px 300px; opacity: 0.4; } /* Umbrella logo watermark — subtle centered background */ :root[data-vc-theme="re_umbrella"] .vc-shell::after { content: ""; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(40vw, 400px); height: min(40vw, 400px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23cc1a1a' stroke-width='2.5' opacity='0.06'/%3E%3Cpath d='M50 2 L50 98 M2 50 L98 50 M15.6 15.6 L84.4 84.4 M84.4 15.6 L15.6 84.4' stroke='%23cc1a1a' stroke-width='2.5' opacity='0.06'/%3E%3Ccircle cx='50' cy='50' r='6' fill='%23cc1a1a' opacity='0.08'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 9995; } /* Surveillance timestamp */ :root[data-vc-theme="re_umbrella"] .vc-main::before { content: "UMBRELLA CORP · CLASSIFIED · AUTHORIZED USE ONLY"; position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(204,26,26,.45); pointer-events: none; z-index: 9999; white-space: nowrap; } /* Sterile grid on cards */ :root[data-vc-theme="re_umbrella"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="re_umbrella"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(26,58,90,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(26,58,90,.05) 1px, transparent 1px); background-size: 22px 22px; } /* Red Umbrella accent on active theme badge */ :root[data-vc-theme="re_umbrella"] .vc-theme-active { border-color: rgba(204,26,26,.60) !important; background: rgba(204,26,26,.06) !important; } /* ─────────────────────────────────────────────────────────────────────── §9.6 HALO — UNSC REWORK Olive drab. Gunmetal. Hazard yellow. Everything feels issued. ─────────────────────────────────────────────────────────────────────── */ /* UNSC tactical grid */ :root[data-vc-theme="halo2_unsc"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="halo2_unsc"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(175,185,155,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(175,185,155,.06) 1px, transparent 1px); background-size: 24px 24px; } /* Hazard viewport brackets */ :root[data-vc-theme="halo2_unsc"] .vc-main::before { content: ""; position: fixed; inset: 8px; pointer-events: none; z-index: 9995; background: linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) top left / 18px 2px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) top left / 2px 18px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) top right / 18px 2px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) top right / 2px 18px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) bottom left / 18px 2px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) bottom left / 2px 18px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) bottom right / 18px 2px no-repeat, linear-gradient(rgba(232,192,64,.5), rgba(232,192,64,.5)) bottom right / 2px 18px no-repeat; top: 22px !important; } /* Motion tracker sweep */ :root[data-vc-theme="halo2_unsc"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 1.5px; background: linear-gradient(180deg, rgba(232,192,64,var(--fx-trace-brightness,.30)) 0%, rgba(232,192,64,calc(var(--fx-trace-brightness,.30)*0.27)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 3s linear infinite; } /* Shield recharge on modal */ :root[data-vc-theme="halo2_unsc"] body.vc-fx-breach-on .vc-modal-dialog { animation: vcShieldPulse 4.5s ease-in-out infinite; } /* Stencil sidebar labels */ :root[data-vc-theme="halo2_unsc"] .sidebar-section-label { letter-spacing: 3px; font-size: 9px; } /* UNSC serial at bottom */ :root[data-vc-theme="halo2_unsc"] .vc-main::after { content: "UNSC · S-117 · AUTH PERSONNEL ONLY"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(232,192,64,.28); pointer-events: none; z-index: 9999; } /* Hazard active badge */ :root[data-vc-theme="halo2_unsc"] .vc-theme-active { border-color: rgba(232,192,64,.65) !important; background: rgba(232,192,64,.08) !important; } /* ─────────────────────────────────────────────────────────────────────── §9.7 DRAGON AGE — THE BLIGHT REWORK Burnt ochre. Ash grey. Campfire and dread. In your heart shall burn. ─────────────────────────────────────────────────────────────────────── */ /* Parchment grain — coarser, older */ :root[data-vc-theme="da_veilfire"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.40 0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 600px 600px; } /* Ember warmth — campfire light from below */ :root[data-vc-theme="da_veilfire"] .vc-shell::before { content: ""; position: fixed; bottom: 0; left: -10%; right: -10%; height: 45vh; background: radial-gradient(ellipse 80% 60% at 40% 100%, rgba(200,120,40,var(--fx-atmos-opacity,.10)) 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 65% 100%, rgba(160,80,20,calc(var(--fx-atmos-opacity,.10)*0.8)) 0%, transparent 60%); pointer-events: none; z-index: 9996; animation: vcVeilfireMist 9s ease-in-out infinite alternate; } /* Darkspawn breach pulse — sickly corruption */ :root[data-vc-theme="da_veilfire"] body.vc-fx-breach-on { animation: vcLowHealthPulse 2.2s ease-in-out infinite; } /* Ember trace sweep */ :root[data-vc-theme="da_veilfire"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 1.5px; background: linear-gradient(180deg, rgba(200,120,40,var(--fx-trace-brightness,.28)) 0%, rgba(200,120,40,calc(var(--fx-trace-brightness,.28)*0.21)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 4.5s linear infinite; } /* Stone border on cards — like a codex page */ :root[data-vc-theme="da_veilfire"] .result-card, :root[data-vc-theme="da_veilfire"] .lib-card { border-color: rgba(188,155,105,.14); box-shadow: 0 4px 18px rgba(10,8,6,.7), 0 0 0 1px rgba(200,120,40,.04) inset; } /* Grey Warden active badge */ :root[data-vc-theme="da_veilfire"] .vc-theme-active { border-color: rgba(200,120,40,.60) !important; background: rgba(200,120,40,.08) !important; } /* Codex marker */ :root[data-vc-theme="da_veilfire"] .vc-main::before { content: "CODEX · IN YOUR HEART SHALL BURN"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(200,120,40,.28); pointer-events: none; z-index: 9999; } /* ─────────────────────────────────────────────────────────────────────── §9.8 AW2 — OLD GODS OF ASGARD Bone white on void black. Heavy metal concert poster. Weathered vinyl. ─────────────────────────────────────────────────────────────────────── */ /* Heavy grain — vinyl press, concert poster print */ :root[data-vc-theme="aw2_oldgods"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70 0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E"); background-size: 512px 512px; } /* Stage light rig — sweeping light beam from above */ :root[data-vc-theme="aw2_oldgods"] body.vc-fx-trace-on::after { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: conic-gradient( from -60deg at 50% -20%, transparent 0deg, rgba(240,236,224,var(--fx-overlay-opacity,.04)) 15deg, transparent 30deg, rgba(240,236,224,calc(var(--fx-overlay-opacity,.04)*0.5)) 50deg, transparent 70deg ); pointer-events: none; z-index: 9996; animation: vcOldGodsLight 8s ease-in-out infinite alternate; } /* Amp overload glitch */ :root[data-vc-theme="aw2_oldgods"] body.vc-fx-glitch-on .vc-main { animation: vcGlitchPulse 200ms ease-out; } /* Lightning breach */ :root[data-vc-theme="aw2_oldgods"] body.vc-fx-breach-on::after { background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(192,16,16,.20) 100%); background-size: cover; animation: vcHissStrobe 2s steps(1) infinite !important; } /* Bone white logo treatment */ :root[data-vc-theme="aw2_oldgods"] .sidebar-logo-wordmark { text-shadow: 0 0 30px rgba(240,236,224,.15), 0 1px 0 rgba(192,16,16,.5); letter-spacing: 4px; } /* Concert poster band label on cards */ :root[data-vc-theme="aw2_oldgods"] .vc-main::before { content: "OLD GODS OF ASGARD · WE SING THE WORLD AWAKE"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(240,236,224,.22); pointer-events: none; z-index: 9999; white-space: nowrap; } /* Distressed border on cards */ :root[data-vc-theme="aw2_oldgods"] .result-card, :root[data-vc-theme="aw2_oldgods"] .lib-card { border-color: rgba(240,236,224,.10); box-shadow: 0 4px 16px rgba(5,4,4,.8); } @keyframes vcOldGodsLight { 0% { transform: rotate(-8deg); opacity: 0.7; } 50% { transform: rotate(0deg); opacity: 1.0; } 100% { transform: rotate(8deg); opacity: 0.7; } } /* ─────────────────────────────────────────────────────────────────────── §9.9 KOTOR I — JEDI ARCHIVE Warm bronze. Republic amber. The Force is with you. ─────────────────────────────────────────────────────────────────────── */ /* Holocron amber glow on modal */ :root[data-vc-theme="kotor_holocron"] .vc-modal-dialog::after { content: ""; position: absolute; inset: -50%; background: conic-gradient( from 0deg, transparent 0deg, rgba(212,160,64,.14) 30deg, rgba(139,58,26,.10) 90deg, transparent 120deg, rgba(212,160,64,.08) 200deg, transparent 240deg, rgba(139,58,26,.06) 300deg, transparent 360deg ); animation: vcForceRotate 20s linear infinite; pointer-events: none; mix-blend-mode: screen; } /* Force light — warm amber glow from center */ :root[data-vc-theme="kotor_holocron"] body::after { background-image: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(212,160,64,var(--fx-bloom-intensity,.05)) 0%, transparent 70%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(12,10,6,var(--fx-vignette-depth,.55)) 100%); background-size: cover; animation: vcBloomPulse 6s ease-in-out infinite; } /* Light seam borders */ :root[data-vc-theme="kotor_holocron"] .result-card, :root[data-vc-theme="kotor_holocron"] .lib-card { border-color: rgba(200,165,100,.14); box-shadow: 0 0 0 1px rgba(212,160,64,.05) inset, 0 4px 14px rgba(12,10,6,.7); } /* Force trace sweep */ :root[data-vc-theme="kotor_holocron"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 1.5px; background: linear-gradient(180deg, rgba(212,160,64,var(--fx-trace-brightness,.28)) 0%, rgba(212,160,64,calc(var(--fx-trace-brightness,.28)*0.21)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 3.5s linear infinite; } /* Jedi active badge */ :root[data-vc-theme="kotor_holocron"] .vc-theme-active { border-color: rgba(212,160,64,.65) !important; background: rgba(212,160,64,.08) !important; animation: none !important; } /* ─────────────────────────────────────────────────────────────────────── §9.10 KOTOR II — SITH LORDS Cold steel. The wound in the Force. Existential dread. ─────────────────────────────────────────────────────────────────────── */ /* Cold void ambience */ :root[data-vc-theme="kotor2_sith"] body::after { background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, rgba(8,10,14,.65) 100%); background-size: cover; animation: vcBloomPulse 8s ease-in-out infinite; } /* Wound in the Force — Force lattice grid */ :root[data-vc-theme="kotor2_sith"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="kotor2_sith"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(128,144,176,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(128,144,176,.05) 1px, transparent 1px); background-size: 28px 28px; } /* Breach: wound pulse */ :root[data-vc-theme="kotor2_sith"] body.vc-fx-breach-on .vc-modal-dialog { animation: vcShieldPulse 5s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(128,144,176,.10), 0 0 30px rgba(96,16,16,.12) !important; } /* Dark side active badge */ :root[data-vc-theme="kotor2_sith"] .vc-theme-active { border-color: rgba(128,144,176,.55) !important; background: rgba(128,144,176,.07) !important; } /* Kreia's echo */ :root[data-vc-theme="kotor2_sith"] .vc-main::before { content: "THE FORCE IS A WOUND · SITH LORDS"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(128,144,176,.22); pointer-events: none; z-index: 9999; } /* ─────────────────────────────────────────────────────────────────────── §9.11 MARATHON — ARACHNE Void black. Predator crimson. We watch. We always watch. ─────────────────────────────────────────────────────────────────────── */ /* Surveillance vignette — we are watching */ :root[data-vc-theme="marathon_arachne"] body::after { background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, rgba(200,8,8,.10) 65%, rgba(200,8,8,.20) 100%); background-size: cover; animation: vcHissOrganic 6s ease-in-out infinite; } /* Sun glyph static grain */ :root[data-vc-theme="marathon_arachne"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* Surveillance glitch dropout */ :root[data-vc-theme="marathon_arachne"] body.vc-fx-glitch-on .result-card:nth-child(5n) { animation: vcTrackingTear 10s ease-in-out infinite; } /* Breach: we see you */ :root[data-vc-theme="marathon_arachne"] body.vc-fx-breach-on .vc-shell::before { content: ""; position: fixed; inset: 0; background: rgba(200,8,8,.04); pointer-events: none; z-index: 9994; animation: vcHissStrobe 4s steps(1) infinite; } :root[data-vc-theme="marathon_arachne"] .vc-main::before { content: "ARACHNE · WE WATCH ALL OF THE DEADLIEST RUNNERS"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(200,8,8,.30); pointer-events: none; z-index: 9999; white-space: nowrap; } :root[data-vc-theme="marathon_arachne"] .vc-theme-active { border-color: rgba(200,8,8,.65) !important; background: rgba(200,8,8,.08) !important; } /* ─────────────────────────────────────────────────────────────────────── §9.12 MARATHON — TRAXUS Charcoal gunmetal. Construction orange. Industrial utility. ─────────────────────────────────────────────────────────────────────── */ /* Traxus ambient construction glow */ :root[data-vc-theme="marathon_traxus"] .vc-shell { background: radial-gradient(ellipse 80% 55% at 50% 90%, rgba(255,102,0,var(--fx-bloom-intensity,.12)) 0%, rgba(200,70,0,calc(var(--fx-bloom-intensity,.12)*0.4)) 50%, transparent 78%) no-repeat, radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(10,10,10,var(--fx-vignette-depth,.75)) 100%) no-repeat; background-size: cover; } /* Scaffold viewport brackets — construction orange */ :root[data-vc-theme="marathon_traxus"] .vc-main::before { content: ""; position: fixed; inset: 10px; top: 22px; pointer-events: none; z-index: 9995; background: linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) top left / 22px 2px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) top left / 2px 22px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) top right / 22px 2px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) top right / 2px 22px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) bottom left / 22px 2px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) bottom left / 2px 22px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) bottom right / 22px 2px no-repeat, linear-gradient(rgba(255,106,0,.55), rgba(255,106,0,.55)) bottom right / 2px 22px no-repeat; } /* Construction grid */ :root[data-vc-theme="marathon_traxus"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="marathon_traxus"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(255,106,0,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,106,0,.06) 1px, transparent 1px); background-size: 20px 20px; } /* Build sweep */ :root[data-vc-theme="marathon_traxus"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 2px; background: linear-gradient(180deg, rgba(255,106,0,var(--fx-trace-brightness,.35)) 0%, rgba(255,106,0,calc(var(--fx-trace-brightness,.35)*0.23)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 2.8s linear infinite; } :root[data-vc-theme="marathon_traxus"] .vc-main::after { content: "TRAXUS HEAVY INDUSTRIES · BUILD. HAUL. DOMINATE."; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(255,106,0,.28); pointer-events: none; z-index: 9999; white-space: nowrap; } :root[data-vc-theme="marathon_traxus"] .vc-theme-active { border-color: rgba(255,106,0,.65) !important; background: rgba(255,106,0,.08) !important; } /* ─────────────────────────────────────────────────────────────────────── §9.13 MARATHON — CYBERACME Electric blue + toxic neon green. Everything runs on CyberAcme. ─────────────────────────────────────────────────────────────────────── */ /* Data stream grain */ :root[data-vc-theme="marathon_cyberacme"] body::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90 0.70' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 300px 300px; } /* Server rack grid */ :root[data-vc-theme="marathon_cyberacme"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="marathon_cyberacme"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(0,224,80,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(16,64,255,.05) 1px, transparent 1px); background-size: 14px 14px; } /* Dual-color data stream trace */ :root[data-vc-theme="marathon_cyberacme"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(0,224,80,.40) 0%, rgba(16,64,255,.30) 50%, rgba(0,224,80,.40) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 2s linear infinite; } /* Packet loss glitch */ :root[data-vc-theme="marathon_cyberacme"] body.vc-fx-glitch-on .result-card:nth-child(4n), :root[data-vc-theme="marathon_cyberacme"] body.vc-fx-glitch-on .result-card:nth-child(7n) { animation: vcTrackingTear 8s ease-in-out infinite; } /* CyberAcme card glow */ :root[data-vc-theme="marathon_cyberacme"] .result-card:hover, :root[data-vc-theme="marathon_cyberacme"] .lib-card:hover { box-shadow: 0 4px 20px rgba(0,224,80,.12), 0 0 0 1px rgba(0,224,80,.20) !important; } :root[data-vc-theme="marathon_cyberacme"] .vc-main::before { content: "CYBERACME · EVERYTHING RUNS ON CYBERACME"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(0,224,80,.30); pointer-events: none; z-index: 9999; white-space: nowrap; } :root[data-vc-theme="marathon_cyberacme"] .vc-theme-active { border-color: rgba(0,224,80,.60) !important; background: rgba(0,224,80,.07) !important; } /* ─────────────────────────────────────────────────────────────────────── §9.14 MARATHON — NUCALORIC Neon magenta. Hot pink. Synthetic warmth. Consume. Subscribe. ─────────────────────────────────────────────────────────────────────── */ /* Neon trace sweep */ :root[data-vc-theme="marathon_nucaloric"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 2px; background: linear-gradient(180deg, rgba(255,24,144,var(--fx-trace-brightness,.40)) 0%, rgba(255,24,144,calc(var(--fx-trace-brightness,.40)*0.2)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 2.2s linear infinite; } /* Ad flicker glitch */ :root[data-vc-theme="marathon_nucaloric"] body.vc-fx-glitch-on .vc-main { animation: vcGlitchPulse 300ms ease-out; } /* Subscribe pulse breach */ :root[data-vc-theme="marathon_nucaloric"] body.vc-fx-breach-on::after { background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,24,144,.06) 0%, transparent 70%); background-size: cover; animation: vcBloomPulse 3s ease-in-out infinite !important; } /* Neon card hover */ :root[data-vc-theme="marathon_nucaloric"] .result-card:hover, :root[data-vc-theme="marathon_nucaloric"] .lib-card:hover { box-shadow: 0 4px 20px rgba(255,24,144,.15), 0 0 0 1px rgba(255,24,144,.25) !important; } :root[data-vc-theme="marathon_nucaloric"] .vc-main::before { content: "NUCALORIC · FUEL YOUR RUN · SUBSCRIBE NOW"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(255,24,144,.30); pointer-events: none; z-index: 9999; white-space: nowrap; } :root[data-vc-theme="marathon_nucaloric"] .vc-theme-active { border-color: rgba(255,24,144,.65) !important; background: rgba(255,24,144,.08) !important; } /* ─────────────────────────────────────────────────────────────────────── §9.15 MARATHON — SEKIGUCHI Precision silver-white. Cool cyan. Japanese corporate perfection. ─────────────────────────────────────────────────────────────────────── */ /* Sekiguchi — crisp top-lit corporate ambient */ :root[data-vc-theme="marathon_sekiguchi"] .vc-shell { background: radial-gradient(ellipse 100% 45% at 50% 0%, rgba(255,255,255,var(--fx-bloom-intensity,.55)) 0%, transparent 65%) no-repeat, radial-gradient(ellipse 50% 35% at 92% 8%, rgba(204,24,24,calc(var(--fx-bloom-intensity,.55)*0.06)) 0%, transparent 55%) no-repeat; background-size: cover; } /* Precision grid */ :root[data-vc-theme="marathon_sekiguchi"] body.vc-fx-icegrid-on .result-card::before, :root[data-vc-theme="marathon_sekiguchi"] body.vc-fx-icegrid-on .lib-card::before { background-image: linear-gradient(to right, rgba(200,224,240,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(200,224,240,.05) 1px, transparent 1px); background-size: 16px 16px; } /* Precision trace sweep — clean, single line */ :root[data-vc-theme="marathon_sekiguchi"] body.vc-fx-trace-on .vc-shell::after { content: ""; position: fixed; left: 0; right: 0; height: 1px; background: linear-gradient(180deg, rgba(200,224,240,var(--fx-trace-brightness,.35)) 0%, rgba(200,224,240,calc(var(--fx-trace-brightness,.35)*0.23)) 100%); pointer-events: none; z-index: 9998; animation: vcScanCrawl 3.5s linear infinite; } /* Precision card borders */ :root[data-vc-theme="marathon_sekiguchi"] .result-card, :root[data-vc-theme="marathon_sekiguchi"] .lib-card { border-color: rgba(160,200,240,.12); box-shadow: 0 2px 12px rgba(8,10,14,.7), 0 0 0 1px rgba(200,224,240,.04) inset; } :root[data-vc-theme="marathon_sekiguchi"] .vc-main::before { content: "SEKIGUCHI TECH · PRECISION · PERFORMANCE"; position: fixed; bottom: 8px; right: 14px; font-family: var(--font-vhs, monospace); font-size: 7px; letter-spacing: 3px; color: rgba(200,224,240,.25); pointer-events: none; z-index: 9999; } :root[data-vc-theme="marathon_sekiguchi"] .vc-theme-active { border-color: rgba(200,224,240,.55) !important; background: rgba(200,224,240,.07) !important; } /* ═══════════════════════════════════════════════════════════════════════ §8.25 GLOBAL HUD BRACKET UTILITY CLASS .vc-fx-hud-brackets applied by JS to any element for corner markers. ═══════════════════════════════════════════════════════════════════════ */ .vc-fx-hud-brackets { position: relative; } .vc-fx-hud-brackets::after { content: ""; position: absolute; inset: -2px; pointer-events: none; background: linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) top left / 10px 1.5px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) top left / 1.5px 10px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) top right / 10px 1.5px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) top right / 1.5px 10px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) bottom left / 10px 1.5px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) bottom left / 1.5px 10px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) bottom right / 10px 1.5px no-repeat, linear-gradient(var(--gold, rgba(201,151,58,.6)), var(--gold, rgba(201,151,58,.6))) bottom right / 1.5px 10px no-repeat; border-radius: inherit; opacity: .65; transition: opacity .2s; } .vc-fx-hud-brackets:hover::after { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════ END §8 — THEME-SPECIFIC FX EXTENSIONS ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ §9 THEME GRIMOIRE — GROUP HEADERS + SIDEBAR THEME BUTTON ═══════════════════════════════════════════════════════════════════════ */ /* ── Group headers in the theme grid ──────────────────────────────────── */ .vc-theme-group-header { grid-column: 1 / -1; /* span full grid width */ font-family: var(--font-vhs); font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); opacity: 0.65; padding: 16px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; } .vc-theme-group-header::before { content: "⛧"; font-size: 10px; opacity: 0.7; } /* First group header — less top padding */ .vc-theme-group-header:first-child { padding-top: 8px; } /* ── Sidebar ⛧ Themes button ──────────────────────────────────────────── */ #sidebar-theme-btn { color: var(--gold) !important; opacity: 0.75; font-size: 10px; letter-spacing: 1px; transition: opacity 0.2s, color 0.2s; border-left: 1px solid var(--gold-dim) !important; margin-left: 2px; } #sidebar-theme-btn:hover { opacity: 1; color: var(--gold-bright) !important; background: var(--gold-glow) !important; text-shadow: 0 0 8px var(--gold-glow); } /* ── Avatar icon in the auth pill ─────────────────────────────────────── */ .vc-avatar-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 12px; line-height: 1; border-radius: 50%; background: var(--gold-glow); border: 1px solid var(--gold-dim); flex-shrink: 0; } /* Coven tag glyph */ .vc-coven-tag { font-size: 9px; opacity: 0.55; color: var(--gold); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════ END §9 ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ §10 CROSS-THEME UI CONSISTENCY FIXES Pass 1 corrections — search bar, modal X, filter pills, telemetry overlap. ═══════════════════════════════════════════════════════════════════════ */ /* ── §10.1 Search button: use gold accent on themes where --blood is non-warm The btn-ritual class uses --blood-bright as its border, which looks broken on HUD/sci-fi/fantasy themes that repurpose --blood as a second accent color. Fix: override .games-search-btn specifically to always use --gold styling. ── */ .games-search-btn-pos .btn-ritual, #games-search-btn { border-color: var(--gold-dim) !important; background: rgba(0,0,0,.0) !important; color: var(--gold) !important; box-shadow: 0 0 12px var(--gold-glow) !important; } .games-search-btn-pos .btn-ritual:hover, #games-search-btn:hover { border-color: var(--gold) !important; background: var(--gold-glow) !important; color: var(--gold-bright) !important; box-shadow: 0 0 20px var(--gold-glow) !important; } /* ── §10.2 Modal close (X) button: ensure it's always readable. Some themes make --static very close to the modal background color. ── */ .vc-modal-close, [id$="-close-btn"], .vc-auth-close, #vc-auth-close-btn { color: var(--fog) !important; border-color: var(--border) !important; background: transparent !important; } .vc-modal-close:hover, [id$="-close-btn"]:hover, .vc-auth-close:hover, #vc-auth-close-btn:hover { color: var(--gold-pale) !important; border-color: var(--border-bright) !important; background: var(--gold-glow) !important; } /* ── §10.3 Filter pills: use border color, not blood-bright ── */ .games-filter-row .filter-pill { border-color: var(--border) !important; color: var(--fog) !important; } .games-filter-row .filter-pill:hover { border-color: var(--gold-dim) !important; color: var(--gold) !important; } .games-filter-row .filter-pill.on { border-color: var(--gold-dim) !important; color: var(--gold) !important; background: var(--gold-glow) !important; } /* ── §10.4 Marathon / Halo telemetry strip: Add padding-top to .vc-page so the fixed top bar doesn't overlap content. (fallout_pipboy's own boot-strip clearance now lives with the rest of its §8.24 block above, next to the strip's actual CSS.) ── */ :root[data-vc-theme="marathon_hud"] .vc-page { padding-top: 28px; } /* ── §10.5 Halo / Marathon viewport corner brackets: The inset:8px fixed bracket sits on top of the topbar. Push it down to clear the topbar height. ── */ :root[data-vc-theme="halo2_unsc"] .vc-main::before, :root[data-vc-theme="marathon_hud"] .vc-main::before { top: 22px !important; } /* ── §10.6 Eyebrow line color: always use a theme-appropriate warm/neutral tone Some themes set --blood-bright to blue/purple which makes the eyebrow lines look broken. Override to use blood only when it's warm, otherwise use gold. ── */ /* Themes where --blood is non-red → use --gold-dim for eyebrow accent */ :root[data-vc-theme="marathon_hud"] .vc-page-eyebrow, :root[data-vc-theme="halo2_unsc"] .vc-page-eyebrow, :root[data-vc-theme="me_omnitool"] .vc-page-eyebrow, :root[data-vc-theme="control_polaris"] .vc-page-eyebrow, :root[data-vc-theme="control_hiss"] .vc-page-eyebrow, :root[data-vc-theme="kotor_holocron"] .vc-page-eyebrow, :root[data-vc-theme="da_veilfire"] .vc-page-eyebrow, :root[data-vc-theme="blackwall"] .vc-page-eyebrow, :root[data-vc-theme="netrunner"] .vc-page-eyebrow, :root[data-vc-theme="witch"] .vc-page-eyebrow, :root[data-vc-theme="lovecraft"] .vc-page-eyebrow { color: var(--gold-dim); } :root[data-vc-theme="marathon_hud"] .vc-page-eyebrow::before, :root[data-vc-theme="marathon_hud"] .vc-page-eyebrow::after, :root[data-vc-theme="halo2_unsc"] .vc-page-eyebrow::before, :root[data-vc-theme="halo2_unsc"] .vc-page-eyebrow::after, :root[data-vc-theme="me_omnitool"] .vc-page-eyebrow::before, :root[data-vc-theme="me_omnitool"] .vc-page-eyebrow::after, :root[data-vc-theme="control_polaris"] .vc-page-eyebrow::before, :root[data-vc-theme="control_polaris"] .vc-page-eyebrow::after, :root[data-vc-theme="control_hiss"] .vc-page-eyebrow::before, :root[data-vc-theme="control_hiss"] .vc-page-eyebrow::after, :root[data-vc-theme="kotor_holocron"] .vc-page-eyebrow::before, :root[data-vc-theme="kotor_holocron"] .vc-page-eyebrow::after, :root[data-vc-theme="da_veilfire"] .vc-page-eyebrow::before, :root[data-vc-theme="da_veilfire"] .vc-page-eyebrow::after, :root[data-vc-theme="blackwall"] .vc-page-eyebrow::before, :root[data-vc-theme="blackwall"] .vc-page-eyebrow::after, :root[data-vc-theme="netrunner"] .vc-page-eyebrow::before, :root[data-vc-theme="netrunner"] .vc-page-eyebrow::after, :root[data-vc-theme="witch"] .vc-page-eyebrow::before, :root[data-vc-theme="witch"] .vc-page-eyebrow::after, :root[data-vc-theme="lovecraft"] .vc-page-eyebrow::before, :root[data-vc-theme="lovecraft"] .vc-page-eyebrow::after { background: linear-gradient(90deg, transparent, var(--gold-dim)); } /* ── §10.7 Mario Toybox: search button on light bg needs dark text ── */ :root[data-vc-theme="mario_toybox"] #games-search-btn, :root[data-vc-theme="mario_toybox"] .games-search-btn-pos .btn-ritual { color: #2a1800 !important; background: var(--gold-glow) !important; } /* ── §10.8 Consistent search input readability across all themes ── */ .games-search-input { color: var(--static); } .games-search-input:focus { box-shadow: 0 0 0 3px var(--gold-glow), 0 0 20px var(--gold-glow) !important; border-color: var(--gold-dim) !important; } /* ─────────────────────────────────────────────────────────────────────── */