/* ========================================================================== Theme — light / dark mode overrides Toggle via data-theme on ========================================================================== */ /* -------------------------------------------------------------------------- Theme toggle button -------------------------------------------------------------------------- */ .header__controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header__theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-alt); color: var(--color-text); cursor: pointer; flex-shrink: 0; transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--btn-transition); } .header__theme-toggle:hover { color: var(--color-primary); border-color: rgba(30, 111, 217, 0.28); background-color: rgba(30, 111, 217, 0.06); } .header__theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .header__theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-theme="light"] .header__theme-icon--sun, [data-theme="dark"] .header__theme-icon--moon { display: none; } /* -------------------------------------------------------------------------- Dark mode — component overrides -------------------------------------------------------------------------- */ [data-theme="dark"] .hero__mockup { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-surface-inset) inset; } [data-theme="dark"] .hero__mockup-sidebar { background-color: var(--color-mockup-surface); } [data-theme="dark"] .featurepage__workflow { background: var(--color-panel-gradient-md); border-color: rgba(30, 111, 217, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--color-surface-inset) inset; } [data-theme="dark"] .featurepage__workflow-section { border-block-color: rgba(30, 111, 217, 0.2); } [data-theme="dark"] .featurepage__workflow-track { background: var(--color-workflow-track-bg); border-color: rgba(30, 111, 217, 0.15); } [data-theme="dark"] .featurepage__workflow-card { background: var(--color-workflow-card-bg); border-color: rgba(30, 111, 217, 0.15); } [data-theme="dark"] .featurepage__section .featurepage__workflow-track { background: var(--color-workflow-track-bg); } [data-theme="dark"] .portals-index__mobile-card, [data-theme="dark"] .portals-index__flow-panel { border-color: rgba(30, 111, 217, 0.2); box-shadow: var(--shadow-md); } [data-theme="dark"] .modules__card, [data-theme="dark"] .why__card, [data-theme="dark"] .home-page .institutions__card, [data-theme="dark"] .home-page .integrations__card { border-color: var(--color-border); } [data-theme="dark"] .features-index__mockup-tile, [data-theme="dark"] .features-index__mockup-wide, [data-theme="dark"] .features-index__flow-module, [data-theme="dark"] .features-index__model-card, [data-theme="dark"] .features-index__addon-card, [data-theme="dark"] .modules-index__stat-item, [data-theme="dark"] .modules-index__comparison-card, [data-theme="dark"] .solutions__structure-card, [data-theme="dark"] .solutions__highlight-card, [data-theme="dark"] .solutions__model-card, [data-theme="dark"] .portals__card, [data-theme="dark"] .institutions__card, [data-theme="dark"] .integrations__card, [data-theme="dark"] .crm__step, [data-theme="dark"] .hiw-index__service-card, [data-theme="dark"] .hiw-index__stat, [data-theme="dark"] .hiw__step-card, [data-theme="dark"] .about-index__stat, [data-theme="dark"] .about-index__pillar, [data-theme="dark"] .about-index__story-body, [data-theme="dark"] .careers-page__department-card, [data-theme="dark"] .careers-page__perk, [data-theme="dark"] .sitemap-page__group, [data-theme="dark"] .portals-index__mobile-card, [data-theme="dark"] .portals-index__flow-panel, [data-theme="dark"] .featurepage__portal-card, [data-theme="dark"] .featurepage__highlight-card, [data-theme="dark"] .solutionpage__module-card, [data-theme="dark"] .features__faq-item, [data-theme="dark"] .inquiry-page__form-card, [data-theme="dark"] .inquiry-page__info-card, [data-theme="dark"] .inquiry-page__hero-meta-item, [data-theme="dark"] .inquiry-page__quick-action:not(.inquiry-page__quick-action--primary), [data-theme="dark"] .legal-page__card { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .features-index__mockup-tile, [data-theme="dark"] .features-index__model-card, [data-theme="dark"] .modules-index__comparison-card { background: var(--color-surface); } [data-theme="dark"] .features-index__flow-panel { background: var(--color-panel-gradient); border-color: rgba(30, 111, 217, 0.2); } [data-theme="dark"] .portals-index__mobile-phone-tile { background: rgba(30, 41, 59, 0.88); border-color: rgba(30, 111, 217, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .portals-index__mobile-app-stat, [data-theme="dark"] .portals-index__mobile-app-feed-item { background: rgba(30, 41, 59, 0.9); border-color: rgba(30, 111, 217, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .portals-index__mobile-app-portal--active { background: var(--color-surface); } [data-theme="dark"] .portals-index__mobile-app-portals { background: rgba(30, 111, 217, 0.12); border-color: rgba(30, 111, 217, 0.16); } [data-theme="dark"] .modules__card, [data-theme="dark"] .why__card { background: var(--color-card-gradient); } [data-theme="dark"] .modules__nav-btn { background-color: var(--color-nav-btn-bg); border-color: rgba(30, 111, 217, 0.35); } [data-theme="dark"] .body__footer { background: linear-gradient(180deg, #0a0f16 0%, #0f172a 100%); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] textarea.form-control { background-color: var(--color-input-bg); border-color: var(--color-input-border); color: var(--color-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] textarea.form-control:focus { background-color: var(--color-input-bg); border-color: var(--color-primary); color: var(--color-text); box-shadow: 0 0 0 0.2rem rgba(30, 111, 217, 0.2); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] textarea.form-control::placeholder { color: var(--color-text-muted); } [data-theme="dark"] .form-label { color: var(--color-text); } [data-theme="dark"] .header__hamburger-line { background-color: var(--color-text); } [data-theme="dark"] .header__nav--open { background-color: #0f1419; border-right-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .header__dropdown-menu { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .header__dropdown-item:hover, [data-theme="dark"] .header__mega-link:hover { background-color: var(--color-bg-alt); } [data-theme="dark"] .pagehero__breadcrumb-item, [data-theme="dark"] .pagehero__breadcrumb-item a { color: var(--color-text-muted); } [data-theme="dark"] .pagehero__breadcrumb-item a:hover { color: var(--color-primary); } [data-theme="dark"] .trust__tag { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .cta__card, [data-theme="dark"] .features__cta-card { border: 1px solid rgba(30, 111, 217, 0.22); } [data-theme="dark"] .cta__bg-blob--one { background: rgba(30, 111, 217, 0.12); } [data-theme="dark"] .cta__bg-blob--two { background: rgba(99, 102, 241, 0.18); } [data-theme="dark"] .cta__bg-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); }