/* ============================================================ VIJIN.AI · Sovereign — Unified Neon Float Icon System ------------------------------------------------------------ Applies the approved "Neon Float + Holographic Base" style to ALL icon containers across the page. System rules (from approved reference images): - No box / chip background - Icon colored in --c accent - Radial glow halo BEHIND icon (::before) - Holographic disc base BELOW icon (::after) - Icon SVG: neon glow via layered drop-shadow Scope: .svx [data-seg="sovereign"] Reversible: remove `svx` from . ============================================================ */ /* ═══════════════════════════════════════════════════════════ SHARED MIXIN — applied via individual selectors below ═══════════════════════════════════════════════════════════ */ /* All icon chip containers: strip box, become float column */ .svx [data-seg="sovereign"] .sv-wedge-ic, .svx [data-seg="sovereign"] .sv-iccard-ic, .svx [data-seg="sovereign"] .sv-scv-ic, .svx [data-seg="sovereign"] .sv-sphere-ic, .svx [data-seg="sovereign"] .sv-fc-ic{ position:relative !important; background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; overflow:visible !important; flex:none !important; } /* Sizes per context */ .svx [data-seg="sovereign"] .sv-wedge-ic{width:96px !important;height:110px !important;padding-bottom:14px !important;} .svx [data-seg="sovereign"] .sv-iccard-ic{width:76px !important;height:88px !important;padding-bottom:12px !important;} .svx [data-seg="sovereign"] .sv-scv-ic{width:72px !important;height:84px !important;padding-bottom:12px !important;} .svx [data-seg="sovereign"] .sv-sphere-ic{width:80px !important;height:92px !important;padding-bottom:14px !important;} .svx [data-seg="sovereign"] .sv-fc-ic{width:72px !important;height:84px !important;padding-bottom:12px !important;} /* SVG sizes */ .svx [data-seg="sovereign"] .sv-wedge-ic svg{width:54px !important;height:54px !important;} .svx [data-seg="sovereign"] .sv-iccard-ic svg{width:40px !important;height:40px !important;} .svx [data-seg="sovereign"] .sv-scv-ic svg{width:36px !important;height:36px !important;} .svx [data-seg="sovereign"] .sv-sphere-ic svg{width:40px !important;height:40px !important;} .svx [data-seg="sovereign"] .sv-fc-ic svg{width:38px !important;height:38px !important;} /* All SVGs: neon glow */ .svx [data-seg="sovereign"] .sv-wedge-ic svg, .svx [data-seg="sovereign"] .sv-iccard-ic svg, .svx [data-seg="sovereign"] .sv-scv-ic svg, .svx [data-seg="sovereign"] .sv-sphere-ic svg, .svx [data-seg="sovereign"] .sv-fc-ic svg{ position:relative !important; z-index:2 !important; color:var(--c) !important; filter: drop-shadow(0 0 3px color-mix(in oklab,var(--c) 100%,transparent)) drop-shadow(0 0 10px color-mix(in oklab,var(--c) 85%,transparent)) drop-shadow(0 0 22px color-mix(in oklab,var(--c) 55%,transparent)) brightness(1.25) !important; } /* All SVGs: neon glow — subtle atmosphere behind only */ .svx [data-seg="sovereign"] .sv-wedge-ic::before, .svx [data-seg="sovereign"] .sv-iccard-ic::before, .svx [data-seg="sovereign"] .sv-scv-ic::before, .svx [data-seg="sovereign"] .sv-sphere-ic::before, .svx [data-seg="sovereign"] .sv-fc-ic::before{ background:radial-gradient(circle at center, color-mix(in oklab,var(--c) 20%,transparent) 0%, color-mix(in oklab,var(--c) 8%,transparent) 45%, transparent 72%) !important; filter:blur(12px) !important; } .svx [data-seg="sovereign"] .sv-wedge-ic::before{width:90px !important;height:90px !important;} .svx [data-seg="sovereign"] .sv-iccard-ic::before{width:72px !important;height:72px !important;} .svx [data-seg="sovereign"] .sv-scv-ic::before{width:66px !important;height:66px !important;} .svx [data-seg="sovereign"] .sv-sphere-ic::before{width:74px !important;height:74px !important;} .svx [data-seg="sovereign"] .sv-fc-ic::before{width:66px !important;height:66px !important;} /* ── Holographic disc base (::after) ────────────────────── */ .svx [data-seg="sovereign"] .sv-wedge-ic::after, .svx [data-seg="sovereign"] .sv-iccard-ic::after, .svx [data-seg="sovereign"] .sv-scv-ic::after, .svx [data-seg="sovereign"] .sv-sphere-ic::after, .svx [data-seg="sovereign"] .sv-fc-ic::after{ content:"" !important; position:absolute !important; bottom:0 !important; left:50% !important; transform:translateX(-50%) !important; height:12px !important; border-radius:50% !important; background:radial-gradient(ellipse at center, color-mix(in oklab,var(--c) 32%,transparent) 0%, color-mix(in oklab,var(--c) 14%,transparent) 50%, transparent 75%) !important; border:1px solid color-mix(in oklab,var(--c) 45%,transparent) !important; box-shadow:0 0 14px 3px color-mix(in oklab,var(--c) 28%,transparent) !important; z-index:1 !important; } .svx [data-seg="sovereign"] .sv-wedge-ic::after{width:84px !important;} .svx [data-seg="sovereign"] .sv-iccard-ic::after{width:68px !important;} .svx [data-seg="sovereign"] .sv-scv-ic::after{width:62px !important;} .svx [data-seg="sovereign"] .sv-sphere-ic::after{width:72px !important;} .svx [data-seg="sovereign"] .sv-fc-ic::after{width:64px !important;} /* ───────────────────────────────────────────────────────── SOURCE GOVERNANCE BARS — .sv-bar-circle ───────────────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-bar-circle{ background:none !important; border:none !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; position:relative !important; } .svx [data-seg="sovereign"] .sv-bar-circle svg{ width:30px !important; height:30px !important; position:relative !important; z-index:2 !important; color:var(--c) !important; filter: drop-shadow(0 0 3px color-mix(in oklab,var(--c) 100%,transparent)) drop-shadow(0 0 10px color-mix(in oklab,var(--c) 80%,transparent)) drop-shadow(0 0 22px color-mix(in oklab,var(--c) 50%,transparent)) brightness(1.3) !important; } .svx [data-seg="sovereign"] .sv-bar-circle::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:50% !important; background:radial-gradient(circle at center, color-mix(in oklab,var(--c) 42%,transparent), transparent 72%) !important; filter:blur(8px) !important; z-index:0 !important; } /* ───────────────────────────────────────────────────────── SECURITY SEALS — already done in sovereign-seals.css Override ring to neon float style ───────────────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring{ background:none !important; border:none !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring svg{ width:30px !important; height:30px !important; position:relative !important; z-index:2 !important; filter: drop-shadow(0 0 3px color-mix(in oklab,var(--cyan) 100%,transparent)) drop-shadow(0 0 10px color-mix(in oklab,var(--cyan) 82%,transparent)) drop-shadow(0 0 22px color-mix(in oklab,var(--cyan) 50%,transparent)) brightness(1.3) !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring::before{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; border-radius:50% !important; background:radial-gradient(circle at center, color-mix(in oklab,var(--cyan) 40%,transparent), transparent 70%) !important; filter:blur(7px) !important; z-index:0 !important; width:auto !important; height:auto !important; border:none !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring::after{ display:none !important; } /* ───────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────── */ @media(max-width:600px){ .svx [data-seg="sovereign"] .sv-wedge-ic{width:56px !important;height:66px !important;} .svx [data-seg="sovereign"] .sv-wedge-ic svg{width:30px !important;height:30px !important;} } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-wedge-ic, .svx [data-seg="sovereign"] .sv-iccard-ic{animation:none !important;} } /* ═══════════════════════════════════════════════════════════ LIGHT THEME — electric cyan + heavy neon are rejected on cream. Remap bright cyan → deep teal token, and soften every glow so icons read as crisp marks, not neon bloom. Sovereign only. ═══════════════════════════════════════════════════════════ */ [data-theme="light"].svx [data-seg="sovereign"] [style*="17d1c6"], [data-theme="light"].svx [data-seg="sovereign"] [style*="7fe7e0"]{--c:#0a9e94 !important;} [data-theme="light"].svx [data-seg="sovereign"] .sv-wedge-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-iccard-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-scv-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-sphere-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-fc-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-bar-circle svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-flow-node svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring svg{ filter:drop-shadow(0 0 3px color-mix(in oklab,var(--c) 30%,transparent)) brightness(.92) !important; } /* fade the halos + holographic discs on cream */ [data-theme="light"].svx [data-seg="sovereign"] .sv-wedge-ic::before, [data-theme="light"].svx [data-seg="sovereign"] .sv-iccard-ic::before, [data-theme="light"].svx [data-seg="sovereign"] .sv-scv-ic::before, [data-theme="light"].svx [data-seg="sovereign"] .sv-sphere-ic::before, [data-theme="light"].svx [data-seg="sovereign"] .sv-fc-ic::before, [data-theme="light"].svx [data-seg="sovereign"] .sv-bar-circle::before, [data-theme="light"].svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring::before{ opacity:.35 !important; } [data-theme="light"].svx [data-seg="sovereign"] .sv-wedge-ic::after, [data-theme="light"].svx [data-seg="sovereign"] .sv-iccard-ic::after, [data-theme="light"].svx [data-seg="sovereign"] .sv-scv-ic::after, [data-theme="light"].svx [data-seg="sovereign"] .sv-sphere-ic::after, [data-theme="light"].svx [data-seg="sovereign"] .sv-fc-ic::after{ opacity:.92 !important; height:13px !important; background:radial-gradient(ellipse at center, color-mix(in oklab,var(--c) 56%,transparent) 0%, color-mix(in oklab,var(--c) 30%,transparent) 50%, transparent 78%) !important; border:1px solid color-mix(in oklab,var(--c) 62%,transparent) !important; box-shadow:0 1px 13px 2px color-mix(in oklab,var(--c) 34%,transparent) !important; } /* flow node circle: calmer fill + glow on cream */ [data-theme="light"].svx [data-seg="sovereign"] .sv-flow-node{ box-shadow:0 0 0 5px color-mix(in oklab,var(--c) 8%,transparent), 0 8px 22px -12px color-mix(in oklab,var(--c) 40%,transparent) !important; } /* ============================================================ (proposal) RESTRAIN GLOW ON SMALL ICONS — full neon is reserved for large (≥~48px) icons; the small icon tiles (≤40px) get a single subtle glow so dense grids read crisp, not blooming. Loaded after the base rules above → wins without !important wars. ============================================================ */ .svx [data-seg="sovereign"] .sv-iccard-ic svg, .svx [data-seg="sovereign"] .sv-scv-ic svg, .svx [data-seg="sovereign"] .sv-fc-ic svg, .svx [data-seg="sovereign"] .sv-bar-circle svg, .svx [data-seg="sovereign"] .sv-sphere-ic svg{ filter: drop-shadow(0 0 4px color-mix(in oklab,var(--c) 60%,transparent)) brightness(1.12) !important; } .svx [data-seg="sovereign"] .sv-iccard-ic::before, .svx [data-seg="sovereign"] .sv-scv-ic::before, .svx [data-seg="sovereign"] .sv-fc-ic::before, .svx [data-seg="sovereign"] .sv-sphere-ic::before{ opacity:.6 !important; filter:blur(9px) !important; } [data-theme="light"].svx [data-seg="sovereign"] .sv-iccard-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-scv-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-fc-ic svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-bar-circle svg, [data-theme="light"].svx [data-seg="sovereign"] .sv-sphere-ic svg{ filter:drop-shadow(0 0 2px color-mix(in oklab,var(--c) 26%,transparent)) brightness(.92) !important; }