/* Chrome for the full sample report page (/report-preview). * * ⛔ EVERY SELECTOR HERE MUST BE A CLASS SELECTOR. web/tests.py asserts it. * * WHY: this page loads the report's own stylesheet VERBATIM alongside this one. * That stylesheet is a complete document's CSS and carries bare element rules - * `*`, `html`, `body`, `p`, `h1` - plus @page. Those are the entire collision * surface between the report and the site (the two share ZERO class names: * 83 report classes against 104 site classes, measured). Class selectors outrank * bare element selectors, so chrome written only in classes coexists with the * report's rules instead of fighting them. A bare element rule added here would * either clobber the report or be clobbered by it. * * ⛔ NO :root BLOCK. It is not a class selector, so the site's custom properties * are not available here and every colour is written as a literal. The values * are copied from web/styles.css :root - teal #0b665e, teal-dark #084b46, * ink #132d2b, line #d6d0c4, paper #fffdf8, white #ffffff. * * ⛔ NO BARE `a` RULE either, so every anchor class sets its own colour and * decoration. Without that they fall back to browser-default blue underline: * the report's stylesheet has no bare anchor rule to inherit from. * * The markup is DERIVED from web/pages.py::_landing_header(), not retyped, so * the header cannot drift. This file styles what that function emits plus the * bands this page adds. web/tests.py asserts every class emitted on the page is * defined here, so a class added to the site header fails loudly rather than * shipping unstyled. */ .skip-link { position: fixed; z-index: 1000; top: 10px; left: 12px; padding: 10px 16px; color: #ffffff; background: #132d2b; text-decoration: none; transform: translateY(-180%); } .skip-link:focus { transform: translateY(0); } .shell { width: min(calc(100% - 48px), 1180px); margin-left: auto; margin-right: auto; } /* ── masthead ─────────────────────────────────────────────────────────────── */ .site-header { /* Sticky, like the landing page, and pure CSS - script-src is 'none'. The header is a direct child of , so no ancestor traps it. */ position: sticky; top: 0; z-index: 20; background: #fffdf8; border-bottom: 1px solid #d6d0c4; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .header-inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { display: inline-flex; align-items: center; gap: 11px; color: #132d2b; font-weight: 750; text-decoration: none; letter-spacing: -0.02em; } /* The circle came off the landing page's mark on 3 September 2026 and this one was missed, so the sample page carried a circle the landing page did not. Matched here: same 40px, same object-fit, no ground. See the note on .wordmark-mark in web/styles.css for the contrast measurements. */ .wordmark-mark { display: block; width: 40px; height: 40px; object-fit: contain; } .wordmark-text { font-size: 1.5rem; line-height: 1; } .primary-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px 22px; font-size: 0.88rem; font-weight: 650; } .nav-link { color: #132d2b; text-decoration: none; text-underline-offset: 0.2em; } .nav-link:hover { text-decoration: underline; } .button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 14px; padding: 14px 21px; color: #ffffff; background: #0b665e; border: 1px solid #0b665e; border-radius: 8px; font-size: 0.94rem; font-weight: 750; line-height: 1.2; text-decoration: none; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .button:hover { background: #084b46; border-color: #084b46; } .button-small { min-height: 42px; padding: 10px 15px; font-size: 0.82rem; } .button-light { color: #084b46; background: #ffffff; border-color: #ffffff; } .button-light:hover { color: #132d2b; background: #f4f0e7; border-color: #f4f0e7; } /* ── the page's own bands ─────────────────────────────────────────────────── */ .sample-page-intro { padding: 34px 0 26px; background: #fffdf8; border-bottom: 1px solid #d6d0c4; color: #132d2b; font-size: 16px; line-height: 1.62; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .back-link { display: inline-block; margin-bottom: 22px; color: #084b46; font-size: 0.82rem; font-weight: 750; text-decoration: none; text-underline-offset: 0.2em; } .back-link:hover { text-decoration: underline; } .eyebrow { margin: 0 0 14px; color: #0b665e; font-size: 0.73rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .sample-page-title { margin: 0 0 14px; max-width: 22ch; color: #132d2b; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .sample-page-lede { margin: 0 0 18px; max-width: 66ch; color: #36504d; } .sample-page-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 0.85rem; font-weight: 650; color: #084b46; } /* The page's one disclosure, shared with the landing page. It is the last sentence telling a visitor the twenty students below are invented, so it is given weight rather than set as fine print. */ .sample-disclosure-bar { margin: 0; max-width: 76ch; color: #132d2b; font-size: 0.9rem; font-weight: 650; } /* ── final call to action ─────────────────────────────────────────────────── */ .final-cta { padding: 48px 0; color: #ffffff; background: #0b665e; font-size: 16px; line-height: 1.62; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .eyebrow-light { color: #d9eeea; } .final-cta-title { margin: 0 0 16px; max-width: 20ch; font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .final-cta-body { margin: 0 0 12px; max-width: 62ch; color: #d9eeea; } .final-support { margin: 0; color: #d9eeea; font-weight: 700; font-size: 0.88rem; } /* ── footer ───────────────────────────────────────────────────────────────── */ .site-footer { padding: 48px 0; color: #d5dfdd; background: #0b2321; font-size: 0.75rem; line-height: 1.62; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .footer-grid { display: flex; justify-content: space-between; gap: 36px; } .footer-brand { margin: 4px 0; color: #ffffff; font-weight: 800; } .footer-links { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0; } /* 🔴 Fixed 3 September 2026 (brief, report-preview item 7). This was `.footer-links .footer-link`, and NOTHING emits that class: the three legal anchors are bare because web/tests.py pins them as exact strings, so no class can be added to them. They rendered browser-default blue while the landing page rendered them #d5dfdd. Rooted at .footer-links, so it still cannot reach outside the footer. The colour matches the landing page, which gets it from `a { color: inherit }` inheriting .site-footer's #d5dfdd - a rule this stylesheet cannot use, because a bare `a` selector here would collide with the report's stylesheet. */ .footer-links a { color: #d5dfdd; text-underline-offset: 0.2em; } .footer-separator { color: #8fa5a1; } .footer-contact { color: #d5dfdd; text-underline-offset: 0.2em; } @media screen and (max-width: 860px) { .shell { width: min(calc(100% - 30px), 1180px); } .header-inner { min-height: 70px; } .final-cta-inner { align-items: flex-start; } }