/** * Learn English JP — Sitewide Japanese Toggle * assets/css/jp-toggle.css * * Shared across all 7 activity types (lessons, dialogues, speaking, * practices, flashcards, listening, quizzes). Two responsibilities: * * 1. The hide rule: any element tagged with the shared `.lejp-jp` class * is hidden the instant `` carries the `lejp-jp-hidden` class. * That class is applied/removed by assets/js/jp-toggle.js (and, on * first paint, by the anti-FOUC inline script printed in wp_head — * see ej_print_jp_toggle_antiflash() in functions.php) — never set * here in CSS directly. * * 2. The switch UI: a small iOS-style toggle button * (.lejp-jp-switch) dropped into each activity shell's topbar, * replacing every type-specific JP toggle button that existed * before (lesson blur-reveal spans, dialogue's #dgJpToggle, * speaking's #spJpToggle). */ /* ── 1. Hide rule ─────────────────────────────────────────────────────── */ html.lejp-jp-hidden .lejp-jp { display: none !important; } /* ── 2. Switch UI ─────────────────────────────────────────────────────── */ .lejp-jp-switch { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 8px 4px 4px; border-radius: 100px; cursor: pointer; font-family: inherit; line-height: 1; -webkit-tap-highlight-color: transparent; } .lejp-jp-switch:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; } .lejp-jp-switch__track { position: relative; display: inline-block; width: 34px; height: 20px; border-radius: 100px; background: #cbd5e1; transition: background-color .15s ease; flex-shrink: 0; } .lejp-jp-switch[aria-checked="true"] .lejp-jp-switch__track { background: #4f46e5; } .lejp-jp-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: translateX(0); transition: transform .15s ease; } .lejp-jp-switch[aria-checked="true"] .lejp-jp-switch__thumb { transform: translateX(14px); } .lejp-jp-switch__label { font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #64748b; } .lejp-jp-switch[aria-checked="true"] .lejp-jp-switch__label { color: #4f46e5; }