/* Palettes and display preferences, driven by attributes that prefs.js writes onto : data-theme, data-text, data-layout. Loaded after styles.css and product.css so these win. */ /* ---------------- light ---------------- */ :root[data-theme="light"] { --bg: #faf7f2; --surface: #ffffff; --surface-2: #f3efe7; --line: #e8e3da; --ink: #1f1c18; --ink-dim: #574f45; /* 7.9:1 on --bg */ --ink-faint: #767065; /* 4.60:1 on --bg — WCAG AA for normal text */ --accent: #1B2A6B; --on-accent: #ffffff; --ring: #C08A00; /* 3.05:1 on the white card */ --good: #2f7d45; --bad: #b93f28; /* Rank colours. Used as rings and outlines, never as text, so the bar is WCAG 3:1 for meaningful graphics — these measure 3.4–4.8:1 on --bg. */ --rk-bronze: #B06A2C; --rk-silver: #7C8188; --rk-gold: #A87800; --rk-platinum: #5E8CA3; --rk-diamond: #2E8BC0; --rk-bombat: #8A4FD0; color-scheme: light; } /* ---------------- dark ---------------- */ :root[data-theme="dark"] { --bg: #14100d; --surface: #1f1a16; --surface-2: #2a231d; --line: #3a3129; --ink: #f4efe8; --ink-dim: #c2b6a7; /* 9.0:1 on --bg */ --ink-faint: #a0958a; /* 6.1:1 on --bg — comfortably AA */ /* Navy disappears on a dark ground, so the brand yellow carries actions. */ --accent: #FFCF31; --on-accent: #14100d; --ring: #FFCF31; /* 11.68:1 on the dark card */ --good: #6bbf7b; --bad: #e2684f; /* Same six hues lifted for a dark ground — 6.1–9.6:1 on --bg. */ --rk-bronze: #D9975A; --rk-silver: #AEB4BC; --rk-gold: #E0B23C; --rk-platinum: #84B4CC; --rk-diamond: #59B6E8; --rk-bombat: #AE7BEA; color-scheme: dark; } /* Buttons take their foreground from the palette rather than assuming white. */ .btn { background: var(--accent); color: var(--on-accent); } .btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } :root[data-theme="dark"] .tile .pill-pro { background: #3a2f16; color: #FFCF31; } :root[data-theme="dark"] .streak { background: #2f2413; border-color: #4a3c1f; } :root[data-theme="dark"] .logo-mark { filter: none; } /* Micro-labels were small, letter-spaced and faint all at once. Size and weight restored in both themes. */ .sec-head { font-size: 12px; letter-spacing: .05em; font-weight: 700; } .tile span, .faint { font-size: 13px; } /* ---------------- text size ---------------- zoom scales spacing and tap targets with the glyphs, which is the point for an older reader; transform would not reflow. */ :root[data-text="large"] body { zoom: 1.15; } :root[data-text="xl"] body { zoom: 1.32; } /* ---------------- topic layout ---------------- */ :root[data-layout="list"] .tiles { grid-template-columns: 1fr; } :root[data-layout="list"] .tile { min-height: 0; display: flex; align-items: center; gap: 14px; padding: 15px 16px; } :root[data-layout="list"] .tile .e { margin-bottom: 0; font-size: 26px; } :root[data-layout="list"] .tile b { font-size: 15.5px; } :root[data-layout="list"] .tile .bar { display: none; } :root[data-layout="list"] .tile .pill-pro { position: static; margin-left: auto; order: 99; } /* ---------------- inline speed control ---------------- */ .speed-row { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 2px 0 14px; flex-wrap: wrap; } .speed-row .lbl { font-size: 12px; color: var(--ink-faint); margin-right: 2px; } .speed-btn { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; min-height: 38px; } .speed-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .speed-btn:active { transform: scale(.96); } /* ---------------- settings ---------------- */ .seg { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .seg button { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; min-height: 38px; } .seg button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .dob-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--ink-dim); margin: 10px 0 14px; } input[type="date"] { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; font-size: 16px; color: var(--ink); min-height: 48px; } input[type="range"] { width: 100%; } /* ---------------- word of the day ---------------- A single row. The previous card stacked a label band, 26px type, meaning, a Hindi pill, a hint line and a full-width button — 226px, which pushed the topic list off the bottom of the screen. */ .wotd { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; } .wotd-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: none; text-align: left; padding: 0; } .wotd-body .ico { font-size: 18px; flex: none; } .wotd-body .t { flex: 1; min-width: 0; } .wotd-body .k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1px; } .wotd-body .ro { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wotd-body .en { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wotd-body:active { opacity: .6; } /* The text block is allotted ~250px but its longest line is ~154px, so there is roughly 96px of slack here. Spend it on a word rather than leaving a bare icon that an older learner has to guess at. */ .wotd-slow { flex: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; min-height: 40px; padding: 0 14px; font-size: 15px; line-height: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .wotd-slow span { font-size: 13.5px; font-weight: 600; } .wotd-slow:active { background: var(--accent); color: var(--on-accent); } /* ---------------- progress: what to do today ---------------- One card carrying the daily ring, the streak, and the next actions. It absorbed a separate stat row and a separate hero card; between them the same due count appeared three times. */ .prog { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 15px; margin-bottom: 16px; } .prog-top { display: flex; align-items: center; gap: 13px; } .prog .ring { width: 52px; height: 52px; flex: none; transform: rotate(-90deg); } .prog .ring circle { fill: none; stroke-width: 7; stroke-linecap: round; } .prog .ring-bg { stroke: var(--line); } .prog .ring-fg { stroke: var(--ring); transition: stroke-dashoffset .5s ease; } /* What to do now. Each is a tap target, which is the whole point: the numbers this row replaced were read-only totals that restated the hero beneath. */ .prog-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .act { background: none; border: 0; padding: 2px 6px; cursor: pointer; text-align: center; min-width: 0; } .act + .act { border-left: 1px solid var(--line); } .act-n { display: block; font-size: 17px; font-weight: 800; color: var(--brand-ink); font-variant-numeric: tabular-nums; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); } .act-l i { font-style: normal; } .act:active { opacity: .6; } :root[data-theme="dark"] .act-n { color: var(--accent); } .goal-t { flex: 1; min-width: 0; } .goal-t b { display: block; font-size: 15px; font-weight: 700; } .goal-t span { font-size: 12.5px; color: var(--ink-faint); } .goal-streak { font-size: 14px; font-weight: 700; color: var(--ring); background: var(--surface-2); border-radius: 999px; padding: 6px 12px; flex: none; } /* ---------------- rank ---------------- The chip sits in the dead space at the top right of the dashboard header, opposite the logo. Earned on phrases practised, never on words. */ .rank { flex: none; display: block; text-align: center; cursor: pointer; background: var(--surface); border: 2px solid var(--rank-c); border-radius: 14px; padding: 4px 9px 5px; min-width: 62px; } /* The number stays full-contrast ink: the colour is carried by the ring, which only has to clear 3:1, while text on this palette would not reach 4.5:1. */ .rank-n { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--brand-ink); font-variant-numeric: tabular-nums; } /* Navy vanishes on a dark ground — the same reason .stat b is overridden. */ :root[data-theme="dark"] .rank-n { color: var(--accent); } .rank:active { background: var(--surface-2); } /* ---------------- sheet ---------------- A card over the screen you were on, anchored to the bottom so it opens under the thumb rather than under the notch. */ .sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(20, 16, 13, .5); display: flex; align-items: flex-end; justify-content: center; animation: sheet-fade .15s ease; } .sheet { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 20px 20px 0 0; animation: sheet-up .22s cubic-bezier(.2, .8, .3, 1); } .sheet-bar { display: flex; align-items: center; gap: 10px; flex: none; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); } .sheet-bar h2 { flex: 1; font-size: 18px; font-weight: 800; } .sheet-x { flex: none; width: 36px; height: 36px; border-radius: 999px; cursor: pointer; background: var(--surface-2); color: var(--ink); font-size: 15px; border: 0; } /* The body scrolls, not the page behind it. */ .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 22px; } body.sheet-open { overflow: hidden; } @keyframes sheet-fade { from { opacity: 0; } } @keyframes sheet-up { from { transform: translateY(14%); } } @media (prefers-reduced-motion: reduce) { .sheet-wrap, .sheet { animation: none; } } .rank-hero { text-align: center; padding: 6px 0 14px; } .rank-hero h3 { font-size: 22px; font-weight: 800; margin: 8px 0 2px; } .rank-hero .rank-big { position: relative; width: 84px; height: 84px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; font-size: 42px; line-height: 1; border: 3px solid var(--rank-c); } .rank-hero .rank-big::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--rank-c); opacity: .13; } .rank-next { margin-top: 10px; font-size: 14px; } .rank-next b { color: var(--accent); font-size: 17px; } .ladder { list-style: none; margin: 0 0 16px; padding: 0; } .rung { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; margin-bottom: 8px; } /* Each rung wears its own colour: a ring plus a wash of the same hue behind the medal. Earned is a solid ring, not-yet is dashed — the two states differ in shape as well as depth of colour, which keeps the ladder readable to a colour-blind eye without ever draining a badge to grey. The wash is the hue at low opacity rather than a second set of variables, so it lands correctly on both a cream and a near-black ground. */ .rung-i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--rank-c); } .rung-i::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--rank-c); opacity: .13; } .rung:not(.done) .rung-i { border-style: dashed; } .rung:not(.done) .rung-i::before { opacity: .07; } /* Drawn badges. Each carries its own --rank-c and paints in currentColor, so sizing is all that is left to the call site. */ .medal { position: relative; width: 22px; height: 22px; color: var(--rank-c); } .medal-chip { width: 21px; height: 21px; margin: 0 auto 1px; display: block; } .medal-big { width: 46px; height: 46px; } /* Inline in a sentence: sits on the text baseline rather than above it. */ .medal-inline { width: 1.15em; height: 1.15em; vertical-align: -0.24em; } .rung-t { flex: 1; min-width: 0; } .rung-t b { display: block; font-size: 15px; font-weight: 700; } .rung-t span { font-size: 12.5px; color: var(--ink-faint); } .rung-m { flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); } .rung.done .rung-m { color: var(--ink); font-size: 17px; } .rung.here { border-color: var(--rank-c); box-shadow: 0 0 0 1px var(--rank-c) inset; } /* ---------------- milestone badges ---------------- */ .badges { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; } .badge { flex: none; width: 104px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; text-align: center; } .badge .e { display: block; font-size: 24px; line-height: 1; margin-bottom: 6px; } .badge b { font-size: 12.5px; font-weight: 650; line-height: 1.25; display: block; } /* .bar is a ; without this, height is ignored on an inline box and the progress bar renders as a tall coloured block inside the tile. */ .bar { display: block; } /* ---------------- list rows ---------------- The row and its slow button are siblings: a