/* ========================================================= Nuqtat Tahwul — Dark Mode Activated by `data-theme="dark"` on . Design intent: warm, professional dark — NOT sad/cold. Built on the existing slate-900/800 tokens that already power the footer, so the dark theme reads as a natural extension of the brand rather than an inverted afterthought. ========================================================= */ [data-theme="dark"] { /* ---- Page surfaces (canonical slate scale, warmed slightly) ---- */ --nt-bg: #0F172A; /* slate-900 — same as footer in light mode */ --nt-bg-card: #1E293B; /* slate-800 — card surface */ --nt-bg-elevated: #27374D; /* lifted card / hover */ --nt-bg-footer: #0B1322; /* deeper than page bg for footer pop */ /* ---- Text ---- */ --nt-text: #F1F5F9; /* slate-100 — readable headings */ --nt-text-body: #CBD5E1; /* slate-300 — body copy */ --nt-text-muted: #94A3B8; /* slate-400 — muted captions */ /* ---- Borders + dividers ---- */ --nt-border: #334155; /* slate-700 */ /* ---- Slate scale gets inverted so direct uses stay legible. ---- */ --nt-slate-50: #1E293B; --nt-slate-100: #243047; --nt-slate-200: #334155; --nt-slate-300: #475569; --nt-slate-400: #64748B; --nt-slate-500: #94A3B8; --nt-slate-600: #CBD5E1; --nt-slate-700: #E2E8F0; --nt-slate-800: #F1F5F9; --nt-slate-900: #F8FAFC; /* Soft pastels — keep low-alpha tints so accent dots/borders read as * brand variety (not depressing flat gray cards). */ --nt-soft-mint: rgba(16,185,129,.16); --nt-soft-peach: rgba(255,138,76,.16); --nt-soft-lavender: rgba(139,92,246,.18); --nt-soft-rose: rgba(236,72,153,.18); --nt-soft-yellow: rgba(245,158,11,.16); --nt-soft-sky: rgba(59,130,246,.18); /* Brand still pops — only desaturate the deepest brand levels. */ --nt-primary-50: rgba(16,185,129,.10); --nt-primary-100: rgba(16,185,129,.18); /* Shadows — soften so they don't smudge over dark surfaces. */ --nt-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --nt-shadow: 0 4px 12px rgba(0,0,0,.3); --nt-shadow-lg: 0 10px 30px rgba(0,0,0,.45); --nt-shadow-xl: 0 20px 50px rgba(0,0,0,.55); } /* ========================================================= 1. PAGE & GLOBAL SURFACES ========================================================= */ [data-theme="dark"] body { background: var(--nt-bg); color: var(--nt-text); } /* Header — dark gloss instead of white blur */ [data-theme="dark"] .nt-header { background: rgba(15, 23, 42, 0.85); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--nt-border); } /* Drawer (mobile menu) */ [data-theme="dark"] .nt-drawer__panel { background: var(--nt-bg-card); color: var(--nt-text); border-inline-end: 1px solid var(--nt-border); } [data-theme="dark"] .nt-drawer__menu a, [data-theme="dark"] .nt-header__menu a { color: var(--nt-text-body); } [data-theme="dark"] .nt-drawer__menu a:hover, [data-theme="dark"] .nt-header__menu a:hover { color: var(--nt-primary-300); } /* Hero gradient — warmer dark variant of the light hero */ [data-theme="dark"] .nt-hero, [data-theme="dark"] .nt-section--gradient { background: linear-gradient(135deg, #0F172A 0%, #14283A 50%, #0F1F2E 100%); } [data-theme="dark"] .nt-hero::before { background: rgba(16,185,129,.18); opacity: .6; } [data-theme="dark"] .nt-hero::after { background: rgba(37,99,235,.18); opacity: .6; } /* Auth pages — same warm dark gradient */ [data-theme="dark"] .nt-auth { background: linear-gradient(135deg, #0F172A 0%, #14283A 100%); } /* Stats strip */ [data-theme="dark"] .nt-stats { background: var(--nt-bg-card); border-block-color: var(--nt-border); } /* CTA strip — keep brand gradient but invert button to dark */ [data-theme="dark"] .nt-cta-strip .nt-btn--primary { background: var(--nt-bg-card); color: var(--nt-primary-300); } /* Footer — push it slightly deeper than the page bg for separation */ [data-theme="dark"] .nt-footer { background: var(--nt-bg-footer); } /* Section badges */ [data-theme="dark"] .nt-section-head__badge, [data-theme="dark"] .nt-hero__badge { background: var(--nt-bg-card); color: var(--nt-primary-300); border: 1px solid rgba(16,185,129,.25); box-shadow: none; } /* ========================================================= 2. UNIFIED CARD SURFACE Every card-shaped component reads from one card variable. Color variants keep their identity through ICON / BORDER accents instead of full-bleed pastel backgrounds. ========================================================= */ [data-theme="dark"] .nt-card, [data-theme="dark"] .nt-program-card, [data-theme="dark"] .nt-program-card__body, [data-theme="dark"] .nt-service-card, [data-theme="dark"] .nt-comfort-card, [data-theme="dark"] .nt-testimonial, [data-theme="dark"] .nt-reason, [data-theme="dark"] .nt-team-card, [data-theme="dark"] .nt-program-benefits, [data-theme="dark"] .nt-program-buy, [data-theme="dark"] .nt-curriculum__item, [data-theme="dark"] .nt-dash__side, [data-theme="dark"] .nt-kpi, [data-theme="dark"] .nt-course-row, [data-theme="dark"] .nt-blog-card, [data-theme="dark"] .nt-toc, [data-theme="dark"] .nt-faq__item, [data-theme="dark"] .nt-auth__card, [data-theme="dark"] .nt-program-hero, [data-theme="dark"] .nt-section--alt { background: var(--nt-bg-card); border-color: var(--nt-border); color: var(--nt-text); box-shadow: var(--nt-shadow-sm); } [data-theme="dark"] .nt-card:hover, [data-theme="dark"] .nt-program-card:hover, [data-theme="dark"] .nt-service-card:hover, [data-theme="dark"] .nt-comfort-card:hover, [data-theme="dark"] .nt-testimonial:hover, [data-theme="dark"] .nt-team-card:hover, [data-theme="dark"] .nt-blog-card:hover { background: var(--nt-bg-elevated); box-shadow: var(--nt-shadow-lg); } /* Program card — tinted body variants → unified, accent stays in border */ [data-theme="dark"] .nt-program-card--mint .nt-program-card__body, [data-theme="dark"] .nt-program-card--lavender .nt-program-card__body, [data-theme="dark"] .nt-program-card--peach .nt-program-card__body, [data-theme="dark"] .nt-program-card--rose .nt-program-card__body { background: var(--nt-bg-card); } [data-theme="dark"] .nt-program-card--mint { box-shadow: 0 0 0 1px rgba(16,185,129,.18) inset; } [data-theme="dark"] .nt-program-card--lavender { box-shadow: 0 0 0 1px rgba(139,92,246,.20) inset; } [data-theme="dark"] .nt-program-card--peach { box-shadow: 0 0 0 1px rgba(255,138,76,.18) inset; } [data-theme="dark"] .nt-program-card--rose { box-shadow: 0 0 0 1px rgba(236,72,153,.20) inset; } /* Service card — tinted variants → unified card with tinted icon halo */ [data-theme="dark"] .nt-service-card--lavender, [data-theme="dark"] .nt-service-card--mint, [data-theme="dark"] .nt-service-card--peach, [data-theme="dark"] .nt-service-card--rose { background: var(--nt-bg-card); } [data-theme="dark"] .nt-service-card__icon { background: var(--nt-bg-elevated); box-shadow: 0 0 0 1px var(--nt-border); } [data-theme="dark"] .nt-service-card--lavender .nt-service-card__icon { box-shadow: 0 0 0 1px rgba(139,92,246,.32); color: #C4B5FD; } [data-theme="dark"] .nt-service-card--mint .nt-service-card__icon { box-shadow: 0 0 0 1px rgba(16,185,129,.32); color: #6EE7B7; } [data-theme="dark"] .nt-service-card--peach .nt-service-card__icon { box-shadow: 0 0 0 1px rgba(255,138,76,.32); color: #FDBA74; } [data-theme="dark"] .nt-service-card--rose .nt-service-card__icon { box-shadow: 0 0 0 1px rgba(236,72,153,.32); color: #F9A8D4; } /* Comfort card (homepage articles grid) — same approach */ [data-theme="dark"] .nt-comfort-card--mint, [data-theme="dark"] .nt-comfort-card--lavender, [data-theme="dark"] .nt-comfort-card--peach, [data-theme="dark"] .nt-comfort-card--rose, [data-theme="dark"] .nt-comfort-card--yellow, [data-theme="dark"] .nt-comfort-card--sky { background: var(--nt-bg-card); } [data-theme="dark"] .nt-comfort-card--mint { box-shadow: 0 0 0 1px rgba(16,185,129,.18) inset, var(--nt-shadow-sm); } [data-theme="dark"] .nt-comfort-card--lavender { box-shadow: 0 0 0 1px rgba(139,92,246,.20) inset, var(--nt-shadow-sm); } [data-theme="dark"] .nt-comfort-card--peach { box-shadow: 0 0 0 1px rgba(255,138,76,.18) inset, var(--nt-shadow-sm); } [data-theme="dark"] .nt-comfort-card--rose { box-shadow: 0 0 0 1px rgba(236,72,153,.20) inset, var(--nt-shadow-sm); } [data-theme="dark"] .nt-comfort-card--yellow { box-shadow: 0 0 0 1px rgba(245,158,11,.20) inset, var(--nt-shadow-sm); } [data-theme="dark"] .nt-comfort-card--sky { box-shadow: 0 0 0 1px rgba(59,130,246,.20) inset, var(--nt-shadow-sm); } [data-theme="dark"] .nt-comfort-card__media { background: var(--nt-bg-elevated); } /* Stat icons — keep tinted halos, dim the brightness */ [data-theme="dark"] .nt-stat__icon { background: var(--nt-soft-rose); color: #F9A8D4; } [data-theme="dark"] .nt-stat:nth-child(2) .nt-stat__icon { background: var(--nt-soft-peach); color: #FDBA74; } [data-theme="dark"] .nt-stat:nth-child(3) .nt-stat__icon { background: var(--nt-soft-lavender); color: #C4B5FD; } [data-theme="dark"] .nt-stat:nth-child(4) .nt-stat__icon { background: var(--nt-primary-100); color: #6EE7B7; } /* Curriculum / lesson rows */ [data-theme="dark"] .nt-curriculum__head { background: var(--nt-bg-card); } [data-theme="dark"] .nt-curriculum__body { background: rgba(255,255,255,.02); border-top: 1px solid var(--nt-border); } [data-theme="dark"] .nt-curriculum__num { background: var(--nt-bg-elevated); color: var(--nt-primary-300); } /* Tabs (auth + dashboard) */ [data-theme="dark"] .nt-auth__tabs { background: var(--nt-bg-elevated); } [data-theme="dark"] .nt-auth__tabs a { color: var(--nt-text-muted); } [data-theme="dark"] .nt-auth__tabs a:hover { color: var(--nt-text); } [data-theme="dark"] .nt-auth__tabs a.is-active { background: var(--nt-bg-card); color: var(--nt-primary-300); box-shadow: 0 2px 6px rgba(0,0,0,.35); } /* ========================================================= 3. INPUTS, FILTERS, PAGINATION ========================================================= */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .nt-input, [data-theme="dark"] .nt-field input, [data-theme="dark"] .nt-field textarea, [data-theme="dark"] .nt-field select { background: var(--nt-bg); color: var(--nt-text); border-color: var(--nt-border); } [data-theme="dark"] .nt-field input, [data-theme="dark"] .nt-field textarea, [data-theme="dark"] .nt-field select { background: var(--nt-bg-elevated); } [data-theme="dark"] .nt-field input:focus, [data-theme="dark"] .nt-field textarea:focus, [data-theme="dark"] .nt-field select:focus { background: var(--nt-bg-elevated); border-color: var(--nt-primary-500); box-shadow: 0 0 0 4px rgba(16,185,129,.15); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--nt-slate-400); opacity: 1; } /* Filter pills, blog filters, pagination */ [data-theme="dark"] .nt-filters, [data-theme="dark"] .nt-blog-filters { background: var(--nt-bg-card); border: 1px solid var(--nt-border); box-shadow: var(--nt-shadow-sm); } [data-theme="dark"] .nt-pill, [data-theme="dark"] .nt-pagination .page-numbers { background: var(--nt-bg-card); border-color: var(--nt-border); color: var(--nt-text-body); } [data-theme="dark"] .nt-pill:hover, [data-theme="dark"] .nt-pagination .page-numbers:hover { background: var(--nt-bg-elevated); color: var(--nt-text); border-color: var(--nt-primary-500); } [data-theme="dark"] .nt-pill.is-active, [data-theme="dark"] .nt-pagination .page-numbers.current { background: var(--nt-primary-500); color: #fff; border-color: var(--nt-primary-500); } /* Testimonials slider arrows */ [data-theme="dark"] .nt-testi-slider__btn { background: var(--nt-bg-card); border-color: var(--nt-border); color: var(--nt-text); } [data-theme="dark"] .nt-testi-slider__btn:hover { background: var(--nt-bg-elevated); color: var(--nt-primary-300); } /* ========================================================= 4. BUTTONS ========================================================= */ [data-theme="dark"] .nt-btn--outline { background: transparent; color: var(--nt-text); border-color: var(--nt-border); } [data-theme="dark"] .nt-btn--outline:hover { background: var(--nt-bg-card); border-color: var(--nt-primary-400); color: var(--nt-primary-300); } [data-theme="dark"] .nt-btn--primary { box-shadow: 0 8px 22px rgba(16, 185, 129, 0.32); } [data-theme="dark"] .nt-btn--ghost:hover { background: var(--nt-bg-card); } /* ========================================================= 5. TYPOGRAPHY ADJUSTMENTS ========================================================= */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--nt-text); } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] dd { color: var(--nt-text-body); } [data-theme="dark"] a:not(.nt-btn):not(.nt-program-card__title a):not(.nt-blog-card a) { color: var(--nt-primary-300); } /* Program card title link, blog card heading link */ [data-theme="dark"] .nt-program-card__title a, [data-theme="dark"] .nt-blog-card h3 a, [data-theme="dark"] .nt-comfort-card h3 a { color: var(--nt-text); } [data-theme="dark"] .nt-program-card__title a:hover, [data-theme="dark"] .nt-blog-card h3 a:hover, [data-theme="dark"] .nt-comfort-card h3 a:hover { color: var(--nt-primary-300); } /* Code + blockquote */ [data-theme="dark"] code, [data-theme="dark"] pre { background: var(--nt-bg); color: var(--nt-text); border-color: var(--nt-border); } [data-theme="dark"] blockquote { background: var(--nt-bg-card); border-color: var(--nt-primary-500); color: var(--nt-text-body); } /* ========================================================= 5b. CARD BADGES + CATEGORY CHIPS In light mode the badges use rgba soft pastels — readable on white but invisible on dark. Re-paint them with solid (slightly desaturated) pastel backgrounds + dark text, matching how blog-card category chips already render. ========================================================= */ [data-theme="dark"] .nt-program-card__badge, [data-theme="dark"] .nt-badge--mint, [data-theme="dark"] .nt-badge--peach, [data-theme="dark"] .nt-badge--lavender, [data-theme="dark"] .nt-badge--rose, [data-theme="dark"] .nt-badge--primary { backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: var(--nt-fw-bold); box-shadow: 0 2px 6px rgba(0,0,0,.35); } [data-theme="dark"] .nt-badge--mint, [data-theme="dark"] .nt-program-card--mint .nt-program-card__badge.nt-badge--mint { background: #D1FAE5; color: #065F46; } [data-theme="dark"] .nt-badge--peach, [data-theme="dark"] .nt-program-card--peach .nt-program-card__badge.nt-badge--peach { background: #FFE4D6; color: #9A3412; } [data-theme="dark"] .nt-badge--lavender, [data-theme="dark"] .nt-program-card--lavender .nt-program-card__badge.nt-badge--lavender { background: #E0E7FF; color: #3730A3; } [data-theme="dark"] .nt-badge--rose, [data-theme="dark"] .nt-program-card--rose .nt-program-card__badge.nt-badge--rose { background: #FCE7F3; color: #9D174D; } [data-theme="dark"] .nt-badge--primary { background: var(--nt-primary-100); color: #6EE7B7; } /* Program card category chip (.nt-program-card__cat) — same treatment */ [data-theme="dark"] .nt-program-card__cat { background: var(--nt-bg-elevated); color: var(--nt-text); border: 1px solid var(--nt-border); } /* Program card duration pill (top-left small chip on the image) */ [data-theme="dark"] .nt-program-card__duration { background: rgba(15, 23, 42, 0.7); color: #E2E8F0; } /* ========================================================= 6. THEME TOGGLE ICON STATES ========================================================= */ .nt-theme-toggle { gap: 6px; } .nt-theme-toggle__icon { transition: transform .25s ease, opacity .2s ease; } .nt-theme-toggle__icon--moon { display: none; } [data-theme="dark"] .nt-theme-toggle__icon--sun { display: none; } [data-theme="dark"] .nt-theme-toggle__icon--moon { display: block; } /* ========================================================= 7. TRANSITIONS — smooth flip ========================================================= */ html { transition: background-color .25s ease, color .25s ease; } body, .nt-header, .nt-card, .nt-program-card, .nt-program-card__body, .nt-service-card, .nt-comfort-card, .nt-testimonial, .nt-team-card, .nt-reason, .nt-blog-card, .nt-stats, .nt-auth__card, .nt-curriculum__item, .nt-faq__item, .nt-pill, .nt-pagination .page-numbers, input, textarea, select { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }