/* ============================================================ VIJIN.AI · Sovereign — Source Governance Bars Redesign v2 ------------------------------------------------------------ Icon (Neon Float) on physical LEFT, text on RIGHT. In RTL: flex-direction:row puts icon-last → use order or row-reverse. Scope: .svx [data-seg="sovereign"] .sv-bars / .sv-bar Reversible: remove `svx` from . ============================================================ */ /* ── Container: 2-col grid ──────────────────────────────── */ .svx [data-seg="sovereign"] .sv-bars{ position:relative; max-width:1100px; margin:48px auto 0; display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; } /* ── Bar shell: transparent row ─────────────────────────── */ .svx [data-seg="sovereign"] .sv-bar{ position:relative !important; display:flex !important; /* row-reverse in RTL = physical left-to-right → icon on left */ flex-direction:row-reverse !important; align-items:center !important; gap:18px !important; padding:16px 20px !important; border-radius:14px !important; background:transparent !important; border:1px solid color-mix(in oklab,var(--c) 34%,transparent) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; transition:background .24s ease, border-color .24s ease !important; } /* remove dot ::before from original */ .svx [data-seg="sovereign"] .sv-bar::before{ display:none !important; } .svx [data-seg="sovereign"] .sv-bar:hover{ background:color-mix(in oklab,var(--c) 5%,transparent) !important; border-color:color-mix(in oklab,var(--c) 32%,transparent) !important; border-inline-start-color:color-mix(in oklab,var(--c) 80%,transparent) !important; } /* ── Neon Float icon container ──────────────────────────── */ .svx [data-seg="sovereign"] .sv-bar-circle{ width:64px !important; height:72px !important; border-radius:0 !important; background:none !important; border:none !important; box-shadow:none !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; overflow:visible !important; position:relative !important; flex:none !important; padding-bottom:10px !important; } /* Glow halo behind icon */ .svx [data-seg="sovereign"] .sv-bar-circle::before{ content:"" !important; position:absolute !important; top:0 !important; left:50% !important; transform:translateX(-50%) !important; width:60px !important; height:60px !important; border-radius:50% !important; background:radial-gradient(circle at center, color-mix(in oklab,var(--c) 42%,transparent) 0%, color-mix(in oklab,var(--c) 16%,transparent) 45%, transparent 72%) !important; filter:blur(8px) !important; z-index:0 !important; pointer-events:none !important; } /* Holographic disc base */ .svx [data-seg="sovereign"] .sv-bar-circle::after{ content:"" !important; position:absolute !important; bottom:0 !important; left:50% !important; transform:translateX(-50%) !important; width:54px !important; height:11px !important; border-radius:50% !important; background:radial-gradient(ellipse at center, color-mix(in oklab,var(--c) 28%,transparent) 0%, color-mix(in oklab,var(--c) 10%,transparent) 50%, transparent 75%) !important; border:1px solid color-mix(in oklab,var(--c) 42%,transparent) !important; box-shadow:0 0 12px 2px color-mix(in oklab,var(--c) 24%,transparent) !important; z-index:1 !important; } /* SVG icon: neon glow */ .svx [data-seg="sovereign"] .sv-bar-circle svg{ width:32px !important; height:32px !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) 82%,transparent)) drop-shadow(0 0 22px color-mix(in oklab,var(--c) 52%,transparent)) brightness(1.25) !important; margin-bottom:6px !important; flex:none !important; } /* ── Label ──────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-bar b{ font-size:15px !important; font-weight:700 !important; color:var(--head) !important; flex:1 !important; text-align:start !important; line-height:1.4 !important; } /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:680px){ .svx [data-seg="sovereign"] .sv-bars{grid-template-columns:1fr !important;} } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-bar:hover{background:transparent !important;} }