/* ============================================================ LinguaPro — THEME FOUNDATION Eye-friendly light + dark color system, brand palette, and Bootstrap 5.3 overrides. HOW IT WORKS - Set both data-bs-theme="light|dark" AND data-theme on . - data-bs-theme drives Bootstrap's own components. - Existing utility classes (.text-dark, .bg-white, .bg-light, .btn-primary, .text-muted, .shadow-sm ...) are re-mapped to theme tokens, so your current Django templates get dark mode + the new palette with almost no markup changes. Django: place at static/custom/css/theme.css and load it BEFORE public.css in your base templates. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap'); /* ---------- LIGHT (default) ---------- */ :root, [data-bs-theme="light"] { /* — Bootstrap base hooks (so the whole UI shifts) — */ --bs-body-bg: #EAF0FA; /* soft cool blue, not harsh white */ --bs-body-color: #15233B; --bs-secondary-color: #51607A; --bs-tertiary-color: #8694AD; --bs-border-color: #D8E2F0; --bs-emphasis-color: #0C1830; --bs-secondary-bg: #DFE8F6; --bs-tertiary-bg: #F2F6FC; --bs-link-color: #1D4ED8; --bs-link-hover-color: #1A43B8; /* — Brand tokens — */ --lp-primary: #2456D6; --lp-primary-hover: #1D45B8; --lp-primary-rgb: 36, 86, 214; --lp-primary-soft: #E2EAFB; --lp-primary-on-soft: #1D45B8; --lp-accent: #0E7C66; /* teal-green accent, pairs with blue */ --lp-accent-hover: #0B6353; --lp-accent-soft: #D9F0EA; --lp-accent-on-soft: #0B6353; /* — Surfaces & ink — clean blue & white — */ --lp-bg: #EAF0FA; --lp-bg-tint: #DFE8F6; --lp-surface: #FFFFFF; --lp-surface-2: #F2F6FC; --lp-text: #15233B; --lp-muted: #3E4F6A; --lp-faint: #5C6B84; --lp-border: #DCE5F2; --lp-border-strong: #C4D2E8; /* — IELTS section accents (harmonised, calm) — */ --lp-listening: #3667D6; --lp-listening-soft: #E8EEFC; --lp-reading: #2E9E6B; --lp-reading-soft: #E4F5EC; --lp-writing: #C8881E; --lp-writing-soft: #FAF1DD; --lp-speaking: #7657CE; --lp-speaking-soft: #EFEAFA; /* — Feedback — */ --lp-success: #2E9E6B; --lp-success-soft: #E4F5EC; --lp-warning: #C8881E; --lp-warning-soft: #FAF1DD; --lp-danger: #DC4C4C; --lp-danger-soft: #FBEAEA; --lp-info: #3667D6; --lp-info-soft: #E8EEFC; /* — Elevation — */ --lp-shadow-sm: 0 1px 2px rgba(20,40,80,.05), 0 1px 3px rgba(20,40,80,.07); --lp-shadow-md: 0 6px 18px rgba(20,40,80,.09); --lp-shadow-lg: 0 18px 44px rgba(20,40,80,.14); --lp-ring: 0 0 0 4px rgba(36,86,214,.16); /* — Radii — */ --lp-radius-sm: 8px; --lp-radius: 14px; --lp-radius-lg: 20px; --lp-radius-xl: 28px; --lp-radius-pill: 999px; color-scheme: light; } /* ---------- DARK ---------- */ [data-bs-theme="dark"] { --bs-body-bg: #0E1421; /* deep slate, not black */ --bs-body-color: #E7EBF3; --bs-secondary-color: #9CA7BC; --bs-tertiary-color: #6B7589; --bs-border-color: #28324A; --bs-emphasis-color: #FFFFFF; --bs-secondary-bg: #161E2D; --bs-tertiary-bg: #1E2738; --bs-link-color: #7FA6FF; --bs-link-hover-color: #A0BEFF; --lp-primary: #5B8DEF; --lp-primary-hover: #76A1F4; --lp-primary-rgb: 91, 141, 239; --lp-primary-soft: rgba(91,141,239,.16); --lp-primary-on-soft: #93B5F7; --lp-accent: #2BC2A0; --lp-accent-hover: #45D0B2; --lp-accent-soft: rgba(43,194,160,.16); --lp-accent-on-soft: #45D0B2; --lp-bg: #0E1421; --lp-bg-tint: #121A2A; --lp-surface: #18202F; --lp-surface-2: #1E2738; --lp-text: #E7EBF3; --lp-muted: #9CA7BC; --lp-faint: #6B7589; --lp-border: #28324A; --lp-border-strong: #38445F; --lp-listening: #5E8BF0; --lp-listening-soft: rgba(94,139,240,.16); --lp-reading: #45B985; --lp-reading-soft: rgba(69,185,133,.16); --lp-writing: #E3B45C; --lp-writing-soft: rgba(227,180,92,.16); --lp-speaking: #9D82E8; --lp-speaking-soft: rgba(157,130,232,.16); --lp-success: #45B985; --lp-success-soft: rgba(69,185,133,.16); --lp-warning: #E3B45C; --lp-warning-soft: rgba(227,180,92,.16); --lp-danger: #F07171; --lp-danger-soft: rgba(240,113,113,.16); --lp-info: #5E8BF0; --lp-info-soft: rgba(94,139,240,.16); --lp-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --lp-shadow-md: 0 8px 22px rgba(0,0,0,.45); --lp-shadow-lg: 0 20px 48px rgba(0,0,0,.55); --lp-ring: 0 0 0 4px rgba(126,137,242,.25); color-scheme: dark; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background-color: var(--lp-bg); color: var(--lp-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Smooth, non-jarring theme switch (applied after first paint) */ html.lp-anim, html.lp-anim body, html.lp-anim .navbar, html.lp-anim .card, html.lp-anim .lp-card, html.lp-anim .dropdown-menu, html.lp-anim .modal-content, html.lp-anim footer, html.lp-anim section, html.lp-anim .btn, html.lp-anim input, html.lp-anim .badge { transition: background-color .42s ease, border-color .42s ease, color .3s ease, box-shadow .42s ease; } ::selection { background: rgba(var(--lp-primary-rgb), .22); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--lp-border-strong); border-radius: 10px; border: 2px solid var(--lp-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--lp-faint); } /* ============================================================ TYPOGRAPHY ============================================================ */ .lp-display { font-family: 'Source Serif 4', Georgia, serif; } .lp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-primary-on-soft); } h1, h2, h3, h4, h5, h6 { color: var(--lp-text); letter-spacing: -.01em; } /* ============================================================ BOOTSTRAP UTILITY RE-MAPPING (makes existing templates theme-aware without markup edits) ============================================================ */ .text-primary { color: var(--lp-primary) !important; } .text-dark { color: var(--lp-text) !important; } .text-muted { color: var(--lp-muted) !important; } .text-secondary { color: var(--lp-muted) !important; } .text-white { color: #fff !important; } .bg-white { background-color: var(--lp-surface) !important; } .bg-light { background-color: var(--lp-surface-2) !important; } .bg-dark { background-color: #0C111C !important; } .bg-primary { background-color: var(--lp-primary) !important; } .border { border-color: var(--lp-border) !important; } .border-top, .border-bottom, .border-start, .border-end { border-color: var(--lp-border) !important; } .shadow-sm { box-shadow: var(--lp-shadow-sm) !important; } .shadow, .shadow-lg { box-shadow: var(--lp-shadow-lg) !important; } a { color: var(--lp-primary); } a:hover { color: var(--lp-primary-hover); } /* Soft tinted badge used across templates */ .bg-primary-soft { background-color: var(--lp-primary-soft) !important; } .text-primary-soft { color: var(--lp-primary-on-soft) !important; } /* ============================================================ DARK MODE — MATN KO'RINISHINI KAFOLATLASH Eski template'lardagi qattiq (hardcoded) to'q ranglar dark rejimda ko'rinmay qolmasligi uchun ularni yorug'ga aylantiramiz. ============================================================ */ .text-black, .text-body, .text-body-emphasis, .text-dark-emphasis, .text-body-secondary { color: var(--lp-text) !important; } [data-bs-theme="dark"] .text-black, [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-body, [data-bs-theme="dark"] .text-body-emphasis, [data-bs-theme="dark"] .text-dark-emphasis { color: var(--lp-text) !important; } [data-bs-theme="dark"] .text-secondary, [data-bs-theme="dark"] .text-body-secondary, [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] small.text-muted { color: var(--lp-muted) !important; } /* ── Qoʻngʻir/navy inline matn ranglari → --lp-text ──────────── */ [data-bs-theme="dark"] [style*="#1e293b"], [data-bs-theme="dark"] [style*="#1E293B"], [data-bs-theme="dark"] [style*="#0f172a"], [data-bs-theme="dark"] [style*="#0F172A"], [data-bs-theme="dark"] [style*="#1f2937"], [data-bs-theme="dark"] [style*="#111827"], [data-bs-theme="dark"] [style*="#212529"], [data-bs-theme="dark"] [style*="#1a1a2e"], [data-bs-theme="dark"] [style*="#374151"], [data-bs-theme="dark"] [style*="#1d2939"], [data-bs-theme="dark"] [style*="#15233B"], [data-bs-theme="dark"] [style*="#15233b"] { color: var(--lp-text) !important; } /* ── Kulrang inline matn ranglari → --lp-muted ───────────────── */ [data-bs-theme="dark"] [style*="#334155"], [data-bs-theme="dark"] [style*="#475569"], [data-bs-theme="dark"] [style*="#64748b"], [data-bs-theme="dark"] [style*="#667085"], [data-bs-theme="dark"] [style*="#6c757d"], [data-bs-theme="dark"] [style*="#94a3b8"], [data-bs-theme="dark"] [style*="#666"], [data-bs-theme="dark"] [style*="#cbd5e1"] { color: var(--lp-muted) !important; } /* ── Och fon inline background ranglari → token ──────────────── */ [data-bs-theme="dark"] [style*="background: #f8fafc"], [data-bs-theme="dark"] [style*="background:#f8fafc"], [data-bs-theme="dark"] [style*="background-color: #f8fafc"], [data-bs-theme="dark"] [style*="background-color:#f8fafc"], [data-bs-theme="dark"] [style*="background: #f1f5f9"], [data-bs-theme="dark"] [style*="background:#f1f5f9"], [data-bs-theme="dark"] [style*="background-color: #f1f5f9"], [data-bs-theme="dark"] [style*="background-color:#f1f5f9"], [data-bs-theme="dark"] [style*="background: #f7f8fc"], [data-bs-theme="dark"] [style*="background:#f7f8fc"], [data-bs-theme="dark"] [style*="background: #f5f7fb"], [data-bs-theme="dark"] [style*="background:#f5f7fb"], [data-bs-theme="dark"] [style*="background: #f0f2f5"], [data-bs-theme="dark"] [style*="background:#f0f2f5"], [data-bs-theme="dark"] [style*="background: #eaecf0"], [data-bs-theme="dark"] [style*="background:#eaecf0"], [data-bs-theme="dark"] [style*="background: #e2e8f0"], [data-bs-theme="dark"] [style*="background:#e2e8f0"], [data-bs-theme="dark"] [style*="background-color: #f8f9fa"], [data-bs-theme="dark"] [style*="background-color:#f8f9fa"], [data-bs-theme="dark"] [style*="background-color: #eff6ff"], [data-bs-theme="dark"] [style*="background-color:#eff6ff"], [data-bs-theme="dark"] [style*="background:#eff6ff"], [data-bs-theme="dark"] [style*="background: #eff6ff"], [data-bs-theme="dark"] [style*="background:#e8f0fe"], [data-bs-theme="dark"] [style*="background-color: #e8f0fe"], [data-bs-theme="dark"] [style*="background:#f0f9ff"], [data-bs-theme="dark"] [style*="background: #f0f9ff"] { background: var(--lp-surface-2) !important; background-color: var(--lp-surface-2) !important; } /* ── Semantik rang fonlar → token soft ───────────────────────── */ [data-bs-theme="dark"] [style*="background:#f0fdf4"], [data-bs-theme="dark"] [style*="background: #f0fdf4"], [data-bs-theme="dark"] [style*="background:#ecfdf5"], [data-bs-theme="dark"] [style*="background: #ecfdf5"], [data-bs-theme="dark"] [style*="background:#e8f5e9"], [data-bs-theme="dark"] [style*="background:#f0fff4"], [data-bs-theme="dark"] [style*="background-color: #e6f4ea"], [data-bs-theme="dark"] [style*="background-color:#e6f4ea"] { background: var(--lp-success-soft) !important; background-color: var(--lp-success-soft) !important; } [data-bs-theme="dark"] [style*="background:#fef2f2"], [data-bs-theme="dark"] [style*="background: #fef2f2"], [data-bs-theme="dark"] [style*="background:#fee2e2"], [data-bs-theme="dark"] [style*="background: #fee2e2"], [data-bs-theme="dark"] [style*="background-color: #fce8e6"], [data-bs-theme="dark"] [style*="background-color:#fce8e6"] { background: var(--lp-danger-soft) !important; background-color: var(--lp-danger-soft) !important; } [data-bs-theme="dark"] [style*="background:#fffbeb"], [data-bs-theme="dark"] [style*="background: #fffbeb"], [data-bs-theme="dark"] [style*="background:#fef3c7"], [data-bs-theme="dark"] [style*="background: #fef3c7"], [data-bs-theme="dark"] [style*="background-color: #fef7e0"], [data-bs-theme="dark"] [style*="background-color:#fef7e0"] { background: var(--lp-warning-soft) !important; background-color: var(--lp-warning-soft) !important; } [data-bs-theme="dark"] [style*="background:#faf5ff"], [data-bs-theme="dark"] [style*="background: #faf5ff"], [data-bs-theme="dark"] [style*="background:#f5f3ff"], [data-bs-theme="dark"] [style*="background: #f5f3ff"] { background: var(--lp-speaking-soft) !important; background-color: var(--lp-speaking-soft) !important; } /* ── Bootstrap bg-white / bg-light ───────────────────────────── */ [data-bs-theme="dark"] .bg-white { background-color: var(--lp-surface) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--lp-surface-2) !important; } /* Dashboard kontentidagi default matn rangi */ .dash-content { color: var(--lp-text); } /* ============================================================ BUTTONS ============================================================ */ .btn-primary { --bs-btn-bg: var(--lp-primary); --bs-btn-border-color: var(--lp-primary); --bs-btn-hover-bg: var(--lp-primary-hover); --bs-btn-hover-border-color: var(--lp-primary-hover); --bs-btn-active-bg: var(--lp-primary-hover); --bs-btn-active-border-color: var(--lp-primary-hover); --bs-btn-disabled-bg: var(--lp-primary); --bs-btn-disabled-border-color: var(--lp-primary); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; font-weight: 600; } .btn-outline-primary { --bs-btn-color: var(--lp-primary); --bs-btn-border-color: var(--lp-primary); --bs-btn-hover-bg: var(--lp-primary); --bs-btn-hover-border-color: var(--lp-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--lp-primary-hover); --bs-btn-active-border-color: var(--lp-primary-hover); font-weight: 600; } .btn-warning { --bs-btn-bg: var(--lp-accent); --bs-btn-border-color: var(--lp-accent); --bs-btn-hover-bg: var(--lp-accent-hover); --bs-btn-hover-border-color: var(--lp-accent-hover); --bs-btn-active-bg: var(--lp-accent-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; font-weight: 600; } /* ============================================================ CARDS / SURFACES ============================================================ */ .card { --bs-card-bg: var(--lp-surface); --bs-card-border-color: var(--lp-border); --bs-card-color: var(--lp-text); } .lp-card { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .lp-card.lp-hover:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-lg); border-color: var(--lp-border-strong); } /* ============================================================ NAVBAR / DROPDOWN / MODAL ============================================================ */ .navbar { background-color: var(--lp-surface) !important; } .dropdown-menu { --bs-dropdown-bg: var(--lp-surface); --bs-dropdown-border-color: var(--lp-border); --bs-dropdown-link-color: var(--lp-muted); --bs-dropdown-link-hover-bg: var(--lp-primary-soft); --bs-dropdown-link-hover-color: var(--lp-primary-on-soft); box-shadow: var(--lp-shadow-lg); } .modal-content { background-color: var(--lp-surface); border-color: var(--lp-border); color: var(--lp-text); } /* ============================================================ FORMS ============================================================ */ .form-control, .form-select { background-color: var(--lp-surface-2); border: 1.5px solid var(--lp-border); color: var(--lp-text); } .form-control:focus, .form-select:focus { background-color: var(--lp-surface); border-color: var(--lp-primary); box-shadow: var(--lp-ring); color: var(--lp-text); } .form-control::placeholder { color: var(--lp-faint); } /* ============================================================ THEME TOGGLE (shared component) ============================================================ */ .lp-theme-toggle { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--lp-border); background: var(--lp-surface-2); color: var(--lp-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; transition: all .2s ease; } .lp-theme-toggle:hover { color: var(--lp-primary); border-color: var(--lp-primary); transform: rotate(-12deg); } .lp-theme-toggle .bi-sun-fill { display: none; } .lp-theme-toggle .bi-moon-stars-fill { display: inline-block; } [data-bs-theme="dark"] .lp-theme-toggle .bi-sun-fill { display: inline-block; } [data-bs-theme="dark"] .lp-theme-toggle .bi-moon-stars-fill { display: none; } /* ============================================================ LANGUAGE SWITCHER ============================================================ */ .lp-lang-switcher { flex-shrink: 0; } .lp-lang-btn { height: 42px; min-width: 62px; border-radius: 21px; border: 1px solid var(--lp-border); background: var(--lp-surface-2); color: var(--lp-text); font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: all .2s ease; white-space: nowrap; } .lp-lang-btn:hover, .lp-lang-btn:focus { border-color: var(--lp-primary); color: var(--lp-primary); background: var(--lp-primary-soft); } .lp-lang-menu { min-width: 140px; border-radius: 12px; padding: 6px; background: var(--lp-surface); } .lp-lang-item { border-radius: 8px; font-size: 0.88rem; font-weight: 500; color: var(--lp-text); padding: 8px 12px; display: flex; align-items: center; gap: 8px; transition: background .15s; } .lp-lang-item:hover { background: var(--lp-primary-soft); color: var(--lp-primary); } .lp-lang-item.active { background: var(--lp-primary-soft); color: var(--lp-primary); font-weight: 700; } /* ============================================================ SECTION ACCENT HELPERS ============================================================ */ .lp-acc-listening { color: var(--lp-listening); } .lp-acc-reading { color: var(--lp-reading); } .lp-acc-writing { color: var(--lp-writing); } .lp-acc-speaking { color: var(--lp-speaking); } .lp-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: var(--lp-radius-pill); font-size: .78rem; font-weight: 700; letter-spacing: .01em; } .lp-pill-primary { background: var(--lp-primary-soft); color: var(--lp-primary-on-soft); } .lp-pill-accent { background: var(--lp-accent-soft); color: var(--lp-accent-on-soft); } .lp-pill-listening{ background: var(--lp-listening-soft);color: var(--lp-listening); } .lp-pill-reading { background: var(--lp-reading-soft); color: var(--lp-reading); } .lp-pill-writing { background: var(--lp-writing-soft); color: var(--lp-writing); } .lp-pill-speaking { background: var(--lp-speaking-soft); color: var(--lp-speaking); }