/* ========================================================================== Vocabu Dark Mode Loaded LAST on every page (landing, guides, FAQ). js/theme.js sets data-theme="dark" / "light" on and injects the .theme-toggle button into the header nav. ========================================================================== */ /* -------------------------------------------------------------------------- Theme toggle button (both themes) -------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: auto; margin-right: 1rem; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(53, 75, 65, 0.22); background: transparent; color: #354B41; cursor: pointer; padding: 0; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .theme-toggle:hover { color: #F38310; border-color: rgba(243, 131, 16, 0.55); } .theme-toggle svg { width: 19px; height: 19px; display: block; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle { border-color: rgba(255, 255, 255, 0.22); color: #E7EDE9; } html[data-theme="dark"] .theme-toggle:hover { color: #F38310; border-color: rgba(243, 131, 16, 0.55); } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* -------------------------------------------------------------------------- Dark palette -------------------------------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; /* shared dark tokens */ --dm-bg: #0F1512; --dm-surface: #1A211D; --dm-raised: #222B26; --dm-heading: #E7EDE9; --dm-text: #CBD5CE; --dm-muted: #9FACA4; --dm-border: rgba(255, 255, 255, 0.10); --dm-green-text: #9FC0B2; /* landing.css variable overrides (harmless on guide pages) */ --accent-soft: rgba(243, 131, 16, 0.16); --mint: #18201C; --mint-2: #1D2721; --ink: var(--dm-text); --muted: var(--dm-muted); --surface: var(--dm-surface); --bg: var(--dm-bg); --border: var(--dm-border); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); /* help.css (guides) variable overrides */ --docs-bg: var(--dm-bg); --docs-sidebar-bg: #161D19; --docs-text: var(--dm-text); --docs-text-light: var(--dm-muted); --docs-border: #2A342E; --docs-hover-bg: var(--dm-raised); --docs-active-bg: rgba(243, 131, 16, 0.14); } /* -------------------------------------------------------------------------- Base (styles.css overrides) -------------------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--dm-heading); } html[data-theme="dark"] a { color: var(--dm-green-text); } html[data-theme="dark"] ::selection { background: rgba(243, 131, 16, 0.35); color: #fff; } /* -------------------------------------------------------------------------- Header & navigation -------------------------------------------------------------------------- */ html[data-theme="dark"] header { background: rgba(15, 21, 18, 0.88); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); border-bottom: 1px solid var(--dm-border); } html[data-theme="dark"] .logo-text { color: var(--dm-heading); } html[data-theme="dark"] .hamburger span { background-color: var(--dm-heading); } html[data-theme="dark"] .nav-menu li a { color: var(--dm-text); } html[data-theme="dark"] .nav-menu li a:hover, html[data-theme="dark"] .nav-menu li a.active { color: #F38310; } /* Landing: Download pill stays orange with white text */ html[data-theme="dark"] .nav-menu li:last-child a { color: #fff; } @media (max-width: 768px) { html[data-theme="dark"] .nav-menu { background: rgba(15, 21, 18, 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 27px rgba(0, 0, 0, 0.45); } } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ html[data-theme="dark"] .hero { background: radial-gradient(640px 420px at 88% 12%, rgba(243, 131, 16, 0.10), transparent 62%), radial-gradient(720px 520px at 4% 92%, rgba(159, 192, 178, 0.08), transparent 60%), linear-gradient(180deg, #131A16 0%, #0F1512 100%); } html[data-theme="dark"] .hero-content h1 { color: var(--dm-heading); } html[data-theme="dark"] .hero-content p { color: var(--dm-text); } html[data-theme="dark"] .hero-content p strong { color: var(--dm-green-text); } html[data-theme="dark"] .hero-image::before { background: radial-gradient(closest-side, rgba(243, 131, 16, 0.12), rgba(243, 131, 16, 0) 72%); } /* -------------------------------------------------------------------------- Stats strip -------------------------------------------------------------------------- */ html[data-theme="dark"] .stat-number { color: #fff; } html[data-theme="dark"] .store-badge { color: #fff; } /* -------------------------------------------------------------------------- Sections & feature cards -------------------------------------------------------------------------- */ html[data-theme="dark"] .features, html[data-theme="dark"] .screenshots, html[data-theme="dark"] .app-preview, html[data-theme="dark"] .ai-collections, html[data-theme="dark"] .scanner-feature { background-color: #18201C; } html[data-theme="dark"] .languages, html[data-theme="dark"] .writing-feature, html[data-theme="dark"] .sync-feature { background-color: transparent; } html[data-theme="dark"] .feature { background-color: var(--dm-surface); border: 1px solid var(--dm-border); } html[data-theme="dark"] .feature p, html[data-theme="dark"] .language-text p, html[data-theme="dark"] .ai-text p, html[data-theme="dark"] .writing-text p, html[data-theme="dark"] .scanner-text p, html[data-theme="dark"] .sync-text p, html[data-theme="dark"] .app-preview-intro p { color: var(--dm-text); } html[data-theme="dark"] .screenshot { background-color: var(--dm-surface); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } /* -------------------------------------------------------------------------- App-Vorschau / Filmstrip -------------------------------------------------------------------------- */ html[data-theme="dark"] .preview-strip-btn { background: var(--dm-raised); color: var(--dm-text); border: 1px solid var(--dm-border); } html[data-theme="dark"] .preview-strip-btn:hover { background: #F38310; color: #fff; border-color: #F38310; } /* -------------------------------------------------------------------------- Feature grid (Alle Features auf einen Blick) -------------------------------------------------------------------------- */ html[data-theme="dark"] .features-overview > p { color: var(--dm-muted); } html[data-theme="dark"] .feature-card h3, html[data-theme="dark"] .feature-card h3 a { color: var(--dm-heading); } /* -------------------------------------------------------------------------- Download section (guides fallback – landing has its own dark panel) -------------------------------------------------------------------------- */ html[data-theme="dark"] .download { background: linear-gradient(135deg, #1A211D 0%, #131A16 100%); } /* Landing pages load landing.css: restore its dark brand panel */ html[data-theme="dark"] main > .download { background: radial-gradient(520px 320px at 88% 0%, rgba(243, 131, 16, 0.28), transparent 60%), linear-gradient(135deg, #2A3C34 0%, #22312B 100%); } html[data-theme="dark"] .download h2 { color: #fff; } html[data-theme="dark"] .download p { color: rgba(255, 255, 255, 0.85); } /* -------------------------------------------------------------------------- Guides (help.css hardcoded colors) -------------------------------------------------------------------------- */ html[data-theme="dark"] .docs-sidebar::-webkit-scrollbar-thumb { background: #3A453E; } html[data-theme="dark"] .docs-sidebar::-webkit-scrollbar-thumb:hover { background: #4A5750; } html[data-theme="dark"] .docs-content code, html[data-theme="dark"] .docs-content pre { background: var(--dm-raised); } html[data-theme="dark"] .docs-callout.info { background: rgba(33, 150, 243, 0.14); } html[data-theme="dark"] .docs-callout.warning { background: rgba(243, 131, 16, 0.14); } html[data-theme="dark"] .docs-callout.success { background: rgba(76, 175, 80, 0.14); } html[data-theme="dark"] .docs-callout.danger { background: rgba(244, 67, 54, 0.14); } html[data-theme="dark"] .docs-screenshot img { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }