/* base.css ─ design tokens, layout shell, masthead, status bar, buttons,
shared utilities, icons, toast, focus, no-script fallback, reduced-motion.
Loaded first; other stylesheets depend on the variables it declares. */
:root {
--bg: #f6f1e7;
--bg2: #efe8d8;
--paper: #fdfaf2;
--ink: #1a1612;
--ink2: #4a423a;
--muted: #6f6557;
--rule: #d8cfbb;
--rule2: #e8e0cb;
--primary: #1d3557;
--primary-ink: #f6f1e7;
--primary-shadow: #0d1f33;
--accent: #b85b3a;
--gold: #8e6a25;
--gold-shadow: #6e511a;
--correct: #3d6a3a;
--correct-bg: #e6efd9;
--wrong: #93291e;
--wrong-bg: #f3dcd5;
--heart: #a8362a;
--flame: #b86619;
--bg-grad-warm: rgba(180, 138, 58, 0.06);
--bg-grad-cool: rgba(29, 53, 87, 0.05);
--shadow:
0 1px 0 rgba(26, 22, 18, 0.06), 0 8px 24px -12px rgba(26, 22, 18, 0.14);
--shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.08);
--serif:
"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia,
serif;
--sans:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica,
Arial, sans-serif;
--mono: "SF Mono", Menlo, Consolas, monospace;
--radius: 12px;
--radius-lg: 16px;
--radius-sm: 8px;
}
/* ── Dark theme ──────────────────────────────────────────────
Activated by `data-theme="dark"` on . The boot script in
index.html sets this from a user preference (or system pref when
unset). src/theme.js keeps it in sync afterwards.
The palette mirrors the light palette's "scholarly warm" intent:
a sepia near-black instead of pure #000, with the navy/gold/terracotta
accents lifted just enough to read on dark. */
[data-theme="dark"] {
--bg: #181410;
--bg2: #221c15;
--paper: #2a2218;
--ink: #f0e8d6;
--ink2: #c8bea8;
--muted: #8e8470;
--rule: #3d342a;
--rule2: #322a20;
--primary: #7ea3cc;
--primary-ink: #0d1622;
--primary-shadow: #3d5478;
--accent: #e08a6c;
--gold: #d4a35a;
--gold-shadow: #8a6a30;
--correct: #7eb074;
--correct-bg: #2c3a25;
--wrong: #d7705c;
--wrong-bg: #3a221d;
--heart: #d96655;
--flame: #d68f4a;
--bg-grad-warm: rgba(212, 163, 90, 0.08);
--bg-grad-cool: rgba(126, 163, 204, 0.06);
--shadow:
0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
font-size: 16px;
-webkit-font-smoothing: antialiased;
background-image:
radial-gradient(circle at 20% 10%, var(--bg-grad-warm), transparent 40%),
radial-gradient(circle at 80% 90%, var(--bg-grad-cool), transparent 40%);
min-height: 100vh;
-webkit-transition: background-color 0.2s ease, color 0.2s ease;
transition: background-color 0.2s ease, color 0.2s ease;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.app {
max-width: 1100px;
margin: 0 auto;
padding: 16px 14px 80px;
}
@media (min-width: 601px) {
.app {
padding: 24px 24px 60px;
}
}
/* ── Masthead ── */
header.masthead {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--rule);
padding-bottom: 18px;
margin-bottom: 28px;
gap: 16px;
flex-wrap: wrap;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand .seal {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--primary);
color: var(--primary-ink);
display: grid;
place-items: center;
font-family: var(--serif);
font-style: italic;
font-weight: 600;
font-size: 20px;
}
.brand h1 {
font-family: var(--serif);
font-weight: 600;
font-style: italic;
font-size: 20px;
margin: 0;
letter-spacing: -0.01em;
}
.brand .sub {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
margin-top: 2px;
}
@media (min-width: 601px) {
.brand h1 {
font-size: 24px;
}
.brand .sub {
font-size: 11px;
}
}
/* ── Status bar ── */
.status-bar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.stat {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 13px;
color: var(--ink);
}
.stat .num {
font-family: var(--serif);
font-style: italic;
font-size: 17px;
line-height: 1;
}
.stat.hearts .num {
color: var(--heart);
}
.stat.xp .num {
color: var(--gold);
}
.stat.streak .num {
color: var(--flame);
}
.stat.dim {
opacity: 0.5;
}
.heart-row {
display: inline-flex;
gap: 2px;
}
@media (min-width: 601px) {
.status-bar {
gap: 18px;
}
.stat .num {
font-size: 18px;
}
}
/* ── Theme toggle (in status bar) ── */
.theme-toggle {
background: none;
border: 1.5px solid var(--rule);
border-radius: 50%;
width: 32px;
height: 32px;
display: grid;
place-items: center;
cursor: pointer;
color: var(--ink2);
font-size: 15px;
line-height: 1;
-webkit-transition:
border-color 0.15s,
color 0.15s,
background 0.15s,
transform 0.1s;
transition:
border-color 0.15s,
color 0.15s,
background 0.15s,
transform 0.1s;
-webkit-tap-highlight-color: transparent;
padding: 0;
}
.theme-toggle:hover {
border-color: var(--gold);
color: var(--gold);
background: var(--paper);
}
.theme-toggle:active {
transform: scale(0.94);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
display: none;
}
[data-theme="light"] .theme-toggle .theme-icon-light,
[data-theme="dark"] .theme-toggle .theme-icon-dark {
display: block;
}
/* ── Buttons ── */
.btn {
font: 700 14px/1.4 var(--sans);
padding: 13px 22px;
border: 2px solid transparent;
background: var(--paper);
color: var(--ink);
cursor: pointer;
border-radius: var(--radius);
-webkit-transition:
filter 0.1s,
transform 0.08s,
background 0.15s,
color 0.15s,
border-color 0.15s,
box-shadow 0.08s;
transition:
filter 0.1s,
transform 0.08s,
background 0.15s,
color 0.15s,
border-color 0.15s,
box-shadow 0.08s;
letter-spacing: 0.01em;
-webkit-tap-highlight-color: transparent;
}
.btn:hover {
-webkit-filter: brightness(0.95);
filter: brightness(0.95);
}
.btn:active {
transform: translateY(1px);
}
.btn.primary {
background: var(--primary);
color: var(--primary-ink);
border-color: var(--primary);
box-shadow: 0 4px 0 var(--primary-shadow);
}
.btn.primary:hover {
-webkit-filter: brightness(1.08);
filter: brightness(1.08);
}
.btn.primary:active {
transform: translateY(3px);
box-shadow: 0 1px 0 var(--primary-shadow);
}
.btn.ghost {
background: transparent;
border-color: var(--rule);
color: var(--ink2);
}
.btn.ghost:hover {
background: var(--bg2);
color: var(--ink);
border-color: var(--ink2);
-webkit-filter: none;
filter: none;
}
.btn.gold {
background: var(--gold);
border-color: var(--gold);
color: var(--paper);
box-shadow: 0 4px 0 var(--gold-shadow);
}
.btn.gold:hover {
-webkit-filter: brightness(1.08);
filter: brightness(1.08);
}
.btn.gold:active {
transform: translateY(3px);
box-shadow: 0 1px 0 var(--gold-shadow);
}
.btn.small {
padding: 8px 16px;
font-size: 12.5px;
border-radius: var(--radius-sm);
}
.btn.large {
padding: 16px 32px;
font-size: 16px;
border-radius: 14px;
}
.btn.wide {
width: 100%;
}
.btn.danger {
border-color: var(--wrong);
color: var(--wrong);
background: transparent;
}
.btn.danger:hover {
background: var(--wrong);
color: var(--paper);
-webkit-filter: none;
filter: none;
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
.btn:disabled:hover {
-webkit-filter: none;
filter: none;
transform: none;
background: var(--paper);
color: var(--ink);
}
.btn.ghost:disabled:hover {
background: transparent;
color: var(--ink2);
}
/* ── Settings panel ── */
.settings-panel {
max-width: 560px;
margin: 20px auto;
}
.settings-panel .row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--rule2);
}
.settings-panel .row .label {
font-family: var(--serif);
font-size: 16px;
}
.settings-panel .row .desc {
font-size: 12.5px;
color: var(--muted);
margin-top: 3px;
}
.settings-panel select {
font: 14px var(--sans);
padding: 8px 12px;
border: 1.5px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--paper);
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--ink);
color: var(--paper);
padding: 12px 20px;
font-size: 13px;
border-radius: 20px;
box-shadow: var(--shadow);
z-index: 100;
-webkit-animation: toastIn 0.25s ease;
animation: toastIn 0.25s ease;
}
@-webkit-keyframes toastIn {
from {
opacity: 0;
transform: translate(-50%, 12px);
}
}
@keyframes toastIn {
from {
opacity: 0;
transform: translate(-50%, 12px);
}
}
/* ── Footnote ── */
.footnote {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid var(--rule);
font-size: 11.5px;
color: var(--muted);
line-height: 1.6;
text-align: center;
}
.feedback-row {
margin-top: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.feedback-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1.5px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink2);
font: 600 12.5px var(--sans);
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
-webkit-transition:
border-color 0.15s,
color 0.15s,
background 0.15s,
transform 0.08s;
transition:
border-color 0.15s,
color 0.15s,
background 0.15s,
transform 0.08s;
-webkit-tap-highlight-color: transparent;
}
.feedback-btn:hover,
.feedback-btn:focus-visible {
border-color: var(--primary);
color: var(--primary);
background: var(--bg2);
outline: none;
}
.feedback-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.feedback-btn:active {
transform: translateY(1px);
}
.feedback-icon {
font-size: 14px;
line-height: 1;
color: var(--gold);
}
.feedback-hint {
font-style: italic;
font-family: var(--serif);
font-size: 11.5px;
color: var(--muted);
max-width: 360px;
}
.credit {
margin: 18px 0 0;
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--muted);
}
.credit-heart {
color: var(--heart);
font-style: normal;
margin: 0 1px;
-webkit-animation: creditBeat 1.6s ease-in-out infinite;
animation: creditBeat 1.6s ease-in-out infinite;
display: inline-block;
}
@-webkit-keyframes creditBeat {
0%, 100% { transform: scale(1); }
20% { transform: scale(1.18); }
40% { transform: scale(1); }
}
@keyframes creditBeat {
0%, 100% { transform: scale(1); }
20% { transform: scale(1.18); }
40% { transform: scale(1); }
}
.credit-link {
color: var(--primary);
text-decoration: none;
border-bottom: 1px dotted var(--rule);
-webkit-transition: color 0.15s, border-color 0.15s;
transition: color 0.15s, border-color 0.15s;
}
.credit-link:hover,
.credit-link:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
outline: none;
}
.credit-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.version-tag {
font-family: var(--mono);
font-style: normal;
font-size: 11px;
color: var(--muted);
text-decoration: none;
letter-spacing: 0.02em;
padding: 1px 6px;
border: 1px solid var(--rule);
border-radius: 10px;
-webkit-transition: color 0.15s, border-color 0.15s, background 0.15s;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.version-tag:hover,
.version-tag:focus-visible {
color: var(--gold);
border-color: var(--gold);
background: var(--paper);
outline: none;
}
.version-tag:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Focus ── */
button:focus-visible,
[role="radio"]:focus-visible,
.opt:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.opt:focus-visible {
outline-offset: -2px;
}
/* ── Heart / flame / xp icons ── */
.heart-icon {
width: 18px;
height: 18px;
display: inline-block;
background: var(--heart);
-webkit-mask: url("data:image/svg+xml;utf8,")
center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,")
center/contain no-repeat;
}
.heart-icon.empty {
background: var(--ink2);
opacity: 0.22;
}
.flame-icon {
width: 18px;
height: 18px;
display: inline-block;
background: var(--flame);
-webkit-mask: url("data:image/svg+xml;utf8,")
center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,")
center/contain no-repeat;
}
.xp-icon {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gold);
color: var(--paper);
font-family: var(--serif);
font-style: italic;
font-size: 11px;
font-weight: 600;
}
/* ── Empty state ── */
.empty {
text-align: center;
padding: 50px 20px;
color: var(--muted);
font-family: var(--serif);
font-style: italic;
font-size: 17px;
}
.empty-actions {
text-align: center;
margin-top: 20px;
}
/* ── Inline code ── */
code {
font-family: var(--mono);
font-size: 0.9em;
}
/* ── Shared utility classes (replaces inline styles) ── */
.goal-done {
color: var(--correct);
font-style: italic;
}
.settings-link {
color: var(--primary);
cursor: pointer;
text-decoration: underline;
background: none;
border: none;
font: inherit;
padding: 0;
}
.page-title {
font-family: var(--serif);
font-style: italic;
font-size: 20px;
}
.qbar-counter {
font-size: 12px;
color: var(--muted);
font-family: var(--mono);
}
.review-tag {
font-family: var(--mono);
font-size: 11px;
color: var(--gold);
margin-right: 8px;
}
.perfect-bonus {
font-family: var(--serif);
font-style: italic;
color: var(--gold);
font-size: 16px;
margin: 0;
}
.hearts-notice {
color: var(--ink2);
font-size: 14px;
margin: 14px 0 0;
}
.mock-actions {
margin-top: 36px;
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
/* ── No-script fallback ── */
.noscript-warning {
max-width: 560px;
margin: 40px auto;
padding: 20px 24px;
background: var(--paper);
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
font-size: 14.5px;
line-height: 1.6;
color: var(--ink2);
}
.noscript-warning strong {
display: block;
margin-bottom: 6px;
color: var(--ink);
font-family: var(--serif);
font-size: 17px;
}
/* ── Reduced-motion accommodations ──
Respects users who prefer fewer animations (vestibular disorders, low-motion preference).
Disables confetti, shake, slide, toast, fade animations — but keeps state changes visible. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.confetti-burst {
display: none;
}
}
/* ── Crown level-up confetti (gamification) ── */
.confetti-burst {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
pointer-events: none;
z-index: 200;
overflow: visible;
}
.confetti-piece {
position: absolute;
top: -10px;
-webkit-animation: confettiFall linear forwards;
animation: confettiFall linear forwards;
opacity: 1;
}
@-webkit-keyframes confettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes confettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}