/* ============================================================ VIJIN.AI · Sovereign — Security compliance strip redesign ------------------------------------------------------------ Transforms .sv-std badges to match the glassmorphism card language of the top security section card. Scope: .svx [data-seg="sovereign"] .sv-security2 .sv-std Reversible: remove `svx` from . ============================================================ */ /* ── Grid: 5 equal glass cards ─────────────────────────── */ .svx [data-seg="sovereign"] .sv-security2 .sv-std{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:14px !important; margin-top:32px !important; padding-top:0 !important; border-top:none !important; } /* ── Card shell ─────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-security2 .sv-seal{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:14px !important; padding:24px 16px 20px !important; border-radius:20px !important; background: radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in oklab,var(--cyan) 12%,transparent), transparent 65%), transparent !important; border:1px solid color-mix(in oklab,var(--cyan) 22%,rgba(255,255,255,.05)) !important; border-top:1.5px solid color-mix(in oklab,var(--cyan) 38%,transparent) !important; box-shadow:none !important; transition:transform .28s ease, border-color .28s ease !important; position:relative; overflow:hidden; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal:hover{ transform:translateY(-4px) !important; border-top-color:color-mix(in oklab,var(--cyan) 65%,transparent) !important; border-color:color-mix(in oklab,var(--cyan) 32%,rgba(255,255,255,.07)) !important; } /* ── Seal ring → 3D sphere ──────────────────────────────── */ .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring{ width:64px !important; height:64px !important; border-radius:50% !important; flex:none !important; border:none !important; /* 3D sphere: specular highlight top-left */ background: radial-gradient(ellipse 38% 32% at 28% 24%, rgba(255,255,255,.5), transparent 64%), radial-gradient(circle at 40% 36%, color-mix(in oklab,var(--cyan) 62%, rgba(255,255,255,.2)), color-mix(in oklab,var(--cyan) 34%, #090454) 46%, color-mix(in oklab,#090454 84%, transparent) 76%) !important; box-shadow: 0 0 0 6px color-mix(in oklab,var(--cyan) 10%,transparent), 0 0 28px -8px color-mix(in oklab,var(--cyan) 68%,transparent), 0 0 52px -20px color-mix(in oklab,var(--cyan) 36%,transparent), 0 16px 26px -12px rgba(0,0,0,.82), inset 0 -3px 5px rgba(0,0,0,.42), inset 0 3px 6px rgba(255,255,255,.18) !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring::before{ display:none !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring::after{ display:none !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-ring svg{ width:28px !important; height:28px !important; filter:drop-shadow(0 0 10px color-mix(in oklab,var(--cyan) 82%,transparent)) drop-shadow(0 0 4px rgba(255,255,255,.3)) !important; } /* ── Text block ─────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-security2 .sv-seal-tx{ text-align:center !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-seal-tx b{ display:block !important; color:var(--head) !important; font-size:14.5px !important; font-weight:700 !important; line-height:1.35 !important; margin-bottom:6px !important; font-family:var(--f-ar) !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-badge-st, .svx [data-seg="sovereign"] .sv-security2 .sv-seal-st{ display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; font-size:12px !important; color:var(--t2) !important; font-weight:600 !important; } .svx [data-seg="sovereign"] .sv-security2 .sv-badge-st i, .svx [data-seg="sovereign"] .sv-security2 .sv-seal-st i{ width:6px !important; height:6px !important; border-radius:50% !important; flex:none !important; background:var(--pos, var(--cyan)) !important; box-shadow:0 0 7px var(--pos, var(--cyan)) !important; } /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:860px){ .svx [data-seg="sovereign"] .sv-security2 .sv-std{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media(max-width:520px){ .svx [data-seg="sovereign"] .sv-security2 .sv-std{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-security2 .sv-seal:hover{ transform:none !important; } }