/* ════════════════════════════════════════════════════════════ CYRON THEMES · cyron-themes.css (loaded after cyron-layers.css) 1) Three-way toggle component 2) LIGHT theme — html[data-theme="light"] (soft off-white) 3) IMMERSIVE base hooks — html[data-theme="immersive"] Dark mode = default (no rules here); existing styles already cover it. Theme flips happen via design-token overrides + targeted fixes for hardcoded colors. Content, loaders and admin links are untouched. ════════════════════════════════════════════════════════════ */ /* ═══════════════ 1 · THREE-WAY TOGGLE ═══════════════ */ .theme-switch{position:relative;display:inline-flex;align-items:center;padding:4px;border-radius:999px; border:1px solid var(--mv-line-2);background:rgba(255,255,255,.05); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-left:14px;flex:0 0 auto;} .theme-switch .ts-thumb{position:absolute;top:4px;left:4px;width:38px;height:30px;border-radius:999px; background:linear-gradient(135deg,var(--mv-red),var(--mv-red-2)); box-shadow:0 6px 18px -6px var(--mv-red),inset 0 0 0 1px rgba(255,255,255,.18); transition:transform .4s cubic-bezier(.5,1.4,.4,1);pointer-events:none;} .theme-switch[data-active="dark"] .ts-thumb{transform:translateX(0);} .theme-switch[data-active="immersive"] .ts-thumb{transform:translateX(100%);} .theme-switch[data-active="light"] .ts-thumb{transform:translateX(200%);} .theme-switch .ts-opt{position:relative;z-index:1;width:38px;height:30px;display:grid;place-items:center;gap:6px; background:none;border:0;cursor:pointer;color:var(--mv-cream-2);transition:color .25s;border-radius:999px;} .theme-switch .ts-opt:hover{color:var(--mv-cream);} .theme-switch .ts-opt[aria-checked="true"]{color:#fff;} .theme-switch .ts-opt:focus-visible{outline:2px solid var(--mv-red-2);outline-offset:2px;} .theme-switch .ts-opt svg{display:block;} .ts-lbl{display:none;font-family:var(--mv-grotesk);font-size:13px;font-weight:600;letter-spacing:.02em;} /* mobile-sheet variant: full-width labelled segments */ .theme-switch--sheet{display:flex;width:100%;margin:6px 0 4px;} .theme-switch--sheet .ts-opt{flex:1;width:auto;height:44px;grid-auto-flow:column;} .theme-switch--sheet .ts-thumb{width:calc((100% - 8px)/3);height:44px;} .theme-switch--sheet .ts-lbl{display:inline;} @media(max-width:900px){.theme-switch:not(.theme-switch--sheet){display:none;}} /* admin can hide the switch entirely (Site Settings → Theme & Modes → Show theme toggle: Off) */ html.theme-switch-off .theme-switch{display:none!important;} /* ═══════════════ 2 · LIGHT THEME ═══════════════ */ html[data-theme="light"]{ /* design tokens → premium editorial paper-white / near-black */ --bg:#F4F4F7; --bg-2:#FAFAFC; --bg-3:#FFFFFF; --bg-4:#FFFFFF; --ink:#0E0E14; --ink-soft:#4B4C58; --muted:#8A8B96; --line:#E4E4EC; --line-soft:#EEEEF4; --accent:#5B4BE6; --accent-2:#7C6BFF; --accent-soft:rgba(91,75,230,.10); --accent-soft-2:rgba(91,75,230,.18); color-scheme:light; } /* IMPORTANT: keep transparent — the fluid cursor canvas sits at z-index:-1 BEHIND the body. An opaque body hides it. The light background lives on . */ html[data-theme="light"]{background:var(--bg);} html[data-theme="light"] body{background:transparent;} /* nav / ribbon / chrome */ html[data-theme="light"] .ribbon{background:#fff;border-bottom:1px solid var(--line);color:var(--muted);} html[data-theme="light"] .ribbon b{color:var(--ink);} html[data-theme="light"] header.nav{background:rgba(244,245,248,.82);border-bottom:1px solid var(--line);} html[data-theme="light"] header.nav.scrolled{background:rgba(244,245,248,.94);box-shadow:0 10px 34px -20px rgba(20,20,40,.35);} html[data-theme="light"] .nlink{color:var(--ink-soft);} html[data-theme="light"] .nlink:hover,html[data-theme="light"] .nlink.active{color:var(--ink);} html[data-theme="light"] .drop{background:#fff;border:1px solid var(--line);box-shadow:0 28px 60px -28px rgba(20,20,40,.4);} html[data-theme="light"] .drop button{color:var(--ink-soft);} html[data-theme="light"] .drop button:hover{background:var(--accent-soft);color:var(--ink);} html[data-theme="light"] .burger{border-color:var(--line);} html[data-theme="light"] .burger span,html[data-theme="light"] .burger span::before,html[data-theme="light"] .burger span::after{background:var(--ink);} html[data-theme="light"] .msheet{background:#fff;border-bottom:1px solid var(--line);} html[data-theme="light"] .msheet button{color:var(--ink);border-bottom:1px solid var(--line-soft);} html[data-theme="light"] .theme-switch{background:rgba(20,20,40,.04);border-color:var(--line);} html[data-theme="light"] .theme-switch .ts-opt{color:var(--ink-soft);} html[data-theme="light"] .theme-switch .ts-opt:hover{color:var(--ink);} /* aurora orbs — softer + multiply so they read as tints on light */ html[data-theme="light"] .mv-orb{mix-blend-mode:multiply;opacity:.22;filter:blur(80px);} html[data-theme="light"] .mv-orb.o1{background:radial-gradient(circle,rgba(91,75,230,.5),transparent 66%);} html[data-theme="light"] .mv-orb.o2{background:radial-gradient(circle,rgba(124,107,255,.45),transparent 66%);} html[data-theme="light"] .mv-orb.o3{background:radial-gradient(circle,rgba(214,120,200,.4),transparent 66%);} html[data-theme="light"] .mv-orb.o4{background:radial-gradient(circle,rgba(60,150,210,.36),transparent 66%);} /* hero */ html[data-theme="light"] .mv-roles{color:var(--ink);} html[data-theme="light"] .mv-hero-blurb{color:var(--ink-soft);} html[data-theme="light"] .mv-figure .hero-img{background:radial-gradient(58% 60% at 50% 36%,rgba(91,75,230,.10),transparent 70%);} html[data-theme="light"] .mv-figure::after{background:radial-gradient(50% 50% at 50% 50%,rgba(91,75,230,.18),transparent 70%);} html[data-theme="light"] .mv-btn{color:var(--ink);border-color:var(--line);} html[data-theme="light"] .mv-btn:hover{color:#fff;} /* sections / type */ html[data-theme="light"] .mv-sec,html[data-theme="light"] .mv-home .marquee, html[data-theme="light"] .mv-home .parallax-band,html[data-theme="light"] .mv-home .prefooter-marquee, html[data-theme="light"] .mv-foot{border-top-color:var(--line);} html[data-theme="light"] .mv-sec-title,html[data-theme="light"] .mv-roles, html[data-theme="light"] .mv-foot-brand,html[data-theme="light"] .mv-home .sec-title{color:var(--ink);} html[data-theme="light"] .mv-home .marquee{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} html[data-theme="light"] .mv-home .mtrack .tool-item{color:var(--ink);} /* glass cards → translucent dark on light */ html[data-theme="light"] .mv-tcard,html[data-theme="light"] .mv-vcard{background:rgba(20,18,45,.028);border-color:var(--line);} html[data-theme="light"] .mv-tcard:hover,html[data-theme="light"] .mv-vcard:hover,html[data-theme="light"] .mv-home .hcard:hover{ background:rgba(255,255,255,.7);border-color:rgba(91,75,230,.4); box-shadow:0 26px 70px -38px rgba(20,20,50,.4),inset 0 0 0 1px rgba(91,75,230,.10),0 0 30px -12px var(--accent-soft);} html[data-theme="light"] .mv-vcard{background:#fff;} html[data-theme="light"] .mv-home .hcard{background:#fff;border-color:var(--line);} html[data-theme="light"] .mv-home .logo-card{border-color:var(--line);} html[data-theme="light"] .mv-home .logo-card:hover{background:rgba(255,255,255,.8);} html[data-theme="light"] .mv-chip{border-color:var(--line);color:var(--ink-soft);} html[data-theme="light"] .mv-chip:hover{border-color:var(--accent);color:var(--ink);} html[data-theme="light"] .mv-tcard .tc-name,html[data-theme="light"] .mv-tcard blockquote{color:var(--ink);} /* stats / expertise / principles */ html[data-theme="light"] .mv-stats{border-top-color:var(--line);} html[data-theme="light"] .mv-home .mv-stats .stat{border-right-color:var(--line);} html[data-theme="light"] .mv-home .mv-stats .snum{-webkit-text-fill-color:var(--ink);color:var(--ink);} html[data-theme="light"] .mv-principle{border-top-color:var(--line);} html[data-theme="light"] .mv-principle h3{color:var(--ink);} html[data-theme="light"] .mv-exp-list li{border-top-color:var(--line);color:var(--ink);} /* work cards: lift the heavy grayscale a touch in light */ html[data-theme="light"] .mv-home .wcard .wimg:not(.has-img){filter:grayscale(.55) contrast(1.02) brightness(1);} html[data-theme="light"] .mv-home .wcard .wt{color:var(--ink);} /* contact form */ html[data-theme="light"] .mv-home .cform input,html[data-theme="light"] .mv-home .cform textarea{background:#fff;border-color:var(--line);color:var(--ink);} html[data-theme="light"] .mv-home .cform input:focus,html[data-theme="light"] .mv-home .cform textarea:focus{border-color:var(--accent);} html[data-theme="light"] .mv-mail{color:var(--ink);} html[data-theme="light"] .mv-contact-links a{color:var(--ink-soft);border-color:var(--line);} /* footer */ html[data-theme="light"] .mv-foot-base{border-top-color:var(--line);} /* Samyaza panel + bubble + lightbox in light */ html[data-theme="light"] .syz-panel{background:#fff;border-color:var(--line);color:var(--ink);} html[data-theme="light"] .syz-msgs,html[data-theme="light"] .syz-head{border-color:var(--line);} html[data-theme="light"] .syz-msg.bot .syz-b{background:#f1f1f7;color:var(--ink);} html[data-theme="light"] .syz-input input{background:#fff;color:var(--ink);border-color:var(--line);} html[data-theme="light"] .lb-card{background:#fff;} /* Light-mode cursor: charcoal smoke via multiply so a dark trail shows on white (additive WebGL can't paint dark on white). Paired with the charcoal palette. */ html[data-theme="light"] #fluid{mix-blend-mode:multiply;} /* ═══════════════ 3 · IMMERSIVE 3D MODE ═══════════════ */ /* overlay stage (Three.js canvas + cinematic veil), behind content, above page bg */ #imm-stage{position:fixed;inset:0;z-index:-2;pointer-events:none;contain:strict;} #imm-canvas{width:100%;height:100%;display:block;} .imm-veil{position:absolute;inset:0;background: radial-gradient(120% 90% at 50% -10%,transparent 40%,rgba(5,6,13,.55) 78%,rgba(5,6,13,.9));} /* dark bg on so the WebGL 3D canvas (z-index:-2) stays visible through body */ html[data-theme="immersive"]{background:#05060d;} html[data-theme="immersive"] body{background:transparent;color:var(--mv-cream);} /* cinematic chrome */ html[data-theme="immersive"] header.nav{background:rgba(5,6,13,.45);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.06);} html[data-theme="immersive"] .ribbon{background:rgba(5,6,13,.6);} /* aurora orbs: full presence as the background when no Three.js; dimmed when the 3D scene is live */ html[data-theme="immersive"] .mv-orb{opacity:.7;mix-blend-mode:screen;} html[data-theme="immersive"].imm-3d .mv-orb{opacity:.22;} /* depth stage — perspective on the page so sections arrive from depth */ html[data-theme="immersive"] main{perspective:1500px;perspective-origin:50% 30%;} html[data-theme="immersive"] .mv-hero, html[data-theme="immersive"] .mv-sec, html[data-theme="immersive"] .prefooter-marquee, html[data-theme="immersive"] .mv-foot{transform-style:preserve-3d;} /* CINEMATIC CHAPTERS — full-viewport, vertically centered → structurally different from Dark's compact left-aligned editorial (min-height never clips: tall content just grows the section). Section headers centered for a cinematic showcase feel. */ html[data-theme="immersive"] .mv-sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center;} html[data-theme="immersive"] .mv-sec-head, html[data-theme="immersive"] .mv-sec-head.right{text-align:center;align-items:center;margin-left:auto;margin-right:auto;} html[data-theme="immersive"] .mv-ey{justify-content:center;} /* fluid cursor is paused in immersive (GPU → 3D scene): hide its canvas */ html[data-theme="immersive"] #fluid{opacity:0;} /* cinematic reveal — rise + rotate out of depth (reliable CSS observer; not fade-only) */ html[data-theme="immersive"] .mv-home .reveal{opacity:0;transform:translateY(72px) translateZ(-170px) rotateX(9deg) scale(.93); transition:opacity 1s cubic-bezier(.16,.7,.2,1),transform 1s cubic-bezier(.16,.7,.2,1);} html[data-theme="immersive"] .mv-home .reveal.in{opacity:1;transform:none;} html[data-theme="immersive"] .mv-home .reveal.d1{transition-delay:.05s;} html[data-theme="immersive"] .mv-home .reveal.d2{transition-delay:.16s;} html[data-theme="immersive"] .mv-home .reveal.d3{transition-delay:.27s;} html[data-theme="immersive"] .mv-home .reveal.d4{transition-delay:.38s;} /* hero gets a luminous lift */ html[data-theme="immersive"] .mv-bigname{filter:drop-shadow(0 0 46px rgba(110,99,255,.4));} html[data-theme="immersive"] .mv-roles{text-shadow:0 0 30px rgba(110,99,255,.25);} /* premium glass + tilt-ready cards */ html[data-theme="immersive"] .mv-tcard,html[data-theme="immersive"] .mv-vcard, html[data-theme="immersive"] .wcard,html[data-theme="immersive"] .hcard{ transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;} html[data-theme="immersive"] .mv-tcard,html[data-theme="immersive"] .mv-vcard{ background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%); border-color:rgba(154,140,255,.28);box-shadow:0 30px 80px -50px #000;} /* accessibility + perf fallbacks */ @media(prefers-reduced-motion:reduce){ html[data-theme="immersive"] .mv-orb{animation:none;} html[data-theme="immersive"] .mv-home .reveal{transition:none;transform:none;opacity:1;} } /* tablet / mobile: simplify — no perspective depth, lighter veil (Three.js already gated off) */ @media(max-width:900px){ html[data-theme="immersive"] main{perspective:none;} html[data-theme="immersive"] .mv-home .reveal{transform:translateY(40px) scale(.98);} .imm-veil{background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(5,6,13,.85));} } /* ═══════════ IMMERSIVE SHOWCASE LAYOUT — distinct cinematic treatment ═══════════ */ /* let the 3D nebula breathe: lighter veil, content floats over the scene */ html[data-theme="immersive"].imm-3d .imm-veil{background: radial-gradient(130% 100% at 50% -20%,transparent 46%,rgba(5,6,13,.42) 82%,rgba(5,6,13,.78));} /* readability over the busy scene */ html[data-theme="immersive"] .mv-home{ text-rendering:optimizeLegibility; } html[data-theme="immersive"] .mv-sec-title, html[data-theme="immersive"] .mv-roles, html[data-theme="immersive"] .mv-story-lead, html[data-theme="immersive"] .mv-principle p, html[data-theme="immersive"] .mv-tcard blockquote{ text-shadow:0 2px 30px rgba(5,6,13,.8); } /* CINEMATIC HERO — bigger, centered energy, strong glow (clearly not the dark hero) */ html[data-theme="immersive"] .mv-hero{ min-height:100vh; } html[data-theme="immersive"] .mv-bigname{ font-size:clamp(72px,16vw,240px);letter-spacing:-.04em; filter:drop-shadow(0 0 60px rgba(110,99,255,.55)) drop-shadow(0 0 120px rgba(70,216,255,.25)); -webkit-text-fill-color:transparent;background:linear-gradient(180deg,#fff 30%,#8f86ff 75%,rgba(70,216,255,.4)); -webkit-background-clip:text;background-clip:text;} html[data-theme="immersive"] .mv-roles{ color:#fff; text-shadow:0 0 40px rgba(110,99,255,.45); } html[data-theme="immersive"] .mv-hero-blurb{ color:rgba(255,255,255,.82); } html[data-theme="immersive"] .mv-scrollcue{ color:rgba(255,255,255,.7); } /* SECTIONS as cinematic chapters — more air, glowing headers */ html[data-theme="immersive"] .mv-sec{ padding:clamp(120px,16vw,220px) 0; } html[data-theme="immersive"] .mv-ey{ color:#8f86ff; letter-spacing:.44em; } html[data-theme="immersive"] .mv-ey::before{ box-shadow:0 0 18px currentColor; } html[data-theme="immersive"] .mv-sec-title{ background:linear-gradient(180deg,#fff,rgba(160,150,255,.75));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} /* deep glass cards floating over the scene */ html[data-theme="immersive"] .mv-tcard,html[data-theme="immersive"] .mv-vcard, html[data-theme="immersive"] .mv-home .hcard{ background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%); border-color:rgba(180,170,255,.22);box-shadow:0 40px 100px -60px #000,inset 0 1px 0 rgba(255,255,255,.07);} html[data-theme="immersive"] .mv-home .wcard .wimg{ box-shadow:0 40px 90px -55px #000; } /* minimal ghosted nav for showcase focus */ html[data-theme="immersive"] header.nav{ background:rgba(5,6,13,.28); } html[data-theme="immersive"] .nlink{ color:rgba(255,255,255,.7); } html[data-theme="immersive"] .ribbon{ opacity:.55; } /* the CSS orbs are redundant once the WebGL scene is live */ html[data-theme="immersive"].imm-3d .mv-orbs{ display:none; } html[data-theme="immersive"].imm-3d .mv-home::before{ opacity:.03; } @media(max-width:900px){ html[data-theme="immersive"] .mv-hero{ min-height:auto; } html[data-theme="immersive"] .mv-sec{ padding:clamp(72px,16vw,120px) 0; } } /* ═══════════ IMMERSIVE — CALM ORFEO-INSPIRED TONE-DOWN ═══════════ Elegant + restrained: soften the strong glows/text-shadows so the scene feels premium and easy on the eyes (not neon-heavy). */ html[data-theme="immersive"] .mv-bigname{filter:drop-shadow(0 0 28px rgba(120,110,255,.26)) !important;} html[data-theme="immersive"] .mv-roles{text-shadow:0 0 16px rgba(120,110,255,.16) !important;} html[data-theme="immersive"] .mv-sec-title, html[data-theme="immersive"] .mv-story-lead, html[data-theme="immersive"] .mv-principle p, html[data-theme="immersive"] .mv-tcard blockquote{text-shadow:0 1px 14px rgba(6,7,14,.7) !important;} html[data-theme="immersive"] .mv-ey::before{box-shadow:0 0 9px currentColor !important;} /* atmospheric (not overpowering) veil */ html[data-theme="immersive"].imm-3d .imm-veil{background: radial-gradient(150% 115% at 50% 2%,transparent 54%,rgba(6,7,14,.5) 84%,rgba(6,7,14,.8)) !important;} /* refined, softer glass cards */ html[data-theme="immersive"] .mv-tcard, html[data-theme="immersive"] .mv-vcard, html[data-theme="immersive"] .mv-home .hcard{ background:rgba(255,255,255,.032) !important;border-color:rgba(180,170,255,.15) !important; box-shadow:0 30px 80px -60px #000,inset 0 1px 0 rgba(255,255,255,.05) !important;} /* calmer immersive reveal (less extreme rotate/translate) */ html[data-theme="immersive"] .mv-home .reveal{transform:translateY(50px) translateZ(-90px) rotateX(5deg) scale(.96) !important;} html[data-theme="immersive"] .mv-home .reveal.in{transform:none !important;}