/* ========================================================================== ERB Grade 4 Trainer — design system Target device: iPad mini (A17 Pro), 8.3" / 1133×744pt landscape. Audience: 9–10 years old. Confident and modern, deliberately not babyish. ========================================================================== */ :root { --bg: #F5F4F0; --bg-2: #EDEBE5; --card: #FFFFFF; --ink: #1A1B1F; --ink-2: #55575E; --ink-3: #64666E; --line: #E3E1DA; --brand: #4F46E5; --brand-ink: #FFFFFF; --ok: #15803D; --ok-bg: #DCFCE7; --ok-line: #86EFAC; --no: #B45309; --no-bg: #FEF3C7; --no-line: #FCD34D; --accent: var(--brand); --danger: #C2261B; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --shadow: 0 1px 2px rgba(20,20,30,.05), 0 4px 16px rgba(20,20,30,.06); --shadow-lg: 0 2px 4px rgba(20,20,30,.05), 0 12px 32px rgba(20,20,30,.10); --tap: 60px; --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.56,.64,1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#121317; --bg-2:#191A20; --card:#1E2027; --ink:#F2F2F4; --ink-2:#B4B6BE; --ink-3:#90939C; --line:#2C2F38; --ok:#4ADE80; --ok-bg:#0C2A18; --ok-line:#15803D; --no:#FBBF24; --no-bg:#2E2205; --no-line:#92400E; --brand:#8B85FF; --danger:#FF8A80; --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5); } } :root[data-theme="dark"] { --bg:#121317; --bg-2:#191A20; --card:#1E2027; --ink:#F2F2F4; --ink-2:#B4B6BE; --ink-3:#90939C; --line:#2C2F38; --ok:#4ADE80; --ok-bg:#0C2A18; --ok-line:#15803D; --no:#FBBF24; --no-bg:#2E2205; --no-line:#92400E; --brand:#8B85FF; --danger:#FF8A80; --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overscroll-behavior: none; } body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* Scoped to controls, not , so double-tap-to-zoom still works on text. */ button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; } h1,h2,h3 { margin: 0; letter-spacing: -.02em; font-weight: 700; } h1 { font-size: 34px; line-height: 1.15; } h2 { font-size: 23px; } h3 { font-size: 18px; } #app { max-width: 1060px; margin: 0 auto; padding: 20px 24px 40px; } /* ---------- app bar ---------- */ .bar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; min-height: 52px; } .bar .grow { flex: 1; } .back { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px 0 14px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); font-weight: 600; font-size: 16px; transition: transform .18s var(--spring); } .back:active { transform: scale(.94); } .pill { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 650; font-size: 15px; white-space: nowrap; } .pill b { font-size: 16px; } /* ---------- greeting ---------- */ .hero { margin-bottom: 26px; } .hero .sub { color: var(--ink-2); font-size: 17px; margin-top: 6px; } .hero .count { color: var(--ink-3); font-size: 15px; margin-top: 3px; } /* ---------- action cards ---------- */ .actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-bottom: 30px; } .action { position: relative; overflow: hidden; text-align: left; padding: 22px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); transition: transform .2s var(--spring), box-shadow .2s var(--ease); min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; } .action:active { transform: scale(.975); box-shadow: var(--shadow-lg); } .action .k { font-size: 21px; font-weight: 750; letter-spacing: -.02em; } .action .d { color: var(--ink-2); font-size: 15px; margin-top: 5px; line-height: 1.45; } .action .glyph { font-size: 26px; margin-bottom: 12px; opacity: .95; } .action.primary { background: linear-gradient(140deg, #5B54F0 0%, #7C5CFF 55%, #9B6BFF 100%); color: #fff; } .action.primary .d { color: rgba(255,255,255,.86); } .action.primary::after { content: ''; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.13); } .action.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; } .action.wide .glyph { margin: 0; font-size: 22px; } .action.wide .body { flex: 1; } .action.wide .chev { color: var(--ink-3); font-size: 22px; } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #FF6B4A; color: #fff; font-size: 14px; font-weight: 750; } /* Per-domain accent colours. Kept as classes, not inline styles, so the strict Content-Security-Policy (style-src 'self') cannot strip them. */ .d-capitalization { --accent: #FF6B4A; } .d-usage { --accent: #7C5CFF; } .d-punctuation { --accent: #FFA62B; } .d-geometry { --accent: #F43F5E; } .d-patterns { --accent: #8B5CF6; } .d-problemsolving { --accent: #06B6D4; } .d-vocabulary { --accent: #12B886; } .d-reading { --accent: #3B82F6; } .d-verbal { --accent: #EC4899; } .d-numbersense { --accent: #22C55E; } .d-data { --accent: #EAB308; } /* ---------- section + domain list ---------- */ .section-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; font-size: 13px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .section-head .rule { flex: 1; height: 1px; background: var(--line); } .domains { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .domain { display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 16px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); transition: transform .18s var(--spring); min-height: var(--tap); } .domain:active { transform: scale(.975); } .domain .icon { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 17px; font-weight: 800; color: #fff; background: var(--accent); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent); } .domain .body { flex: 1; min-width: 0; } .domain .name { font-weight: 680; font-size: 16.5px; letter-spacing: -.01em; } .domain .meta { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; } .domain .ring { flex: none; } .flag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 11.5px; font-weight: 750; letter-spacing: .03em; vertical-align: 1px; } :root[data-theme="dark"] .flag, :root:not([data-theme="light"]) .flag { background: color-mix(in srgb, var(--accent) 24%, transparent); } /* progress ring */ .ring { position: relative; width: 40px; height: 40px; } .ring svg { transform: rotate(-90deg); display: block; } .ring .track { stroke: var(--line); } .ring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .7s var(--ease); } .ring .txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 750; color: var(--ink-2); } /* ---------- quiz ---------- */ .qhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .qbar { flex: 1; height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; } .qbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .45s var(--ease); } .qcount { font-size: 15px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .timer { font-variant-numeric: tabular-nums; font-weight: 700; } .timer.low { color: var(--danger); } .card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 26px 28px; margin-bottom: 16px; } .tag { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } :root[data-theme="dark"] .tag, :root:not([data-theme="light"]) .tag { background: color-mix(in srgb, var(--accent) 24%, transparent); } .passage { background: var(--bg-2); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; max-height: 34dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 16.5px; line-height: 1.68; } .passage h4 { margin: 0 0 4px; font-size: 17px; } .passage .genre { color: var(--ink-3); font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; } .passage p { margin: 0 0 .85em; } .passage p:last-child { margin-bottom: 0; } .passage em { font-style: italic; } .passage strong { font-weight: 700; } .stem { font-size: 21px; line-height: 1.5; font-weight: 550; letter-spacing: -.01em; white-space: pre-wrap; } .stem b { font-weight: 750; } /* Geometry / data figures */ .figure { margin: 18px auto 2px; padding: 14px; background: var(--bg-2); border-radius: var(--r); display: flex; justify-content: center; } .figure .fig { width: 100%; max-width: 330px; height: auto; color: var(--ink); } .choices { display: grid; gap: 11px; margin-top: 22px; } .choice { display: flex; align-items: center; gap: 14px; text-align: left; min-height: var(--tap); padding: 14px 18px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); font-size: 18px; line-height: 1.4; transition: transform .16s var(--spring), border-color .2s, background .2s; } .choice:active:not(:disabled) { transform: scale(.985); } @media (hover: hover) { .choice:hover:not(:disabled) { border-color: var(--accent); } } .choice .key { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 750; font-size: 15px; background: var(--bg-2); color: var(--ink-2); } .choice .val { flex: 1; } .choice.right { border-color: var(--ok-line); background: var(--ok-bg); } .choice.right .key { background: var(--ok); color: #fff; } .choice.wrong { border-color: var(--no-line); background: var(--no-bg); } .choice.wrong .key { background: var(--no); color: #fff; } .choice:disabled { cursor: default; } .choice.dim { opacity: .5; } .shake { animation: shake .4s; } @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} } .pop { animation: pop .35s var(--spring); } @keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.035)} 100%{transform:scale(1)} } /* feedback */ .feedback { border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px; animation: rise .32s var(--ease); } @keyframes rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } } .feedback.yes { background: var(--ok-bg); border: 1.5px solid var(--ok-line); } .feedback.no { background: var(--no-bg); border: 1.5px solid var(--no-line); } .feedback .fh { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 18px; margin-bottom: 8px; } .feedback.yes .fh { color: var(--ok); } .feedback.no .fh { color: var(--no); } .feedback .fb { font-size: 16.5px; line-height: 1.6; color: var(--ink); } .feedback .fb b { font-weight: 750; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--tap); padding: 0 30px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 38%, transparent); transition: transform .18s var(--spring); } .btn:active { transform: scale(.96); } .btn.ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow); } .btn.block { width: 100%; } .btn.lg { font-size: 19px; min-height: 64px; } .row { display: flex; gap: 12px; } .row > * { flex: 1; } /* Keeps "Next question" reachable without scrolling, even under a long passage. */ .sticky-actions { position: sticky; bottom: 0; z-index: 5; padding: 14px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 62%, transparent); } /* ---------- results ---------- */ .score-wrap { text-align: center; padding: 12px 0 4px; } .score-ring { position: relative; width: 168px; height: 168px; margin: 0 auto 18px; } .score-ring svg { transform: rotate(-90deg); } .score-ring .track { stroke: var(--line); } .score-ring .fill { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); } .score-ring .inner { position: absolute; inset: 0; display: grid; place-items: center; } .score-ring .pct { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .score-ring .of { font-size: 14px; color: var(--ink-3); margin-top: 4px; font-weight: 650; } .score-msg { font-size: 21px; font-weight: 700; margin-bottom: 6px; } .score-note { color: var(--ink-2); font-size: 16px; max-width: 460px; margin: 0 auto 22px; } .recap { display: grid; gap: 9px; margin-top: 8px; } .recap-row { display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 15px; border-radius: var(--r-sm); background: var(--bg-2); font-size: 15.5px; } .recap-row .mark { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; } .recap-row.y .mark { background: var(--ok); } .recap-row.n .mark { background: var(--no); } .recap-row .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recap-row .dm { color: var(--ink-3); font-size: 13px; white-space: nowrap; } /* Expandable miss — the only way to learn from a Test Mode question. */ .recap-item { background: var(--bg-2); border-radius: var(--r-sm); overflow: hidden; } .recap-item summary { display: flex; align-items: center; gap: 12px; padding: 13px 15px; min-height: 52px; cursor: pointer; font-size: 15.5px; list-style: none; } .recap-item summary::-webkit-details-marker { display: none; } .recap-item .mark { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--no); } .recap-item .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recap-item .dm { color: var(--ink-3); font-size: 13px; white-space: nowrap; } .recap-item .chev { color: var(--ink-3); font-size: 20px; transition: transform .2s var(--ease); } .recap-item[open] .chev { transform: rotate(90deg); } .recap-body { padding: 2px 16px 16px; font-size: 15.5px; line-height: 1.6; } .recap-body .ans { display: flex; gap: 9px; padding: 8px 11px; border-radius: 9px; margin-bottom: 7px; } .recap-body .ans span { color: var(--ink-3); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex: none; align-self: center; min-width: 74px; } .recap-body .ans.no { background: var(--no-bg); } .recap-body .ans.yes { background: var(--ok-bg); } .recap-body p { margin: 12px 0 0; color: var(--ink-2); } /* ---------- progress view ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat { background: var(--card); border-radius: var(--r); padding: 17px 16px; box-shadow: var(--shadow); } .stat .n { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .stat .l { color: var(--ink-3); font-size: 13.5px; font-weight: 600; margin-top: 3px; } .skills { display: grid; gap: 8px; } .skill-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--card); border-radius: var(--r-sm); box-shadow: var(--shadow); } .skill-row .nm { flex: 1; font-size: 15.5px; font-weight: 600; } .skill-row .track { width: 96px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .skill-row .track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .skill-row .pc { width: 46px; text-align: right; font-size: 14px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .skill-row .pc.none { color: var(--ink-3); font-weight: 500; } .empty { text-align: center; padding: 50px 20px; color: var(--ink-3); } .empty .big { font-size: 40px; margin-bottom: 12px; } .note { background: var(--bg-2); border-radius: var(--r); padding: 15px 17px; font-size: 15px; color: var(--ink-2); margin-bottom: 18px; border-left: 3px solid var(--accent); } .foot { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 34px; } .foot button { text-decoration: underline; font-size: 14px; color: var(--ink-3); min-height: 44px; padding: 0 16px; } /* ---------- confetti ---------- */ #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; } /* ---------- portrait / small ---------- */ @media (max-width: 780px) { #app { padding: 16px 18px 34px; } h1 { font-size: 29px; } .actions { grid-template-columns: 1fr; } .domains { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .card { padding: 22px 20px; border-radius: var(--r-lg); } .stem { font-size: 19.5px; } .choice { font-size: 17px; } .passage { max-height: 30dvh; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Domain practice button, coloured by the .d- class rather than inline style. */ .btn.accent-btn { background: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }