/* Восемь тем платформы (Волна G2). Все цвета через переменные, data-theme на , переключение мгновенное, выбор в кабинете. Полночь = эталон (дефолт из player.css, здесь без переопределений). */ /* ── тёмные ── */ [data-theme="forest"]{ --bg-0:#04100C; --bg-1:#07231A; --bg-2:#0A2E22; --ink:#EFF5EE; --ink-dim:rgba(239,245,238,.66); --ink-faint:rgba(239,245,238,.4); --gold:#E8C15E; --gold-deep:#C9A040; --gold-soft:rgba(232,193,94,.14); --indigo:#7FB6A2; --mint:#8FE3B8; } [data-theme="graphite"]{ --bg-0:#0A0A0C; --bg-1:#131318; --bg-2:#1A1A21; --ink:#F2F2F4; --ink-dim:rgba(242,242,244,.64); --ink-faint:rgba(242,242,244,.38); --gold:#D9B36A; --gold-deep:#B99147; --gold-soft:rgba(217,179,106,.13); --indigo:#9AA3C0; --mint:#7FD9C0; } /* ── светлые: стекло живёт тенью и светом, не серой плёнкой ── */ [data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]{ --ink-dim:rgba(28,26,20,.68); --ink-faint:rgba(28,26,20,.44); --line:rgba(28,26,20,.1); --line-strong:rgba(28,26,20,.16); --glass:rgba(255,255,255,.55); } [data-theme="white"]{ --bg-0:#EDEBE6; --bg-1:#FAF9F6; --bg-2:#FFFFFF; --ink:#1C1A14; --gold:#B97F1E; --gold-deep:#9A6716; --gold-soft:rgba(185,127,30,.12); --indigo:#5A6BD8; --mint:#1F9E6E; } [data-theme="sage"]{ --bg-0:#E3E9E1; --bg-1:#F2F5F0; --bg-2:#FBFDFA; --ink:#1C241D; --gold:#A8842B; --gold-deep:#8A6B1F; --gold-soft:rgba(168,132,43,.12); --indigo:#57876B; --mint:#22996B; } [data-theme="cream"]{ --bg-0:#EFE5D3; --bg-1:#F8F1E4; --bg-2:#FFFBF2; --ink:#241C10; --gold:#B4791C; --gold-deep:#945F13; --gold-soft:rgba(180,121,28,.13); --indigo:#7A6ACB; --mint:#1F9E6E; } [data-theme="sky"]{ --bg-0:#DCE7F2; --bg-1:#EDF4FB; --bg-2:#F9FCFF; --ink:#14202C; --gold:#A97E20; --gold-deep:#8B6617; --gold-soft:rgba(169,126,32,.12); --indigo:#3F6ED8; --mint:#1E9C74; } [data-theme="lavender"]{ --bg-0:#E6E1F0; --bg-1:#F3F0FA; --bg-2:#FBFAFF; --ink:#201A2C; --gold:#A5771F; --gold-deep:#886116; --gold-soft:rgba(165,119,31,.12); --indigo:#7A5BD6; --mint:#1F9E6E; } /* светлые темы: пересборка стеклянных поверхностей */ [data-theme="white"] body::after,[data-theme="sage"] body::after,[data-theme="cream"] body::after,[data-theme="sky"] body::after,[data-theme="lavender"] body::after{opacity:.03} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]){ color-scheme:light; } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .aurora{ background:radial-gradient(120% 90% at 50% 0%,var(--bg-2) 0%,var(--bg-1) 46%,var(--bg-0) 100%); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .aur{opacity:.35} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .slide-core{ background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.78) 100%); border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(28,26,20,.07),0 24px 60px -28px rgba(28,26,20,.28); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .shell{ background:rgba(255,255,255,.4); border-color:rgba(28,26,20,.06); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) :is(.opt,.match-item,.piece,.letter-say,.chip-btn,.replay-btn,.exit-btn,.heard-chips button,.recap-word,.wb-item,.acc-input,.gap-input){ background:rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(28,26,20,.1),0 6px 18px -10px rgba(28,26,20,.22); color:var(--ink); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) :is(.video-task,.rt-pass,.metaphor-card,.letter-trap,.repeat-cue,.build-answer,.quiz-why){ background:rgba(255,255,255,.6); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .quiz-why.ok{background:rgba(111,217,178,.16)} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .quiz-why.miss{background:rgba(124,140,255,.14)} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .qw-next{ background:rgba(255,255,255,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(28,26,20,.1),0 6px 18px -10px rgba(28,26,20,.22); color:var(--ink); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) :is(.nav,.dock-card,.chest,.stat-chip,.fox-bubble,.test-banner){ background:rgba(255,255,255,.82); color:var(--ink); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .thread-track{background:rgba(28,26,20,.1)} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .trail-veil{ background:linear-gradient(180deg,var(--bg-1) 0%,rgba(255,255,255,.86) 40%,var(--bg-1) 100%); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .trail-bg{opacity:.1;filter:blur(3px) saturate(.9)} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .trail-map-bg img{opacity:.12} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .trail-map-bg::after{ background:linear-gradient(180deg,var(--bg-1) 0%,rgba(255,255,255,.55) 14%,rgba(255,255,255,.6) 86%,var(--bg-1) 100%); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .fog::before{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.9) 46%); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .node-dot{background:rgba(255,255,255,.85);color:var(--ink-faint)} /* три сложности: светлые темы держат тот же свет, без серых рамок */ :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .diff-card{ background:rgba(255,255,255,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(28,26,20,.08),0 8px 22px -14px rgba(28,26,20,.24); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .diff-card.on{ background:rgba(240,178,84,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(240,178,84,.5),0 16px 36px -20px rgba(240,178,84,.55); } :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .diff-btn{background:rgba(255,255,255,.82)} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .diff-sheet{background:rgba(255,255,255,.55)} :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .diff-panel{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 -18px 50px -24px rgba(28,26,20,.35),0 0 0 1px rgba(240,178,84,.22); }