/* ========================================================================== enhance.css — student experience & accessibility layer Complements styles.css + pages.css. Loaded on every page. Powers: accessibility panel, reading preferences, dark mode, focus mode, progress tracking, inline video embeds and active-recall self-checks. All behaviour is progressive: without JS, the site works exactly as before. ========================================================================== */ /* ---------- Reading preferences (applied to / ) ---------- */ html.text-lg { font-size: 112.5%; } html.text-xl { font-size: 125%; } body.font-easy { font-family: Verdana, "Trebuchet MS", "Segoe UI", Arial, sans-serif; letter-spacing: 0.012em; word-spacing: 0.04em; } body.spacing-wide { line-height: 1.85; } body.spacing-wide p, body.spacing-wide li { margin-bottom: 0.7em; } /* Reduce motion when the student asks for it (in addition to OS setting) */ html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.reduce-motion .live-dot { animation: none !important; } /* ---------- Dark mode ---------- */ html.theme-dark { --bg: #14181a; --ink: #eef2ec; --muted: #aeb8ae; --green-soft: #1d2a24; --line: #2c3430; --white: #1e2422; /* card / surface colour */ --shadow: 0 24px 80px rgba(0, 0, 0, 0.5); color-scheme: dark; } html.theme-dark body { background: var(--bg); color: var(--ink); } /* Keep body text legible in dark mode where pages hard-code near-black */ html.theme-dark .hero__lead, html.theme-dark .page-hero .lede, html.theme-dark .policy-section p, html.theme-dark .policy-section li, html.theme-dark .overview-card p, html.theme-dark .overview-card li, html.theme-dark .download-card p { color: #d4dcd4; } html.theme-dark .page-top, html.theme-dark .workbook-strip { background: #171c1a; } /* ---------- Dark mode: everything pages.css and styles.css hard-codes ---------- Those two files were written before dark mode and set literal colours rather than theme variables, so anything they style stayed light. Some of it merely looked wrong; some of it was unreadable — #263026 text on a #14181a page is invisible. Each is answered here, in load order after both files, rather than editing them, which is how the rest of this file already handles the theme. Checked with a contrast calculator rather than by eye: every pair below meets 4.5:1 for text and 3:1 for borders and panel edges. */ /* Body copy that pages.css sets to near-black. */ html.theme-dark .video-page-hero .lede, html.theme-dark .video-recall__item p, html.theme-dark .faq-item .faq-answer { color: #d4dcd4; } /* Headings and controls set to the darkest ink of all. */ html.theme-dark .video-sequence__back, html.theme-dark .video-recall__item summary { color: var(--ink); } /* Pale panels that stayed white slabs on a dark page. */ html.theme-dark .overview-mini { background: var(--white); } html.theme-dark .video-content-band { background: #171c1a; } html.theme-dark .focused-video__poster { background: #1b211f; } html.theme-dark .focused-video__poster h2 { color: var(--ink); } /* "Coming soon" was a pale chip with pale text — light-on-light, and the one label most likely to be read carefully by someone deciding whether to wait. */ html.theme-dark .badge--soon { background: #2a332d; color: #cdd6cd; } /* Soften the homepage hero wash so text stays readable over the photo */ html.theme-dark .hero__shade { background: linear-gradient(90deg, rgba(20,24,26,0.97) 0%, rgba(20,24,26,0.9) 46%, rgba(20,24,26,0.55) 78%, rgba(20,24,26,0.3) 100%), linear-gradient(0deg, rgba(20,24,26,1) 0%, rgba(20,24,26,0.1) 36%); } /* ---------- Focus mode (distraction-free study) ---------- */ body.focus-mode .workbook-strip, body.focus-mode .cta-band, body.focus-mode .overview-panel, body.focus-mode .gallery, body.focus-mode .workbook-promo, body.focus-mode .signup, body.focus-mode .intro { display: none !important; } body.focus-mode .page-nav a:not(.is-current):not(.button) { opacity: 0.45; } .focus-flag { display: none; max-width: 1180px; margin: 14px auto 0; padding: 8px 16px; width: calc(100% - 44px); border-radius: 999px; background: var(--accent-soft, #e2efe7); color: var(--accent-dark, #135434); font-weight: 800; font-size: 0.9rem; text-align: center; } body.focus-mode .focus-flag { display: block; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--accent, #1f7a4d); color: #fff; font-weight: 800; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 12px; } /* ---------- Compact navigation controls ---------- */ .mobile-nav-toggle, .workbook-strip__text-mobile, .workbook-strip__button-mobile { display: none; } .mobile-nav-toggle { align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--line, #dddfd8); border-radius: 6px; background: var(--white, #fff); color: var(--ink, #263026); font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; } .mobile-nav-toggle:focus-visible { outline: 3px solid rgba(31, 122, 77, 0.35); outline-offset: 2px; } .mobile-nav-toggle__icon { display: grid; gap: 3px; width: 17px; } .mobile-nav-toggle__icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; } /* ---------- Site-wide search ---------- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .site-search-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 42px; padding: 7px 10px; border: 1px solid var(--line, #dddfd8); border-radius: 6px; background: var(--white, #fff); color: var(--ink, #263026); font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; } .site-search-toggle:hover { border-color: var(--accent, #1f7a4d); } .site-search-toggle:focus-visible, .site-search__close:focus-visible, .site-search__clear:focus-visible { outline: 3px solid rgba(31, 122, 77, 0.35); outline-offset: 2px; } .site-search-toggle svg, .site-search__form > svg, .site-search__close svg, .site-search__clear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html.site-search-open, html.site-search-open body { overflow: hidden; } .site-search[hidden] { display: none; } .site-search { position: fixed; inset: 0; z-index: 300; display: grid; place-items: start center; padding: clamp(20px, 6vh, 64px) 18px 20px; } .site-search__backdrop { position: absolute; inset: 0; background: rgba(26, 32, 27, 0.68); } .site-search__panel { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid var(--line, #dddfd8); border-radius: 8px; background: var(--white, #fff); color: var(--ink, #263026); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32); } .site-search__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .site-search__header .section-kicker { margin: 0 0 4px; } .site-search__header h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: 0; } .site-search__close, .site-search__clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line, #dddfd8); border-radius: 6px; background: transparent; color: var(--ink, #263026); cursor: pointer; } .site-search__form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 5px 7px 5px 16px; border: 2px solid var(--accent, #1f7a4d); border-radius: 8px; background: var(--bg, #f7f7f2); } .site-search__form:focus-within { box-shadow: 0 0 0 4px var(--accent-soft, #e2efe7); } .site-search__form > svg { color: var(--accent-dark, #135434); } .site-search__form input { width: 100%; min-width: 0; min-height: 42px; padding: 5px 0; border: 0; outline: 0; background: transparent; color: var(--ink, #263026); font: inherit; font-size: 1.05rem; } .site-search__form input::placeholder { color: var(--muted, #5f685f); opacity: 1; } .site-search__form input::-webkit-search-cancel-button { display: none; } .site-search__clear { width: 40px; height: 40px; border: 0; } .site-search__clear[hidden] { display: none; } .site-search__status { min-height: 22px; margin: 12px 0 6px; color: var(--muted, #5f685f); font-size: 0.88rem; font-weight: 700; } .site-search__results { display: grid; gap: 8px; } .site-search-result { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 13px; min-height: 72px; padding: 12px 14px 12px 0; overflow: hidden; border: 1px solid var(--line, #dddfd8); border-radius: 6px; background: var(--white, #fff); color: var(--ink, #263026); text-decoration: none; } .site-search-result:hover, .site-search-result:focus-visible { border-color: var(--result-accent, var(--accent, #1f7a4d)); background: var(--result-soft, var(--accent-soft, #e2efe7)); outline: none; } .site-search-result[data-subject="biology"] { --result-accent: #1f7a4d; --result-soft: #e2efe7; } .site-search-result[data-subject="chemistry"] { --result-accent: #c0453c; --result-soft: #f5e0de; } .site-search-result[data-subject="physics"] { --result-accent: #4a4e8c; --result-soft: #e3e4f0; } .site-search-result__marker { background: var(--result-accent, #5f685f); } .site-search-result__copy { display: grid; min-width: 0; gap: 3px; } .site-search-result__title { font-size: 1rem; line-height: 1.25; } .site-search-result__meta { color: var(--result-accent, var(--muted, #5f685f)); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .site-search-result__description { overflow: hidden; color: var(--muted, #5f685f); font-size: 0.88rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .site-search__empty { margin: 0; padding: 18px; border: 1px solid var(--line, #dddfd8); border-radius: 6px; color: var(--muted, #5f685f); text-align: center; } html.theme-dark .site-search__backdrop { background: rgba(0, 0, 0, 0.76); } html.theme-dark .site-search__form { background: #171c1a; } /* ========================================================================== Accessibility / preferences panel ========================================================================== */ .a11y-fab { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%; background: var(--accent, #1f7a4d); color: #fff; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); } .a11y-fab:focus-visible { outline: 4px solid rgba(31,122,77,0.35); outline-offset: 3px; } .a11y-fab svg { width: 26px; height: 26px; } .a11y-panel { position: fixed; right: 18px; bottom: 84px; z-index: 130; width: min(320px, calc(100vw - 36px)); max-height: min(78vh, 640px); overflow-y: auto; padding: 18px 18px 20px; border: 1px solid var(--line, #dddfd8); border-radius: 16px; background: var(--white, #fff); color: var(--ink, #263026); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--accent-dark, #135434); } .a11y-panel .a11y-sub { margin: 0 0 14px; color: var(--muted, #5f685f); font-size: 0.85rem; } .a11y-group { margin-bottom: 16px; } .a11y-group__label { display: block; margin-bottom: 7px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #5f685f); } .a11y-seg { display: flex; gap: 6px; } .a11y-seg button, .a11y-toggle { flex: 1 1 auto; min-height: 42px; padding: 8px 10px; border: 1.5px solid var(--line, #dddfd8); border-radius: 10px; background: transparent; color: var(--ink, #263026); font-weight: 700; font-size: 0.92rem; cursor: pointer; } .a11y-seg button[aria-pressed="true"], .a11y-toggle[aria-pressed="true"] { border-color: var(--accent, #1f7a4d); background: var(--accent-soft, #e2efe7); color: var(--accent-dark, #135434); } .a11y-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; } .a11y-toggle .a11y-state { font-size: 0.8rem; opacity: 0.8; } .a11y-reset { width: 100%; min-height: 40px; margin-top: 4px; border: none; border-radius: 10px; background: transparent; color: var(--muted, #5f685f); font-weight: 700; text-decoration: underline; cursor: pointer; } /* ========================================================================== Progress tracking ========================================================================== */ .progress-wrap { max-width: 1180px; margin: 0 auto; padding: 4px clamp(22px, 4vw, 72px) 0; } .progress-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--line, #dddfd8); border-left: 5px solid var(--accent, #1f7a4d); border-radius: 10px; background: var(--white, #fff); } .progress-card__text { font-weight: 800; color: var(--accent-dark, #135434); } .progress-bar { flex: 1 1 200px; height: 12px; min-width: 160px; border-radius: 999px; background: var(--accent-soft, #e2efe7); overflow: hidden; } .progress-bar__fill { height: 100%; width: 0%; border-radius: 999px; background: var(--accent, #1f7a4d); transition: width 0.4s ease; } html.reduce-motion .progress-bar__fill { transition: none; } .progress-card__reset { border: none; background: transparent; color: var(--muted, #5f685f); font-weight: 700; font-size: 0.85rem; text-decoration: underline; cursor: pointer; } /* "Mark watched" control on each spec item */ .watch-check { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; align-self: center; padding: 7px 12px; border: 1.5px solid var(--line, #dddfd8); border-radius: 999px; font-size: 0.85rem; font-weight: 800; color: var(--muted, #5f685f); cursor: pointer; white-space: nowrap; } .watch-check input { width: 16px; height: 16px; accent-color: var(--accent, #1f7a4d); cursor: pointer; } .watch-check.is-done { border-color: var(--accent, #1f7a4d); background: var(--accent-soft, #e2efe7); color: var(--accent-dark, #135434); } .spec-list li.is-done .spec-num { background: var(--accent, #1f7a4d); color: #fff; } /* Continue where you left off */ .resume-banner { max-width: 1180px; margin: 18px auto 0; width: calc(100% - 44px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border: 1px solid var(--line, #dddfd8); border-left: 5px solid var(--accent, #1f7a4d); border-radius: 12px; background: var(--white, #fff); box-shadow: 0 14px 40px rgba(17, 38, 27, 0.06); } .resume-banner__text { flex: 1 1 240px; } .resume-banner__text b { color: var(--accent-dark, #135434); } .resume-banner__text span { display: block; color: var(--muted, #5f685f); font-size: 0.9rem; } .resume-banner__dismiss { border: none; background: transparent; color: var(--muted, #5f685f); font-weight: 800; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; } /* ========================================================================== Inline video embeds (click-to-load facade) ========================================================================== */ .spec-list li { flex-wrap: wrap; } .watch-toggle { display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 9px 16px; border-radius: 999px; border: none; background: var(--accent, #1f7a4d); color: #fff; font-weight: 800; font-size: 0.92rem; cursor: pointer; white-space: nowrap; } .watch-toggle:focus-visible { outline: 3px solid rgba(31,122,77,0.35); outline-offset: 2px; } .watch-toggle[aria-expanded="true"] { background: var(--accent-dark, #135434); } .embed-slot { flex: 0 0 100%; width: 100%; } .embed-slot[hidden] { display: none; } .youtube-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 220px; padding: 28px; border: 1px solid var(--line, #d7ddd7); border-radius: 8px; background: #f7f8f4; text-align: center; } .focused-video > .youtube-consent { height: 100%; border: 0; border-radius: 0; } .embed-slot > .youtube-consent { aspect-ratio: 16 / 9; margin-top: 16px; } .youtube-consent__message { max-width: 44ch; margin: 0 0 16px; color: #394239; font-weight: 700; } .embed-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 16px; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 16px 44px rgba(17, 38, 27, 0.18); } .embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed-actions { margin: 10px 0 2px; font-size: 0.88rem; } .embed-actions a { color: var(--accent-dark, #135434); font-weight: 700; } /* ========================================================================== Active-recall self-check ========================================================================== */ .selfcheck { flex: 0 0 100%; width: 100%; margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--accent, #1f7a4d); border-radius: 12px; background: var(--accent-soft, #e2efe7); } .selfcheck[hidden] { display: none; } .selfcheck__title { margin: 0 0 12px; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-dark, #135434); } .qcard { border: 1px solid var(--line, #dddfd8); border-radius: 10px; background: var(--white, #fff); padding: 14px 16px; margin-bottom: 10px; } .qcard:last-child { margin-bottom: 0; } .qcard__q { margin: 0 0 10px; font-weight: 700; color: var(--ink, #263026); } .qcard__reveal { min-height: 38px; padding: 7px 14px; border: 1.5px solid var(--accent, #1f7a4d); border-radius: 999px; background: transparent; color: var(--accent-dark, #135434); font-weight: 800; font-size: 0.85rem; cursor: pointer; } .qcard__a { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #dddfd8); color: #394239; } .qcard__a[hidden] { display: none; } html.theme-dark .qcard__a { color: #d4dcd4; } /* ---------- Small screens ---------- */ @media (max-width: 560px) { .watch-check { margin-left: 44px; } } @media (max-width: 760px) { .site-chrome { position: sticky; top: 0; z-index: 170; } .page-top__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 9px 14px; } .brand { min-width: 0; gap: 8px; } .brand > span { display: none; } .brand::after { content: "IGCSE Revision"; color: var(--ink, #263026); font-size: 0.96rem; font-weight: 800; white-space: nowrap; } .mobile-nav-toggle { display: inline-flex; } .site-search-toggle { width: 42px; height: 42px; padding: 0; } .site-search-toggle span { display: none; } .page-nav { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; overflow: visible; padding: 8px 0 2px; border-top: 1px solid var(--line, #dddfd8); } .page-nav.is-open { display: grid; } .page-nav a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 8px; border: 1px solid var(--line, #dddfd8); border-radius: 6px; background: var(--white, #fff); font-size: 0.88rem; line-height: 1.2; text-align: center; } .page-nav a.is-current { border-color: var(--accent, #1f7a4d); background: var(--accent-soft, #e2efe7); } .page-nav a.button, .page-nav a.button--accent { width: 100%; min-height: 42px; padding: 7px 8px; border-color: var(--accent, #1f7a4d); background: var(--accent, #1f7a4d); color: #fff !important; box-shadow: none; } .workbook-strip__inner { min-height: 48px; justify-content: space-between; gap: 8px; padding: 6px 14px; text-align: left; } .workbook-strip__text { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; line-height: 1.2; } .workbook-strip__text-full, .workbook-strip__button-full { display: none; } .workbook-strip__text-mobile, .workbook-strip__button-mobile { display: inline; } .workbook-strip .button { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; font-size: 0.82rem; } .a11y-fab { position: static; z-index: auto; width: 42px; height: 42px; border: 1px solid var(--line, #dddfd8); box-shadow: none; } .a11y-fab svg { width: 22px; height: 22px; } .a11y-panel { top: calc(var(--site-chrome-height, 112px) + 8px); right: 10px; bottom: auto; left: 10px; width: auto; max-height: calc(100dvh - var(--site-chrome-height, 112px) - 18px); } .hero__content { padding-top: 20px; } .page-hero { padding-top: 28px; } .site-search { padding: 10px; } .site-search__panel { width: 100%; max-height: calc(100dvh - 20px); padding: 18px 14px; } .site-search-result__description { white-space: normal; } } @media (max-width: 390px) { .page-top__inner { gap: 6px; } .brand::after { display: none; } } /* ========================================================================== Free workbook signup (subscribe.js) Sized for a phone first: 44px targets, one column, no cramped rows. ========================================================================== */ .subscribe { background: #fff; border: 1px solid #dfe3e6; border-left: 5px solid var(--accent, #1f7a4d); border-radius: 14px; padding: 24px 22px; margin: 28px auto; max-width: 34rem; } .subscribe__title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; } .subscribe__blurb { margin: 0 0 18px; color: #4a5560; } .subscribe__field { margin-bottom: 18px; border: 0; padding: 0; } /* Declared explicitly, as elsewhere in this file: the role question is hidden until someone opts into the mailing list, and a later display rule must not be able to bring it back. */ .subscribe__field[hidden] { display: none; } .subscribe__field > label, .subscribe__field legend { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; } .subscribe__field input[type="email"] { width: 100%; font: inherit; padding: 13px 12px; min-height: 48px; border: 1px solid #b9c0c6; border-radius: 9px; background: #fff; color: #1f2933; } .subscribe__field input[type="email"]:focus-visible, .subscribe__form :focus-visible { outline: 3px solid #1c5f9e; outline-offset: 2px; } .subscribe__help { display: block; margin-top: 6px; font-size: .85rem; color: #5b666f; } .subscribe__field--choice { display: flex; flex-direction: column; gap: 8px; } .subscribe__radio, .subscribe__consent { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #e2e6e9; border-radius: 9px; cursor: pointer; line-height: 1.5; } .subscribe__radio input, .subscribe__consent input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; } .subscribe__radio:has(input:checked) { border-color: var(--accent, #1f7a4d); background: #eef5f0; } .subscribe__consent { margin-bottom: 18px; font-size: .92rem; } .subscribe__submit { width: 100%; } .subscribe__small { margin: 14px 0 0; font-size: .82rem; color: #5b666f; line-height: 1.6; } /* Error text never relies on colour alone; it is announced and sits in flow. */ .subscribe__error { margin: 0 0 14px; padding: 12px 14px; background: #fbeee2; border-left: 5px solid #a8541c; border-radius: 8px; font-size: .92rem; } .subscribe__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .subscribe__done:focus { outline: none; } .subscribe__files { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .subscribe__files .button { width: 100%; text-align: center; } /* Dark mode. The block above hard-codes its colours rather than using the theme variables, so in dark mode it rendered as a white card with pale grey text sitting on a near-black page — the one part of the site a visitor has to read carefully, and the hardest to read. Each hard-coded value is answered here rather than rewritten above, matching how the rest of this file handles the dark theme. The email input keeps a slightly lighter background than the card so the field still reads as a field; a border alone is easy to miss on dark. */ html.theme-dark .subscribe { background: var(--white); /* Not var(--line): at 1.4:1 against the page the card had no visible edge. This meets the 3:1 that WCAG asks of a component boundary. */ border-color: #606e66; } html.theme-dark .subscribe__blurb, html.theme-dark .subscribe__help, html.theme-dark .subscribe__small { color: var(--muted); } html.theme-dark .subscribe__field input[type="email"] { background: #182020; border-color: #66746b; color: var(--ink); } html.theme-dark .subscribe__field input[type="email"]::placeholder { color: #8e9a8e; } html.theme-dark .subscribe__radio, html.theme-dark .subscribe__consent { border-color: #66746b; } html.theme-dark .subscribe__radio:has(input:checked) { border-color: var(--accent, #1f7a4d); background: var(--green-soft); } /* Focus has to stay visible against a dark card; the light-mode blue does not. */ html.theme-dark .subscribe__field input[type="email"]:focus-visible, html.theme-dark .subscribe__form :focus-visible { outline-color: #7cb5e8; } /* The warning tint is a light peach; on dark it glows. Same meaning, dimmed. */ html.theme-dark .subscribe__error { background: #3a2c1e; border-left-color: #d08b52; color: #f0c69a; }