/* File: public/css/custom/dark.css | Managed for production maintainability. */ /* ========================= DigiSync - Dark Theme v2 Active via: ========================= */ html.dark { color-scheme: dark; /* Palette */ --bg: #0b1220; /* page */ --surface: #0f172a; /* sections */ --card: #111c33; /* cards */ --muted: #94a3b8; /* text muted */ --text: #e5e7eb; /* text main */ --title: #f8fafc; /* titles */ --border: rgba(148,163,184,.18); --shadow: 0 12px 35px rgba(0,0,0,.45); /* Accent bleu */ --primary: #3b82f6; --primary-700: #1d4ed8; } html.dark #icon-sun { transform: rotate(12deg) scale(1.03); } /* Fond global ? dark theme */ html.dark body { background: radial-gradient( 1800px 900px at 50% -20%, rgba(59,130,246,0.08), transparent 65% ), linear-gradient( 180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 40% ), var(--bg); color: var(--text); } /* Retire les patterns de fond trop visibles en dark */ html.dark [style*="pattern-white.svg"] { background-image: none !important; } /* Sections */ html.dark .bg-white { background-color: var(--surface) !important; } /* Cartes */ html.dark .bg-coolGray-50, html.dark .bg-coolGray-100 { background-color: var(--card) !important; } /* Borders */ html.dark .border, html.dark .border-coolGray-100, html.dark .border-coolGray-200, html.dark .border-coolGray-300 { border-color: var(--border) !important; } /* Shadows */ html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-sm { box-shadow: var(--shadow) !important; } /* Texte */ html.dark .text-coolGray-900, html.dark .text-coolGray-800 { color: var(--title) !important; } html.dark .text-coolGray-700, html.dark .text-coolGray-600, html.dark .text-coolGray-500 { color: var(--text) !important; } html.dark .text-coolGray-400 { color: var(--muted) !important; } /* Badges / petits labels */ html.dark .bg-blue-100 { background: rgba(59,130,246,.16) !important; } html.dark .text-blue-500 { color: #93c5fd !important; } html.dark .bg-indigo-100 { background: rgba(67,56,202,.28) !important; } html.dark .text-indigo-500 { color: #c7d2fe !important; } /* Navbar (si tu as bg sombre d?j?, on harmonise) */ html.dark header, html.dark nav { background: rgba(15, 23, 42, .72) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Liens */ html.dark a:hover { filter: brightness(1.08); } /* Boutons */ html.dark .bg-blue-500 { background-color: var(--primary) !important; } html.dark .hover\:bg-blue-800:hover, html.dark .bg-blue-800 { background-color: var(--primary-700) !important; } html.dark .focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.35) !important; } /* Theme toggle: avoid bright hover background in dark mode */ html.dark #theme-toggle, html.dark #theme-toggle-mobile { background-color: transparent !important; } html.dark #theme-toggle:hover, html.dark #theme-toggle-mobile:hover { background-color: rgba(255,255,255,.10) !important; } /* Theme toggle hover (dark mode) */ html.dark #theme-toggle.theme-toggle-desktop-hover:hover, html.dark #theme-toggle-mobile.theme-toggle-mobile-hover:hover { background-color: rgba(255,255,255,.10) !important; } /* Mobile menu links: prevent bright white tap/hover flash in dark mode */ html.dark .navbar-menu a, html.dark .navbar-menu button { -webkit-tap-highlight-color: transparent; } html.dark .navbar-menu .hover\:bg-coolGray-50:hover, html.dark .navbar-menu .hover\:bg-coolGray-50:focus, html.dark .navbar-menu .hover\:bg-coolGray-50:active { background-color: rgba(255,255,255,.10) !important; } /* Boutons “blancs” en dark -> deviennent des surfaces */ html.dark .bg-white.hover\:bg-coolGray-100, html.dark .bg-white { background-color: rgba(255,255,255,.06) !important; } html.dark .bg-white.hover\:bg-coolGray-100:hover { background-color: rgba(255,255,255,.10) !important; } /* Boutons bord?s gris */ html.dark .border-coolGray-200 { border-color: var(--border) !important; } html.dark .text-coolGray-800 { color: var(--text) !important; } /* Inputs */ html.dark input, html.dark textarea, html.dark select { background-color: rgba(255,255,255,.04) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Contact: sujet dropdown en dark */ html.dark .contact-select { background-color: rgba(255,255,255,.04) !important; color: var(--text) !important; border-color: var(--border) !important; } html.dark .contact-select::placeholder { color: var(--muted) !important; } html.dark .contact-select-menu { background: rgba(15, 23, 42, 0.96) !important; border-color: var(--border) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } html.dark .contact-select-menu button { color: var(--text) !important; } html.dark .contact-select-menu button:hover { background-color: rgba(255,255,255,.08) !important; color: var(--title) !important; } /* Petites ic?nes / images monochromes si besoin */ html.dark img { opacity: .98; } /* Titres / textes "darkCoolGray" (Shuffle) */ html.dark .text-darkCoolGray-900, html.dark .text-darkCoolGray-800, html.dark .text-darkCoolGray-700 { color: var(--title) !important; } html.dark .text-darkCoolGray-600, html.dark .text-darkCoolGray-500, html.dark .text-darkCoolGray-400 { color: var(--muted) !important; } /* Fix hover:bg-white en dark => hover "card" (pas blanc) */ html.dark .hover\:bg-white:hover { background-color: rgba(255,255,255,.06) !important; /* ou var(--card) */ } /* Bonus : hover:shadow-xl un peu moins violent */ html.dark .hover\:shadow-xl:hover { box-shadow: 0 16px 45px rgba(0,0,0,.55) !important; } /* Mobile burger: avoid bright white tile in dark mode */ @media (max-width: 1279px) { html.dark .navbar-burger .text-coolGray-50 { color: rgba(255,255,255,.12) !important; } html.dark .navbar-burger .text-coolGray-500 { color: #93c5fd !important; } } /* ===== Switch (track) en dark mode ===== */ html.dark .bg-blue-500.w-20.h-9 { background: linear-gradient( 180deg, #1e3a8a 0%, #1e40af 100% ) !important; box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), inset 0 -1px 2px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.55); } /* Hover plus subtil */ html.dark .bg-blue-500.w-20.h-9:hover { background: linear-gradient( 180deg, #1e40af 0%, #2563eb 100% ) !important; } /* ===== Le rond blanc ===== */ html.dark .dot { background-color: #f8fafc !important; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(0,0,0,0.15); } /* Feature cards dark in-view shadow */ html.dark .feature-scroll-card.is-inview { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50) !important; } /* Desktop dark hover shadows for offer cards and testimonials */ @media (min-width: 768px) { html.dark .pricing-slide > div:hover, html.dark .testimonials-slide > div:hover { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50) !important; } }