/* ============================================================ VIJIN.AI · Sovereign — Use Cases: icon watermark redesign ------------------------------------------------------------ Removes the ghost number. Repositions the icon as a large translucent watermark in the card background (same position, same feel, but with the actual SVG icon instead of a number). Scope: .svx [data-seg="sovereign"] .sv-uc-grid Reversible: remove `svx` from . ============================================================ */ /* ── Hide ghost number ──────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-uc-ghost{ display:none !important; } /* ── Icon: dual role — small chip (z-index 1) stays, PLUS a large watermark clone via the same element ─ */ /* ── NEON FLOATING ICON — no box, pure glow + holo base ─── */ .svx [data-seg="sovereign"] .sv-uc-ic{ position:relative !important; z-index:2 !important; width:80px !important; height:100px !important; border-radius:0 !important; flex:none !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-end !important; padding-bottom:14px !important; margin-top:0 !important; align-self:flex-start !important; justify-content:flex-start !important; padding-top:2px !important; padding-bottom:0 !important; } /* glow halo BEHIND the icon */ .svx [data-seg="sovereign"] .sv-uc-ic::before{ content:"" !important; position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-54%) !important; width:72px !important; height:72px !important; border-radius:50% !important; background:radial-gradient(circle at center, color-mix(in oklab,var(--c) 55%,transparent) 0%, color-mix(in oklab,var(--c) 28%,transparent) 38%, color-mix(in oklab,var(--c) 10%,transparent) 62%, transparent 80%) !important; filter:blur(8px) !important; z-index:0 !important; pointer-events:none !important; } .svx [data-seg="sovereign"] .sv-uc-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) 40%,transparent) 0%, color-mix(in oklab,var(--c) 18%,transparent) 40%, transparent 75%) !important; box-shadow:0 0 18px 4px color-mix(in oklab,var(--c) 35%,transparent) !important; border:1px solid color-mix(in oklab,var(--c) 50%,transparent) !important; z-index:0 !important; } /* the SVG icon: subtle neon glow only */ .svx [data-seg="sovereign"] .sv-uc-ic svg{ width:44px !important; height:44px !important; position:relative !important; z-index:1 !important; color:var(--c) !important; filter: drop-shadow(0 0 3px color-mix(in oklab,var(--c) 90%,transparent)) drop-shadow(0 0 8px color-mix(in oklab,var(--c) 55%,transparent)) brightness(1.2) !important; margin-bottom:6px !important; } /* ── Large watermark icon via ::after on the card ───────── */ .svx [data-seg="sovereign"] .sv-uc{ position:relative !important; overflow:hidden !important; } /* The watermark is rendered by cloning the SVG color tint using a background-image trick — since we can't duplicate the SVG node in pure CSS, we use a large colored circle with the card's --c accent as the watermark glow shape, positioned like the old ghost number. */ .svx [data-seg="sovereign"] .sv-uc::after{ content:"" !important; position:absolute !important; inset-inline-start:10px !important; inset-inline-end:auto !important; bottom:-28px !important; width:120px !important; height:120px !important; border-radius:50% !important; background:radial-gradient( circle at 40% 36%, color-mix(in oklab,var(--c) 22%,transparent), color-mix(in oklab,var(--c) 8%,transparent) 52%, transparent 75%) !important; pointer-events:none !important; z-index:0 !important; filter:blur(2px) !important; } /* Card background: transparent (no fill) */ .svx [data-seg="sovereign"] .sv-uc{ background:transparent !important; border:1px solid color-mix(in oklab,var(--c) 20%,rgba(255,255,255,.05)) !important; border-top:1.5px solid color-mix(in oklab,var(--c) 35%,transparent) !important; box-shadow:none !important; } .svx [data-seg="sovereign"] .sv-uc:hover{ border-color:color-mix(in oklab,var(--c) 38%,rgba(255,255,255,.07)) !important; border-top-color:color-mix(in oklab,var(--c) 60%,transparent) !important; transform:translateY(-3px) !important; box-shadow:none !important; } /* Text + card vertical alignment */ .svx [data-seg="sovereign"] .sv-uc{ align-items:flex-start !important; } .svx [data-seg="sovereign"] .sv-uc-tx{ position:relative !important; z-index:2 !important; } /* ── Responsive ─────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-uc:hover{transform:none !important;} }