/* ============================================================ CORA maroon ground (2026-07-19) Opt-in layer that turns a page maroon-led instead of cream-led, matching the landing page banner treatment. HOW TO ADOPT ON A PAGE 1. link this file LAST, after blog.css and styles.css 2. add class="maroon-ground" to 3. set Both the link and the body class are required, so a page that links the file without the class is unchanged. TOKEN NAMES IN THE OTHER STYLESHEETS LIE. In styles.css and blog.css, --green, --teal, --teal-dk, --black, --ink, --ink-soft and --muted ALL resolve to #481827 maroon. Nothing here is written against those names. Every colour below is a literal, measured against its actual background. MEASURED RATIOS ON MAROON #481827 #FCF7F1 cream 13.73:1 body copy #F3E9D6 cream-deep 12.15:1 headings #EBE2CF cream-soft 11.36:1 secondary copy #d3c6ac peach-deep 8.67:1 metadata #f0a599 salmon 7.35:1 links and accents NEVER as text on maroon: rust #ab482d 2.58:1, rust-dk #8a3a22 1.89:1, moss #6a7049 2.81:1, #4f552f 1.86:1, #5c3c44 1.52:1. Rust survives only as a button FILL carrying cream text, and then only on a light ground or with a salmon border to give the silhouette a boundary against maroon. ============================================================ */ :root { --m-ground: #481827; /* page ground */ --m-text: #FCF7F1; /* body copy on maroon 13.73:1 */ --m-head: #F3E9D6; /* headings on maroon 12.15:1 */ --m-soft: #EBE2CF; /* secondary copy on maroon 11.36:1 */ --m-meta: #d3c6ac; /* metadata on maroon 8.67:1 */ --m-accent: #f0a599; /* links and accents 7.35:1 */ --m-rule: rgba(243,233,214,0.45); /* hairline 3.55:1 */ --m-panel: #f3e9d6; /* light reference panel fill 12.15:1 */ --m-panel2: #ebe2cf; /* light card fill 11.36:1 */ --m-panel3: #FCF7F1; /* lightest card fill 13.73:1 */ --m-onlight:#481827; /* text on the light panels 12.15:1 */ --m-link-onlight: #8a3a22; /* links on light panels 6.44:1 */ } /* Ground. html is set too so overscroll does not flash cream. */ html:has(body.maroon-ground) { background: var(--m-ground); } body.maroon-ground { background: var(--m-ground); color: var(--m-text); } /* Selection: cream fill, maroon label. 12.15:1. Replaces cream-on-rust, which measured 4.41:1 and failed AA. */ body.maroon-ground ::selection { background: var(--m-head); color: var(--m-ground); } /* Inside the cream islands that same #f3e9d6 highlight lands on a #f3e9d6 fill at 1.00:1, so a selection on exactly the panels carrying the reference content was imperceptible. Those panels invert instead. */ body.maroon-ground .callout ::selection, body.maroon-ground .individual-note ::selection, body.maroon-ground .ip-plan ::selection { background: var(--m-ground); color: var(--m-head); } /* Focus ring. The inherited ring is rust at 1.89:1 on maroon and is effectively invisible. Cream is 13.73:1. */ body.maroon-ground :focus-visible { outline: 3px solid var(--m-text); outline-offset: 3px; } /* Skip link was maroon on maroon once the ground flipped. */ body.maroon-ground .skip-link { background: var(--m-head); color: var(--m-ground); } /* ===== NAV ================================================== Ported from the landing page, which already runs a maroon nav. ========================================================== */ body.maroon-ground .site-nav { background: var(--m-ground); border-bottom: 1.5px solid var(--m-rule); } body.maroon-ground .site-nav.scrolled { box-shadow: 0 1px 0 var(--m-rule), 0 8px 24px -18px rgba(0,0,0,0.6); } body.maroon-ground .wordmark { color: var(--m-text); } /* Was rust at 2.58:1 on maroon. A live failure on the landing page too. */ body.maroon-ground .wordmark .dot { color: var(--m-accent); } body.maroon-ground .nav-links { background: var(--m-ground); border-bottom-color: var(--m-rule); } /* The drawer dividers were 0.18, which composites to #673e46, 1.64:1, and read as no divider at all. 0.42 matches the sibling course stylesheet. */ body.maroon-ground .nav-links a { color: var(--m-head); border-bottom-color: rgba(243,233,214,0.42); } body.maroon-ground .nav-links a:hover, body.maroon-ground .nav-links a.active { color: var(--m-accent); } body.maroon-ground .nav-links a::after { background: var(--m-accent); } body.maroon-ground .nav-toggle { border-color: var(--m-rule); } body.maroon-ground .nav-toggle span, body.maroon-ground .nav-toggle span::before, body.maroon-ground .nav-toggle span::after { background: var(--m-head); } body.maroon-ground.nav-open .nav-toggle span { background: transparent; } /* Portal reads as a surface: cream fill, maroon label, 12.15:1. */ body.maroon-ground .nav-portal { background: var(--m-head); color: var(--m-ground); } body.maroon-ground .nav-portal:focus-visible { outline-color: var(--m-text); } /* Demo CTA keeps the rust fill for hierarchy, but the fill alone is 1.89:1 against maroon so the pill has no silhouette. The salmon border gives it a 7.35:1 boundary. Label cream on rust is 7.28:1. */ body.maroon-ground .nav-links a.nav-cta { background: #8a3a22; color: var(--m-text); border: 1.5px solid var(--m-accent); } body.maroon-ground .nav-links a.nav-cta:hover { background: #742f1c; color: var(--m-text); } /* ===== BANNER =============================================== Same maroon as the landing page. Because the nav above and the article below are also maroon, the banner runs edge to edge without a full-bleed hack, which keeps mobile free of any horizontal overflow. The rounded card inset is dropped and the horizontal padding zeroed so the banner text lines up with the article text underneath it. The hero colours themselves already pass and are set with !important in blog.css, so they are deliberately left alone: kicker #f0a599 7.35:1, h1 #f3e9d6 12.15:1, meta rgba(243,233,214,0.72) composites to #c3aea5 6.91:1, lead rgba(243,233,214,0.9) composites to #e2d4c4 10.07:1. ========================================================== */ body.maroon-ground .post-hero { border-radius: 0; padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 40px); margin: 0 0 28px; border-bottom: 1px solid var(--m-rule); } /* Byline under the banner. Was maroon on maroon at 1.00:1. */ body.maroon-ground .byline .byline-text { color: var(--m-meta); } body.maroon-ground .byline .byline-name a { color: var(--m-text); } body.maroon-ground .byline .byline-name a:hover { color: var(--m-accent); } /* ===== ARTICLE ============================================== */ body.maroon-ground article.post { color: var(--m-text); } body.maroon-ground article.post h2, body.maroon-ground article.post h3 { color: var(--m-head); } /* Rust-dk links were 1.89:1 on maroon. Underline kept so links are never signalled by colour alone. */ body.maroon-ground article.post a { color: var(--m-accent); text-decoration: underline; } body.maroon-ground article.post a:hover { color: var(--m-head); } /* The underline rule scores (0,3,3) and was out-specifying every text-decoration:none in blog.css, so it underlined the pill buttons, the back link and the related-courses list as well as the inline prose links. Buttons are already identifiable as controls by their shape, and the related list uses underline-on-hover as its own affordance, which the permanent underline had killed. */ body.maroon-ground article.post a.btn, body.maroon-ground article.post .back-link, body.maroon-ground article.post .related-list a { text-decoration: none; } body.maroon-ground article.post .related-list a:hover { text-decoration: underline; } /* Legal and scope disclaimer. Replaces an inline colour of #5c3c44, which measured 1.52:1 once the ground went maroon. */ body.maroon-ground .page-disclaimer { font-size: 0.9rem; color: var(--m-meta); } /* ===== LIGHT PANELS ========================================= Kept cream deliberately. These carry the reference detail and the membership pricing, they give the maroon page rhythm, and every pairing inside them already measures AAA. Text inside them is pinned to maroon so it cannot inherit the cream body colour and go cream on cream. ========================================================== */ body.maroon-ground .callout, body.maroon-ground .individual-note { background: var(--m-panel); border-color: var(--m-panel2); color: var(--m-onlight); } /* article.post is carried in these selectors on purpose. blog.css styles headings and links as `article.post h3` and `article.post a`, which score (0,1,2). A panel rule written as `.callout h3` scores (0,1,1) and LOSES, so the heading would render cream on cream at 1.00:1 and the link salmon on cream. Verified in a browser, not assumed from source. */ body.maroon-ground article.post .callout h3, body.maroon-ground article.post .individual-note h3, body.maroon-ground article.post .individual-note > p { color: var(--m-onlight); } body.maroon-ground article.post .callout a, body.maroon-ground article.post .individual-note a:not(.btn) { color: var(--m-link-onlight); } /* Cream focus ring would vanish on a cream panel. */ body.maroon-ground .callout :focus-visible, body.maroon-ground .individual-note :focus-visible { outline-color: var(--m-link-onlight); } /* --rule is restored on the card itself. styles.css repointed --rule at :root from #e1d6c1 to rgba(243,233,214,0.45) for the maroon ground, and blog.css draws this card's edge as `border: 1.5px solid var(--rule)`. On the card's own cream fill that translucent cream composites to #efe5d2, 1.03:1, so the plan cards had lost their border entirely. #e1d6c1 is the pre-change value. */ body.maroon-ground .ip-plan { background: var(--m-panel2); color: var(--m-onlight); --rule: #e1d6c1; --rule-soft: #e1d6c1; border-color: #e1d6c1; } /* Pure #fff was the only pure white on the page and the harshest edge against maroon. #FCF7F1 is the warm cream equivalent. */ body.maroon-ground .ip-plan.ip-featured { background: var(--m-panel3); } body.maroon-ground .ip-plan .ip-term, body.maroon-ground .ip-plan .ip-price, body.maroon-ground .ip-plan .ip-price .ip-per, body.maroon-ground .ip-plan .ip-rate { color: var(--m-onlight); } body.maroon-ground .ip-plan .ip-badge { background: #8a3a22; color: var(--m-text); } /* article.post a was painting these labels rust on a rust fill at 1.00:1, so the buttons rendered as solid pills with no words. */ body.maroon-ground .ip-plan .btn-primary { background: #8a3a22; color: var(--m-text); } body.maroon-ground .ip-plan .btn-primary:hover { background: #742f1c; color: var(--m-text); } body.maroon-ground .ip-plan .btn-ghost { background: transparent; color: var(--m-link-onlight); border: 1.5px solid var(--m-link-onlight); } body.maroon-ground .ip-plan .btn-ghost:hover { background: #8a3a22; color: var(--m-text); border-color: #8a3a22; } /* ===== CTA PANEL ============================================ Already maroon, so on a maroon ground it had no edge at all. A salmon border gives it a 7.35:1 boundary and keeps the panel maroon rather than punching another cream hole in the page. ========================================================== */ body.maroon-ground .cta-box { background: var(--m-ground); border: 1.5px solid var(--m-accent); color: var(--m-soft); } /* article.post h2 out-specified .cta-box h2, so this heading was rendering maroon on maroon at 1.00:1 on every page. */ body.maroon-ground article.post .cta-box h2 { color: var(--m-head); } body.maroon-ground .cta-box p { color: var(--m-soft); } /* Cream fill with a maroon label, the landing page pattern for a primary action on maroon. A rust fill here is 1.89:1 and loses its shape. */ body.maroon-ground .cta-box .btn-primary { background: var(--m-head); color: var(--m-ground); border-color: var(--m-head); } body.maroon-ground .cta-box .btn-primary:hover { background: var(--m-text); color: var(--m-ground); border-color: var(--m-text); } /* Restores a true outline button. styles.css had turned .btn-ghost into a solid #4f552f fill, which is off palette and sat at 1.86:1 against the maroon panel, so the control had no edge. */ body.maroon-ground .cta-box .btn-ghost { background: transparent; color: var(--m-head); border: 1.5px solid var(--m-head); } body.maroon-ground .cta-box .btn-ghost:hover { background: var(--m-head); color: var(--m-ground); border-color: var(--m-head); } /* ===== FAQ ================================================== */ body.maroon-ground .post-faq details { border-top-color: var(--m-rule); } body.maroon-ground .post-faq details:last-of-type { border-bottom-color: var(--m-rule); } body.maroon-ground .post-faq summary { color: var(--m-head); } body.maroon-ground .post-faq summary::marker { color: var(--m-accent); } body.maroon-ground .post-faq p { color: var(--m-soft); } /* ===== RELATED COURSES ====================================== blog.css fills this maroon with !important. On a maroon ground that is 1.00:1 against the page, so the block stopped reading as a block. Dropped back to a ruled section, which is what the markup was before the fill was added. The !important here exists only to beat the !important in blog.css, not to win a specificity fight with anything else. ========================================================== */ body.maroon-ground .related-courses { background: transparent !important; border-top: 1px solid var(--m-rule); border-radius: 0; padding: 36px 0 0; } body.maroon-ground .related-courses .related-list li { border-bottom: 1px solid var(--m-rule) !important; } /* Back link was rust-dk at 1.89:1. */ body.maroon-ground .back-link { color: var(--m-accent); } body.maroon-ground .back-link:hover { color: var(--m-head); } /* ===== FOOTER =============================================== Already maroon, now flush with the ground, so it needs a rule to separate it from the article. ========================================================== */ body.maroon-ground .site-footer { border-top: 1px solid var(--m-rule); } body.maroon-ground .site-footer .wordmark { color: var(--m-text); } /* Live failure before this change: rust dot on the maroon footer at 2.58:1, below even the 3:1 large text bar. */ body.maroon-ground .site-footer .wordmark .dot { color: var(--m-accent); } body.maroon-ground .footer-top { border-bottom-color: var(--m-rule); } /* 3.57:1 */ body.maroon-ground .footer-brand p, body.maroon-ground .footer-links a { color: var(--m-soft); } body.maroon-ground .footer-links a:hover { color: var(--m-accent); } body.maroon-ground .footer-contact a { color: var(--m-text); } body.maroon-ground .footer-contact a:hover { color: var(--m-accent); } /* Was rgba(188,208,197,0.7), a grey green left over from the retired palette. The warm cream is on brand and measures higher. */ body.maroon-ground .footer-bottom { color: rgba(243,233,214,0.7); } /* =========================================================================== HIERARCHY PASS ON THE MAROON GROUND (2026-07-19) The pass above made every maroon component legible. It left two of them invisible as objects: a panel painted the page ground is 1.00:1 no matter how good its text contrast is, and two cream tints one step apart are not a hierarchy. Both are the page's primary ask or its recommended plan, so both have to be the thing the eye lands on first. =========================================================================== */ /* ---- CTA panel: cream island ----------------------------------------- The salmon border above is the reason this box was readable at all, and it is kept in spirit as a warm edge. But a hairline around a 1.00:1 fill is a hairline, not a hierarchy. The callouts on these same pages are already cream panels on maroon and they read instantly, so this is a consistency fix as much as a hierarchy one. */ body.maroon-ground .cta-box { background: var(--m-panel); /* #f3e9d6, 12.15:1 against the ground */ border: 1.5px solid #d3c6ac; color: var(--m-onlight); /* 12.15:1 */ } body.maroon-ground article.post .cta-box h2 { color: var(--m-onlight); } /* 12.15:1 */ body.maroon-ground article.post .cta-box h2 em { color: #983E28; } /* 5.71:1 */ body.maroon-ground .cta-box p { color: var(--m-onlight); } /* 12.15:1 */ body.maroon-ground article.post .cta-box a:not(.btn) { color: var(--m-link-onlight); } /* 6.44:1 */ /* On a cream panel the primary inverts: rust fill under a cream label. */ body.maroon-ground .cta-box .btn-primary { background: #8a3a22; color: var(--m-text); border-color: #8a3a22; /* 7.28:1 */ } body.maroon-ground .cta-box .btn-primary:hover { background: #742f1c; color: var(--m-text); border-color: #742f1c; /* 9.10:1 */ } body.maroon-ground .cta-box .btn-ghost { background: transparent; color: #8a3a22; border: 1.5px solid #8a3a22; /* 6.44:1 */ } body.maroon-ground .cta-box .btn-ghost:hover { background: #8a3a22; color: var(--m-text); border-color: #8a3a22; /* 7.28:1 */ } body.maroon-ground .cta-box :focus-visible { outline-color: var(--m-link-onlight); } body.maroon-ground .cta-box .btn:focus-visible { outline: 3px solid #8a3a22; outline-offset: 3px; } /* ---- Individual membership: the recommended plan -------------------------- Not a maroon-on-maroon collision, the same hierarchy failure inverted. These four cards sit on the cream #f3e9d6 .individual-note panel. .ip-featured was #FCF7F1 against siblings at #EBE2CF, which is 1.21:1, so the plan the block is steering toward was indistinguishable from the three it is meant to beat. Worse, the rule above repointed every .ip-plan border to #e1d6c1 at a higher specificity than blog.css's .ip-plan.ip-featured, so the featured card had also silently lost its 2px rust ring. Separated by weight rather than by a 1.21:1 tint, which matches the pricing ladder and gives the whole site one rule. */ body.maroon-ground .ip-plan.ip-featured { background: var(--m-panel3); /* #FCF7F1 */ border: 2px solid #983E28; /* 6.45:1 on the card, 5.71:1 on the panel behind it */ } body.maroon-ground .ip-plan.ip-featured .ip-term, body.maroon-ground .ip-plan.ip-featured .ip-price, body.maroon-ground .ip-plan.ip-featured .ip-rate { color: var(--m-onlight); } /* 13.73:1 */