/* ============================================================ AQA A-LEVEL BUSINESS COMPANION SITE — STYLESHEET ============================================================ This file controls how EVERY page on the site looks. It is organised into sections, each explained in plain English so you can find and tweak things without needing to understand all of CSS. Sections in this file: 1. Theme variables (colours, fonts — swapped by theme.js) 2. Reset & base styles (sensible defaults for every element) 3. Layout (header, footer, page containers) 4. Lesson slide blocks (the "faithful PowerPoint" section) 5. Companion material (case studies, questions, flashcards…) 6. Components (buttons, badges, the theme switcher) 7. Accessibility helpers (focus states, reduced motion, etc.) 8. Responsive tweaks (adjustments for larger screens) ============================================================ */ /* ------------------------------------------------------------ 1. THEME VARIABLES ------------------------------------------------------------ These "CSS custom properties" (the --variable-name: value; lines) are the single source of truth for every colour and font on the site. Because every other rule below references these variables instead of hard-coded colours, we can switch the whole site's look just by changing which set of variables is active. theme.js does this by adding a data-theme="..." attribute to the tag, which is how the selectors like [data-theme="dark"] below get switched on. This is also what makes the SEN colour-overlay themes (purple, cream, blue) genuinely cheap to add — they're just a new list of colour values, not new page designs. ------------------------------------------------------------ */ :root { /* --- Default theme: "Bright Business" (light) --- Redesigned after Ryan flagged the first version as too muted for a teenage audience. Base surfaces stay clean and neutral (so the colour below actually pops instead of competing with a tinted background), and every content type in the companion section gets its OWN bold accent colour + icon — case studies, exam questions, flashcards etc. no longer all look the same. */ --color-bg: #F7F8FC; /* page background — clean, cool off-white */ --color-bg-raised: #FFFFFF; /* cards / raised surfaces */ --color-bg-companion: #EEF1FA; /* companion section background — visibly distinct from slides */ --color-text: #16192B; /* main text (near-black navy) */ --color-text-muted: #565B72; /* secondary text */ --color-accent: #2952E3; /* primary brand blue — links, slide numbers, buttons */ --color-accent-strong: #1B3FC0; /* darker blue for hover/active */ --color-border: #DDE1EF; --color-card-border: #CBD1E8; --color-success: #17875E; /* used sparingly, e.g. "verified" tags */ --color-stretch: #7C3AED; /* A*/A stretch section accent — vivid purple */ --color-focus: #1B6FD1; /* keyboard focus outline — kept consistent across all themes for clarity */ /* --- Per-content-type accent colours --- Each companion sub-section (case studies, exam questions, flashcards, stretch, AI prompts) gets a distinct, bold colour + icon, so the page reads as lively and varied rather than one long block of similar-looking cards. These stay the same across every theme so the colour-coding is consistent no matter which display theme is active. */ --accent-case-study: #E8710A; /* orange — real-world case studies */ --accent-quiz: #0D9488; /* teal — quick quiz */ --accent-exam: #DC2626; /* red — exam-style questions */ --accent-matching: #B45309; /* amber — matching activity */ --accent-sort: #16A34A; /* green — sort activity */ --accent-command: #DB2777; /* pink — command word match */ --accent-fillblank: #0891B2; /* cyan — fill in the blank */ --accent-flashcard: #2952E3; /* blue — flashcards (matches primary) */ --accent-ai: #6D28D9; /* violet — "try this with AI" */ --accent-knowledge-check: #4B5768; /* slate blue-grey — quick knowledge check (was gold; corrected after reviewing the real department's own "WoW Hour" slide deck, which uses blue/white/grey throughout, not gold — gold only appears inside the crest artwork itself, which this site never reproduces) */ /* NOTE: --accent-exam is kept (all themes) even though no section uses it directly any more — it's reused site-wide as the "incorrect answer" red for quiz/fillblank/sort options, so it must not be removed. */ /* --- Typography --- A bold, slightly condensed sans-serif for headings gives a more energetic, modern-app feel than a traditional serif, while the body font stays a fast, highly-legible system font that works offline. */ --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-heading-weight: 800; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-dyslexic: 'Comic Sans MS', 'Comic Sans', sans-serif; /* widely-available rounded, evenly-spaced font used as the dyslexia-friendly option */ /* --- Base font size: overridden by the font-size toggle in theme.js --- */ --font-scale: 1; } /* Dark theme */ [data-theme="dark"] { --color-bg: #12141F; --color-bg-raised: #1B1E2E; --color-bg-companion: #171A28; --color-text: #EEF0FA; --color-text-muted: #A6ABC4; --color-accent: #6E8CFF; --color-accent-strong: #90A7FF; --color-border: #2B2F45; --color-card-border: #383D58; --color-success: #3FBF8F; --color-stretch: #B892F2; --color-focus: #8FB4FF; --accent-case-study: #FF9A44; --accent-quiz: #2DD4BF; --accent-exam: #F87171; --accent-matching: #FBBF24; --accent-sort: #4ADE80; --accent-command: #F472B6; --accent-fillblank: #22D3EE; --accent-flashcard: #6E8CFF; --accent-ai: #A78BFA; --accent-knowledge-check: #AEBBD1; /* light slate blue-grey (was gold) — see :root note */ } /* Purple tinted overlay — commonly used for visual stress / SEN needs */ [data-theme="purple"] { --color-bg: #F5F1FB; --color-bg-raised: #FCFAFE; --color-bg-companion: #ECE3F8; --color-text: #241B33; --color-text-muted: #5B4E70; --color-accent: #6B3FA0; --color-accent-strong: #52307D; --color-border: #D9CBEE; --color-card-border: #C3AEDD; --color-success: #17875E; --color-stretch: #8A5CC7; --color-focus: #1B6FD1; --accent-case-study: #C2610A; --accent-quiz: #0D8A76; --accent-exam: #C0304A; --accent-matching: #A15C07; --accent-sort: #1E8449; --accent-command: #B23A75; --accent-fillblank: #0E6E82; --accent-flashcard: #4C5FC7; --accent-ai: #7A3FC9; --accent-knowledge-check: #5A6B85; /* slate blue-grey (was gold) — see :root note */ } /* Cream tinted overlay */ [data-theme="cream"] { --color-bg: #FBF3DE; --color-bg-raised: #FFFBEF; --color-bg-companion: #F4E8C6; --color-text: #2B2410; --color-text-muted: #5E5430; --color-accent: #8A6A2F; --color-accent-strong: #6B5122; --color-border: #E3D6A6; --color-card-border: #D4C48A; --color-success: #2F6F4F; --color-stretch: #6B3FA0; --color-focus: #1B6FD1; --accent-case-study: #B45F09; --accent-quiz: #0D7A68; --accent-exam: #B12E2E; --accent-matching: #8A5A0A; --accent-sort: #1E8449; --accent-command: #A6376C; --accent-fillblank: #0C6577; --accent-flashcard: #3A5BB0; --accent-ai: #6B3FA0; --accent-knowledge-check: #4E5F76; /* slate blue-grey (was gold) — see :root note */ } /* Blue tinted overlay */ [data-theme="blue"] { --color-bg: #EAF1FA; --color-bg-raised: #F6FAFF; --color-bg-companion: #DCE9F7; --color-text: #131E2B; --color-text-muted: #47586B; --color-accent: #1B5FA8; --color-accent-strong: #144577; --color-border: #C4D9EE; --color-card-border: #AFC9E4; --color-success: #2F6F4F; --color-stretch: #6B3FA0; --color-focus: #E0A227; /* switched to a warm colour so focus rings still stand out against a blue theme */ --accent-case-study: #B4600A; --accent-quiz: #0D7A68; --accent-exam: #B12E2E; --accent-matching: #8A5A0A; --accent-sort: #1E8449; --accent-command: #A6376C; --accent-fillblank: #0C6577; --accent-flashcard: #1B5FA8; --accent-ai: #6B3FA0; --accent-knowledge-check: #57687D; /* neutral slate grey (was gold) — kept distinct from this theme's own strong blue accent */ } /* ------------------------------------------------------------ 2. RESET & BASE STYLES ------------------------------------------------------------ */ /* box-sizing: border-box means padding/borders are included in an element's width, which makes layout maths far more predictable — a standard, safe default for any site. */ *, *::before, *::after { box-sizing: border-box; } html { /* Respect the font-size toggle. 1rem = 16px * font-scale. */ font-size: calc(16px * var(--font-scale)); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; /* Smooth colour changes when switching themes, without animating anything else (keeps it calm, not flashy). */ transition: background-color 0.2s ease, color 0.2s ease; } /* Dyslexia-friendly font mode, toggled via theme.js adding this class to . */ body.font-dyslexic, body.font-dyslexic * { font-family: var(--font-dyslexic) !important; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight, 800); line-height: 1.2; letter-spacing: -0.01em; margin-top: 0; color: var(--color-text); } p { max-width: 68ch; /* keeps line length readable, per typography best practice */ } /* Every page's

gets a short, bold accent underline — a small graphic flourish that costs nothing (pure CSS, no image) but gives the page a clear, energetic focal point at the top. Was a two-colour blue→orange gradient; changed to solid brand blue in the September 2026 colour correction — see CLAUDE.md Section 8. / .page > h1 { position: relative; padding-bottom: 0.6rem; margin-bottom: 1.25rem; } .page > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 6px; border-radius: 3px; background: var(--color-accent); } a { color: var(--color-accent); } a:hover { color: var(--color-accent-strong); } img, video { max-width: 100%; height: auto; } / ------------------------------------------------------------ 3. LAYOUT — header, footer, page containers ------------------------------------------------------------ / / A thin strip along the very top of every page — a small, cheap way to inject energy without shouting. Was a multi-colour "rainbow" gradient through every companion accent colour; changed to a solid brand blue in the September 2026 colour correction (see CLAUDE.md Section 8) so it reads as consistent with the rest of the navy/blue/white/grey branding instead of clashing with it. / .site-header { border-top: 5px solid var(--color-accent); border-bottom: 1px solid var(--color-border); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } / Two-line brand lockup: the school-facing name on top, the site's actual purpose (AQA A-Level Business Companion) as a small tagline underneath — so the brand feels like "theirs" while the page is still clearly labelled for what it actually is. / .site-headerbrand { font-family: var(--font-heading); text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.15; } .site-headerbrand-name { font-weight: var(--font-heading-weight, 800); font-size: 1.2rem; } .site-headerbrand-name span { color: var(--color-accent); } .site-headerbrand-tagline { font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .page { max-width: 46rem; / comfortable reading width on desktop, still mobile-first below / margin: 0 auto; padding: 1.25rem; } .breadcrumb { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; } .breadcrumb a { text-decoration: none; } .site-footer { border-top: 1px solid var(--color-border); padding: 1.5rem 1.25rem 3rem; font-size: 0.85rem; color: var(--color-text-muted); text-align: center; } / Homepage unit list / .unit-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; } .unit-card { border: 1px solid var(--color-border); border-left: 6px solid var(--color-accent); background: var(--color-bg-raised); padding: 1.1rem 1.3rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(20, 24, 50, 0.05); } .unit-card h2 { font-size: 1.1rem; margin-bottom: 0.4rem; } / Small coloured pill showing the lesson count — a quick visual anchor so each unit card doesn't rely on text alone. / .unit-cardcount { display: inline-block; background: var(--color-accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; margin-bottom: 0.5rem; } .topic-list { list-style: none; padding: 0; margin: 0.5rem 0 0; } .topic-list li { border-top: 1px solid var(--color-border); } .topic-list li:first-child { border-top: none; } .topic-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.1rem; text-decoration: none; color: var(--color-text); font-weight: 600; border-radius: 6px; transition: background-color 0.15s ease, padding-left 0.15s ease; } .topic-list a:hover { color: var(--color-accent-strong); background: var(--color-bg-companion); padding-left: 0.4rem; } .topic-list .lesson-number { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; background: var(--color-accent); color: #fff; font-weight: 800; font-size: 0.75rem; border-radius: 50%; flex-shrink: 0; } / ------------------------------------------------------------ 4. TOPIC INTRO ------------------------------------------------------------ Every page opens with a short, spec-level "what this topic covers" line and its key vocabulary — deliberately brief and generic. This site is a revision/enrichment companion, not a copy of the lesson itself, so nothing here should ever preview what's actually taught in class (see CLAUDE.md Section 1/3). ------------------------------------------------------------ / .topic-intro { font-size: 1.05rem; color: var(--color-text-muted); margin: 0 0 0.5rem; } .topic-vocab { font-size: 0.9rem; margin: 0 0 2rem; } / ------------------------------------------------------------ 4b. KEY CONCEPTS ------------------------------------------------------------ The core definitions, formulas and explanations for this topic — restored (Sept 2026) after the companion-only pivot went too far and stripped out this substance along with the classroom activities. Deliberately styled plainer and more "textbook" than the companion-section blocks below it (a card-like background instead of the tinted companion background, no icon/colour- coding) so it reads as core knowledge, not an activity or a revision game. See CLAUDE.md Section 1 for what is and isn't allowed in this section — concepts and definitions only, never a specific classroom task or the order things are taught in. ------------------------------------------------------------ / .knowledge-section { background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.5rem 1.25rem 1.75rem; margin-bottom: 1.5rem; } .knowledge-section h2 { font-size: 1.3rem; margin: 0 0 1rem; color: var(--color-accent); } .concept { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); } .concept:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .concept h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } .concept p, .concept ul, .concept ol, .concept table { margin: 0 0 0.6rem; } .concept > :last-child { margin-bottom: 0; } /* ------------------------------------------------------------ 5. COMPANION MATERIAL ------------------------------------------------------------ Deliberately different background tone (--color-bg-companion) and a distinct rhythm of components from the rest of the page. ------------------------------------------------------------ / .companion-section { background: var(--color-bg-companion); border-radius: 8px; padding: 1.5rem 1.25rem 2rem; margin-bottom: 1.25rem; } .companion-section h2 { font-size: 1.3rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .companion-section h3 { font-size: 1.05rem; } / ---- Per-section colour-coding ---- Each companion-section carries the aria-label we already gave it in the HTML (e.g. aria-label="Case studies"). We use that SAME attribute — added for accessibility — to also assign a distinct accent colour and emoji icon to that section, via the --section-accent variable. Every component inside (case-study, exam-question, etc.) then reads --section-accent instead of a single fixed colour, so changing a section's colour only ever needs to happen in ONE place here. / .companion-section[aria-label="Case studies"] { --section-accent: var(--accent-case-study); } .companion-section[aria-label="Case studies"] h2::before { content: "🏢"; } .companion-section[aria-label="Quick quiz"] { --section-accent: var(--accent-quiz); } .companion-section[aria-label="Quick quiz"] h2::before { content: "🧠"; } .companion-section[aria-label="Exam-style questions"] { --section-accent: var(--accent-exam); } .companion-section[aria-label="Exam-style questions"] h2::before { content: "🎯"; } .companion-section[aria-label="Quick knowledge check"] { --section-accent: var(--accent-knowledge-check); } .companion-section[aria-label="Quick knowledge check"] h2::before { content: "💡"; } .companion-section[aria-label="Matching activity"] { --section-accent: var(--accent-matching); } .companion-section[aria-label="Matching activity"] h2::before { content: "🧩"; } .companion-section[aria-label="Sort activity"] { --section-accent: var(--accent-sort); } .companion-section[aria-label="Sort activity"] h2::before { content: "🪣"; } .companion-section[aria-label="Command word match"] { --section-accent: var(--accent-command); } .companion-section[aria-label="Command word match"] h2::before { content: "🔑"; } .companion-section[aria-label="Fill in the blank"] { --section-accent: var(--accent-fillblank); } .companion-section[aria-label="Fill in the blank"] h2::before { content: "🔤"; } .companion-section[aria-label="Flashcards"] { --section-accent: var(--accent-flashcard); } .companion-section[aria-label="Flashcards"] h2::before { content: "🗂️"; } .companion-section[aria-label="A star A stretch content"] { --section-accent: var(--color-stretch); } .companion-section[aria-label="A star A stretch content"] h2::before { content: "🚀"; } .companion-section[aria-label="Try this with AI"] { --section-accent: var(--accent-ai); } .companion-section[aria-label="Try this with AI"] h2::before { content: "🤖"; } / Case studies: presented as a note, not a generic card, to avoid the "identical SaaS card" pattern for every content type / .case-study { border-left: 4px solid var(--section-accent, var(--color-accent)); padding: 0.9rem 1.1rem; background: var(--color-bg-raised); border-radius: 0 8px 8px 0; margin-bottom: 1rem; box-shadow: 0 2px 6px rgba(20, 24, 50, 0.04); } .case-study h3 { color: var(--section-accent, var(--color-accent)); } .case-studysource { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.5rem; } / Quick quiz — multiple choice with instant feedback. Nothing here is ever saved: the score is recalculated fresh in the browser each time the page loads, in keeping with this site's "no progress tracking" rule. / .quiz-question { border: 1px solid var(--color-card-border); border-left: 4px solid var(--section-accent, var(--color-accent)); border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; background: var(--color-bg-raised); box-shadow: 0 2px 6px rgba(20, 24, 50, 0.04); } .quiz-questionprompt { font-weight: 600; margin-bottom: 0.75rem; } .quiz-questionoptions { display: flex; flex-direction: column; gap: 0.5rem; } / True/False questions use this modifier instead of the plain options list above, so a quiz mixing formats doesn't just look like a shorter version of the same list every time. / .quiz-questionoptions--truefalse { flex-direction: row; } .quiz-questionoptions--truefalse .quiz-option { flex: 1; text-align: center; font-weight: 700; } .quiz-option { text-align: left; border: 1px solid var(--color-card-border); background: var(--color-bg-companion); color: var(--color-text); border-radius: 6px; padding: 0.6rem 0.8rem; font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; } .quiz-option:hover:not(:disabled) { border-color: var(--section-accent, var(--color-accent)); } .quiz-option:disabled { cursor: default; } / Once a question is answered, both the option the student picked AND the actual correct answer are marked, so they can see the right answer even if they picked wrong. / .quiz-option--correct { border-color: var(--color-success); background: var(--color-success); color: #fff; font-weight: 700; } .quiz-option--incorrect { border-color: var(--accent-exam); background: var(--accent-exam); color: #fff; font-weight: 700; } .quiz-questionfeedback { margin-top: 0.6rem; font-size: 0.85rem; color: var(--color-text-muted); } .quizscore { font-weight: 700; color: var(--section-accent, var(--color-accent)); } / Exam question + collapsible model answer / .exam-question { border: 1px solid var(--color-card-border); border-top: 3px solid var(--section-accent, var(--color-accent)); border-radius: 8px; margin-bottom: 0.9rem; background: var(--color-bg-raised); overflow: hidden; box-shadow: 0 2px 6px rgba(20, 24, 50, 0.04); } / On narrow phones, the question text needs the full row to itself — squeezing it next to the marks/"show answer" label was causing it to wrap awkwardly. So mobile stacks them (column), and the wider-screen rule further down switches back to a single row once there's enough space. / / On narrow phones, the question text needs the full row to itself — squeezing it next to the marks/"show answer" label was causing it to wrap awkwardly. Stacking the question text above a second "meta" row (marks + show/hide) fixes that, and because flex-direction:column stretches children to fill the width by default, .exam-questionmarks below can become its own mini flex-row for "(4 marks)" + "Show answer" without needing any change to the HTML markup itself. / .exam-questionprompt { padding: 0.85rem 1rem; cursor: pointer; font-weight: 600; display: flex; flex-direction: column; gap: 0.4rem; list-style: none; / remove default
marker, custom one below / } .exam-questionprompt::-webkit-details-marker { display: none; } .exam-questionmarks { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 400; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .exam-questionmarks::after { content: "Show answer"; font-weight: 600; color: var(--section-accent, var(--color-accent)); white-space: nowrap; } .exam-question[open] .exam-questionmarks::after { content: "Hide answer"; } .exam-questionanswer { padding: 0 1rem 1rem; border-top: 1px solid var(--color-border); } .exam-questionanswer h4 { font-size: 0.85rem; margin: 0.75rem 0 0.25rem; color: var(--color-text-muted); } / Matching activity — tap two items that belong together (a term and its definition, shuffled together into one list). A single vertical list, rather than two side-by-side columns, reads far better on a phone screen where a full sentence needs room to wrap without squeezing. / .match-activity { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; } .match-item { border: 2px solid var(--color-card-border); background: var(--color-bg-raised); color: var(--color-text); border-radius: 6px; padding: 0.65rem 0.85rem; font-family: var(--font-body); font-size: 0.85rem; text-align: left; cursor: pointer; width: 100%; } .match-item:hover:not(:disabled) { border-color: var(--section-accent, var(--color-accent)); } .match-item--selected { border-color: var(--section-accent, var(--color-accent)); background: var(--color-bg-companion); } .match-item--correct { border-color: var(--color-success); background: var(--color-success); color: #fff; cursor: default; } .match-item--incorrect { border-color: var(--accent-exam); background: var(--accent-exam); color: #fff; } .match-activitystatus { font-weight: 700; color: var(--section-accent, var(--color-accent)); } / Sort activity — tap an item, then tap which of the two labelled buckets it belongs in. Same accessible "tap, then tap" pattern as the matching activity above (rather than real drag gestures — see the matching activity's own comment for why), just applied to sorting into categories instead of pairing things up, so it reads as a genuinely different activity rather than a reskin. / .sort-activitybuckets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0 0.75rem; } .sort-bucket { border: 2px dashed var(--section-accent, var(--color-accent)); background: var(--color-bg-raised); color: var(--section-accent, var(--color-accent)); border-radius: 8px; padding: 0.7rem 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; text-align: center; cursor: pointer; } .sort-activitypool { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .sort-item { border: 2px solid var(--color-card-border); background: var(--color-bg-companion); color: var(--color-text); border-radius: 999px; padding: 0.5rem 0.9rem; font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; } .sort-item:hover:not(:disabled) { border-color: var(--section-accent, var(--color-accent)); } .sort-item--selected { border-color: var(--section-accent, var(--color-accent)); background: var(--section-accent, var(--color-accent)); color: #fff; } .sort-item--incorrect { border-color: var(--accent-exam); background: var(--accent-exam); color: #fff; } .sort-activityresults { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; } .sort-activityresult-column { border: 1px solid var(--color-card-border); border-radius: 8px; padding: 0.5rem; min-height: 2.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .sort-activityresult-column h3 { font-size: 0.8rem; color: var(--color-text-muted); text-align: center; margin: 0 0 0.2rem; } .sort-activityresult-column .sort-item { cursor: default; border-color: var(--color-success); background: var(--color-success); color: #fff; font-size: 0.75rem; } .sort-activitystatus { font-weight: 700; color: var(--section-accent, var(--color-accent)); } / Fill in the blank — a sentence with a missing word, and a row of word "chips" to tap the right one from. Deliberately styled closer to the sort activity's pill-shaped items than to the quiz's full-width option list, so completing a sentence reads differently from answering a multiple-choice question even though the underlying logic (pick the right option, get instant feedback) is similar. / .fillblank-question { border: 1px solid var(--color-card-border); border-left: 4px solid var(--section-accent, var(--color-accent)); border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem; background: var(--color-bg-raised); box-shadow: 0 2px 6px rgba(20, 24, 50, 0.04); } .fillblank-questionprompt { font-weight: 600; margin-bottom: 0.75rem; } .fillblank-questionoptions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fillblank-option { border: 2px solid var(--color-card-border); background: var(--color-bg-companion); color: var(--color-text); border-radius: 999px; padding: 0.5rem 0.9rem; font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; } .fillblank-option:hover:not(:disabled) { border-color: var(--section-accent, var(--color-accent)); } .fillblank-option:disabled { cursor: default; } .fillblank-option--correct { border-color: var(--color-success); background: var(--color-success); color: #fff; font-weight: 700; } .fillblank-option--incorrect { border-color: var(--accent-exam); background: var(--accent-exam); color: #fff; font-weight: 700; } .fillblank-questionfeedback { margin-top: 0.6rem; font-size: 0.85rem; color: var(--color-text-muted); } .fillblankscore { font-weight: 700; color: var(--section-accent, var(--color-accent)); } / Flashcards / .flashcard-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .flashcard-tally { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; } .flashcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 1rem 0; } / Each grid slot now holds the flip-card itself PLUS its "Got it / Still learning" buttons underneath, stacked in a column — see .flashcardrate below for why those buttons live outside the card rather than on its back face. / .flashcard-item { display: flex; flex-direction: column; gap: 0.35rem; } .flashcard { perspective: 800px; height: 110px; } .flashcardinner { position: relative; width: 100%; height: 100%; transition: transform 0.5s; transform-style: preserve-3d; cursor: pointer; border-radius: 6px; } .flashcard.is-flipped .flashcardinner { transform: rotateY(180deg); } .flashcardface { position: absolute; inset: 0; backface-visibility: hidden; border: 2px solid var(--section-accent, var(--color-card-border)); border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.6rem; font-size: 0.85rem; font-weight: 600; background: var(--color-bg-raised); } .flashcardface--back { transform: rotateY(180deg); background: var(--section-accent, var(--color-accent)); color: #fff; font-weight: 400; } / "Got it / Still learning" buttons for quiz mode. Only useful once a student has actually seen the answer, so they're hidden until that specific card is flipped — this sibling selector keys off the SAME .is-flipped class the flip animation already uses, so no extra JS is needed just to show/hide these. / .flashcardrate { display: none; gap: 0.4rem; } .flashcard.is-flipped + .flashcardrate { display: flex; } .flashcardrate-btn { flex: 1; border: 1px solid var(--color-card-border); background: var(--color-bg-raised); color: var(--color-text); border-radius: 6px; padding: 0.3rem 0.3rem; font-size: 0.65rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .flashcardrate-btn.is-active.flashcardrate-btn--known { background: var(--color-success); border-color: var(--color-success); color: #fff; } .flashcardrate-btn.is-active.flashcardrate-btn--learning { background: var(--accent-exam); border-color: var(--accent-exam); color: #fff; } / A/A stretch section — uses the distinct --color-stretch accent / .stretch-block { border: 2px solid var(--color-stretch); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--color-bg-raised); box-shadow: 0 2px 6px rgba(20, 24, 50, 0.04); } .stretch-badge { display: inline-block; background: var(--color-stretch); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.5rem; } /* "Try this with AI" prompt boxes / .ai-prompt { border: 2px dashed var(--accent-ai); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--color-bg-raised); } .ai-promptcaveat { font-size: 0.8rem; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); padding-bottom: 0.6rem; margin-bottom: 0.6rem; } .ai-prompttext { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.85rem; background: var(--color-bg-companion); padding: 0.75rem; border-radius: 4px; white-space: pre-wrap; } .ai-prompt__copy { margin-top: 0.6rem; } / ------------------------------------------------------------ 6. COMPONENTS — buttons, badges, theme switcher ------------------------------------------------------------ / .btn { display: inline-block; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-bg-raised); padding: 0.5rem 1rem; border-radius: 999px; / pill-shaped — reads as friendlier/more modern than a sharp rectangle / font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: var(--font-body); } .btn:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-bg-raised); } .btn--ghost { background: transparent; color: var(--color-accent); } .btn--ghost:hover { background: var(--color-accent); color: var(--color-bg-raised); } / The "Copy prompt" button inside an AI prompt box picks up the violet AI accent colour instead of the site's default blue, so it visually belongs to that box rather than looking mismatched. / .ai-prompt .btn--ghost { color: var(--accent-ai); border-color: var(--accent-ai); } .ai-prompt .btn--ghost:hover { background: var(--accent-ai); border-color: var(--accent-ai); } / The settings panel that holds theme + font-size controls / .settings-toggle { border: 1px solid var(--color-border); background: var(--color-bg-raised); color: var(--color-text); border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .settings-panel { border: 1px solid var(--color-border); background: var(--color-bg-raised); border-radius: 8px; padding: 1rem; margin-top: 0.75rem; display: none; } .settings-panel.is-open { display: block; } .settings-panel fieldset { border: none; padding: 0; margin: 0 0 1rem; } .settings-panel legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; padding: 0; } .theme-swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; } .theme-swatch { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--color-border); cursor: pointer; padding: 0; } .theme-swatch[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } .font-size-controls { display: flex; gap: 0.5rem; align-items: center; } / ------------------------------------------------------------ 7. ACCESSIBILITY HELPERS ------------------------------------------------------------ / / Every interactive element gets a clearly visible focus ring — this is essential for keyboard and screen-reader users and is NOT optional styling. / a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } / Visually-hidden text still available to screen readers, used for a handful of labels that would be visual clutter if always shown on screen. / .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } / Skip link — lets keyboard users jump straight past the header / .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-accent); color: var(--color-bg-raised); padding: 0.6rem 1rem; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; } / ------------------------------------------------------------ 8. RESPONSIVE TWEAKS ------------------------------------------------------------ The site is built mobile-first (everything above already works on a small phone screen). These rules only ADD spacing and layout refinements for wider screens. ------------------------------------------------------------ */ @media (min-width: 640px) { .page { padding: 2rem 1.25rem; } .companion-section { padding: 2rem; } }