/* ============================================================ CORA course pages, maroon ground (2026-07-19) Loaded THIRD, after /blog/blog.css and /styles.css, by the course pages that carry . WHY A THIRD FILE AND A BODY CLASS blog.css writes its article rules as descendant selectors (article.post h2, article.post a). Those score two classes plus two elements, so every component rule that tries to recolour a heading or a link inside the article loses on specificity no matter which file loads last. That is why the existing maroon block in blog.css had to reach for !important on every line, and it is why three button labels and the CTA heading currently render invisible. Scoping to body.maroon-ground adds a class to every selector here, so these rules out-specify both stylesheets honestly. Exactly one !important is used in this file, on the related-courses list divider, because the rule it replaces is itself !important in blog.css. It is commented at the point of use. PALETTE, all measured against maroon #481827: #FCF7F1 13.73:1 headings, wordmark, focus ring #F3E9D6 12.15:1 body copy, nav links, panel fills #EBE2CF 11.36:1 footer copy, plan card fills #d3c6ac 8.67:1 metadata, disclaimer, de-emphasised copy #f0a599 7.35:1 links, accents, markers, the wordmark dot Rust in every shade is unusable as text on maroon (#ab482d 2.58:1, #8a3a22 1.89:1) and never appears on it here. Rust survives only as a button fill under a cream label. Cream panels (callout, individual-note, plan cards) are kept deliberately. They carry the dense reference content, and a light surface reads better for that than maroon does. Everything inside them is re-darkened by the LIGHT PANELS block at the bottom of this file. ============================================================ */ /* ---- 1. Ground and inherited text ---- */ body.maroon-ground { background: #481827; color: #F3E9D6; /* 12.15:1 */ } body.maroon-ground ::selection { background: #F3E9D6; color: #481827; /* 12.15:1 */ } /* Inverted inside the cream islands, where a #F3E9D6 highlight would land on a #f3e9d6 fill at 1.00:1 and the selection would be imperceptible. */ body.maroon-ground .callout ::selection, body.maroon-ground .individual-note ::selection, body.maroon-ground article.post table ::selection { background: #481827; color: #F3E9D6; } body.maroon-ground :focus-visible { outline: 3px solid #FCF7F1; /* 13.73:1, was rust at 1.89:1 */ outline-offset: 3px; } /* A cream ring vanishes on a cream panel. This rule scores (0,3,1) against the (0,2,1) above, and it has to live here rather than rely on the light-panel exception list in styles.css: that list names band and tier components which do not exist on a course page, so nothing was catching the four plan-card buttons and the ring rendered at 1.00:1 on the featured card and 1.21:1 on the other three. Rust-dk is 6.02:1 on #EBE2CF, 6.44:1 on #F3E9D6 and 7.28:1 on #FCF7F1, so it clears 3:1 on every light fill on the page. */ body.maroon-ground .callout :focus-visible, body.maroon-ground .individual-note :focus-visible, body.maroon-ground .ip-plan :focus-visible, body.maroon-ground article.post table :focus-visible { outline-color: #8a3a22; } body.maroon-ground .skip-link { background: #F3E9D6; color: #481827; /* 12.15:1 */ } /* ---- 2. Nav ---- */ /* The nav is sticky and now shares the page's maroon, so this rule is the only thing marking where it ends. It is pitched to clear 3:1 rather than left as a faint hairline, or content scrolls under it invisibly. */ body.maroon-ground .site-nav { background: #481827; border-bottom-color: rgba(243,233,214,0.42); /* 3.30:1 */ } body.maroon-ground .site-nav.scrolled { box-shadow: 0 1px 0 rgba(243,233,214,0.18), 0 8px 24px -18px rgba(0,0,0,0.6); } body.maroon-ground .wordmark { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .wordmark .dot { color: #f0a599; } /* 7.35:1, was rust at 2.58:1 */ body.maroon-ground .nav-links { background: #481827; } body.maroon-ground .nav-links a { color: #F3E9D6; /* 12.15:1 */ border-bottom-color: rgba(243,233,214,0.42); /* 3.30: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; } /* The drawer's blanket `background: none` was stripping this button's fill, leaving white text on the cream panel. */ body.maroon-ground .nav-links a.nav-cta { background: #8a3a22; color: #FCF7F1; /* 7.28:1 on the rust fill */ border: 1.5px solid #f0a599; /* 7.35:1, defines the pill against maroon */ } body.maroon-ground .nav-links a.nav-cta:hover { background: #742f1c; color: #FCF7F1; /* 9.10:1 */ } body.maroon-ground .nav-portal { background: #F3E9D6; /* 12.15:1 as a surface */ color: #481827; /* 12.15:1 as a label */ } body.maroon-ground .nav-portal:focus-visible { outline-color: #FCF7F1; } body.maroon-ground .nav-toggle { border-color: rgba(243,233,214,0.45); } /* 3.57:1 */ body.maroon-ground .nav-toggle span, body.maroon-ground .nav-toggle span::before, body.maroon-ground .nav-toggle span::after { background: #F3E9D6; } /* 12.15:1 */ body.maroon-ground .nav-open .nav-toggle span { background: transparent; } /* ---- 3. Banner ---- */ /* The hero is already maroon. With the page ground now maroon too it stops reading as an inset card and becomes a full-width banner region, which is the landing page treatment. The radius is dropped because it no longer describes anything, and a rule marks where the banner ends. */ body.maroon-ground .post-hero { border-radius: 0; margin: 0 0 28px; padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 40px); border-bottom: 1px solid rgba(243,233,214,0.42); /* 3.30:1 */ } body.maroon-ground .byline .byline-text { color: #d3c6ac; } /* 8.67:1 */ body.maroon-ground .byline .byline-name a { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .byline .byline-name a:hover { color: #f0a599; } /* ---- 4. Article body ---- */ 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: #F3E9D6; } /* 12.15:1 */ body.maroon-ground .page-disclaimer { font-size: 0.9rem; color: #d3c6ac; /* 8.67:1, was #5c3c44 at 1.52:1 */ } body.maroon-ground .back-link { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .back-link:hover { color: #F3E9D6; } /* ---- 5. FAQ ---- */ body.maroon-ground .post-faq details { border-top-color: rgba(243,233,214,0.42); } body.maroon-ground .post-faq details:last-of-type { border-bottom-color: rgba(243,233,214,0.42); } body.maroon-ground .post-faq summary { color: #FCF7F1; } /* 13.73:1 */ body.maroon-ground .post-faq summary::marker { color: #f0a599; } /* 7.35:1 */ body.maroon-ground .post-faq p { color: #F3E9D6; } /* 12.15:1 */ /* ---- 6. CTA box ---- */ /* Maroon on maroon, so the panel is defined by a rule rather than by a change of fill. */ body.maroon-ground article.post .cta-box { border: 1px solid rgba(243,233,214,0.42); /* 3.30:1 */ border-radius: 20px; } body.maroon-ground article.post .cta-box h2 { color: #F3E9D6; } /* 12.15:1 */ body.maroon-ground article.post .cta-box p { color: #F3E9D6; } /* 12.15:1 */ /* Cream fill is the only primary that holds its shape on maroon. Rust-dk fill measures 1.89:1 against the panel and disappears. */ body.maroon-ground article.post .cta-box .btn-primary { background: #F3E9D6; /* 12.15:1 as a surface */ color: #481827; /* 12.15:1 as a label */ border-color: #F3E9D6; } body.maroon-ground article.post .cta-box .btn-primary:hover { background: #FCF7F1; color: #481827; /* 13.73:1 */ border-color: #FCF7F1; } body.maroon-ground article.post .cta-box .btn-ghost { background: transparent; /* was an off-palette moss fill at 1.86:1 */ color: #F3E9D6; /* 12.15:1 */ border: 1.5px solid rgba(243,233,214,0.55); /* 4.64:1 */ } body.maroon-ground article.post .cta-box .btn-ghost:hover { background: #F3E9D6; color: #481827; /* 12.15:1 */ border-color: #F3E9D6; } /* ---- 7. Related courses ---- */ body.maroon-ground article.post .related-courses { border: 1px solid rgba(243,233,214,0.42); /* 3.30:1 */ } body.maroon-ground article.post .related-courses h2 { color: #F3E9D6; } /* 12.15:1 */ /* The only !important in this file, and it is forced: the rule it replaces is itself !important in blog.css, which no amount of specificity beats. The original 0.18 alpha composites to 1.63:1 and is not perceivable. */ body.maroon-ground .related-courses .related-list li { border-bottom-color: rgba(243,233,214,0.42) !important; /* 3.30:1 */ } /* ---- 8. Footer ---- */ body.maroon-ground .footer-top { border-bottom-color: rgba(243,233,214,0.42); } body.maroon-ground .footer-brand .wordmark .dot { color: #f0a599; } /* 7.35:1, was rust at 2.58:1 */ body.maroon-ground .footer-bottom { color: rgba(243,233,214,0.72); } /* 6.91:1, was an off-palette grey-green */ /* ============================================================ 9. LIGHT PANELS Cream islands on the maroon ground. Everything inside them goes back to maroon ink and rust links, which is where those colours measure well: #481827 on #f3e9d6 is 12.15:1 and #8a3a22 on #f3e9d6 is 6.44:1. These selectors deliberately carry one more class than the on-maroon rules above so they win inside a panel. ============================================================ */ /* TOKEN RE-DECLARATION, and why it is here rather than a plain colour. styles.css repoints --ink, --ink-soft, --muted and --light-txt to the cream family at :root so that text on the new maroon ground inherits an accessible colour, then re-declares them back to maroon inside each light panel. That exception list was written for the banded pages and does not include the course page panels, so .individual-note > p, .ip-term, .ip-price, .ip-rate and .ip-per were resolving to cream on a cream card. Setting `color` alone does not fix that, because those rules name the token explicitly and beat inheritance. Re-declaring the tokens on the panel itself fixes the whole subtree at source, including any rule not listed here, and it stays correct whichever way the root tokens are set. --rule is restored too: at root it is now a translucent cream that would leave these cards with no visible edge on their own light fill. */ body.maroon-ground article.post .callout, body.maroon-ground article.post .individual-note, body.maroon-ground article.post .ip-plan { --ink: #481827; --ink-soft: #481827; --muted: #481827; --light-txt: #5c3c44; --rule: #e1d6c1; --rule-soft: #e1d6c1; --accent-ink: #8a3a22; } body.maroon-ground article.post .callout, body.maroon-ground article.post .individual-note { color: #481827; } /* 12.15:1 */ body.maroon-ground article.post .callout h2, body.maroon-ground article.post .callout h3, body.maroon-ground article.post .individual-note h2, body.maroon-ground article.post .individual-note h3 { color: #481827; } /* 12.15:1 */ body.maroon-ground article.post .callout a, body.maroon-ground article.post .individual-note a { color: #8a3a22; } /* 6.44:1 */ body.maroon-ground article.post .callout a:hover, body.maroon-ground article.post .individual-note a:hover { color: #481827; } body.maroon-ground article.post .ip-plan { color: #481827; } /* 11.36:1 on #ebe2cf */ /* Pure white was the only #fff surface on the page and reads harshly against maroon. */ body.maroon-ground article.post .ip-plan.ip-featured { background: #FCF7F1; } /* 13.73:1 as a surface */ body.maroon-ground article.post .ip-plan .ip-badge { color: #FCF7F1; } /* 7.28:1 on the rust-dk badge */ /* Rust label on a rust fill: the article link rule was out-specifying the button rule. */ body.maroon-ground article.post .ip-plan .btn-primary { color: #FCF7F1; /* 7.28:1 */ border-color: #8a3a22; /* the rust fill carries the shape on a light card */ } body.maroon-ground article.post .ip-plan .btn-primary:hover { color: #FCF7F1; } body.maroon-ground article.post .ip-plan .btn-ghost { color: #8a3a22; } /* 6.02:1 on #ebe2cf */ body.maroon-ground article.post .ip-plan.ip-featured .btn-ghost { color: #8a3a22; } /* 7.28:1 on #FCF7F1 */ body.maroon-ground article.post .ip-plan .btn-ghost:hover { color: #F3E9D6; } /* 6.44:1 on the rust-dk hover fill */ /* =========================================================================== HIERARCHY PASS (2026-07-19) The recommended individual plan was #FCF7F1 against siblings at #EBE2CF, which is 1.21:1, so "Best value" was indistinguishable from the three plans it is meant to beat, and the 2px rust ring blog.css gives it had been overridden to a #e1d6c1 hairline. The cards sit on the cream .individual-note panel, so they are separated by weight rather than by another cream tint. This mirrors maroon.css and the pricing ladder. =========================================================================== */ body.maroon-ground article.post .ip-plan.ip-featured { background: #FCF7F1; /* 13.73:1 as a surface */ border: 2px solid #983E28; /* 6.45:1 on the card, 5.71:1 on the panel behind it */ } /* ---- CTA box: cream island ------------------------------------------------ Section 6 above kept the box maroon and defined it with a 3.30:1 rule. That made it legible; it did not make it land. The panel is the only ask on the page and it was the quietest object on it, at the foot of a long read. The callouts and the individual-membership block on these same pages are cream panels on maroon and they read instantly, so this is a consistency fix as much as a hierarchy one. */ body.maroon-ground article.post .cta-box { background: #F3E9D6; /* 12.15:1 against the maroon ground */ border: 1.5px solid #d3c6ac; color: #481827; /* 12.15:1 */ } 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 */ /* On a cream panel the primary inverts: rust fill under a cream label. */ body.maroon-ground article.post .cta-box .btn-primary { background: #8a3a22; color: #FCF7F1; /* 7.28:1 */ border-color: #8a3a22; } body.maroon-ground article.post .cta-box .btn-primary:hover { background: #742f1c; color: #FCF7F1; /* 9.10:1 */ border-color: #742f1c; } 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; /* 7.28:1 */ border-color: #8a3a22; } 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; }