/* ============================================================ VIJIN.AI · Sovereign — Problem section · Aurora Glassmorphism ------------------------------------------------------------ Inspired by: Pinterest aurora mesh glassmorphism card pattern Reference: VIJIN 2 / styles.csv row 3 (Glassmorphism) + row 7 (Dark Mode OLED) + ui-reasoning row 6 (Financial Dashboard → dark bg + vibrant accents) Anti-patterns avoided (VIJIN 2): random AI purple/pink gradients, ornate icon blobs disconnected from content, misaligned grid. ============================================================ Reversible: remove `svx` class from to revert 100%. Scope: .svx [data-seg="sovereign"] .sv-wedge(s) ONLY. ============================================================ */ /* ── Grid container ─────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-wedges{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:38px; } /* last card spans full width (fills old empty corner) */ .svx [data-seg="sovereign"] .sv-wedge:last-child{ grid-column:1 / -1; } /* ── Card shell ─────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-wedge{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:24px; row-gap:0; padding:34px 36px; border-radius:24px; /* Aurora mesh gradient — adapts to per-card --c color */ background: radial-gradient(ellipse 90% 90% at 105% -10%, color-mix(in oklab,var(--c) 20%,transparent), transparent 58%), radial-gradient(ellipse 55% 65% at -5% 110%, color-mix(in oklab,var(--c) 10%,transparent), transparent 62%), transparent; border:1px solid color-mix(in oklab,var(--c) 30%,rgba(255,255,255,.05)); box-shadow: 0 2px 0 inset rgba(255,255,255,.04), 0 0 44px -18px color-mix(in oklab,var(--c) 38%,transparent); transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease; z-index:0; } .svx [data-seg="sovereign"] .sv-wedge:hover{ transform:translateY(-5px); border-color:color-mix(in oklab,var(--c) 52%,rgba(255,255,255,.07)); box-shadow: 0 2px 0 inset rgba(255,255,255,.09), 0 32px 72px -30px rgba(0,0,0,.9), 0 0 52px -22px color-mix(in oklab,var(--c) 55%,transparent); } /* ghost numbers removed per client direction */ /* ── Icon ───────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-wedge-top{ grid-column:1; grid-row:1 / 3; align-self:start; margin:0; position:relative; z-index:1; display:flex; } .svx [data-seg="sovereign"] .sv-wedge-ic{ width:58px; height:58px; border-radius:17px; display:grid; place-items:center; flex:none; background:color-mix(in oklab,var(--c) 20%,transparent); border:1px solid color-mix(in oklab,var(--c) 46%,transparent); box-shadow:0 0 24px -8px color-mix(in oklab,var(--c) 62%,transparent), 0 0 0 4px color-mix(in oklab,var(--c) 8%,transparent); color:var(--c); } .svx [data-seg="sovereign"] .sv-wedge-ic svg{ width:27px !important; height:27px !important; } /* ── Typography ─────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-wedge h3{ grid-column:2; grid-row:1; align-self:center; margin:0 0 12px; font-size:19.5px; font-weight:700; color:var(--head); line-height:1.3; text-align:start; position:relative; z-index:1; } .svx [data-seg="sovereign"] .sv-wedge p{ grid-column:2; grid-row:2; margin:0; font-size:14.5px; color:var(--t2); line-height:1.75; max-width:none; text-align:start; position:relative; z-index:1; } /* hide unused elements */ .svx [data-seg="sovereign"] .sv-wedge-ul{display:none;} /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:860px){ .svx [data-seg="sovereign"] .sv-wedges{grid-template-columns:1fr;} .svx [data-seg="sovereign"] .sv-wedge:last-child{grid-column:auto;} .svx [data-seg="sovereign"] .sv-wedge{padding:26px 24px;} } @media(max-width:480px){ .svx [data-seg="sovereign"] .sv-wedge{ grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:16px; padding:24px 20px; } .svx [data-seg="sovereign"] .sv-wedge-top{grid-row:1;grid-column:1;} .svx [data-seg="sovereign"] .sv-wedge h3{grid-row:2;grid-column:1;margin-bottom:8px;} .svx [data-seg="sovereign"] .sv-wedge p{grid-row:3;grid-column:1;} .svx [data-seg="sovereign"] .sv-wedge::after{font-size:72px;bottom:-12px;inset-inline-end:14px;} } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-wedge:hover{transform:none;} }