/* ── Dark mode overrides ─────────────────────────────────────────── */ /* Applied when is set by theme.js */ html.dark { --amber:#e05a2b; --amber-lt:#f07844; --amber-dk:#c2410c; --bg:#0F0D0A; --bg2:#1A1610; --bg3:#252010; --dark:#FEF9EC; --dark2:#EDE0C4; --text:#EDE0C4; --text-dim:#A89060; --text-muted:#786040; --border:rgba(224,90,43,.16); --border-ui:rgba(255,255,255,.07); --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3); --shadow-md:0 2px 4px rgba(0,0,0,.5),0 12px 40px rgba(0,0,0,.4); --shadow-lg:0 4px 8px rgba(0,0,0,.5),0 24px 64px rgba(0,0,0,.6); /* Dashboard alias vars */ --gold:#e05a2b; --gold-lt:#f07844; --gold-dk:#c2410c; --ivory:#EDE0C4; } /* ── Base ───────────────────────────────────────────────────────── */ html.dark body { background:var(--bg); color:var(--text); } html.dark ::-webkit-scrollbar-thumb { background:#3A2810; } /* ── Navigation ─────────────────────────────────────────────────── */ html.dark nav { background:rgba(15,13,10,.93) !important; border-bottom-color:rgba(224,90,43,.1) !important; } html.dark .nav-brand-name { color:var(--amber-dk) !important; } html.dark .btn-ghost { border-color:var(--border-ui); color:var(--text-dim); } html.dark .btn-ghost:hover { border-color:var(--amber); color:var(--text); background:rgba(224,90,43,.06); } /* ── Kente strips ───────────────────────────────────────────────── */ html.dark .kente { background:repeating-linear-gradient(90deg, #c2410c 0,#c2410c 12px, #EA580C 12px,#EA580C 24px, #0F0D0A 24px,#0F0D0A 30px, #16A34A 30px,#16A34A 42px, #0F0D0A 42px,#0F0D0A 48px, #c2410c 48px,#c2410c 60px, #e05a2b 60px,#e05a2b 72px, #0F0D0A 72px,#0F0D0A 84px, #EA580C 84px,#EA580C 96px, #0F0D0A 96px,#0F0D0A 108px) !important; } html.dark .kente-thin { background:repeating-linear-gradient(90deg, #c2410c 0,#c2410c 10px, #0F0D0A 10px,#0F0D0A 20px, #EA580C 20px,#EA580C 30px, #0F0D0A 30px,#0F0D0A 40px, #16A34A 40px,#16A34A 50px, #0F0D0A 50px,#0F0D0A 60px) !important; } /* ── Auth pages ─────────────────────────────────────────────────── */ html.dark .auth-card { background:var(--bg2); border-color:var(--border); box-shadow:0 4px 32px rgba(0,0,0,.5); } html.dark .auth-title { color:var(--text); } html.dark .auth-sub { color:var(--text-dim); } html.dark .auth-switch { color:var(--text-dim); } html.dark .auth-footer { color:var(--text-muted); } html.dark .form-group label { color:var(--text-dim); } html.dark .form-group input, html.dark .form-group select, html.dark .form-group textarea { background:var(--bg3); border-color:var(--border); color:var(--text); } html.dark .form-group input::placeholder { color:var(--text-muted); } html.dark .form-group small { color:var(--text-muted); } html.dark .alert-error { background:rgba(185,28,28,.1); border-color:rgba(185,28,28,.2); } html.dark .alert-success { background:rgba(22,163,74,.1); border-color:rgba(22,163,74,.2); } html.dark .code-display { background:var(--bg3); border-color:var(--border); color:var(--amber); } /* ── Landing page sections ───────────────────────────────────────── */ html.dark .hero-bg { background: radial-gradient(ellipse 65% 60% at 90% 5%, rgba(224,90,43,.1) 0%,transparent 60%), radial-gradient(ellipse 45% 50% at 5% 95%, rgba(22,163,74,.05) 0%,transparent 55%), radial-gradient(ellipse 30% 40% at 50% 50%, rgba(217,119,6,.03) 0%,transparent 60%) !important; } html.dark .hero-title span.d { color:#6B5A50; } html.dark .hero-eyebrow { background:rgba(224,90,43,.08); } html.dark .platform-strip { background:var(--bg2) !important; border-color:var(--border) !important; } html.dark .feat-card { background:var(--bg2) !important; border-color:var(--border) !important; box-shadow:none !important; } html.dark .feat-card-title { color:var(--text) !important; } html.dark .feat-card-body { color:var(--text-dim) !important; } html.dark .section-label { color:var(--amber) !important; } html.dark .section-title { color:var(--text) !important; } html.dark .section-sub { color:var(--text-dim) !important; } html.dark .testi-card { background:var(--bg2) !important; border-color:var(--border) !important; box-shadow:none !important; } html.dark .testi-text { color:var(--text-dim) !important; } html.dark .testi-name { color:var(--text) !important; } html.dark .phone-screen { background:var(--bg2) !important; } html.dark .avatar-pile-label { color:var(--text-dim) !important; } html.dark .social-proof-text { color:var(--text-dim) !important; } /* ── Plans page ─────────────────────────────────────────────────── */ html.dark .plan-card { background:var(--bg2) !important; border-color:var(--border) !important; box-shadow:none !important; } html.dark .plan-name { color:var(--text) !important; } html.dark .plan-price { color:var(--text) !important; } html.dark .plan-price-note { color:var(--text-dim) !important; } html.dark .feature-row { color:var(--text-dim) !important; border-bottom-color:var(--border) !important; } /* ── Annuaire ───────────────────────────────────────────────────── */ html.dark .biz-card { background:var(--bg2) !important; border-color:var(--border) !important; box-shadow:none !important; } html.dark .biz-name { color:var(--text) !important; } html.dark .biz-desc { color:var(--text-dim) !important; } html.dark .search-bar input { background:var(--bg2) !important; border-color:var(--border) !important; color:var(--text) !important; } html.dark .search-bar input::placeholder { color:var(--text-muted) !important; } html.dark .filter-btn { background:var(--bg2) !important; border-color:var(--border) !important; color:var(--text-dim) !important; } html.dark .filter-btn.active { border-color:var(--amber) !important; color:var(--amber) !important; background:rgba(224,90,43,.08) !important; } html.dark .search-form { background:var(--bg2) !important; border-color:var(--border) !important; } html.dark .search-form input[type=text] { color:var(--text) !important; } html.dark .search-form input[type=text]::placeholder { color:var(--text-muted) !important; } /* ── Legal pages ────────────────────────────────────────────────── */ html.dark .wrap h1 { color:var(--text); } html.dark .wrap h2 { color:var(--amber-dk); } html.dark .wrap p, html.dark .wrap li { color:var(--text-dim); } html.dark .wrap strong { color:var(--text); } html.dark .wrap a { color:var(--amber); } html.dark .wrap table th { background:var(--bg3); color:var(--amber-dk); border-color:var(--border); } html.dark .wrap table td { border-color:var(--border-ui); color:var(--text-dim); } html.dark .wrap .date { color:var(--text-muted); } /* ── Payment return card ─────────────────────────────────────────── */ html.dark .card { background:var(--bg2) !important; border-color:var(--border) !important; } /* ── Dashboard ──────────────────────────────────────────────────── */ html.dark .sidebar { background:var(--bg2); border-right-color:var(--border); } html.dark .sb-brand { border-bottom-color:var(--border); } html.dark .sb-brand span { color:var(--amber-dk) !important; } html.dark .sb-item { color:var(--text-dim); } html.dark .sb-item:hover { background:rgba(224,90,43,.08); color:var(--text); } html.dark .sb-item.active { background:rgba(224,90,43,.12); color:var(--amber); } html.dark .sb-footer { border-top-color:var(--border); } html.dark .sb-user-info .name { color:var(--text) !important; } html.dark .sb-user-info .pseudo { color:var(--amber) !important; } html.dark .topbar { background:var(--bg2); border-bottom-color:var(--border); } html.dark .topbar-title { color:var(--text) !important; } html.dark .stat { background:var(--bg2); border-color:var(--border); } html.dark .stat-label { color:var(--text-dim) !important; } html.dark .url-box { background:var(--bg2); border-color:var(--border); } html.dark .link-row { border-bottom-color:rgba(224,90,43,.07); } html.dark .link-row:hover { background:rgba(224,90,43,.03); } html.dark .link-label { color:var(--text) !important; } html.dark .link-url { color:var(--text-dim) !important; } html.dark .card-title { color:var(--text) !important; } html.dark .card-header { border-bottom-color:var(--border); } html.dark .alert-warn { background:rgba(224,90,43,.08); border-color:var(--border); color:var(--amber); } html.dark .overlay { background:rgba(0,0,0,.88); } html.dark .modal { background:var(--bg2); border-color:var(--border); } html.dark .mh { border-bottom-color:var(--border); } html.dark .mh h3 { color:var(--text) !important; } html.dark .mf { border-top-color:var(--border); } html.dark .mclose { color:var(--text-dim); } html.dark .fg label { color:var(--text-dim) !important; } html.dark .fg input, html.dark .fg select { background:var(--bg3); border-color:var(--border); color:var(--text); } html.dark .fg input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(224,90,43,.1); } html.dark #embed-code { background:var(--bg3) !important; border-color:var(--border) !important; color:var(--amber) !important; } html.dark .check-row label { color:var(--text-dim); } /* ── Theme toggle button ─────────────────────────────────────────── */ .theme-toggle { width:34px; height:34px; padding:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; cursor:pointer; border:1px solid var(--border-ui); background:transparent; color:var(--text-dim); transition:.2s; flex-shrink:0; font-family:inherit; } .theme-toggle:hover { border-color:var(--amber); color:var(--text); background:rgba(217,119,6,.06); } .theme-toggle-fixed { position:fixed; top:14px; right:16px; z-index:500; box-shadow:0 2px 8px rgba(0,0,0,.12); background:var(--bg2) !important; }