/* ============================================================ Germanize — Dark mode Activated by . Brand blue (#25A7DE) stays; surfaces, ink and tinted sections are remapped. White text on the blue accent is preserved (--lime-deep stays #fff). ============================================================ */ [data-theme="dark"] { --bg: #131519; --bg-subtle: #1A1D23; --bg-card: #1E2128; --paper: #131519; --border: #2C313B; --border-strong: #E8E8E6; --ink: #ECECEA; --ink-2: #B0B2AE; --ink-3: #868983; --lime: #25A7DE; --lime-dark: #5CC3EC; --lime-deep: #FFFFFF; --highlight: #14384A; --word-hl: #5C4B12; color-scheme: dark; } /* a couple of dark surface levels used below */ [data-theme="dark"] { --surface: #1E2128; --surface-2: #262A32; --surface-deep: #0E1014; } /* ---- generic white cards → dark surface ---- */ [data-theme="dark"] .lang-btn, [data-theme="dark"] .eyebrow, [data-theme="dark"] .aio-card, [data-theme="dark"] .float, [data-theme="dark"] .pill, [data-theme="dark"] .card-face, [data-theme="dark"] .ed-article, [data-theme="dark"] .editorial .tile-phone, [data-theme="dark"] .biz-card, [data-theme="dark"] .biz-chip, [data-theme="dark"] .dc-card, [data-theme="dark"] .dcr-item, [data-theme="dark"] .dcr-vcard, [data-theme="dark"] .dc-miniflip-face, [data-theme="dark"] .dnv-face, [data-theme="dark"] .level-card, [data-theme="dark"] .stat, [data-theme="dark"] .compare-card, [data-theme="dark"] .plan-card, [data-theme="dark"] .plan-radio, [data-theme="dark"] .lang-menu, [data-theme="dark"] .article-mock, [data-theme="dark"] .eco-list li, [data-theme="dark"] .ex-card, [data-theme="dark"] .ex-passage { background: var(--bg-card); border-color: var(--border); } /* ---- tinted section backgrounds → dark ---- */ [data-theme="dark"] .editorial { background: #17191F; } [data-theme="dark"] .stats { background: #17191F; } [data-theme="dark"] .exercises { background: #15171C; } [data-theme="dark"] .tile-phone.cream-bg { background: var(--bg-card); } /* ---- sections that were dark-by-design (used var(--ink) as bg, which now flips light) → force a true dark surface, keep light text ---- */ [data-theme="dark"] .demo, [data-theme="dark"] .think-de { background: var(--surface-deep); } [data-theme="dark"] footer { background: var(--surface-deep); color: #A9ABA6; } [data-theme="dark"] .stat:nth-child(2) { background: var(--surface-deep); color: #fff; } [data-theme="dark"] .think-de .think-card { background: #15171C; } /* ---- pill buttons that paint var(--ink) bg + #fff text: in dark --ink is light, so flip the text to the page bg ---- */ [data-theme="dark"] .nav-cta, [data-theme="dark"] .btn-app { color: var(--bg); } [data-theme="dark"] .btn-ghost:hover { color: var(--bg); } [data-theme="dark"] .biz-chip.active { color: var(--bg); } [data-theme="dark"] .word-popover .icon-btn.active, [data-theme="dark"] .word-popover .save-action:hover, [data-theme="dark"] .word-popover .save-action.saved { color: var(--bg); } /* ---- segmented tabs / pill groups ---- */ [data-theme="dark"] .dc-tabs { background: #23262E; } [data-theme="dark"] .dc-tab.active { background: #353A44; color: var(--lime-dark); } /* ---- neutral count/theme badges (#EFEFEA / #F1F1EC) ---- */ [data-theme="dark"] .dc-task-n, [data-theme="dark"] .dnv-theme { background: #2C313B; color: var(--ink); } [data-theme="dark"] .dnv-test { background: #2C313B; color: var(--ink); } [data-theme="dark"] .card-face .tags .t { color: var(--ink); } /* ---- glass cards: light frosted → dark frosted ---- */ [data-theme="dark"] .hero-float { background: rgba(28, 32, 39, 0.62); border-color: rgba(255,255,255,0.10); box-shadow: 0 18px 44px -14px rgba(0,0,0,.5), 0 8px 18px -8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); } [data-theme="dark"] .hero-player { background: rgba(26, 29, 36, 0.66); border-color: rgba(255,255,255,0.10); box-shadow: 0 22px 52px -18px rgba(0,0,0,.6), 0 6px 16px -8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); } [data-theme="dark"] .dc-task { background: rgba(30, 34, 41, 0.78); border-color: rgba(255,255,255,0.10); box-shadow: 0 14px 32px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } [data-theme="dark"] .dc-task.dc-task-mini { background: none; box-shadow: none; border: none; } [data-theme="dark"] .word-popover { background: rgba(26, 29, 36, 0.86); border-color: rgba(255,255,255,0.12); } [data-theme="dark"] .word-popover .icon-btn { background: var(--surface-2); } /* all-in-one tool cards: icon tile gets a visible dark tint (icons are colourful PNGs) */ [data-theme="dark"] .aio-icon { background: var(--surface-2); } [data-theme="dark"] .aio-card:hover .aio-icon { background: var(--lime); } /* ---- mini word card / popover chip backgrounds ---- */ [data-theme="dark"] .hm-cover { background: var(--surface-2); } /* ---- exercise option chips ---- */ [data-theme="dark"] .ed-article .quiz .opt { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .ed-article .quiz .opt.correct { background: rgba(76,175,80,.18); } [data-theme="dark"] .ed-article .quiz .opt.wrong { background: rgba(239,68,68,.18); } /* ---- compare table ---- */ [data-theme="dark"] .compare-table thead th, [data-theme="dark"] .compare-table td { border-color: var(--border); } /* ---- faq items ---- */ [data-theme="dark"] .faq-item { border-color: var(--border); } /* ---- floating mini check / rings on white ---- */ [data-theme="dark"] .float-check .ring::before { background: var(--bg-card); } /* ---- the lighter blue glow stays subtle ---- */ [data-theme="dark"] .dc-sliver { background: rgba(37,167,222,0.34); } /* ---- device frame screens that are hardcoded paper ---- */ [data-theme="dark"] .dev-iphone .dev-screen, [data-theme="dark"] .dev-ipad .dev-screen { background: #0E1014; } /* Hide a mark's blue box until its words actually reveal (the container gets .rw-in on trigger). Prevents an empty blue box floating above the title in dark mode; once revealed, box + white text show normally. */ h2[data-reveal-words]:not(.rw-in) .mark { background: transparent !important; } .allinone h2[data-reveal-words]:not(.rw-in) .mark { background: transparent !important; } /* mark words stay readable white (the box is always blue once shown) */ .sh h2 .mark .rw-word, [data-scroll-highlight] .sh h2 .mark .sh-word, [data-scroll-highlight] .sh-word.is-mark { color: #fff; } /* #allinone mark sweeps in on scroll: dark words until the blue marker fills, then white for contrast — so the words aren't invisible before the sweep */ .allinone .sh h2 .mark .rw-word { color: var(--ink); } .allinone .sh h2 .mark.is-filled .rw-word { color: #fff; } /* ---- Think-in-German (dark in both themes): white icons on subtle tiles ---- */ .think-step-icon { background: rgba(255,255,255,0.08); } .think-step.is-old .think-step-icon { background: rgba(255,255,255,0.05); } .think-step-icon img { filter: brightness(0) invert(1); } [data-theme="dark"] .think-de { background: #15181F; } [data-theme="dark"] .think-de .think-step { background: #1C2028; } [data-theme="dark"] .think-de .think-step.live, [data-theme="dark"] .think-de .think-step:hover { background: #232833; } /* ---- Berufsdeutsch field chips: selected = blue (both themes) ---- */ .biz-chip.active { background: var(--lime) !important; color: #fff !important; } /* ---- Theme cards: uniform white cards with dark text in dark mode ---- */ [data-theme="dark"] .theme-card { background: #fff; } [data-theme="dark"] .theme-card:hover { background: #F2F2EC; } [data-theme="dark"] .theme-card .theme-name, [data-theme="dark"] .theme-card .theme-desc, [data-theme="dark"] .theme-card .theme-icon, [data-theme="dark"] .theme-card::before { color: #1A1A1A; } /* ---- iCloud sync badge: light pill + dark text so it reads on the dark cluster ---- */ [data-theme="dark"] .sync-badge { background: #ECECE6; color: #1A1A1A; border-color: rgba(255,255,255,0.15); } /* New-words flip card: gentle fade-in on tab switch (no rotate; a square card already sits on screen, so keep the transition subtle) */ @keyframes dnv-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .dc-card.is-flip.swap .dnv { animation: dnv-enter .4s cubic-bezier(.2,.8,.2,1) backwards; } } .dc-card.is-flip .dnv { margin-top: 6px; } /* ---- Revisar list: imported doodle icons (light/dark variants) ---- */ .dcr-ic.dcr-ic-img { background: transparent; } .dcr-ic-img img { width: 38px; height: 38px; object-fit: contain; } .dcr-ic-img .ic-d { display: none; } [data-theme="dark"] .dcr-ic-img .ic-l { display: none; } [data-theme="dark"] .dcr-ic-img .ic-d { display: inline; } /* ---- feature tiles: keep dark tiles a consistent dark surface in dark mode ---- */ [data-theme="dark"] .tile-phone.lime-bg, [data-theme="dark"] .tile-phone.dark-bg { background: #1C2028; } /* ---- Article reader + exercises: surfaces that stayed light in dark mode ---- */ [data-theme="dark"] .ex-opt:hover { border-color: var(--ink-3); } [data-theme="dark"] .ex-opt.is-correct { background: rgba(76,175,80,.16); border-color: var(--a2); } [data-theme="dark"] .word-popover .translation { background: rgba(37,167,222,.12); } [data-theme="dark"] .word-popover .save-action, [data-theme="dark"] .word-popover .save-action .label { color: var(--ink); } [data-theme="dark"] .word-popover .chip { background: #262A32; color: var(--ink); } /* ---- Dark mode: line-art icons go white so they read on dark tiles/cards ---- */ [data-theme="dark"] .aio-icon img, [data-theme="dark"] .ex-icon img, [data-theme="dark"] .ex-card-head img, [data-theme="dark"] .ex-q img { filter: brightness(0) invert(1); } /* exercise level badges (B1/A2): light-ink bg flips to near-white in dark and hides the white text — give them a readable dark pill instead */ [data-theme="dark"] .ex-level { background: #3A3F49; color: #fff; } /* ============================================================ Theme toggle button (in nav) ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; }