/* ============================================================ LGS Practice Center — app shell ------------------------------------------------------------ This page keeps its own layout and its own typefaces (Manrope for display, DM Sans for body). What it no longer keeps is its own palette: every colour here now comes from the tokens in assets/site.css, so the Practice Center follows the theme toggle like the rest of the site instead of staying white when a student switches to dark. practice.html loads site.css FIRST and this file second. That is what makes the tokens (and .theme-toggle, and the dark logo swap) available. Section 0 below reclaims the handful of selectors the two stylesheets share. Colours that carry meaning — the quiz choice states, the mistake-notebook red, the bars, the chart strokes, the timer ring — are called out where they appear. Every text pair on this page was measured against its real backdrop in both themes; the ratios in the comments are the measured values. ============================================================ */ :root{ /* Type is unchanged: this page's voice is Manrope + DM Sans. */ --display:'Manrope',sans-serif; --body:'DM Sans',sans-serif; } /* ---------- 0. RECLAIM ---------- site.css and this file both style .topbar, .topnav, .brand, .eyebrow, .section-heading and the bare elements. This file wins on everything it declares; these are the properties it did not declare and therefore would inherit from site.css by accident. */ /* site.css makes a flex column at 15px for the marketing pages. The app shell is a grid at the browser default size. */ body{ display:block; min-height:0; font-size:16px; font-family:var(--body); line-height:1.5; color:var(--ink); background:var(--app-bg); } *{box-sizing:border-box} button,select{font:inherit} button{cursor:pointer} /* site.css colours every heading --navy. On the deep hero panel that would repaint white text dark blue. */ .mock-hero h1,.mock-hero h2,.mock-hero h3{color:inherit} /* .eyebrow sits inside .section-heading here, where site.css's ".section-heading p" (0,1,1) outranks ".eyebrow" (0,1,0). */ .section-heading .eyebrow,.page-title .eyebrow{ color:var(--orange-text); font-size:11px; margin-top:0; } /* ---------- 1. TOP BAR ---------- */ .topbar{ position:sticky; z-index:20; top:0; height:76px; display:flex; align-items:center; gap:36px; padding:0 34px; border-bottom:1px solid var(--line); background:var(--topbar-bg); backdrop-filter:blur(16px); } .brand img{display:block;width:auto;height:58px} .topnav{display:flex;align-self:stretch;gap:28px} .topnav a{ display:flex; align-items:center; border-bottom:3px solid transparent; color:var(--nav-ink); font-size:14px; font-weight:700; text-decoration:none; } .topnav a.is-active{border-color:var(--orange);color:var(--navy)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px} .auth-nav{margin-left:0} .mobile-menu{ display:none; border:0; background:transparent; color:var(--navy); font-size:20px; } /* ---------- 2. SHELL ---------- */ .app-shell{ display:grid; grid-template-columns:248px minmax(0,1fr); min-height:calc(100vh - 76px); } .sidebar{ position:sticky; top:76px; height:calc(100vh - 76px); display:flex; flex-direction:column; padding:30px 18px 22px; border-right:1px solid var(--line); background:var(--paper); } .sidebar-title{display:flex;align-items:center;gap:11px;padding:0 10px 24px} /* The "LGS" mark is a solid navy tile in Daylight. --navy inverts to the LIGHTEST value on dark, so this uses the solid-button pair instead — the one token pair that stays "dark tile, light text" in both themes. */ .sidebar-mark{ display:grid; width:46px; height:46px; place-items:center; border-radius:13px; color:var(--solid-ink); background:var(--solid-bg); font-family:var(--display); font-size:13px; font-weight:800; } .sidebar-title strong,.sidebar-title small{display:block} .sidebar-title strong{font-family:var(--display);font-size:14px;color:var(--navy)} .sidebar-title small{margin-top:2px;color:var(--muted);font-size:11px} .side-nav{display:grid;gap:7px} .nav-item{ width:100%; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; padding:12px 13px; border:0; border-radius:11px; color:var(--nav-ink); background:transparent; text-align:left; font-size:14px; font-weight:700; } .nav-item:hover{background:var(--surface-2);color:var(--navy)} .nav-item.is-active{color:var(--blue);background:var(--sky)} .nav-item i{width:18px;text-align:center} /* The mistake counter is 10px text on a fill, so it uses the fill tone that carries text (4.7:1) rather than the graphics tone (3.1:1). */ .nav-item em{ min-width:22px; padding:2px 6px; border-radius:99px; color:var(--on-orange); background:var(--orange-fill); font-size:10px; font-style:normal; text-align:center; } .exam-date{ margin-top:auto; padding:18px; border-radius:16px; color:var(--on-deep); background:linear-gradient(145deg,var(--deep-alt-1),var(--deep-alt-2)); } .exam-date span,.exam-date small{display:block;opacity:.72;font-size:11px} .exam-date strong{display:block;margin:4px 0;font-family:var(--display);font-size:21px} .main-content{ width:100%; max-width:1440px; margin:0 auto; padding:38px clamp(24px,4vw,64px) 72px; } .screen{display:none} .screen.is-active{display:block;animation:enter .25s ease} /* ---------- 3. TYPE ---------- */ .eyebrow{ margin:0 0 6px; color:var(--orange-text); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } h1,h2{font-family:var(--display);letter-spacing:-.03em} .welcome-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:28px; } .welcome-row h1,.page-title h1{ margin:0; color:var(--navy); font-size:clamp(30px,4vw,45px); line-height:1.1; } .welcome-row p:last-child,.page-title>p:last-child{ max-width:660px; margin:10px 0 0; color:var(--muted); } /* ---------- 4. DASHBOARD ---------- */ .streak-card{ display:flex; align-items:center; gap:12px; min-width:166px; padding:14px 17px; border:1px solid var(--callout-line); border-radius:15px; background:var(--orange-soft); } .streak-card>span{ display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:var(--orange-ink); background:var(--callout-ico); } .streak-card strong,.streak-card small{display:block} .streak-card strong{font-family:var(--display);color:var(--navy)} .streak-card small{color:var(--muted);font-size:11px} .hero-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr); gap:20px; } /* The mock-exam hero is a deep blue panel in BOTH themes — it is the one surface that does not invert. That is why the overlays inside it (--deep-ring, --deep-track) are white alphas in both. */ .mock-hero{ position:relative; overflow:hidden; min-height:280px; display:flex; align-items:center; justify-content:space-between; padding:38px; border-radius:24px; color:var(--on-deep); background:linear-gradient(125deg,var(--deep-1),var(--deep-2)); box-shadow:var(--sh-4); } .mock-hero:before{ content:""; position:absolute; right:-70px; bottom:-130px; width:330px; height:330px; border:60px solid var(--deep-ring); border-radius:50%; } .hero-copy{position:relative;z-index:1} .mock-hero h2{ max-width:480px; margin:14px 0 9px; font-size:clamp(27px,3vw,38px); line-height:1.13; } /* Was #c5d9eb, which measured 4.2:1 against the light end of the gradient. Lifted to clear 4.5:1 across the whole sweep. */ .mock-hero p{margin:0 0 25px;color:var(--on-deep-dim);font-size:14px} /* .hero-label sits on the deep panel; .status-chip sits on a white card. They used to share one rule, which left #ffe3ce on a pale orange tint at 1.4:1 — invisible. Same shape, two backgrounds, two ink values. */ .hero-label,.status-chip{ display:inline-flex; padding:5px 9px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .hero-label{color:var(--chip-warm-ink);background:var(--chip-warm-bg)} .status-chip{color:var(--orange-ink);background:var(--orange-soft)} .primary-button,.secondary-button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 20px; border-radius:10px; font-weight:800; } .primary-button{ border:0; color:var(--on-orange); background:var(--orange-fill); box-shadow:var(--sh-orange); } .primary-button:hover{background:var(--orange-hover);transform:translateY(-1px)} .secondary-button{ border:1px solid var(--border-strong); color:var(--blue); background:var(--paper); } .secondary-button:hover{background:var(--sky)} .timer-art{position:relative;z-index:1;flex:0 0 auto;padding:0 18px} /* The ring's filled arc is the only thing separating it from its track, so the arc keeps the bright orange in both themes. */ .timer-ring{ display:grid; width:142px; height:142px; place-items:center; border:10px solid var(--deep-track); border-top-color:var(--orange-2); border-radius:50%; box-shadow:inset 0 0 0 1px var(--deep-ring); } .timer-ring span{ font-family:var(--display); font-size:46px; font-weight:800; line-height:.8; text-align:center; } .timer-ring small{display:block;margin-top:12px;font-size:10px;letter-spacing:.15em} .timer-art>i{ position:absolute; right:14px; bottom:4px; display:grid; width:40px; height:40px; place-items:center; border-radius:50%; color:var(--orange-text); background:var(--paper); } .weekly-card,.custom-practice,.chart-card{ border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:var(--sh-2); } .weekly-card{padding:25px} .card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .card-heading span{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase} .card-heading h2{margin:3px 0 0;color:var(--navy);font-size:20px} .card-heading>strong{color:var(--blue);font:800 30px var(--display)} /* Weekly bars: --bar-idle is a bar that HAS data, --orange marks today. They must stay two distinguishable steps apart, which is why this is not the same token as the empty rails in --track. */ .mini-bars{ height:128px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:8px; margin:22px 0 14px; padding-top:10px; border-bottom:1px solid var(--line); } .mini-bar{position:relative;min-height:4px;border-radius:5px 5px 0 0;background:var(--bar-idle)} .mini-bar.today{background:var(--orange)} /* 9px weekday labels — was #91a0b1 at 2.6:1. */ .mini-bar span{ position:absolute; top:calc(100% + 8px); left:50%; color:var(--muted-2); font-size:9px; transform:translateX(-50%); } .weekly-card>p{margin:20px 0 0;color:var(--muted);font-size:12px} .section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:38px 0 16px; } .section-heading h2{margin:0;color:var(--navy);font-size:25px} .text-button{ border:0; color:var(--blue); background:transparent; font-size:13px; font-weight:800; } /* ---------- 5. UNIT CARDS ---------- */ .featured-units{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .unit-card{ position:relative; overflow:hidden; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--paper); transition:.2s ease; } .unit-card:hover{ border-color:var(--border-hover); box-shadow:var(--sh-3); transform:translateY(-2px); } .unit-card-top{display:flex;align-items:center;justify-content:space-between} /* --unit-color is one of ten fixed hues from practice-data.js. Neither theme can use it raw: on white the two oranges measured 2.4:1, and on a dark card every hue collapses into the surface. The theme supplies the mix (78% toward ink / 55% toward paper) and --chip-base decides whether the tint lightens or darkens. Worst case 3.5:1 light, 6.0:1 dark, across all ten. */ .unit-icon{ display:grid; width:44px; height:44px; place-items:center; border-radius:13px; color:color-mix(in srgb,var(--unit-color,var(--blue)) var(--unit-ink-mix),var(--unit-ink-base)); background:color-mix(in srgb,var(--unit-color,var(--blue)) 12%,var(--chip-base)); } .unit-number{color:var(--muted-2);font-size:10px;font-weight:800;letter-spacing:.1em} .unit-card h3{margin:18px 0 4px;color:var(--navy);font:800 16px var(--display)} .unit-card p{margin:0 0 18px;color:var(--muted);font-size:12px} .unit-card button{ width:100%; min-height:38px; border:1px solid var(--line); border-radius:9px; color:var(--blue); background:var(--surface-3); font-weight:800; } /* ---------- 6. CUSTOM PRACTICE FORM ---------- */ .custom-practice{margin-top:26px;overflow:hidden} .custom-practice summary{ display:flex; align-items:center; justify-content:space-between; padding:19px 22px; cursor:pointer; list-style:none; } .custom-practice summary span{color:var(--navy);font:800 15px var(--display)} .custom-practice summary i{margin-right:8px;color:var(--orange-text)} .custom-practice summary small{color:var(--muted)} #setup-form{ padding:0 22px 22px; border-top:1px solid var(--line); container-type:inline-size; } .setup-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; padding-top:20px; align-items:start; } @container (min-width:1180px){ .setup-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @container (max-width:600px){ .setup-grid{grid-template-columns:minmax(0,1fr)} .setup-footer{align-items:stretch;flex-direction:column;gap:14px} } .setup-grid fieldset{min-width:0;margin:0;padding:0;border:0} .setup-grid legend{ margin-bottom:8px; color:var(--nav-ink); font-size:11px; font-weight:800; text-transform:uppercase; } .choice-pills{display:flex;flex-wrap:wrap;gap:6px} .choice-pills label{position:relative;flex:1 1 62px;min-width:0} .focus-pills label{flex-basis:86px} #count-options label{flex-basis:46px} .choice-pills input{position:absolute;opacity:0} .choice-pills span{ min-height:40px; display:flex; align-items:center; justify-content:center; padding:5px 8px; border:1px solid var(--line); border-radius:8px; color:var(--nav-ink); background:var(--paper); font-size:12px; font-weight:800; white-space:nowrap; } .choice-pills input:checked+span{ border-color:var(--blue); color:var(--blue); background:var(--sky); } .choice-pills input:disabled+span{opacity:.35} /* Keyboard focus: the real is offscreen-transparent, so the ring has to be drawn on the label it controls. */ .choice-pills input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px} .setup-grid select{ width:100%; height:40px; padding:0 10px; border:1px solid var(--line); border-radius:8px; color:var(--nav-ink); background:var(--paper); font-weight:700; } .setup-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .setup-footer p{margin:0} .setup-footer p strong{color:var(--navy)} .setup-footer p span{display:block;margin-top:2px;color:var(--muted);font-size:10px} /* ---------- 7. MOCK EXAMS ---------- */ .page-title{margin-bottom:28px} .page-title.split{display:flex;align-items:flex-end;justify-content:space-between;gap:25px} .exam-card{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--paper); } .exam-card.featured{border-left:5px solid var(--orange);box-shadow:var(--sh-4)} .exam-number{ display:grid; width:70px; height:70px; place-items:center; border-radius:18px; color:var(--blue); background:var(--sky); font:800 25px var(--display); } .exam-card h2{margin:8px 0 5px;color:var(--navy);font-size:23px} .exam-card p{margin:0;color:var(--muted);font-size:13px} .exam-meta{ display:flex; gap:18px; margin-top:16px; color:var(--nav-ink); font-size:12px; font-weight:700; } .exam-meta i{margin-right:5px;color:var(--orange-text)} .exam-tips{ margin-top:24px; padding:27px; border:1px solid var(--line); border-radius:20px; background:var(--paper); } .exam-tips h2{margin:0 0 20px;color:var(--navy);font-size:20px} .exam-tips>div{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .exam-tips p{display:flex;gap:13px;margin:0;color:var(--muted);font-size:12px} .exam-tips p>i{ display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:10px; color:var(--blue); background:var(--sky); } .exam-tips strong,.exam-tips span{display:block} .exam-tips strong{margin-bottom:3px;color:var(--ink)} /* ---------- 8. UNIT TESTS ---------- */ .unit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .unit-grid .unit-card{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:17px; padding:17px 19px; } .unit-grid .unit-card h3{margin:0 0 3px} .unit-grid .unit-card p{margin:0} .unit-grid .unit-card button{width:auto;padding:0 16px} /* ---------- 9. MISTAKE NOTEBOOK ---------- Red here means "you got this wrong", so it has to survive both themes. --red is the graphic tone; --red-ink is the same hue pushed to 5.9:1 on --red-soft for anything that is read rather than seen. */ .notebook-filters{display:flex;gap:8px;margin-bottom:18px} .filter-button{ padding:8px 13px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:var(--paper); font-size:12px; font-weight:800; } .filter-button.is-active{border-color:var(--blue);color:var(--blue);background:var(--sky)} .mistake-list{display:grid;gap:12px} .mistake-item{ display:grid; grid-template-columns:auto 1fr auto; gap:17px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--paper); } .mistake-item>span{ display:grid; width:38px; height:38px; place-items:center; border-radius:10px; color:var(--red-ink); background:var(--red-soft); } .mistake-item h3{margin:0 0 5px;color:var(--navy);font:800 14px var(--display)} .mistake-item p{margin:0;color:var(--muted);font-size:12px} .mistake-item details{margin-top:10px;color:var(--green-ink);font-size:12px} .mistake-item summary{cursor:pointer;font-weight:800} .mistake-item button{align-self:start;border:0;color:var(--muted-2);background:transparent} .empty-state{padding:70px 20px;text-align:center} .empty-state>span{ display:grid; width:68px; height:68px; margin:0 auto 17px; place-items:center; border-radius:20px; color:var(--green-ink); background:var(--green-soft); font-size:26px; } .empty-state h2{margin:0;color:var(--navy);font-size:24px} .empty-state p{margin:8px 0 22px;color:var(--muted)} /* ---------- 10. PROGRESS ---------- */ .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .metric-grid article{ padding:21px; border:1px solid var(--line); border-radius:16px; background:var(--paper); } .metric-grid span,.metric-grid small,.metric-grid strong{display:block} .metric-grid span{color:var(--muted);font-size:11px;font-weight:700} .metric-grid strong{margin:6px 0 1px;color:var(--navy);font:800 30px var(--display)} .metric-grid small{color:var(--muted-2);font-size:10px} .progress-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px} .chart-card{padding:24px} .line-chart{height:230px;margin-top:20px} .line-chart svg{width:100%;height:100%;overflow:visible} .chart-grid{stroke:var(--line);stroke-width:1} .chart-line{ fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; } /* The area fill is a built in practice-center.js. Its stops carry classes rather than stop-color attributes so the gradient follows the theme; a CSS stop-color also outranks the attribute. */ .chart-area{fill:url(#chartFill)} .chart-fill-top{stop-color:var(--blue-2);stop-opacity:.2} .chart-fill-bottom{stop-color:var(--blue-2);stop-opacity:0} /* The point markers read against the chart card, not the line. */ .chart-point{fill:var(--paper);stroke:var(--orange);stroke-width:4} .chart-label{fill:var(--muted-2);font:10px var(--body)} .chart-empty{height:100%;display:grid;place-items:center;color:var(--muted);font-size:13px} .skill-progress{display:grid;gap:17px;margin-top:22px} .skill-row>div{ display:flex; justify-content:space-between; margin-bottom:6px; color:var(--navy); font-size:12px; font-weight:800; } .skill-row>div span:last-child{color:var(--blue)} .skill-track{height:8px;border-radius:99px;background:var(--track)} .skill-track span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--blue-2)); } .account-link{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:19px 22px; border:1px solid var(--border-strong); border-radius:16px; color:var(--navy); background:var(--sky); text-decoration:none; } .account-link>span{display:grid;grid-template-columns:auto 1fr;column-gap:13px} .account-link>span>i{grid-row:1/3;align-self:center;color:var(--blue);font-size:21px} .account-link strong,.account-link small{display:block} .account-link small{color:var(--muted);font-size:11px} /* ---------- 11. QUIZ ---------- */ .quiz-screen{max-width:900px;margin:0 auto} .quiz-header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin-bottom:18px; } .icon-button{ display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:var(--paper); } .quiz-header span,.quiz-header strong{display:block} .quiz-header>div:nth-child(2) span{ color:var(--orange-text); font-size:10px; font-weight:800; text-transform:uppercase; } .quiz-header>div:nth-child(2) strong{color:var(--navy);font:800 17px var(--display)} .quiz-timer{ display:flex!important; align-items:center; gap:8px; padding:9px 13px; border-radius:10px; color:var(--navy); background:var(--orange-soft); } .quiz-timer[hidden]{display:none!important} .quiz-progress{margin-bottom:15px} .quiz-progress>div{ display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font-size:12px; } .quiz-progress>div strong{color:var(--navy)} .progress-track{height:7px;overflow:hidden;border-radius:99px;background:var(--track)} .progress-track span{ display:block; width:10%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--orange),var(--orange-2)); transition:width .25s; } .question-card{ padding:30px; border:1px solid var(--line); border-radius:21px; background:var(--paper); box-shadow:var(--sh-4); } .question-meta{display:flex;align-items:center;gap:9px;margin-bottom:17px} .question-meta span{ padding:5px 9px; border-radius:7px; color:var(--blue); background:var(--sky); font-size:10px; font-weight:800; text-transform:uppercase; } .question-meta small{color:var(--muted-2);font-weight:700} .instruction{margin:0 0 9px;color:var(--muted);font-size:12px;font-weight:700} #question-context.passage,#question-context.question-context{ margin:14px 0 19px; padding:16px 18px; border-left:4px solid var(--blue); border-radius:0 11px 11px 0; color:var(--ink); background:var(--sky); font-size:14px; line-height:1.7; } #question-context p+p{margin-top:10px} .question-card h2{margin:0 0 22px;color:var(--ink);font-size:21px;line-height:1.4} .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px} .choice{ display:grid; grid-template-columns:36px 1fr 20px; align-items:center; gap:10px; min-height:58px; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper); text-align:left; } .choice:hover:not(:disabled){border-color:var(--border-hover);background:var(--surface-2)} .choice-letter{ display:grid; width:36px; height:36px; place-items:center; border-radius:9px; color:var(--blue); background:var(--sky); font-weight:800; } .choice-text{font-size:13px;font-weight:600} .choice-status{text-align:center} /* The three answer states. Each is carried by a border AND a fill AND a letter-tile colour, so none of them depends on hue alone — and the letter tile keeps its own on-fill ink because --green/--red flip from "dark fill, white text" to "bright fill, dark text" on Midnight. */ .choice.is-selected{border-color:var(--blue);background:var(--sky)} .choice.is-correct{border-color:var(--green-line);background:var(--green-soft)} .choice.is-correct .choice-letter{color:var(--on-green);background:var(--green)} .choice.is-wrong{border-color:var(--red-line);background:var(--red-soft)} .choice.is-wrong .choice-letter{color:var(--on-red);background:var(--red)} /* The options you did not pick. This was opacity:.54, which measured 2.4:1 on the letter tile and 3.5:1 on the text — and these are the distractors a student re-reads to work out why they were wrong, so they have to stay readable. Reaching 4.5:1 through opacity alone needs ~0.9, which is not "muted" any more, so the de-emphasis is carried by colour instead: 4.9:1 light, 6.8:1 dark. */ .choice.is-muted{color:var(--muted)} .choice.is-muted .choice-letter{color:var(--muted);background:var(--surface-2)} .feedback{ display:none; margin-top:18px; padding:17px; border:1px solid var(--green-line); border-radius:12px; background:var(--green-soft); } .feedback.is-visible{display:block} /* Was --green on --green-soft at 4.3:1. */ .feedback>strong{display:block;margin-bottom:5px;color:var(--green-ink)} .feedback p{margin:0;color:var(--nav-ink);font-size:12px} .feedback p span:first-child{display:block;color:var(--ink);font-weight:800} .quiz-actions{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin-top:16px; } .quiz-actions>span{color:var(--muted);font-size:11px;text-align:center} .flag-button{border:0;color:var(--muted);background:transparent;font-weight:800} .flag-button.is-active{color:var(--orange-text)} /* ---------- 12. SUMMARY ---------- */ .summary-screen{max-width:900px;margin:0 auto;text-align:center} .summary-screen.is-visible{display:block;animation:enter .25s ease} .result-mark{ display:grid; width:70px; height:70px; margin:0 auto 15px; place-items:center; border-radius:21px; color:var(--on-green); background:var(--green); font-size:27px; box-shadow:var(--sh-green); } .summary-screen h1{margin:0;color:var(--navy);font-size:37px} .summary-screen>p:not(.eyebrow){margin:8px 0;color:var(--muted)} .result-score{ width:210px; margin:24px auto; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--paper); } .result-score strong,.result-score span{display:block} .result-score strong{color:var(--navy);font:800 37px var(--display)} .result-score span{color:var(--orange-text);font-weight:800} .result-actions{display:flex;justify-content:center;gap:10px} .practice-save{ display:flex; justify-content:center; gap:7px; margin:10px 0; color:var(--muted); font-size:11px; } .practice-save-dot{ width:7px; height:7px; margin-top:5px; border-radius:50%; background:currentColor; } .practice-save.saved{color:var(--green-ink)} .practice-save-retry{ border:0; color:inherit; background:transparent; font-weight:800; text-decoration:underline; } .review-list{display:grid;gap:10px;margin-top:30px;text-align:left} .review-item{ padding:17px; border:1px solid var(--line); border-radius:13px; background:var(--paper); } .review-item h3{margin:0 0 7px;color:var(--navy);font:800 13px var(--display)} .review-item p{margin:3px 0;color:var(--muted);font-size:12px} .review-item strong{color:var(--green-ink)} @keyframes enter{ from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} } /* ---------- 13. RESPONSIVE ---------- */ @media(max-width:1050px){ .app-shell{grid-template-columns:84px 1fr} .sidebar{padding-inline:12px} .sidebar-title{justify-content:center;padding-inline:0} .sidebar-title>div,.nav-item span,.exam-date{display:none} .nav-item{grid-template-columns:1fr auto;justify-items:center} .hero-grid{grid-template-columns:1fr} .weekly-card{display:none} .featured-units{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ .topbar{height:68px;padding:0 17px;gap:14px} .brand img{height:48px} .mobile-menu{display:block;margin-left:auto} .topnav{display:none} .topbar .auth-nav{display:none} /* site.css gives .theme-toggle margin-left:auto below 720px, which would fling it away from the hamburger. Here they are a pair. */ .nav-right{margin-left:0;gap:8px} .theme-toggle{margin-left:0} .app-shell{display:block;min-height:calc(100vh - 68px)} .sidebar{ position:fixed; z-index:30; top:68px; left:0; width:250px; height:calc(100vh - 68px); padding:22px 16px; box-shadow:var(--sh-drawer); transform:translateX(-105%); transition:transform .2s; } .sidebar.is-open{transform:none} .sidebar-title{justify-content:flex-start} .sidebar-title>div,.nav-item span,.exam-date{display:block} .nav-item{grid-template-columns:22px 1fr auto;justify-items:start} .exam-date{display:block} .main-content{padding:25px 16px 60px} .welcome-row{align-items:flex-start;flex-direction:column} .streak-card{display:none} .mock-hero{min-height:330px;padding:27px;align-items:flex-start} /* On phones the timer ring becomes a dimmed flourish behind the CTA. At opacity .5 its numerals measured 2.3:1 (light) and 1.5:1 (dark) against whatever they happen to overlap, so the ring stays and the text goes: it is aria-hidden decoration, and the line above it already reads "10 questions · 15 minutes". */ .timer-art{position:absolute;right:13px;bottom:16px;opacity:.5} .timer-ring span{display:none} .featured-units,.metric-grid,.progress-layout,.exam-tips>div{grid-template-columns:1fr} .custom-practice summary small{display:none} .unit-grid{grid-template-columns:1fr} .unit-grid .unit-card{grid-template-columns:auto 1fr} .unit-grid .unit-card button{grid-column:1/3} .exam-card{grid-template-columns:auto 1fr} .exam-card>.primary-button{grid-column:1/3} .page-title.split{align-items:flex-start;flex-direction:column} .choices{grid-template-columns:1fr} .quiz-actions{grid-template-columns:1fr 1fr} .quiz-actions>span{display:none} .question-card{padding:22px 17px} .result-actions{align-items:stretch;flex-direction:column} .mistake-item{grid-template-columns:auto 1fr} .mistake-item>button{grid-column:2} .metric-grid{grid-template-columns:1fr 1fr} } @media(max-width:720px){ /* site.css stacks .section-heading below 720px. This page's heading and its "View all" button have always sat on one row and fit. */ .section-heading{flex-direction:row;align-items:flex-end;gap:14px} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;transition:none!important;animation:none!important} }