/* ========================================================================== English Voiced — shared lesson theme Linked by every file in /lessons/. Defines the design tokens the lesson pages reference (var(--color-text-primary) etc.) — matched to the exact dark "Slate & Rose" palette used on englishvoiced.com's homepage, so lesson pages look like the same site rather than a bolted-on light theme. Also carries the shared full-site-nav header and print rules. Change something here once; every lesson picks it up. ========================================================================== */ :root{ --font-sans: 'Archivo', system-ui, -apple-system, sans-serif; /* ---- homepage tokens, copied exactly ---- */ --wrap:1300px; --ink:#08080a; --bone:#f4f1ea; --body:#d6d6db; --label:#8b8b93; --label-dim:#6f6f77; --slate:#55555d; --articles:#0d3f50; --articles-hi:#10505f; --articles-tint:#57a6bd; --videos:#4a5a67; --videos-hi:#586b7a; --videos-tint:#9fb2c0; --games:#8f1728; --games-hi:#a51b2f; --games-tint:#e05a6e; --quizzes:#9c2f5e; --quizzes-hi:#b23a6d; --quizzes-tint:#e086ab; --lessons:#9a6a0b; --lessons-hi:#b37c0d; --lessons-tint:#d9a02b; --courses:#1c6b34; --courses-hi:#22803c; --courses-tint:#4fb56f; /* ---- lesson-page roles, mapped onto the tokens above ---- */ --color-text-primary: var(--bone); --color-text-secondary: var(--body); --color-background-primary: #111114; /* card surface, one step up from --ink */ --color-background-secondary: #1a1a1f; /* nested/inset box surface */ --color-border-secondary: rgb(255 255 255 / .12); --color-border-tertiary: rgb(255 255 255 / .08); --ev-ink: var(--ink); --ev-accent: var(--lessons); /* this lesson section's brand color */ --ev-accent-hi: var(--lessons-hi); --ev-accent-tint: var(--lessons-tint); } /* ---------- Light theme override -------------------------------------- Toggled by EVLesson's theme-toggle button, which sets and remembers the choice in localStorage. --ink/--bone intentionally swap meaning here (--ink is always "page background", --bone is always "the color that contrasts with it") so every rule that already reads those two tokens — the logo, the Book a Lesson chip, body{background} — flips correctly with no extra overrides. The six *-tint brand tokens are swapped for darker, higher-contrast versions of themselves, since the pale tints were tuned to sit on a near-black page and wash out on a light one; this alone re-colors nav links, eyebrows and hover states everywhere they're used. Small inline-styled badges elsewhere in a lesson (topic pills, feedback chips) use literal dark-tuned colors rather than these variables, so they stay visually subdued rather than fully adapting — a known, acceptable trade-off rather than an oversight. ------------- */ :root[data-theme="light"]{ --ink:#f7f6f2; --bone:#111114; --body:#3a3a40; --label:#6b6b73; --label-dim:#8a8a90; --articles-tint:#0d3f50; --videos-tint:#3a4750; --games-tint:#7a1322; --quizzes-tint:#7c2650; --lessons-tint:#7a540a; --courses-tint:#175a2c; --color-text-primary:#17171c; --color-text-secondary:#5c5b66; --color-background-primary:#ffffff; --color-background-secondary:#f1efe9; --color-border-secondary:rgba(0,0,0,.14); --color-border-tertiary:rgba(0,0,0,.09); } *{box-sizing:border-box} body{background:var(--ink);color:var(--color-text-primary);transition:background .15s,color .15s} /* ---------- Shared header: full site nav, matching the homepage ---------- */ .ev-lesson-header-wrap{border-bottom:1px solid var(--color-border-tertiary)} .ev-lesson-header{ max-width:calc(var(--wrap) + 56px);margin:0 auto; padding:22px 28px 18px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; font-family:var(--font-sans); } .ev-lesson-header a{text-decoration:none} .ev-lesson-header__logo{display:flex;align-items:baseline;gap:10px} .ev-lesson-header__logo-name{ font-family:'Archivo Black',sans-serif;font-size:17px;letter-spacing:.02em; text-transform:uppercase;color:var(--bone); } .ev-lesson-header__logo-by{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--label-dim)} .ev-lesson-header__nav{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; } .ev-lesson-header__nav a{transition:opacity .15s,color .15s} .ev-lesson-header__nav a:hover{opacity:.8} .ev-lesson-header__nav-articles{color:var(--articles-tint)} .ev-lesson-header__nav-videos{color:var(--videos-tint)} .ev-lesson-header__nav-games{color:var(--games-tint)} .ev-lesson-header__nav-quizzes{color:var(--quizzes-tint)} .ev-lesson-header__nav-lessons{color:var(--lessons-tint)} .ev-lesson-header__nav-courses{color:var(--courses-tint)} .ev-lesson-header__nav-book{color:var(--ink);background:var(--bone);padding:10px 18px;border-radius:8px;font-weight:700;transition:background .15s,color .15s} /* ---------- Subbar: category crumb + theme toggle, below the divider ---- */ .ev-lesson-subbar{ max-width:calc(var(--wrap) + 56px);margin:0 auto; padding:14px 28px 4px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--font-sans); } .ev-lesson-header__crumb{font-size:13px;color:var(--label)} .ev-lesson-header__crumb a{color:var(--label);border-bottom:1px solid transparent;text-decoration:none} .ev-lesson-header__crumb a:hover{color:var(--ev-accent-tint);border-bottom-color:currentColor} .ev-theme-toggle{ display:inline-flex;align-items:center;gap:2px; padding:3px;border-radius:8px; border:0.5px solid var(--color-border-secondary); background:var(--color-background-primary); } .ev-theme-toggle__opt{ appearance:none;border:0;background:transparent;margin:0;cursor:pointer; padding:6px 14px;border-radius:6px; font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--color-text-secondary);transition:all .15s; } .ev-theme-toggle__opt:hover{color:var(--color-text-primary)} /* Always a bright, fixed amber chip with dark text — deliberately NOT var(--ev-accent-tint), which darkens in light mode for nav-link contrast on a white page. That darkened value made "Light" nearly unreadable against its own active pill (dark text on a dark pill). A self-contained filled swatch doesn't have that problem, so it can just stay bright + dark-text in both themes. */ .ev-theme-toggle__opt.on{background:#d9a02b;color:#17171c} /* ---------- Lesson quiz links (EVLesson.initQuizLinks) -------------------- */ .ev-lesson-subbar__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ev-quiz-btn{ display:inline-flex;align-items:center;gap:6px; padding:7px 14px;border-radius:8px; font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--quizzes);color:#fff;text-decoration:none;white-space:nowrap; transition:background .15s; } .ev-quiz-btn:hover{background:var(--quizzes-hi)} .ev-quiz-btn--lg{padding:12px 20px;font-size:12px} .ev-quiz-card{ max-width:calc(var(--wrap) + 56px);margin:40px auto 48px;padding:0 28px; font-family:var(--font-sans);box-sizing:border-box; } .ev-quiz-card__inner{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:22px 24px;border-radius:12px; background:var(--color-background-primary); border:0.5px solid var(--color-border-secondary);border-left:3px solid var(--quizzes-tint); } .ev-quiz-card__inner > div:first-child{flex:1 1 320px;min-width:0} .ev-quiz-card__actions{display:flex;gap:10px;flex-wrap:wrap} .ev-quiz-card__kicker{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--quizzes-tint);margin-bottom:6px} .ev-quiz-card__title{font-size:20px;font-weight:600;color:var(--color-text-primary);margin-bottom:6px} .ev-quiz-card__text{font-size:14px;line-height:1.5;color:var(--color-text-secondary)} @media (max-width:600px){ .ev-quiz-card{padding:0 16px;margin-top:28px} .ev-quiz-card__inner{padding:18px} .ev-quiz-card__actions{width:100%;flex-direction:column} .ev-quiz-card__inner .ev-quiz-btn--lg{width:100%;justify-content:center;box-sizing:border-box} } @media print{.ev-quiz-card,.ev-quiz-btn{display:none !important}} /* ---------- Glossary print / save-as-PDF ---------------------------------- */ .ev-gloss-actions{display:flex;justify-content:flex-end;margin-bottom:10px} .ev-gloss-print-btn{ display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:7px 14px; border-radius:8px;border:0.5px solid var(--color-border-secondary); background:var(--color-background-primary);color:var(--color-text-secondary);cursor:pointer; font-family:var(--font-sans);transition:all .15s; } .ev-gloss-print-btn:hover{background:var(--color-background-secondary);border-color:var(--ev-accent);color:var(--ev-accent-tint)} .ev-gloss-print-btn:disabled{opacity:.4;cursor:default} /* ---------- Light-theme touch-ups for common inline exercise classes ---- .fb-ok/.fb-no (correct/incorrect feedback) are defined per lesson but share this naming convention; darken them here so they stay readable on a white background instead of looking washed out. ------------------ */ :root[data-theme="light"] .fb-ok{background:rgba(28,107,52,.10);color:#175a2c} :root[data-theme="light"] .fb-no{background:rgba(143,23,40,.10);color:#7a1322} /* Printing (or "Save as PDF") shows ONLY the glossary content, nothing else. */ @media print{ body.ev-printing-glossary > *:not(.ev-print-root){display:none !important} body.ev-printing-glossary .ev-print-root{display:block !important} body.ev-printing-glossary{background:#fff !important;color:#111 !important} .ev-print-root{padding:0 !important} .ev-print-title{font-size:20px;font-weight:700;margin-bottom:2px;font-family:var(--font-sans);color:#111} .ev-print-sub{font-size:12px;color:#555;margin-bottom:16px;font-family:var(--font-sans)} .ev-gloss-actions{display:none !important} .audio-btn, .act{display:none !important} /* interactive controls make no sense on paper */ }