:root { --bg: #F5F2FC; --surface: #FFFFFF; --surface-2: #F2EFFB; --line: #E4DCFA; --ink: #2A2350; --muted: #6F63A0; --cyan: #0E8F82; --cyan-tint: #DFF3EF; --magenta: #C13268; --magenta-tint: #FBE3EC; --amber: #E39A1F; --amber-tint: #FBEBD1; /* PrepPath brand palette (rebrand, extended to the app - see DECISIONS.md's "App rebranded to match marketing site's navy/orange" entry). --violet keeps its name so every existing var(--violet)/ var(--violet-tint) call site (34 of them) picks up the real brand orange automatically, same technique marketing.css used - it is not literally violet any more. --violet-deep is the hover/pressed shade. */ --violet: #FD5E3B; --violet-tint: #FFE6DD; --violet-deep: #E14E2C; --steel: #6F63A0; --steel-tint: #F2EFFB; /* Secondary dark brand colour, matching css/marketing.css's --mkt-navy* tokens exactly - used for the dashboard hero band instead of a solid saturated orange fill (orange is reserved for accents/buttons, per DECISIONS.md's reasoning for the marketing CTA bands). */ --navy: #01234F; --navy-deep: #001229; --good: #1B8F5C; --good-bg: #E7F5EE; --bad: #C7433A; --bad-bg: #FBEAE8; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); font-family: 'Atkinson Hyperlegible', sans-serif; color: var(--ink); padding: 26px 16px 70px; } @media (min-width: 900px) { body { padding: 38px 32px 90px; } } @media (min-width: 1300px) { body { padding: 46px 48px 100px; } } /* .wrap is the "chrome" container - dashboard, tile grids, list views - and grows fluidly with the viewport (clamp, not breakpoint-stepped) up to a cap so it never looks stretched-thin on an ultra-wide monitor. Content/task views (taking a paper, a focus quiz, reading a lesson or FAQ) get their own narrower reading-width cap below instead - real screen width should go to more breathing room and more grid columns in the chrome, not to a wider question card. */ .wrap { max-width: clamp(900px, 92vw, 1500px); margin: 0 auto; } /* See app/index.html's early script: hides the dashboard on arrival from a "?login=1" link until the real session check (further down the page) decides whether to actually show the login screen or reveal the dashboard as normal - prevents a flash of the dashboard first. */ .pending-auth-check #view-dashboard { display: none; } #view-paper, #view-focus-quiz, #view-revision-lesson, #view-help { max-width: 760px; margin-left: auto; margin-right: auto; } a { text-decoration: none; color: inherit; } button { font: inherit; } .back-link { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--muted); padding: 0; margin-bottom: 16px; } .back-link:hover { color: var(--ink); } /* ---------- hero ---------- */ /* Navy gradient, not a solid orange fill - mirrors css/marketing.css's .mkt-cta-band (linear-gradient(120deg, var(--mkt-navy), var(--mkt-navy-deep))) so orange stays reserved for the accent/button rather than covering a whole full-bleed band. */ .hero { position: relative; background: linear-gradient(120deg, var(--navy), var(--navy-deep)); border-radius: 26px; padding: clamp(32px, 4vw, 46px) clamp(30px, 4vw, 44px); overflow: hidden; margin-bottom: 26px; isolation: isolate; } .hero::before { content: ""; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: #0B2E5C; z-index: 0; } .hero::after { content: ""; position: absolute; bottom: -50px; right: 70px; width: 100px; height: 100px; border-radius: 26px; transform: rotate(18deg); background: var(--violet); opacity: 0.9; z-index: 0; } .hero-content { position: relative; z-index: 2; max-width: 100%; } @media (min-width: 641px) { .hero-content { max-width: 460px; } } .hero-eyebrow { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #9FB2C9; margin: 0 0 10px; } .hero h1 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: clamp(26px, 1.6vw + 20px, 34px); line-height: 1.15; color: #ffffff; margin: 0 0 14px; } .hero p { color: #C9D3E0; font-size: 15px; line-height: 1.6; margin: 0 0 22px; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: var(--violet); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: none; cursor: pointer; } .hero-icons { display: none; } .hero-icons-mobile { display: none; } /* ---------- session grid / paper tiles ---------- */ .section-eyebrow { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); margin: 0 0 6px; } h2 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: clamp(22px, 0.6vw + 20px, 25px); margin: 0 0 18px; } /* The dashboard's own session grid is a small, curated set (6 tiles laid out 3x2 on purpose) so it stays a fixed 3 columns at every width above mobile - unlike .grid-flex below, more room shouldn't add a 4th column here and break that layout. */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } /* Long uniform list grids (practice papers, focus areas, topic pickers, revision hub) should genuinely use extra width instead of just sitting in 3 fixed columns forever - auto-fit lets them flow to 4-5 columns on a wide screen and collapse to 1-2 on a small one, without a breakpoint for every step. */ .grid-flex { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } @media (max-width: 640px) { .grid-flex { grid-template-columns: 1fr; } } .tile { display: flex; align-items: flex-start; gap: 16px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 20px; position: relative; transition: transform 0.12s ease, box-shadow 0.12s ease; } a.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,35,80,0.10); } a.tile:active { transform: scale(0.98); } .tile.tint-cyan { background: var(--cyan-tint); border-color: transparent; } .tile.tint-magenta { background: var(--magenta-tint); border-color: transparent; } .tile.tint-amber { background: var(--amber-tint); border-color: transparent; } .tile.tint-violet { background: var(--violet-tint); border-color: transparent; } .tile.disabled { cursor: default; } .tile.disabled:hover { transform: none; box-shadow: none; } .tile.fill-cyan { background: #0E8F82; border-color: transparent; } .tile.fill-magenta { background: #C13268; border-color: transparent; } .tile.fill-amber { background: #F2A93B; border-color: transparent; } /* Real navy, not var(--violet) - this tile sits next to .fill-amber in the same grid, and var(--violet) now resolves to orange, so using it here would put two similar-but-different oranges side by side. Same reasoning DECISIONS.md documents for .grad-violet on the marketing site (remapped to navy for the identical reason). */ .tile.fill-violet { background: var(--navy); border-color: transparent; } .tile.fill-navy { background: #2A2350; border-color: transparent; } .tile.fill-cyan .tile-icon, .tile.fill-magenta .tile-icon, .tile.fill-amber .tile-icon, .tile.fill-violet .tile-icon, .tile.fill-navy .tile-icon { background: rgba(255,255,255,0.22); border-color: transparent; color: #ffffff; } .tile.fill-cyan h3, .tile.fill-magenta h3, .tile.fill-amber h3, .tile.fill-violet h3, .tile.fill-navy h3 { color: #ffffff; } .tile.fill-cyan p, .tile.fill-magenta p, .tile.fill-violet p, .tile.fill-navy p { color: rgba(255,255,255,0.82); } .tile.fill-amber p { color: rgba(42,35,80,0.72); } .tile.fill-amber h3 { color: #2A2350; } .tile.fill-cyan .tile-arrow, .tile.fill-magenta .tile-arrow, .tile.fill-violet .tile-arrow, .tile.fill-navy .tile-arrow { color: rgba(255,255,255,0.7); } .tile.fill-amber .tile-arrow { color: rgba(42,35,80,0.55); } .tile-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; background: var(--surface); border: 1px solid var(--line); } .tile-body { flex: 1; } .tile-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tile h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16.5px; margin: 0 0 4px; } .tile p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; } .tile-arrow { font-size: 16px; color: var(--muted); flex-shrink: 0; } .soon-badge { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; } .tile-count { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } /* ---------- progress teaser (dashboard) + progress screen ---------- */ .progress-teaser { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 18px 22px; margin-top: 12px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .progress-teaser:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42,35,80,0.10); } .progress-teaser-left { display: flex; align-items: flex-start; gap: 14px; } .progress-teaser-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--violet-tint); color: var(--violet); display: flex; align-items: center; justify-content: center; } .progress-teaser-eyebrow { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; } .progress-teaser h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 4px; color: var(--ink); } .progress-teaser p { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 46ch; line-height: 1.5; } .progress-empty { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 34px); text-align: center; max-width: 520px; margin: 0 auto; } .progress-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--violet-tint); color: var(--violet); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .progress-empty .soon-badge { margin-bottom: 10px; } .progress-empty h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 19px; margin: 8px 0 10px; } .progress-empty p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; } .progress-empty-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; } .progress-empty-list li { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--ink); line-height: 1.5; position: relative; padding-left: 32px; } .progress-empty-list li::before { content: "\2192"; position: absolute; left: 12px; color: var(--violet); font-weight: 700; } /* ---------- Progress (real data) ---------- */ /* Bold Playful tile language (see dashboard's .tile) applied to the stat cards - a light colour tint + rounded corners instead of a plain white/grey box, matching how the rest of the app now reads. */ .progress-summary-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .progress-stat-card { flex: 1; min-width: 200px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 22px; text-align: center; } .progress-stat-card.tint-violet { background: var(--violet-tint); border-color: transparent; } .progress-stat-card.tint-cyan { background: var(--cyan-tint); border-color: transparent; } .progress-gauge-ring { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; } .progress-gauge-ring-inner { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 21px; color: var(--ink); } .progress-stat-label { font-size: 13.5px; color: var(--muted); margin: 0; } .progress-streak-number { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 44px; color: var(--violet); line-height: 1; margin: 8px 0 4px; } /* A visible, non-broken-looking first-run state: a fresh account's genuine "0 day streak" gets a muted rather than brand-coloured number, so it reads as "nothing yet" rather than looking like a rendering bug. */ .progress-streak-number.is-zero { color: var(--muted); } .progress-trend-card { text-align: left; display: flex; flex-direction: column; } .progress-trend-title { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; } .progress-trend-card svg { display: block; width: 100%; height: 48px; } .progress-subject-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .progress-subject-card { flex: 1; min-width: 180px; border-radius: 18px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .progress-subject-card.tint-cyan { background: var(--cyan-tint); } .progress-subject-card.tint-magenta { background: var(--magenta-tint); } .progress-subject-card .subject-name { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); } .progress-subject-card .subject-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .progress-subject-card .subject-pct { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 22px; color: var(--ink); } .progress-section-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16.5px; color: var(--ink); margin: 0 0 12px; } .progress-topic-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .progress-topic-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; padding: 6px; margin: -6px; border-radius: 12px; font: inherit; text-align: left; cursor: default; } a.progress-topic-row { cursor: pointer; transition: background 0.12s ease; } a.progress-topic-row:hover { background: var(--surface-2); } /* Taken out of the flex flow deliberately: only rows (real Focus Areas) render this arrow at all - plain
rows (paper-section/Quick Challenge keys with no matching Focus Area) never do. When it was a normal flex child, its reserved space (even at opacity:0) still pushed .progress-topic-pct further left on every row than on every
row, so the percentage column never lined up between the two - visible as two different right edges in the rendered list. Absolute-positioning it removes it from the flex flow entirely, so the pct column's position no longer depends on whether a given row happens to have the arrow. */ a.progress-topic-row .progress-topic-go { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--muted); opacity: 0; transition: opacity 0.12s ease; } a.progress-topic-row:hover .progress-topic-go { opacity: 1; } .progress-topic-name { width: 130px; flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); } .progress-bar-track { flex: 1; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 999px; } .progress-topic-pct { width: 40px; flex-shrink: 0; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted); } .progress-paper-list { display: flex; flex-direction: column; gap: 10px; } .progress-paper-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; } .progress-paper-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 2px; } .progress-paper-date { font-size: 12.5px; color: var(--muted); margin: 0; } .progress-paper-score { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 15px; color: var(--violet); flex-shrink: 0; } .reset-progress-btn { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; background: none; color: var(--bad); border: 1px solid var(--bad-bg); border-radius: 999px; padding: 8px 16px; cursor: pointer; flex-shrink: 0; } .reset-progress-btn:hover { background: var(--bad-bg); } /* ---------- Top bar (brand header + account strip) ---------- */ /* Gives the app a real brand presence and a way back to the marketing site - previously #accountStrip (an email + Log out string) was the only thing in the app's header, with no logo at all. The logo sits outside #accountStrip since renderAccountStrip() (js/auth.js) replaces that element's entire innerHTML on every auth-state change. */ .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .app-logo { display: flex; align-items: center; line-height: 1; flex-shrink: 0; } .app-logo img { display: block; height: 34px; width: auto; } @media (max-width: 480px) { .app-logo img { height: 28px; } } /* ---------- Account strip / auth / paywall ---------- */ .account-strip { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .account-strip-email { font-size: 13px; color: var(--muted); align-self: center; margin-right: 4px; } .account-strip-link { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13.5px; background: none; border: none; color: var(--violet); cursor: pointer; padding: 6px 4px; } .account-strip-signup { background: var(--violet); color: #ffffff; border-radius: 999px; padding: 7px 16px; } .auth-gate-reason { background: var(--violet-tint); color: var(--violet); font-size: 13.5px; font-weight: 600; border-radius: 12px; padding: 12px 16px; margin: -8px 0 20px; } .auth-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; } .auth-label { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); margin-top: 10px; } .auth-input { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .auth-input:focus { outline: 2px solid var(--violet); outline-offset: 1px; } .auth-status { font-size: 13.5px; margin: 10px 0 0; min-height: 0; } .auth-status-error { color: var(--bad); } .auth-status-info { color: var(--good); } .auth-toggle-line { font-size: 13.5px; color: var(--muted); text-align: center; margin: 14px 0 0; } .auth-toggle-line a { color: var(--violet); font-weight: 700; } .paywall-card { text-align: center; padding: 32px 24px; } .paywall-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--violet-tint); color: var(--violet); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .paywall-card h3 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 8px; } .paywall-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 40ch; margin-left: auto; margin-right: auto; } /* ---------- SEAG help (FAQ + Words) ---------- */ .help-tabs { display: flex; gap: 8px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); } .help-tab { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: 0.02em; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 4px 12px; cursor: pointer; margin-bottom: -1px; } .help-tab.active { color: var(--violet); border-bottom-color: var(--violet); } .glossary-related { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .glossary-related-chip { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; background: var(--violet-tint); color: var(--violet); border: 1px solid var(--violet); border-radius: 999px; padding: 5px 12px; cursor: pointer; } .glossary-mini-visual { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 8px; padding: 12px; margin: 14px 0; color: var(--violet); } .glossary-mini-visual svg { width: 100%; max-width: 220px; height: auto; } .glossary-mini-visual span { font-size: 13px; color: var(--muted); font-family: 'Atkinson Hyperlegible', sans-serif; } .help-search-row { margin-bottom: 14px; } .help-search-input { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 15px; font-family: 'Atkinson Hyperlegible', sans-serif; color: var(--ink); } .help-search-input:focus { outline: none; border-color: var(--violet); } .faq-result-count { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 10px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .faq-question { cursor: pointer; padding: 14px 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15.5px; font-weight: 700; color: var(--ink); } .faq-question::-webkit-details-marker { display: none; } .faq-question span { flex: 1; } .faq-subject { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet); background: var(--violet-tint); border-radius: 999px; padding: 3px 10px; flex-shrink: 0; font-style: normal; } .faq-answer { padding: 0 18px 16px; font-size: 15px; line-height: 1.65; color: var(--ink); border-top: 1px solid var(--line); } .faq-answer p { margin: 14px 0 0; } .faq-answer p:first-child { margin-top: 14px; } .faq-empty { color: var(--muted); font-size: 14.5px; padding: 20px 0; text-align: center; } /* ---------- Revision by topic ---------- */ .revision-lesson-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .revision-lesson-item { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; } .revision-lesson-item:hover { border-color: var(--muted); } .revision-lesson-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--amber-tint); color: var(--amber); display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; } .revision-lesson-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .revision-lesson-item-body strong { font-size: 15.5px; } .revision-lesson-item-body small { color: var(--muted); font-size: 12.5px; } .revision-to-practice { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--cyan-tint); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; } .revision-to-practice strong { display: block; font-size: 14.5px; } .revision-to-practice span { color: var(--muted); font-size: 13px; } .revision-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 18px; } .revision-intro { font-size: 16px; line-height: 1.55; margin: 0 0 18px; } .revision-section { margin-bottom: 16px; } .revision-section:last-child { margin-bottom: 0; } .revision-section p { margin: 0; font-size: 14.5px; line-height: 1.6; } .revision-label { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .revision-example { background: var(--surface-2); border-radius: 10px; padding: 14px 16px; } .revision-example p { margin: 8px 0; font-size: 14.5px; } .revision-example ol { margin: 8px 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; } .revision-example .answer-callout { display: inline-block; margin-top: 8px; background: var(--violet-tint); color: var(--violet); border-radius: 8px; padding: 8px 14px; font-family: 'Baloo 2', sans-serif; font-weight: 700; } .revision-tip { background: var(--cyan-tint); border-radius: 10px; padding: 12px 16px; } .revision-tip .revision-label { color: var(--cyan); } .revision-trap { background: var(--bad-bg); border-radius: 10px; padding: 12px 16px; } .revision-trap .revision-label { color: var(--bad); } .revision-check { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; } .revision-check-q { font-size: 15px; font-weight: 700; margin: 0 0 12px; } .revision-check-options { display: flex; flex-wrap: wrap; gap: 8px; } .revision-check-opt { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; cursor: pointer; color: var(--ink); flex: 1; min-width: 120px; } .revision-check-opt:disabled { cursor: default; } .revision-check-opt.correct { border-color: var(--good); background: var(--good-bg); color: var(--good); } .revision-check-opt.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); } .revision-check-feedback { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 8px; border-left: 3px solid; font-size: 14px; line-height: 1.5; background: var(--surface-2); } .revision-check-feedback.show { display: block; } .revision-check-feedback.correct { border-left-color: var(--good); } .revision-check-feedback.wrong { border-left-color: var(--bad); } .revision-check-feedback .head { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 4px; } .revision-check-feedback.correct .head { color: var(--good); } .revision-check-feedback.wrong .head { color: var(--bad); } .revision-check-feedback p { margin: 0; } .revision-remember ul { margin: 8px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.7; } .revision-lesson-actions { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 10px; } .revision-lesson-actions .btn-primary, .revision-lesson-actions .restart { width: 100%; text-align: center; } /* ---------- practice paper quiz ---------- */ .nav-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 18px; } .pill { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; color: var(--muted); } .pill.active { border-color: var(--ink); color: var(--ink); background: var(--surface-2); } /* Static info row (not clickable filters) - used above a topic-picker grid to give the page a bit of intro weight beyond a single caption line, without implying the badges do anything when tapped. */ .info-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .info-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 10px; } .info-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .rules { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #0E8F82; border-radius: 14px; padding: 14px 18px; margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .rules b { color: var(--ink); } .progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .progress-label { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); } .progress-score { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 12.5px; color: #0E8F82; background: var(--cyan-tint); padding: 3px 10px; border-radius: 999px; } .progress-track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 8px; } .progress-fill { height: 100%; background: var(--violet); border-radius: 999px; transition: width 0.25s ease; } .qcard { background: var(--surface); border-radius: 24px; border: none; box-shadow: 0 12px 28px rgba(60,40,120,0.10); padding: 24px 22px; margin-bottom: 20px; } .eyebrow { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 16px; } .sentence { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 10px; column-gap: 18px; margin-bottom: 22px; } .grp { display: flex; flex-direction: column; align-items: center; padding: 0 2px; } .grp .tag { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 4px; margin-bottom: 5px; border: 1px solid; } .grp .words { font-size: 18.5px; line-height: 1.4; text-align: center; padding-bottom: 4px; border-bottom: 3px solid transparent; } .grp.reveal-correct .words { background: var(--good-bg); border-radius: 4px; } .grp.reveal-wrong .words { background: var(--bad-bg); border-radius: 4px; } .answers { display: flex; flex-wrap: wrap; gap: 10px; } .opt { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 0; width: 56px; cursor: pointer; color: var(--ink); transition: transform 0.1s ease, opacity 0.15s ease, border-color 0.15s ease; } .opt:active { transform: scale(0.95); } .opt[data-c="none"] { flex: 1; min-width: 130px; } .qcard.answered .opt:not(.chosen) { opacity: 0.45; } .blank-sentence { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17.5px; line-height: 1.5; color: var(--ink); margin-bottom: 20px; } .blank-chip { display: inline-block; min-width: 64px; text-align: center; border-bottom: 3px solid var(--muted); padding: 0 4px; font-weight: 700; color: var(--muted); } .choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; background: var(--surface-2); border: none; border-radius: 14px; padding: 13px 16px; cursor: pointer; font-family: 'Atkinson Hyperlegible', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); transition: opacity 0.15s ease, transform 0.1s ease; } .choice-row:active { transform: scale(0.99); } .choice-row .choice-row-main { display: flex; align-items: center; gap: 12px; } .choice-row .tag { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; padding: 5px 9px; border-radius: 9px; border: none; background: var(--violet-tint); color: var(--violet); flex-shrink: 0; min-width: 26px; text-align: center; } .choices.answered .choice-row:not(.chosen-correct):not(.chosen-wrong):not(.reveal-correct) { opacity: 0.5; } .choice-row.chosen-correct { background: var(--good); color: #ffffff; } .choice-row.chosen-correct .tag { background: rgba(255,255,255,0.28); color: #ffffff; } .choice-row.chosen-wrong { background: var(--bad); color: #ffffff; } .choice-row.chosen-wrong .tag { background: rgba(255,255,255,0.28); color: #ffffff; } .choice-row.reveal-correct { background: var(--good-bg); border: 2px solid var(--good); padding: 11px 14px; } .choice-row-check { display: none; flex-shrink: 0; } .choice-row.chosen-correct .choice-row-check-correct { display: inline-flex; } .choice-row.chosen-wrong .choice-row-check-wrong { display: inline-flex; } .free-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } input.free-input { flex: 1; min-width: 140px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-family: 'Atkinson Hyperlegible', sans-serif; background: var(--surface-2); color: var(--ink); } input.free-input:focus { outline: none; border-color: #0E8F82; } .unit-label { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--muted); font-size: 14px; } .input-error { display: none; color: var(--bad); font-size: 13px; margin-top: 6px; } .input-error.show { display: block; } .diagram-wrap { display: flex; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 18px; overflow-x: auto; } .diagram-wrap table { border-collapse: collapse; font-family: 'IBM Plex Mono', monospace; font-size: 13px; } .diagram-wrap th, .diagram-wrap td { border: 1px solid var(--line); padding: 6px 12px; text-align: center; } .diagram-wrap th { background: var(--surface); font-weight: 500; } .passage { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 20px; overflow: hidden; } .passage summary { cursor: pointer; padding: 12px 16px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #0E8F82; background: var(--surface-2); list-style: none; } .passage summary::-webkit-details-marker { display: none; } .passage-body { padding: 6px 20px 16px; font-size: 15px; line-height: 1.85; } .passage-h { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15.5px; margin: 16px 0 6px; color: var(--ink); } .passage-h:first-child { margin-top: 10px; } .passage-line .ln { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: 11.5px; margin-right: 8px; } .feedback { display: none; margin-top: 16px; padding: 16px 18px; border-radius: 16px; border: none; font-size: 14px; line-height: 1.55; background: var(--surface-2); } .feedback.show { display: block; } .feedback.correct { background: var(--good-bg); } .feedback.wrong { background: var(--bad-bg); } .feedback .head { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; display: block; } .feedback.correct .head { color: var(--good); } .feedback.wrong .head { color: var(--bad); } .feedback p { margin: 0; color: var(--ink); } .btn-primary { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; background: var(--violet); color: #ffffff; border: none; border-radius: 999px; padding: 13px 24px; cursor: pointer; } .next-btn { display: none; margin-top: 16px; width: 100%; } .next-btn.show { display: inline-block; } .done { display: none; text-align: center; padding: 36px 20px; background: var(--surface); border-radius: 24px; border: none; box-shadow: 0 12px 28px rgba(60,40,120,0.10); } .done.show { display: block; } .done h2 { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 8px; } .done p.lead { color: var(--muted); margin: 0 0 22px; } .breakdown { display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin: 0 auto 24px; text-align: left; } .breakdown-row { display: flex; justify-content: space-between; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; padding: 10px 16px; background: var(--surface-2); border-radius: 12px; } .breakdown-row span:last-child { color: #0E8F82; } .restart { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14.5px; background: var(--violet); color: #ffffff; border: none; border-radius: 999px; padding: 12px 26px; cursor: pointer; } /* ---------- ask tutor ---------- */ .tutor-wrap { margin: 4px 0 16px; } .tutor-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 152px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; background: var(--violet-tint, #EFECFB); color: var(--violet); border: 1px solid var(--violet); border-radius: 999px; padding: 8px 16px; cursor: pointer; } .tutor-btn .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tutor-panel { display: none; margin-top: 12px; background: var(--violet-tint, #EFECFB); border: 1px solid var(--violet); border-radius: 10px; padding: 14px 16px; } .tutor-panel.show { display: block; } .tutor-prompt { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet); margin: 0 0 10px; } .tutor-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .tutor-choice { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13.5px; background: #ffffff; color: var(--violet); border: 1px solid var(--violet); border-radius: 8px; padding: 9px 14px; cursor: pointer; flex: 1; min-width: 150px; } .tutor-body { margin-top: 10px; } .tutor-hint, .tutor-strategy, .tutor-explain { background: #ffffff; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; } .tutor-hint-label { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--violet); margin-bottom: 3px; } .tutor-hint p, .tutor-strategy p, .tutor-explain p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .tutor-next { font-size: 13.5px; padding: 9px 16px; background: var(--violet); } /* ---------- working out pad ---------- */ /* 20px top margin, not 4px - previously this sat almost flush against the last answer option (.choices' own 4px bottom margin collapses with a sibling's small top margin, per normal CSS margin-collapsing, so the two 4px values didn't add up to 8px - they collapsed to just 4px). */ .wo-wrap { margin: 20px 0 10px; } .wo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 152px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; background: var(--amber-tint); color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 8px 16px; cursor: pointer; } .wo-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--amber); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wo-panel { display: none; margin-top: 12px; background: var(--amber-tint); border: 1px solid var(--amber); border-radius: 10px; padding: 14px 16px; } .wo-panel.show { display: block; } .wo-note { font-size: 13px; color: var(--muted); margin: 0 0 10px; } .wo-textarea { width: 100%; min-height: 100px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink); margin-bottom: 10px; } .wo-textarea:focus { outline: none; border-color: var(--amber); } .wo-clear { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; background: #ffffff; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; cursor: pointer; } /* ---------- practice paper: exam bar (timer + submit) ---------- */ .exam-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); border-radius: 18px; padding: 12px 16px; margin-bottom: 18px; position: sticky; top: 10px; z-index: 5; box-shadow: 0 10px 24px rgba(42,35,80,0.18); } .exam-timer { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 20px; letter-spacing: 0.03em; color: #ffffff; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 6px 16px; } .exam-timer-low { color: #ffffff; background: var(--bad); } .exam-timer-zero { color: #ffffff; background: var(--bad); } .btn-submit-paper { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; background: var(--amber); color: var(--ink); border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer; white-space: nowrap; } /* ---------- practice paper: question navigator grid ---------- */ .qnav-grid { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; } .qnav-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 5px 0; } .qnav-row + .qnav-row { border-top: 1px solid var(--line); } .qnav-row-label { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); width: 100px; flex-shrink: 0; } .qnav-row-btns { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .qnav-btn { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 12px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; } .qnav-btn.answered { background: var(--violet-tint); border-color: var(--violet); color: var(--violet); } .qnav-btn.current { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; font-weight: 700; } .qnav-btn.review-correct { background: var(--good-bg); border-color: var(--good); color: var(--good); } .qnav-btn.review-wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); } .qnav-btn.review-skipped { background: var(--amber-tint); border-color: var(--amber); color: var(--amber); } /* ---------- practice paper: neutral "selected" state (no reveal) ---------- */ .opt.selected { border-color: var(--violet); background: var(--violet-tint); color: var(--violet); } .choice-row.selected { background: var(--violet-tint); border: 2px solid var(--violet); padding: 11px 14px; } .choice-row.selected .tag { background: var(--violet); color: #ffffff; } /* ---------- practice paper: exam / review footer nav ---------- */ .exam-qnav { display: flex; gap: 10px; margin-top: 18px; } .exam-qnav .btn-primary { flex: 1; } .btn-secondary { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 13px 20px; cursor: pointer; flex-shrink: 0; } .btn-secondary:disabled { opacity: 0.4; cursor: default; } .done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .restart-secondary { background: var(--surface-2); color: var(--ink); }