/* ============================================================ cm-dark.css — Dark mode for concoursmedecine.ma Load AFTER cm-tokens.css and cm-marketing.css. Activated by adding class "dark" to . JS auto-detects system preference + allows manual toggle. ============================================================ */ /* ---- 1. Token flip (warm dark, derived from brand inks) ---- */ html.dark { --paper: #15130C; --ink-50: #1C1912; --ink-100: #242017; --ink-200: #332E21; --ink-300: #4A4432; --ink-400: #8A8371; --ink-500: #A79F8A; --ink-700: #CFC7AE; --ink-800: #E2DBC5; --ink-900: #EFE9D6; --ink-950: #F8F3E2; --bg: var(--paper); --bg-soft: var(--ink-50); --bg-muted: var(--ink-100); --bg-warm: #211B0E; --saffron-50: #211B0E; --fg: var(--ink-900); --fg-secondary: var(--ink-700); --fg-tertiary: var(--ink-500); --fg-muted: var(--ink-400); --border: var(--ink-200); --border-strong: var(--ink-300); --divider: var(--ink-100); } /* ---- 2. The 3D pack boxes are physical objects — keep their original light-world inks so text on saffron stays dark ---- */ html.dark .lp-float { color-scheme: light only; } html.dark .lp-face, html.dark .lp-face * { --ink-950: #0B0B0C; --ink-900: #161618; --cream-100: #FFF1C4; } /* ---- 3. Chrome that hardcodes white ---- */ html.dark .cm-nav { background: rgba(21,19,12,0.9) !important; } html.dark .cm-nav--scrolled { box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; } /* dark "inverse" button: token flip makes its bg light, so text must be dark */ html.dark .cm-btn--dark { color: #15130C; } html.dark .cm-btn--dark:hover { background: var(--ink-800); color: #15130C; } html.dark .cm-btn--ghost { color: var(--ink-900); border-color: var(--ink-700); } html.dark .cm-btn--ghost:hover { background: var(--ink-900); color: #15130C; } /* pack switcher tiles */ html.dark .cm-pack-tile { background: var(--ink-100); } html.dark .cm-pack-tile img { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); } /* white card surfaces → warm dark cards */ html.dark .cm-plan { background: var(--ink-100); } html.dark .cm-plan:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.5); } html.dark .cm-plan.is-featured { box-shadow: 0 24px 60px rgba(217,154,11,0.14); } html.dark .cm-faq__list { background: var(--ink-100); } html.dark .cm-form { background: var(--ink-100); box-shadow: none; } html.dark .cm-field input, html.dark .cm-field textarea { background: var(--ink-50); border-color: var(--border); color: var(--fg); } html.dark .cm-pill-card { background: var(--ink-100); } /* hero floating chips (were white) */ html.dark .cm-hero__chip { background: #262117 !important; border: 1px solid #37301F; color: #F8F3E2 !important; box-shadow: 0 10px 26px rgba(0,0,0,0.5) !important; } /* ---- 4. Storytelling section (.cm-story) ---- */ html.dark .cm-story { background: linear-gradient(180deg, #211B0E 0%, #15130C 100%) !important; } html.dark .cm-story__col, html.dark .cm-story__col--dream, html.dark .cm-story__col--how { background: #242017 !important; border: 1px solid #332E21 !important; box-shadow: none !important; } html.dark .cm-story__col p { color: #CFC7AE; } html.dark .cm-story__col strong { color: #F8F3E2; } html.dark .cm-story__heading { color: #F8F3E2; } /* the blue accent line — brighten for dark bg */ html.dark .cm-story__inner [style*="#4054b2"] { color: #8FA1E8 !important; } html.dark .cm-story__quote { background: #242017 !important; border-color: #332E21 !important; color: #CFC7AE; } html.dark .cm-story__quote cite { color: #A79F8A; } html.dark .cm-story__stat-n { color: #F0B419 !important; } html.dark .cm-story__stat-t { color: #A79F8A; } html.dark .cm-story__cta-text { color: #CFC7AE; } /* ---- 5. Activation steps + mock browser windows (.al-*) ---- */ html.dark .al-steps__title { color: var(--ink-950); } html.dark .al-steps__sub, html.dark .al-step__desc { color: var(--fg-secondary); } html.dark .al-step__title { color: var(--ink-950); } html.dark .al-eyebrow { color: var(--fg-tertiary); } html.dark .al-step__num { border-color: var(--paper) !important; } html.dark .al-step--1 .al-step__chip { background: rgba(240,180,25,0.16); color: var(--saffron-300); } html.dark .al-step--2 .al-step__chip { background: rgba(209,75,26,0.18); color: #F09A78; } html.dark .al-step--3 .al-step__chip { background: rgba(63,163,77,0.18); color: #7BCB86; } html.dark .al-mock { background: var(--ink-100); border-color: var(--border); box-shadow: 0 22px 50px rgba(0,0,0,0.45); } html.dark .al-step:hover .al-mock { box-shadow: 0 30px 60px rgba(0,0,0,0.6); } html.dark .al-mock__bar { background: var(--ink-50); border-color: var(--border); } html.dark .al-mock__url { background: var(--ink-100); color: var(--fg-tertiary); } /* iframe pages are light — a thin divider keeps the seam clean */ html.dark .al-mock__view { background: #FFF8E1; } html.dark .al-mock__link { background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.55)); } html.dark .al-mock__link span { background: var(--saffron-400); color: #141208; } html.dark .al-proof__txt { color: var(--fg-secondary); } html.dark .al-proof__txt b { color: var(--ink-950); } html.dark .al-proof__av { border-color: var(--paper) !important; } /* testimonial cards (index.php uses inline background:#fff) */ html.dark .cm-testimonials > div { background: var(--ink-100) !important; border-color: var(--border) !important; } html.dark .cm-testimonials > div p { color: var(--fg-secondary) !important; } html.dark .cm-testimonials > div [style*="font-weight:700"] { color: var(--ink-950) !important; } /* footer was already dark — pin its original light-on-dark values */ html.dark .cm-footer { background: #0E0C08; color: rgba(255,255,255,0.8); } html.dark .cm-footer__cols a { color: rgba(255,255,255,0.85); } html.dark .cm-footer h3, html.dark .cm-footer h5 { color: rgba(255,255,255,0.55); } html.dark .cm-footer__bottom { color: rgba(255,255,255,0.5); } html.dark .cm-logo--footer .cm-logo__word { color: #fff; } html.dark .cm-logo__mark { color: #0B0B0C; } /* scroll-top button */ html.dark #scroll-top { background: var(--ink-200); color: var(--ink-800); } html.dark #scroll-top:hover { background: var(--ink-300); } /* dark-mode toggle button */ .cm-theme-toggle { width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink-700, #4A4432); transition: color .2s; } .cm-theme-toggle:hover { color: var(--ink-950, #0B0B0C); } html.dark .cm-theme-toggle { color: var(--ink-700); } html.dark .cm-theme-toggle:hover { color: var(--ink-950); } .cm-theme-toggle svg { width: 20px; height: 20px; } .cm-theme-toggle .icon-sun { display: none; } .cm-theme-toggle .icon-moon { display: block; } html.dark .cm-theme-toggle .icon-sun { display: block; } html.dark .cm-theme-toggle .icon-moon { display: none; }