/* ============================================================ VIJIN.AI · Sovereign — Sphere + FCards icon alignment fix ------------------------------------------------------------ Fixes icon positioning for: 1. .sv-sphere cards (audience) — icon centered top 2. .sv-fc cards (controls) — watermark → real neon icon Scope: .svx [data-seg="sovereign"] Reversible: remove `svx` from . ============================================================ */ /* ═══════════════════════════════════════════════════════════ SECTION 1 — AUDIENCE CARDS (.sv-sphere) Icon in .sv-sphere-top alongside badge. Remove badge number, center icon at top of card. ═══════════════════════════════════════════════════════════ */ /* Strip card background — transparent */ .svx [data-seg="sovereign"] .sv-sphere{ background:transparent !important; border:1px solid color-mix(in oklab,var(--c) 20%,transparent) !important; border-top:2px solid color-mix(in oklab,var(--c) 55%,transparent) !important; transition:border-color .24s ease, transform .24s ease !important; } .svx [data-seg="sovereign"] .sv-sphere:hover{ transform:translateY(-4px) !important; border-color:color-mix(in oklab,var(--c) 35%,transparent) !important; border-top-color:color-mix(in oklab,var(--c) 80%,transparent) !important; } /* Center icon at top, hide the number badge */ .svx [data-seg="sovereign"] .sv-sphere-top{ flex-direction:column !important; align-items:center !important; justify-content:center !important; margin-bottom:20px !important; } .svx [data-seg="sovereign"] .sv-sphere-badge{ display:none !important; } /* Sphere icon → Neon Float */ .svx [data-seg="sovereign"] .sv-sphere-ic{ width:80px !important; height:92px !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:14px !important; } /* glow halo behind */ .svx [data-seg="sovereign"] .sv-sphere-ic::before{ content:"" !important; position:absolute !important; top:0 !important; left:50% !important; transform:translateX(-50%) !important; width:76px !important; height:76px !important; border-radius:50% !important; background:radial-gradient(circle at center, color-mix(in oklab,var(--c) 44%,transparent) 0%, color-mix(in oklab,var(--c) 18%,transparent) 44%, transparent 72%) !important; filter:blur(9px) !important; z-index:0 !important; pointer-events:none !important; } /* holo disc */ .svx [data-seg="sovereign"] .sv-sphere-ic::after{ content:"" !important; position:absolute !important; bottom:0 !important; left:50% !important; transform:translateX(-50%) !important; width:72px !important; height:12px !important; border-radius:50% !important; background:radial-gradient(ellipse at center, color-mix(in oklab,var(--c) 30%,transparent), transparent 75%) !important; border:1px solid color-mix(in oklab,var(--c) 44%,transparent) !important; box-shadow:0 0 14px 3px color-mix(in oklab,var(--c) 26%,transparent) !important; z-index:1 !important; } .svx [data-seg="sovereign"] .sv-sphere-ic svg{ width:44px !important; height:44px !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 12px color-mix(in oklab,var(--c) 85%,transparent)) drop-shadow(0 0 24px color-mix(in oklab,var(--c) 55%,transparent)) brightness(1.25) !important; margin-bottom:6px !important; flex:none !important; } /* ═══════════════════════════════════════════════════════════ SECTION 2 — CONTROLS CARDS (.sv-fc) Currently: watermark icon behind text (abs, opacity .16) New: real Neon Float icon centered above text ═══════════════════════════════════════════════════════════ */ /* Card: transparent, top accent border */ .svx [data-seg="sovereign"] .sv-fc{ background:transparent !important; border:1px solid color-mix(in oklab,var(--c) 18%,transparent) !important; } /* keep the top colored bar from original */ .svx [data-seg="sovereign"] .sv-fc::before{ display:block !important; height:3px !important; } /* Inner container: flex column, icon on top */ .svx [data-seg="sovereign"] .sv-fc-in{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; min-height:190px !important; padding:24px 18px 20px !important; text-align:center !important; } /* Watermark icon → real visible icon centered */ .svx [data-seg="sovereign"] .sv-fc-ic{ position:relative !important; inset:auto !important; opacity:1 !important; z-index:2 !important; pointer-events:auto !important; width:72px !important; height:84px !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; padding-bottom:12px !important; flex:none !important; margin-bottom:12px !important; } /* glow halo */ .svx [data-seg="sovereign"] .sv-fc-ic::before{ content:"" !important; position:absolute !important; top:0 !important; left:50% !important; transform:translateX(-50%) !important; width:68px !important; height:68px !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) 44%, transparent 72%) !important; filter:blur(9px) !important; z-index:0 !important; pointer-events:none !important; } /* holo disc */ .svx [data-seg="sovereign"] .sv-fc-ic::after{ content:"" !important; position:absolute !important; bottom:0 !important; left:50% !important; transform:translateX(-50%) !important; width:64px !important; height:12px !important; border-radius:50% !important; background:radial-gradient(ellipse at center, color-mix(in oklab,var(--c) 28%,transparent), 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; } .svx [data-seg="sovereign"] .sv-fc-ic svg{ width:38px !important; height:38px !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; } /* text */ .svx [data-seg="sovereign"] .sv-fc-in b{ position:relative !important; z-index:2 !important; font-size:15px !important; color:var(--head) !important; font-weight:700 !important; line-height:1.5 !important; text-shadow:none !important; } /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:860px){ .svx [data-seg="sovereign"] .sv-spheres{grid-template-columns:1fr 1fr !important;} } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-sphere:hover{transform:none !important;} }