/* ============================================================ VIJIN.AI · Sovereign — Controls (sv-fcards) full redesign ------------------------------------------------------------ 7 prohibition cards arranged in 4+3 grid. Each card: transparent + top accent + centered neon icon + text. Scope: .svx [data-seg="sovereign"] .sv-fcards Reversible: remove `svx` from . ============================================================ */ /* ── Grid: 4 cols, last 3 centered ──────────────────────── */ .svx [data-seg="sovereign"] .sv-fcards{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; margin-top:40px !important; justify-content:initial !important; } /* last 3 items → 3-col sub-grid centered */ .svx [data-seg="sovereign"] .sv-fc:nth-child(5){ grid-column:1 !important; } .svx [data-seg="sovereign"] .sv-fc:nth-child(5), .svx [data-seg="sovereign"] .sv-fc:nth-child(6), .svx [data-seg="sovereign"] .sv-fc:nth-child(7){ grid-column:span 1 !important; } /* wrap last 3 in a centered sub-row */ .svx [data-seg="sovereign"] .sv-fcards{ grid-template-rows:auto auto !important; } .svx [data-seg="sovereign"] .sv-fc:nth-child(5){ grid-column:1 / 2 !important; margin-inline-start:calc(12.5% + 8px) !important; } .svx [data-seg="sovereign"] .sv-fc:nth-child(6){ grid-column:2 / 3 !important; } .svx [data-seg="sovereign"] .sv-fc:nth-child(7){ grid-column:3 / 4 !important; } /* ── Card shell ─────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-fc{ flex:none !important; position:relative !important; border-radius:18px !important; background:transparent !important; border:1px solid color-mix(in oklab,var(--c) 20%,rgba(255,255,255,.05)) !important; border-top:2.5px solid color-mix(in oklab,var(--c) 70%,transparent) !important; overflow:hidden !important; transition:border-color .24s ease, transform .24s ease !important; } .svx [data-seg="sovereign"] .sv-fc:hover{ transform:translateY(-4px) !important; border-color:color-mix(in oklab,var(--c) 34%,rgba(255,255,255,.07)) !important; border-top-color:var(--c) !important; } /* remove old top colored bar */ .svx [data-seg="sovereign"] .sv-fc::before{ display:none !important; } /* ── Inner container: column, icon top center ───────────── */ .svx [data-seg="sovereign"] .sv-fc-in{ position:relative !important; height:auto !important; min-height:200px !important; padding:28px 20px 24px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; text-align:center !important; gap:0 !important; } /* ── Icon: Neon Float 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:76px !important; height:88px !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:14px !important; flex:none !important; margin-bottom:16px !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:72px !important; height:72px !important; border-radius:50% !important; background:radial-gradient(circle at center, color-mix(in oklab,var(--c) 45%,transparent) 0%, color-mix(in oklab,var(--c) 18%,transparent) 44%, transparent 72%) !important; filter:blur(10px) !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:68px !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) 45%,transparent) !important; box-shadow:0 0 14px 3px color-mix(in oklab,var(--c) 28%,transparent) !important; z-index:1 !important; } .svx [data-seg="sovereign"] .sv-fc-ic svg{ width:42px !important; height:42px !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.28) !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:15.5px !important; color:var(--head) !important; font-weight:700 !important; line-height:1.55 !important; text-shadow:none !important; } /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:1100px){ .svx [data-seg="sovereign"] .sv-fcards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} .svx [data-seg="sovereign"] .sv-fc:nth-child(5), .svx [data-seg="sovereign"] .sv-fc:nth-child(6), .svx [data-seg="sovereign"] .sv-fc:nth-child(7){grid-column:span 1 !important;margin-inline-start:0 !important;} } @media(max-width:600px){ .svx [data-seg="sovereign"] .sv-fcards{grid-template-columns:1fr !important;} } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-fc:hover{transform:none !important;} }