/* ============================================================ VIJIN.AI · Sovereign — Early Warning flow section redesign ------------------------------------------------------------ Scope: .svx [data-seg="sovereign"] .sv-flow(+children) Source: VIJIN 2 / styles.csv Glassmorphism + Dark Mode OLED Reversible: remove `svx` from to revert 100%. No numbers (client directive). ============================================================ */ /* ── Flow container ─────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-flow{ gap:0; margin-top:56px; position:relative; padding-bottom:12px; } /* subtle aurora strip removed per client — sections stay transparent */ /* ── Each column ────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-flow-col{ position:relative; z-index:1; padding:0 8px 28px; display:flex; flex-direction:column; align-items:center; transition:transform .28s cubic-bezier(.2,.7,.2,1); } .svx [data-seg="sovereign"] .sv-flow-col:hover{ transform:translateY(-4px); } /* ── Connector line — glowing gradient ──────────────────── */ .svx [data-seg="sovereign"] .sv-flow-col:not(:last-child)::after{ content:""; position:absolute; top:108px; /* h4 min-height(46px) + node-center(96/2 = 48px) + 14px gap = ~108 */ inset-inline-start:calc(50% + 52px); width:calc(100% - 98px); height:3px; border-radius:3px; background:linear-gradient(90deg, var(--c), color-mix(in oklab,var(--c) 55%,transparent)); box-shadow:0 0 14px 2px color-mix(in oklab,var(--c) 44%,transparent); z-index:2; } /* ── Node circle ────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-flow-node{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; color:var(--c); /* aurora radial fill — solid depth, not flat */ background: radial-gradient(circle at 36% 34%, color-mix(in oklab,var(--c) 28%,var(--bg-4)), color-mix(in oklab,var(--bg-0) 82%,transparent) 68%); border:2px solid color-mix(in oklab,var(--c) 64%,transparent); box-shadow: 0 0 0 6px color-mix(in oklab,var(--c) 10%,transparent), 0 0 32px -10px color-mix(in oklab,var(--c) 68%,transparent), inset 0 1px 0 rgba(255,255,255,.09); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; position:relative; z-index:2; margin-top:8px; } .svx [data-seg="sovereign"] .sv-flow-col:hover .sv-flow-node{ transform:scale(1.09); border-color:color-mix(in oklab,var(--c) 88%,transparent); box-shadow: 0 0 0 10px color-mix(in oklab,var(--c) 14%,transparent), 0 0 46px -8px color-mix(in oklab,var(--c) 80%,transparent), inset 0 1px 0 rgba(255,255,255,.13); } .svx [data-seg="sovereign"] .sv-flow-node svg{ width:34px !important; height:34px !important; filter:drop-shadow(0 0 12px color-mix(in oklab,var(--c) 72%,transparent)); } /* ── Title ──────────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-flow-col h4{ font-size:16px; font-weight:700; color:var(--head); min-height:46px; line-height:1.35; margin-bottom:0; } /* ── Divider bar — keep but make it a spacer only ───────── */ .svx [data-seg="sovereign"] .sv-flow-ul{ display:block; width:32px; height:3px; border-radius:3px; margin:14px 0 12px; background:linear-gradient(90deg,var(--c),transparent); opacity:.8; } /* ── Description ────────────────────────────────────────── */ .svx [data-seg="sovereign"] .sv-flow-col p{ font-size:13px; color:var(--t2); line-height:1.68; max-width:172px; margin:0; text-align:center; } /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:900px){ .svx [data-seg="sovereign"] .sv-flow{ flex-wrap:wrap;justify-content:center;gap:18px; padding:24px 0 12px; } .svx [data-seg="sovereign"] .sv-flow::before{display:none;} .svx [data-seg="sovereign"] .sv-flow-col{ flex:0 0 calc(33% - 18px);padding-bottom:12px; } .svx [data-seg="sovereign"] .sv-flow-col::after{display:none!important;} } @media(max-width:560px){ .svx [data-seg="sovereign"] .sv-flow-col{flex:0 0 calc(50% - 18px);} } @media(prefers-reduced-motion:reduce){ .svx [data-seg="sovereign"] .sv-flow-col:hover{transform:none;} .svx [data-seg="sovereign"] .sv-flow-col:hover .sv-flow-node{transform:none;} }