/* ========================================================== Repliq marketing — manual dark / light mode Layered on top of main.css + repliq-extra.css. The base styles are almost entirely CSS-variable driven, so dark mode is mostly a matter of redefining those variables when is set (also drives Bootstrap 5.3's own components). A few hardcoded-light spots from the base styles + repliq-extra.css are patched below. ========================================================== */ /* Smooth the switch (skipped until the no-FOUC script marks the page ready) */ html.theme-ready, html.theme-ready body, html.theme-ready .header, html.theme-ready .footer, html.theme-ready .service-card, html.theme-ready .step-card-full, html.theme-ready .compare-card, html.theme-ready .pill-stats span, html.theme-ready .form-card, html.theme-ready .accordion-item, html.theme-ready .accordion-button { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* ---- Dark palette --------------------------------------- */ html[data-bs-theme="dark"] { --background-color: #0b1220; --default-color: #c7d0dd; --heading-color: #f1f5f9; --accent-color: #38bdf8; --surface-color: #131c2e; --contrast-color: #ffffff; --nav-color: #c7d0dd; --nav-hover-color: #38bdf8; --nav-mobile-background-color: #131c2e; --nav-dropdown-background-color: #131c2e; --nav-dropdown-color: #c7d0dd; --nav-dropdown-hover-color: #38bdf8; color-scheme: dark; } /* Section colour presets need dark values too, or a .light-background section stays a bright slab on a dark page. */ html[data-bs-theme="dark"] .light-background { --background-color: #0f1729; --surface-color: #131c2e; } html[data-bs-theme="dark"] .dark-background { --background-color: #060b14; --surface-color: #101a2b; } /* Header sets its own --surface-color in main.css; realign it. */ html[data-bs-theme="dark"] .header { --surface-color: #0f1729; } /* ---- Patches for hardcoded-light rules ------------------ */ /* repliq-extra.css */ html[data-bs-theme="dark"] .step-card-full { background: var(--surface-color); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } html[data-bs-theme="dark"] .step-card-full:hover { box-shadow: 0 20px 45px rgba(0, 0, 0, .55); } html[data-bs-theme="dark"] .pill-stats span { background: var(--surface-color); border-color: color-mix(in srgb, var(--default-color), transparent 85%); color: var(--heading-color); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); } html[data-bs-theme="dark"] .compare-card ul li { color: var(--default-color); } html[data-bs-theme="dark"] .teaser-banner:hover { box-shadow: 0 20px 45px rgba(0, 0, 0, .5); } /* Contact form card inputs (plain inputs — not .form-control) */ html[data-bs-theme="dark"] .contact .form-card .input-wrapper input, html[data-bs-theme="dark"] .contact .form-card .input-wrapper textarea { background: color-mix(in srgb, var(--contrast-color) 6%, transparent); color: var(--default-color); } html[data-bs-theme="dark"] .contact .form-card .input-wrapper input::placeholder, html[data-bs-theme="dark"] .contact .form-card .input-wrapper textarea::placeholder { color: color-mix(in srgb, var(--default-color), transparent 45%); } /* Pricing page (inline styles live in the view; these are the greys) */ html[data-bs-theme="dark"] .price-now span, html[data-bs-theme="dark"] .price-desc { color: color-mix(in srgb, var(--default-color), transparent 25%); } /* Generic card shadows read as invisible-then-heavy on dark; soften. */ html[data-bs-theme="dark"] .services .service-card { box-shadow: 0 10px 40px rgba(0, 0, 0, .4); } html[data-bs-theme="dark"] .services .service-card:hover { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } /* ---- The toggle button in the header ------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 8px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); border-radius: 50px; background: transparent; color: var(--default-color); font-size: 18px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; flex-shrink: 0; } .theme-toggle:hover { color: var(--accent-color); border-color: var(--accent-color); } .theme-toggle .bi-moon-stars, html[data-bs-theme="dark"] .theme-toggle .bi-sun { display: none; } html[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: inline-block; } @media (max-width: 1199px) { .theme-toggle { margin: 0 10px 0 auto; } } /* ---- Header + footer logo (uploaded platform logo) ------ */ .header .logo img, .footer .footer-top .logo img { max-height: 44px; width: auto; margin-right: 0; } .header .logo .logo-dark, .footer .footer-top .logo .logo-dark { display: none; } html[data-bs-theme="dark"] .header .logo .logo-light, html[data-bs-theme="dark"] .footer .footer-top .logo .logo-light { display: none; } html[data-bs-theme="dark"] .header .logo .logo-dark, html[data-bs-theme="dark"] .footer .footer-top .logo .logo-dark { display: inline-block; } /* ---- Secondary "Log In" pill next to Get Started -------- */ .header .btn-login, .header .btn-login:focus { color: var(--default-color); background: transparent; border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%); font-size: 14px; padding: 9px 24px; margin: 0 10px 0 0; border-radius: 50px; white-space: nowrap; transition: color .3s ease, border-color .3s ease, background-color .3s ease; } .header .btn-login:hover { color: var(--accent-color); border-color: var(--accent-color); } @media (max-width: 1200px) { .header .btn-login { order: 2; margin: 0 8px 0 0; padding: 6px 16px; } } /* Phones: the "Get Started" pill overflows the header bar. Drop it here — Pricing is still one tap away via the menu and the hero CTA — and give the logo a little less room so the bar never overflows. */ @media (max-width: 767.98px) { .header .btn-getstarted { display: none !important; } } @media (max-width: 575.98px) { .header .logo img { max-height: 36px; } .header .btn-login { padding: 6px 14px; } }