/* ============================================================ 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-exam: #DC2626; /* red — exam-style questions */ --accent-flashcard: #2952E3; /* blue — flashcards (matches primary) */ --accent-ai: #6D28D9; /* violet — "try this with AI" */ /* --- 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-exam: #F87171; --accent-flashcard: #6E8CFF; --accent-ai: #A78BFA; } /* 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-exam: #C0304A; --accent-flashcard: #4C5FC7; --accent-ai: #7A3FC9; } /* 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-exam: #B12E2E; --accent-flashcard: #3A5BB0; --accent-ai: #6B3FA0; } /* 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-exam: #B12E2E; --accent-flashcard: #1B5FA8; --accent-ai: #6B3FA0; } /* ------------------------------------------------------------ 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. / .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: linear-gradient(90deg, var(--color-accent), var(--accent-case-study)); } 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, multi-colour strip along the very top of every page — a small, cheap way to inject energy without shouting. It uses the same accent colours as the companion sections below, so it also acts as a subtle "colour key" for the whole site. / .site-header { border-top: 5px solid transparent; border-image: linear-gradient(90deg, var(--color-accent), var(--accent-case-study), var(--accent-exam), var(--color-stretch), var(--accent-ai)) 1; 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; } .site-headerbrand { font-family: var(--font-heading); font-weight: var(--font-heading-weight, 800); font-size: 1.2rem; text-decoration: none; color: var(--color-text); } .site-headerbrand span { color: var(--color-accent); } .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. LESSON SLIDE BLOCKS ------------------------------------------------------------ Each "slide" from the original PowerPoint becomes one of these blocks. Numbering them (like a real slide deck) and giving each one a visible edge makes the section read as "moving through slides" as you scroll, per the brief. ------------------------------------------------------------ / .slides-section { margin: 1.5rem 0 2.5rem; } .slides-sectionlabel { font-family: var(--font-heading); font-weight: var(--font-heading-weight, 800); font-size: 1.6rem; margin-bottom: 0.25rem; } / A small book emoji before "Lesson Slides" — cheap, colourful, needs no image file, and works offline (it's just a character, rendered by the device's own emoji font). Used sparingly throughout the redesign, always paired with a text label so it never relies on the icon alone to convey meaning. / .slides-sectionlabel::before { content: "📖 "; } .slides-sectionmeta { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; } .slide { background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.25rem 1.25rem 1.4rem; margin-bottom: 1.1rem; position: relative; box-shadow: 0 2px 8px rgba(20, 24, 50, 0.05); } / The slide number sits like a page number on a ledger — information (this really is a sequence), not decoration. / .slidenumber { position: absolute; top: -0.7rem; left: 1rem; background: var(--color-accent); color: var(--color-bg-raised); font-family: var(--font-heading); font-size: 0.8rem; line-height: 1; padding: 0.3rem 0.55rem; border-radius: 3px; } .slidetitle { font-size: 1.1rem; margin: 0.5rem 0 0.7rem; } .slidebody ul { padding-left: 1.2rem; } .slidebody table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.95rem; } .slidebody th, .slidebody td { border: 1px solid var(--color-border); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; } .slidebody th { background: var(--color-bg-companion); } / "Tag" pill used for "Learning Objective" / "Lesson Overview" moments — a small target emoji echoes the actual target icon Mrs Wilkinson's original template used for these slides, so it still feels recognisably "hers" rather than an arbitrary choice. / .slidetag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #fff; background: var(--color-accent); font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.5rem; } .slidetag::before { content: "🎯"; } / Deliberately NOT using --color-bg-companion here (even though it's a similarly "highlighted" callout) — that colour is reserved for the companion section only, so the background tint alone can never be mistaken for a companion-section cue while still inside the lesson slides. A left border and a slightly different neutral tint keep it visually distinct without borrowing the companion section's identity. / .slidetask { background: var(--color-border); / fallback for browsers without color-mix() support / background: color-mix(in srgb, var(--color-bg-raised) 85%, var(--color-border)); border-left: 4px solid var(--accent-case-study); padding: 0.85rem 1rem 0.85rem 2.4rem; margin-top: 0.75rem; border-radius: 0 6px 6px 0; position: relative; } / A small pin emoji marks every task/activity callout inside a lesson slide — positioned absolutely so it doesn't disturb the text flow of the task instructions themselves. / .slidetask::before { content: "📌"; position: absolute; left: 0.75rem; top: 0.85rem; font-size: 1rem; } / ------------------------------------------------------------ 5. COMPANION MATERIAL ------------------------------------------------------------ Deliberately different background tone (--color-bg-companion) and a different rhythm of components, so it's unmistakably a separate part of the page from the lesson slides above. ------------------------------------------------------------ / .companion-divider { margin: 2.5rem 0 2rem; text-align: center; } .companion-dividerline { border: none; border-top: 2px dashed var(--color-border); margin: 0 0 0.75rem; } .companion-dividerlabel { display: inline-block; font-family: var(--font-heading); font-size: 0.95rem; color: var(--color-text-muted); } .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="Exam-style questions"] { --section-accent: var(--accent-exam); } .companion-section[aria-label="Exam-style questions"] 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; } / 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); } / Flashcards / .flashcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 1rem 0; } .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; } / 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; } .slide { padding: 1.75rem 2rem 2rem; } .companion-section { padding: 2rem; } }