/* Light "glass" skin — applied when .
Lighter overall: dark sections become soft light glass with gentle glows. */
[data-skin="glass"] body {
background:
radial-gradient(900px 500px at 85% -5%, rgb(92 141 255 / 0.16), transparent 60%),
radial-gradient(700px 420px at -10% 30%, rgb(41 211 164 / 0.10), transparent 60%),
radial-gradient(800px 500px at 50% 110%, rgb(92 141 255 / 0.10), transparent 60%),
linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 45%, #F3F7FE 100%);
background-attachment: fixed;
}
/* Re-light every dark-scoped section */
[data-skin="glass"] [data-theme="dark"] {
--bg: transparent;
--surface: rgb(255 255 255 / 0.55);
--border: rgb(46 107 255 / 0.14);
--text: var(--night-900);
--text-muted: var(--steel-600);
--link: var(--signal-500);
--link-hover: #1F55D6;
background: transparent !important;
color: var(--night-900);
border-color: rgb(46 107 255 / 0.12) !important;
}
/* Header — white glass */
[data-skin="glass"] .sx-header {
background: rgb(255 255 255 / 0.65);
border-block-end: 1px solid rgb(46 107 255 / 0.12);
}
[data-skin="glass"] .sx-header-logo img { filter: brightness(0.45); }
[data-skin="glass"] .sx-nav-link { color: var(--steel-600); }
[data-skin="glass"] .sx-nav-link:hover,
[data-skin="glass"] .sx-nav-link[aria-expanded="true"] { color: var(--night-900); }
[data-skin="glass"] .sx-mega {
background: rgb(255 255 255 / 0.85);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-block-end: 1px solid rgb(46 107 255 / 0.12);
}
[data-skin="glass"] .sx-mega-item-title { color: var(--night-900); }
[data-skin="glass"] .sx-mega-item-desc { color: var(--steel-600); }
[data-skin="glass"] .sx-mega-item:hover, [data-skin="glass"] .sx-mega-item:focus-visible {
border-color: rgb(46 107 255 / 0.18); background: rgb(255 255 255 / 0.8);
}
[data-skin="glass"] .sx-lang-switch { border-color: rgb(46 107 255 / 0.18); }
[data-skin="glass"] .sx-lang-switch a { color: var(--steel-600); }
[data-skin="glass"] .sx-lang-switch a[aria-current] { background: rgb(46 107 255 / 0.10); color: var(--night-900); }
[data-skin="glass"] .sx-lang-switch a:hover { color: var(--night-900); }
[data-skin="glass"] .sx-menu-btn { border-color: rgb(46 107 255 / 0.18); color: var(--night-900); }
/* Glass cards + soft glow */
[data-skin="glass"] .sx-bento-tile,
[data-skin="glass"] .sx-stat-tile,
[data-skin="glass"] .sx-case-card {
background: rgb(255 255 255 / 0.6);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-color: rgb(46 107 255 / 0.14);
box-shadow: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 8px 32px rgb(46 107 255 / 0.07);
}
[data-skin="glass"] a.sx-bento-tile:hover, [data-skin="glass"] a.sx-bento-tile:focus-visible,
[data-skin="glass"] .sx-bento-tile--interactive:hover, [data-skin="glass"] .sx-bento-tile--interactive:focus-visible {
border-color: rgb(46 107 255 / 0.45);
box-shadow: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 12px 40px rgb(46 107 255 / 0.18);
}
/* Glowing primary CTA */
[data-skin="glass"] .sx-btn--primary {
background: linear-gradient(180deg, var(--signal-400), var(--signal-500));
box-shadow: 0 6px 24px rgb(46 107 255 / 0.35);
}
[data-skin="glass"] .sx-btn--primary:hover {
box-shadow: 0 10px 32px rgb(46 107 255 / 0.45);
}
[data-skin="glass"] .sx-btn--secondary { border-color: rgb(46 107 255 / 0.3); }
/* CTA band — light glass with glow instead of night-900 */
[data-skin="glass"] .sx-cta-band {
background:
radial-gradient(600px 300px at 80% 20%, rgb(92 141 255 / 0.22), transparent 65%),
rgb(255 255 255 / 0.6);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-color: rgb(46 107 255 / 0.18);
box-shadow: 0 16px 48px rgb(46 107 255 / 0.12);
}
[data-skin="glass"] .sx-cta-band-title { color: var(--night-900); }
[data-skin="glass"] .sx-cta-band-alt { color: var(--steel-600); }
[data-skin="glass"] .sx-cta-band-alt a { color: var(--signal-500); }
[data-skin="glass"] .sx-cta-band-motif { opacity: 0.25; }
/* Footer — light */
[data-skin="glass"] .sx-footer {
background: rgb(255 255 255 / 0.6);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-block-start: 1px solid rgb(46 107 255 / 0.12);
color: var(--steel-600);
}
[data-skin="glass"] .sx-footer-heading { color: var(--night-900); }
[data-skin="glass"] .sx-footer a { color: var(--steel-600); }
[data-skin="glass"] .sx-footer a:hover { color: var(--night-900); }
[data-skin="glass"] .sx-footer-legal { border-block-start-color: rgb(46 107 255 / 0.12); }
/* Chips, badges, gate-flow on light */
[data-skin="glass"] .tech-chip {
color: var(--night-900);
border-color: rgb(46 107 255 / 0.18);
background: rgb(255 255 255 / 0.5);
}
[data-skin="glass"] .tech-chip:hover { border-color: var(--signal-500); color: var(--night-900); }
[data-skin="glass"] .sx-gateflow .sx-gateflow-path { stroke: var(--signal-500); opacity: 0.35; }
[data-skin="glass"] .trust-bullets li { color: var(--steel-600); }
[data-skin="glass"] .hero-texture { opacity: 0; }
[data-skin="glass"] .sx-client-logo { color: var(--steel-600); }
/* Mobile CTA bar */
[data-skin="glass"] .mobile-cta {
background: rgb(255 255 255 / 0.85);
border-block-start: 1px solid rgb(46 107 255 / 0.12);
}
/* Drawer */
[data-skin="glass"] .sx-drawer { background: #F6F9FF; }
[data-skin="glass"] .sx-drawer-nav a { color: var(--night-900); border-block-end-color: rgb(46 107 255 / 0.12); }