/* ============================================================================ MAROON GROUND, course category hub pages (2026-07-19) Scope: the six courses/*-courses.html category hubs only. Activated by class="maroon-ground" on , so nothing here can leak into the blog, the individual course pages or the main site pages, all of which share /blog/blog.css and /styles.css with these six. Load order on a hub page is blog.css, styles.css, then this file, so plain selectors here already win on source order. Where a rule below still needs extra weight it is written as body.maroon-ground , which beats blog.css's article.post descendant rules honestly rather than with !important. !important appears only where blog.css itself used it. TOKEN WARNING: token names in the two shared stylesheets do not describe their values. --teal, --teal-dk, --green, --black, --ink, --ink-soft, --muted, --sage, --slate, --mauve and --amber all resolve to maroon #481827. --teal-soft is a cream. Everything below is written as a measured hex on purpose. Do not reintroduce var() references here. MEASURED PALETTE ON MAROON #481827 (WCAG 2.x, computed not assumed) #FCF7F1 cream 13.73:1 AAA headings, wordmark, focus ring #F3E9D6 cream-deep 12.15:1 AAA body copy, course titles #EBE2CF cream 11.36:1 AAA footer body copy #d3c6ac peach-deep 8.67:1 AA metadata, numerals, disclaimer #f0a599 salmon 7.35:1 AAA links, accents, chevrons BANNED AS TEXT ON MAROON, all measured, all failing: #8a3a22 rust-dk 1.89 | #983E28 rust 2.13 | #ab482d terra 2.58 #6a7049 moss 2.81 | #4f552f 1.86 | #5c3c44 1.52 The retired teal is banned outright and its hex is deliberately not written here, so a grep for it across the deploy returns nothing. ========================================================================= */ /* ---- 1. Ground ---------------------------------------------------------- */ body.maroon-ground { background: #481827; color: #F3E9D6; /* 12.15:1 */ } /* The hero and the CTA are panels painted the same #481827 as the page, so they are defined by a rule rather than by a change of fill, which is the treatment the other three maroon stylesheets already use for the same two components. An earlier revision lifted them to #5a2033; that colour is not in the CORA palette, it existed nowhere else in the deploy, and at 1.18:1 against the ground it was carrying no perceptual load anyway. The edge is the thing doing the work, so it is pitched at the site's 3.57:1 hairline rather than 3.12:1. */ body.maroon-ground { --hub-lift: #481827; /* page ground */ --hub-edge: rgba(243,233,214,0.45); /* #957676, 3.57:1 */ --hub-rule: rgba(243,233,214,0.45); } body.maroon-ground ::selection { background: #F3E9D6; color: #481827; } /* 12.15:1 */ /* The global focus ring is rust-dk at 1.89:1 on maroon, effectively no ring at all. Cream is the only value that stays visible on every surface here. */ body.maroon-ground :focus-visible { outline: 3px solid #FCF7F1; } /* 13.73:1 */ /* Maroon fill on a maroon page leaves the skip link shapeless. Invert it. */ body.maroon-ground .skip-link { background: #F3E9D6; color: #481827; } /* 12.15:1 */ /* ---- 2. Navigation ------------------------------------------------------ */ /* Ported from index.html, which already ships a maroon nav. Fixes a live defect while here: .wordmark .dot is rust #ab482d at 2.58:1 on maroon. */ body.maroon-ground .site-nav { background: #481827; /* The nav is sticky and shares the page's maroon, so this rule is the only thing marking where it ends. 0.22 composited to #785358, 2.21:1, and content scrolled under it invisibly. */ border-bottom-color: rgba(243,233,214,0.45); /* 3.57:1 */ } body.maroon-ground .site-nav.scrolled { box-shadow: none; } body.maroon-ground .wordmark { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .wordmark .dot { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .nav-links { background: #481827; } body.maroon-ground .nav-links a { color: #F3E9D6; border-bottom-color: rgba(243,233,214,0.42); } /* was 0.18, 1.64:1 */ body.maroon-ground .nav-links a:hover, body.maroon-ground .nav-links a.active { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .nav-links a::after { background: #f0a599; } /* Rust-dk fill is 1.89:1 against maroon, so the pill has no silhouette on its own. The label is fine at 7.28:1; the salmon border supplies the missing boundary at 7.35:1. */ body.maroon-ground .nav-links a.nav-cta { background: #8a3a22; color: #FCF7F1; /* 7.28:1 on #8a3a22 */ border: 1.5px solid #f0a599; /* 7.35:1 boundary */ } body.maroon-ground .nav-links a.nav-cta:hover { background: #742f1c; color: #FCF7F1; } /* Was a maroon pill on what is now a maroon bar. Inverted to a cream surface. */ body.maroon-ground .nav-portal { background: #F3E9D6; color: #481827; } /* 12.15:1 */ body.maroon-ground .nav-portal:focus-visible { outline: 2px solid #FCF7F1; } body.maroon-ground .nav-toggle { border-color: rgba(243,233,214,0.45); } /* 3.57:1, matches the rest of the site */ body.maroon-ground .nav-toggle span, body.maroon-ground .nav-toggle span::before, body.maroon-ground .nav-toggle span::after { background: #F3E9D6; } body.maroon-ground.nav-open .nav-toggle span { background: transparent; } /* ---- 3. Banner ---------------------------------------------------------- */ /* blog.css already paints .post-hero maroon with !important and already sets accessible kicker, h1 and lead colours. Only the surface is changed here, so the banner reads as a panel rather than dissolving into the ground. Kicker #f0a599 7.35:1, h1 #F3E9D6 12.15:1, lead rgba cream .9 10.07:1, all measured against the maroon ground and all still passing. */ body.maroon-ground .post-hero { background: var(--hub-lift) !important; border: 1px solid var(--hub-edge); } /* ---- 4. Article body ---------------------------------------------------- */ /* blog.css scopes these as article.post , specificity (0,1,2). body.maroon-ground article.post is (0,2,2) and wins cleanly. */ body.maroon-ground article.post p, body.maroon-ground article.post li, body.maroon-ground article.post strong { color: #F3E9D6; } /* 12.15:1 */ body.maroon-ground article.post h2, body.maroon-ground article.post h3 { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground article.post a { color: #f0a599; } /* 7.35:1 */ body.maroon-ground article.post a:hover { color: #FCF7F1; } /* 13.73:1 */ /* Legal/scope line under the CTA. The inline color:var(--light-txt) was removed from the six files; #5c3c44 measures 1.52:1 on maroon. */ body.maroon-ground article.post p.hub-disclaimer { font-size: 0.9rem; color: #d3c6ac; } /* 8.67:1 */ body.maroon-ground .back-link { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .back-link:hover { color: #FCF7F1; } body.maroon-ground .hub-links a { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .hub-links a:hover { color: #FCF7F1; } body.maroon-ground article.post p.hub-plain { color: #d3c6ac; } /* 8.67:1 */ /* ---- 5. Stream head ----------------------------------------------------- */ /* The six badge tiles were six hardcoded inline fills: #481827, #ab482d, #6a7049, #8a3a22, #4f552f, #9d5257. Against a maroon page they measure 1.00, 2.58, 2.81, 1.89, 1.86 and 2.63 to one, so every tile loses its shape and the #481827 one disappears completely. Two of the six were not CORA colours at all. All twelve inline styles were removed from the HTML and the tile is now one rule: a cream surface carrying the stream number. */ body.maroon-ground .stream-badge { background: #F3E9D6; color: #481827; /* 12.15:1 */ } body.maroon-ground .stream-head .underline { background: #f0a599; } /* 7.35:1 */ body.maroon-ground .stream-head .scnt { color: #d3c6ac; } /* 8.67:1 */ /* ---- 6. Course accordion ------------------------------------------------ */ /* The rows are interactive structure, not decoration, so the dividers are set at rgba(243,233,214,0.45) = #957676 = 3.57:1, clearing SC 1.4.11. The old hover flashed a near-white #f3e9d6 bar across a maroon page and inverted the row's text; it is now an 8% cream lift, the same value the library uses for the same element, and every pairing on the row is AA. */ body.maroon-ground .course-list { border-top-color: var(--hub-rule); } body.maroon-ground .course { border-bottom-color: var(--hub-rule); } body.maroon-ground .course .cnum { color: #d3c6ac; } /* 8.67:1 */ body.maroon-ground .course .ctitle { color: #F3E9D6; } /* 12.15:1 */ body.maroon-ground .course .ctoggle { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .course summary:hover { background: rgba(243,233,214,0.08); } /* matches styles.css, was 0.06 and drifting */ body.maroon-ground .course summary:hover .ctitle { color: #f0a599; } /* 6.32:1 on the hovered row */ body.maroon-ground .course-desc { color: #F3E9D6; } /* 12.15:1 */ body.maroon-ground .course-more a { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .course-more a:hover { color: #FCF7F1; } /* ---- 7. CTA box --------------------------------------------------------- */ /* Three live defects fixed here, all of them present before this change. 1. blog.css's article.post h2 (0,1,2) out-specifies .cta-box h2 (0,1,1), so the CTA heading rendered maroon on maroon at 1.00:1, invisible. 2. article.post a (0,1,2) out-specifies .btn-primary (0,1,0), painting the primary button label rust-dk on a rust-dk fill, also 1.00:1. 3. styles.css:754 overrides blog.css's ghost button with a #4f552f fill, 1.86:1 against the maroon panel, so the control had no silhouette and its label was rust-dk on that fill at 1.01:1. */ body.maroon-ground .cta-box { background: var(--hub-lift); border: 1px solid var(--hub-edge); } body.maroon-ground .cta-box h2 { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .cta-box p { color: #F3E9D6; } /* 12.15:1 */ body.maroon-ground .cta-box .btn-primary { background: #8a3a22; color: #FCF7F1; /* 7.28:1 on #8a3a22 */ border: 1.5px solid #f0a599; /* 7.35:1 boundary */ } body.maroon-ground .cta-box .btn-primary:hover { background: #742f1c; color: #FCF7F1; } body.maroon-ground .cta-box .btn-ghost { background: transparent; color: #F3E9D6; /* 12.15:1 */ border: 1.5px solid #f0a599; /* 7.35:1 boundary */ } body.maroon-ground .cta-box .btn-ghost:hover { background: #F3E9D6; color: #481827; /* 12.15:1 */ border-color: #F3E9D6; } /* ---- 8. Footer ---------------------------------------------------------- */ /* Already maroon, so it now continues the page ground rather than arriving as a slab. Fixes the one contrast failure that was live in production on all six pages before this change: the footer wordmark full stop, rust #ab482d on maroon at 2.58:1. Also retires two rgba(188,208,197,x) values, a grey-green left over from the pre-2026 palette. */ body.maroon-ground .site-footer { border-top: 1px solid var(--hub-rule); } body.maroon-ground .footer-top { border-bottom-color: rgba(243,233,214,0.45); } /* 3.57:1, was 0.22 at 1.84:1 */ body.maroon-ground .footer-brand .wordmark { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .footer-brand .wordmark .dot { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .footer-brand p { color: #EBE2CF; } /* 11.36:1 */ body.maroon-ground .footer-links a { color: #EBE2CF; } /* 11.36:1 */ body.maroon-ground .footer-links a:hover { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .footer-contact a { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .footer-contact a:hover { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .footer-bottom { color: #d3c6ac; } /* 8.67:1 */ /* ---- 9. CTA panel: cream island (2026-07-19) ---------------------------- Section 1 is right that #5a2033 at 1.18:1 was worse than nothing and that an edge-defined maroon panel is the correct treatment for the hero, which is narrative and is not asking for anything. The hero keeps it. The CTA is the only conversion ask on a hub page and a 3.57:1 hairline is not enough for it. It becomes the one cream island per hub page, and that island sits on the ask. Cream on the maroon ground is 12.15:1, which is the strongest contrast event on the page. */ body.maroon-ground .cta-box { background: #F3E9D6; /* 12.15:1 against the ground */ border: 1.5px solid #d3c6ac; color: #481827; /* 12.15:1 */ } /* blog.css's article.post h2 (0,2,3) out-specifies .cta-box h2 (0,2,2), which is the same trap section 7 above documents, so these selectors carry article.post rather than reaching for !important. */ body.maroon-ground article.post .cta-box h2 { color: #481827; } /* 12.15:1 */ body.maroon-ground article.post .cta-box h2 em { color: #983E28; } /* 5.71:1 */ body.maroon-ground article.post .cta-box p { color: #481827; } /* 12.15:1 */ body.maroon-ground article.post .cta-box a:not(.btn) { color: #8a3a22; } /* 6.44:1 */ /* The rust fill needed a salmon edge only because it sat on maroon. On a cream card the fill carries its own silhouette at 7.28:1. */ body.maroon-ground article.post .cta-box .btn-primary { background: #8a3a22; color: #FCF7F1; /* 7.28:1 */ border: 1.5px solid #8a3a22; } body.maroon-ground article.post .cta-box .btn-primary:hover { background: #742f1c; color: #FCF7F1; border-color: #742f1c; /* 9.10:1 */ } body.maroon-ground article.post .cta-box .btn-ghost { background: transparent; color: #8a3a22; /* 6.44:1 */ border: 1.5px solid #8a3a22; } body.maroon-ground article.post .cta-box .btn-ghost:hover { background: #8a3a22; color: #FCF7F1; border-color: #8a3a22; /* 7.28:1 */ } body.maroon-ground .cta-box :focus-visible { outline-color: #8a3a22; } body.maroon-ground .cta-box .btn:focus-visible { outline: 3px solid #8a3a22; outline-offset: 3px; }