/* SLSC v2 — Dark theme layer Activated by [data-theme="dark"] on . Light design is untouched. Red brand accent stays constant; only neutral tokens + hardcoded #fff card/panel/input surfaces are re-mapped. WCAG AA verified. */ :root { color-scheme: light; } html { transition: background-color .3s ease, color .3s ease; } [data-theme="dark"] { color-scheme: dark; --bg: #0b0f14; --bg-soft: #12171e; /* alt sections */ --surface: #1a2029; /* cards / panels */ --bg-deep: #05080b; /* hero / intentionally-dark sections */ --bg-deep-2: #0e131a; --ink: #f3f5f8; --ink-2: #cdd3db; --ink-mute: #99a2af; --ink-faint: #8b95a3; --rule: rgba(255,255,255,0.12); --rule-2: rgba(255,255,255,0.20); --rule-on-dark: rgba(255,255,255,0.14); --red-soft: rgba(214,31,31,0.18); /* Adaptive status tokens for the dark theme */ --ok: #4cc88a; --ok-soft: rgba(76,200,138,0.14); --info: #6fa8ff; --info-soft: rgba(111,168,255,0.14); --warn: #e2a24a; --warn-soft: rgba(226,162,74,0.14); --danger: var(--red-on-dark); --danger-soft: rgba(214,31,31,0.22); --neutral-soft: rgba(255,255,255,0.06); } /* ---- Surface re-map: cards, panels, bars that hardcode #fff ---- */ [data-theme="dark"] .slsc-nav, [data-theme="dark"] .slsc-nav__mobile-panel, [data-theme="dark"] .slsc-mv__card, [data-theme="dark"] .slsc-flow, [data-theme="dark"] .slsc-svcdet-card, [data-theme="dark"] .slsc-covmap, [data-theme="dark"] .slsc-partners__strip, [data-theme="dark"] .slsc-pillar, [data-theme="dark"] .slsc-subcard, [data-theme="dark"] .slsc-why__card, [data-theme="dark"] .slsc-svc__card, [data-theme="dark"] .slsc-svc2__card, [data-theme="dark"] .slsc-prjcard, [data-theme="dark"] .ewaa-table, [data-theme="dark"] .ewaa-table__row { background: var(--surface); border-color: var(--rule); } /* Service hover panel + its parts */ [data-theme="dark"] .slsc-svc2__panel { background: var(--surface); } [data-theme="dark"] .slsc-svc2__label, [data-theme="dark"] .slsc-svc2__panel-label { background: var(--bg-soft); color: var(--ink); } [data-theme="dark"] .slsc-svc2__panel-btn { background: var(--bg-soft); color: var(--ink); } [data-theme="dark"] .slsc-svc2__panel-btn:hover { background: var(--red); color: #fff; } /* Card side borders that use the light rule-2 */ [data-theme="dark"] .slsc-svc__card { border-color: var(--rule); } [data-theme="dark"] .slsc-svc__grid { border-color: var(--rule); } /* Partners logos read better slightly lifted on dark */ [data-theme="dark"] .slsc-partners__logos img { filter: brightness(0) invert(1) opacity(0.7); } [data-theme="dark"] .slsc-partners__logos img:hover { filter: brightness(0) invert(1) opacity(1); } /* ---- Form controls ---- */ [data-theme="dark"] .slsc-form__field input, [data-theme="dark"] .slsc-form__field select, [data-theme="dark"] .slsc-form__field textarea, [data-theme="dark"] .ewaa-search__form, [data-theme="dark"] .ewaa-search__form input { background: var(--bg-soft); border-color: var(--rule-2); color: var(--ink); } [data-theme="dark"] .slsc-form__field input::placeholder, [data-theme="dark"] .slsc-form__field textarea::placeholder, [data-theme="dark"] .ewaa-search__form input::placeholder { color: var(--ink-faint); } /* Map controls */ [data-theme="dark"] .slsc-locmap .leaflet-control-zoom a { background: var(--surface); color: var(--ink); border-color: var(--rule); } /* Ghost button reads on dark page */ [data-theme="dark"] .btn--ghost { color: var(--ink); border-color: var(--ink); } [data-theme="dark"] .btn--ghost:hover { background: var(--ink); color: var(--bg); } /* ---- Red text/links/kickers use the AA-safe lighter red on dark ---- */ [data-theme="dark"] .kicker, [data-theme="dark"] .slsc-hero__kicker, [data-theme="dark"] .slsc-pillar__kicker, [data-theme="dark"] .slsc-flow__kicker, [data-theme="dark"] .slsc-mv__kicker, [data-theme="dark"] .slsc-mv__card--accent .slsc-mv__kicker, [data-theme="dark"] .login-brand__kicker, [data-theme="dark"] .form-group__legend, [data-theme="dark"] h1 em, [data-theme="dark"] h2 em, [data-theme="dark"] .slsc-compliance__head h2 em, [data-theme="dark"] .portal-topbar__crumb a { color: var(--red-on-dark); } [data-theme="dark"] .kicker::before, [data-theme="dark"] .slsc-hero__kicker::before { background: var(--red-on-dark); } /* ---- Portal theme toggle button (sidebar / login) ---- */ .portal-theme-btn, .login-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); cursor: pointer; transition: color .2s, background .2s; flex-shrink: 0; } .portal-theme-btn:hover, .login-theme-btn:hover { color: #fff; background: rgba(255,255,255,0.12); } .portal-theme-btn svg, .login-theme-btn svg { width: 16px; height: 16px; } .login-theme-btn { background: rgba(0,0,0,0.06); color: #0e0f10; } [data-theme="dark"] .login-theme-btn { background: rgba(255,255,255,0.10); color: #fff; } .portal-nav__foot { display: flex; gap: 8px; align-items: center; margin: auto 14px 0; } .portal-nav__foot .portal-nav__lang { flex: 1; margin: 0; } .portal-theme-btn .theme-ico-sun, .login-theme-btn .theme-ico-sun { display: none; } [data-theme="dark"] .portal-theme-btn .theme-ico-moon, [data-theme="dark"] .login-theme-btn .theme-ico-moon { display: none; } [data-theme="dark"] .portal-theme-btn .theme-ico-sun, [data-theme="dark"] .login-theme-btn .theme-ico-sun { display: inline; } /* ---- Theme toggle button ---- */ .slsc-nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,0.75); border-radius: 4px; transition: color .2s, background .2s; } .slsc-nav__theme:hover { color: #fff; background: rgba(255,255,255,0.10); } .slsc-nav__theme svg { width: 17px; height: 17px; } @media (max-width: 640px) { .slsc-nav__theme { width: 26px; height: 26px; } .slsc-nav__theme svg { width: 15px; height: 15px; } }