/* ===== Dark Theme ===== */ /* Applied when [data-theme="dark"] is set on by main.js */ /* ===== Smooth Theme Switching ===== */ /* All themed elements get smooth transitions when toggling themes */ html, body, header, footer, section, article, nav, div, span, p, h1, h2, h3, h4, h5, h6, a, button, input, ul, ol, li, table, tr, td, th { transition: background-color var(--transition-normal, 0.3s) ease, color var(--transition-normal, 0.3s) ease, border-color var(--transition-normal, 0.3s) ease, box-shadow var(--transition-normal, 0.3s) ease; } /* Elements that already have their own transitions keep them (more specific = overrides) */ .btn { transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, transform var(--transition-fast) ease; } .card { transition: transform var(--transition-normal) ease, box-shadow var(--transition-normal) ease, background-color var(--transition-normal) ease, border-color var(--transition-normal) ease; } .header__nav { transition: transform var(--transition-normal) ease, opacity var(--transition-normal) ease, visibility var(--transition-normal) ease, background-color var(--transition-normal) ease, border-color var(--transition-normal) ease; } .header__nav-link { transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease; } .theme-toggle { transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease; } .footer__link { transition: color var(--transition-fast) ease; } .accordion__header { transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease; } .accordion__body { transition: max-height var(--transition-slow) ease, padding var(--transition-slow) ease, background-color var(--transition-slow) ease; } .accordion__icon { transition: transform var(--transition-normal) ease; } .checklist__item { transition: background-color var(--transition-fast) ease; } .checklist__checkbox { transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease; } .burger-btn__line { transition: transform var(--transition-normal) ease, opacity var(--transition-normal) ease, background-color var(--transition-normal) ease; } .header__logo-icon svg { transition: fill var(--transition-normal) ease; } .checklist__check-icon { transition: fill var(--transition-fast) ease; } [data-theme="dark"] { --color-bg-primary: #121212; --color-bg-secondary: #1e1e2e; --color-bg-tertiary: #2a2a3e; --color-text-primary: #e8e8f0; --color-text-secondary: #b0b0c8; --color-text-muted: #7a7a90; --color-accent: #6d8aff; --color-accent-hover: #8da3ff; --color-accent-light: #2a2a4e; --color-border: #3a3a50; --color-card-bg: #1a1a2e; --color-card-shadow: rgba(0, 0, 0, 0.4); --color-header-bg: #1a1a2e; --color-header-border: #3a3a50; --color-footer-bg: #0d0d1a; --color-footer-text: #8a8aa0; --color-footer-heading: #e8e8f0; --color-btn-primary-bg: #6d8aff; --color-btn-primary-text: #ffffff; --color-btn-primary-hover: #5a7ae8; --color-checked: #2ec4b6; --color-check-bg: #2a2a3e; } /* Additional dark theme adjustments */ [data-theme="dark"] .hero { background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-bg-secondary) 100%); } [data-theme="dark"] .feature-item { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .page-header { background-color: var(--color-bg-secondary); } [data-theme="dark"] .checklist__item:hover { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .theme-toggle { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .theme-toggle:hover { background-color: var(--color-bg-secondary); } [data-theme="dark"] .header__nav-link:hover { background-color: var(--color-bg-tertiary); } [data-theme="dark"] .header__nav-link--active { background-color: var(--color-accent-light); } [data-theme="dark"] .illustration { background: linear-gradient(135deg, var(--color-accent-light), var(--color-bg-tertiary)); border-color: var(--color-border); } [data-theme="dark"] .card { background-color: var(--color-card-bg); } [data-theme="dark"] .card__tag { background-color: var(--color-accent-light); color: var(--color-accent); } [data-theme="dark"] .card__image-placeholder { background: linear-gradient(135deg, var(--color-accent-light), var(--color-bg-tertiary)); } [data-theme="dark"] .feature-item__icon { background-color: var(--color-accent-light); } [data-theme="dark"] .accordion__header:hover { background-color: var(--color-bg-secondary); } [data-theme="dark"] .error-page__code { color: var(--color-accent); } [data-theme="dark"] .burger-btn__line { background-color: var(--color-text-primary); } [data-theme="dark"] .header__logo-icon svg { fill: #ffffff; } [data-theme="dark"] .checklist__check-icon { fill: #ffffff; } [data-theme="dark"] .accordion { border-color: var(--color-border); } [data-theme="dark"] .accordion__item { border-color: var(--color-border); } [data-theme="dark"] .accordion__header { background-color: var(--color-bg-primary); color: var(--color-text-primary); } [data-theme="dark"] .accordion__content { color: var(--color-text-secondary); } [data-theme="dark"] .checklist__checkbox { border-color: var(--color-border); background-color: var(--color-check-bg); } [data-theme="dark"] .checklist__item.checked .checklist__checkbox { background-color: var(--color-checked); border-color: var(--color-checked); } [data-theme="dark"] .checklist__label { color: var(--color-text-secondary); } [data-theme="dark"] .checklist__item.checked .checklist__label { color: var(--color-text-muted); } [data-theme="dark"] .breadcrumbs { color: var(--color-text-muted); } [data-theme="dark"] .breadcrumbs a { color: var(--color-text-secondary); } [data-theme="dark"] .breadcrumbs a:hover { color: var(--color-accent); } [data-theme="dark"] .btn--outline { border-color: var(--color-accent); color: var(--color-accent); } [data-theme="dark"] .btn--outline:hover { background-color: var(--color-accent); color: #ffffff; } [data-theme="dark"] .hero__image-placeholder { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); color: #ffffff; } [data-theme="dark"] .feature-item__content p { color: var(--color-text-secondary); } [data-theme="dark"] .category-content__full h2 { color: var(--color-text-primary); } /* Dark theme adjustments for footer */ [data-theme="dark"] .footer__bottom { border-color: rgba(255, 255, 255, 0.08); } /* Dark theme adjustments for 404 page */ [data-theme="dark"] .error-page__title { color: var(--color-text-primary); } [data-theme="dark"] .error-page__text { color: var(--color-text-secondary); } [data-theme="dark"] .error-page__illustration { color: var(--color-accent); }