/* ============================================================ TEACH RWANDA · LEGIBILITY PASS ------------------------------------------------------------ Written for the audience that actually gives to TEACH Rwanda: older donors. Contrast sensitivity and near-focus both decline with age, so a ratio or a type size that is merely adequate at 30 is effortful at 70. Loads LAST. To switch the whole pass off, remove the one that calls this file, nothing else depends on it. THREE THINGS IT DOES 1 · Fixes five WCAG AA contrast failures, all of them white text on brand orange or orange text on cream, measured at 3.06:1 where 4.5:1 is required. Among them: the Donate button, and every "read more" link on the site. 2 · Raises the small type. Body copy 16.3px → 17.6px; footer, captions, meta and roles from 13-14.5px to 15-16px. 3 · Repairs word-valued statistics ("Pre-primary to P6"), which were being set at numeral size and wrapping. THE BRAND ORANGE IS NOT CHANGED. #F26A21 still fills every large graphic element: section rules, the imigongo bands, the statistic rules, hover fills, the scroll progress bar. What changes is the orange used UNDER white text and AS small text, which moves to a darker mix of the same hue. Side by side most viewers read them as one colour; a contrast meter does not. ============================================================ */ :root{ /* Same hue, 25% darker. White on this measures 5.13:1 (AA, and AAA for large text). The brand orange measures 3.06:1. */ --orange-text:#B54F18; /* Small orange type on cream needs to go darker still. */ --orange-ink:#A34614; /* body and caption greys, opened up a little */ --ink-70:rgba(41,41,41,.80); --ink-55:rgba(41,41,41,.66); } /* ============================================================ 01-02 · COLOUR · REVERTED AT THE CLIENT'S REQUEST ------------------------------------------------------------ An earlier version of this file darkened the orange that sits UNDER white text and the orange used AS small text, to clear WCAG AA. That has been reverted: the brand orange #F26A21 is used exactly as it was originally. What this costs, for the record, so the decision is a known one rather than an accident. Measured against their real backgrounds, these five sit at 3.06:1 where AA asks for 4.5:1: · the Donate button label · every "read more" link · the pathway labels · staff roles · article categories The type-size changes below stay, and they help. To restore the contrast fix later, set: --orange-text:#B54F18 (white on it: 5.13:1) --orange-ink:#A34614 and apply them to .btn-primary, .pathway-photo .label, .arrow-link, .eyebrow, .person .role and .article-cat. ============================================================ */ /* An underline on hover is a non-colour cue for the same links, and costs nothing visually at rest. */ .arrow-link{text-decoration-thickness:1px;text-underline-offset:.25em;} /* ============================================================ 03 · SIZE, the small type, raised ============================================================ */ body{font-size:1.1rem;line-height:1.7;} .lead{font-size:clamp(1.12rem,1.4vw,1.34rem);} .btn{font-size:1rem;} .navlinks>ul>li>a{font-size:.95rem;} .dropdown a{font-size:.95rem;} .stat p{font-size:1rem;line-height:1.55;} .media-card p{font-size:1.02rem;} .article-card p{font-size:1rem;} .person p{font-size:.97rem;} .media-card figcaption,.gallery-track figcaption, .book-shots figcaption,.res-list .meta, .article-card time,.scrollset-caption span{font-size:.95rem;} .person .role{font-size:.875rem;letter-spacing:.04em;} .article-card .article-cat,.article-meta-row .article-cat{font-size:.78rem;} .eyebrow{font-size:.78rem;} .site-footer{font-size:.98rem;} .footer-bottom{font-size:.88rem;} .site-footer h5{font-size:.78rem;} /* form labels and fields matter more than anything on the site for a donor who is trying to reach you */ .field label{font-size:.98rem;} .field input,.field textarea,.field select{font-size:1.05rem;} /* ============================================================ 04 · WORD-VALUED STATISTICS ------------------------------------------------------------ Four pages have a statistic whose value is a word rather than a number ("Pre-primary to P6", "Huye", "Eco", "1st", "$52.50"). Set at numeral size the long ones wrapped to two lines, which pushed that column's caption below its neighbours' and broke the row. The value box now reserves exactly one numeral line and word values are set to fit inside it, so every caption in the row starts on the same line. ============================================================ */ .stat .num{ display:flex;align-items:flex-end; min-height:clamp(2.6rem,5vw,3.8rem); } .stat .num.is-word{ /* sized to stay on ONE line in a quarter-width column, a wrapped value pushes its caption below its neighbours' and breaks the row */ font-size:clamp(1.05rem,1.6vw,1.45rem); line-height:1.2;letter-spacing:-.005em; padding-bottom:.15em;text-wrap:balance; } .stat-row.four .stat .num.is-word{font-size:clamp(1rem,1.35vw,1.25rem);} /* ============================================================ 05 · PRINT ============================================================ */ @media print{ body{font-size:11.5pt;} .arrow-link{color:#000;} } /* Overlay header clearance: keep hero text below the fixed transparent header on every screen. */ body.has-overlay-header .hero-video-full .hero-inner{padding-top:8rem;} @media(max-width:860px){body.has-overlay-header .hero-video-full .hero-inner{padding-top:calc(72px + 2rem);}} /* Readability floor for small labels, and 44px touch targets on phones. */ .build-stage,.partner-tag,.toc-label{font-size:.78rem;} @media(max-width:860px){.color-swatch,.size-swatch,.publications button{min-height:44px;}} /* WPForms contact form: match the site's own form and button styles. */ .wpforms-container .wpforms-field{padding:0 0 var(--s5)!important;} .wpforms-container .wpforms-field-label,.wpforms-container .wpforms-field-sublabel{font-family:var(--font-body)!important;font-size:var(--fs-small)!important;font-weight:600!important;color:var(--charcoal)!important;margin-bottom:var(--s2)!important;} .wpforms-container .wpforms-field-sublabel{font-weight:400!important;color:var(--ink-55,#6b6b6b)!important;} .wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container select,.wpforms-container textarea{width:100%!important;max-width:100%!important;padding:.85em 1em!important;font-family:inherit!important;font-size:1rem!important;height:auto!important;border:1.5px solid var(--line-strong)!important;border-radius:var(--radius)!important;background:var(--white)!important;color:var(--charcoal)!important;box-shadow:none!important;} .wpforms-container textarea{min-height:160px!important;} .wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{border-color:var(--orange)!important;outline:none!important;} .wpforms-container .wpforms-submit{display:inline-flex!important;align-items:center;font-family:var(--font-body)!important;font-size:.95rem!important;font-weight:600!important;padding:.95em 1.9em!important;min-height:48px!important;height:auto!important;border:2px solid transparent!important;border-radius:100px!important;background:var(--orange)!important;color:var(--white)!important;box-shadow:0 6px 18px rgba(242,106,33,.28)!important;transition:all .25s var(--ease);} .wpforms-container .wpforms-submit:hover{background:var(--orange-deep)!important;transform:translateY(-2px);} .wpforms-container .wpforms-required-label{color:var(--orange)!important;} div.wpforms-container-full .wpforms-form input[type=text],div.wpforms-container-full .wpforms-form input[type=email],div.wpforms-container-full .wpforms-form select,div.wpforms-container-full .wpforms-form textarea{border:1.5px solid var(--line-strong)!important;border-radius:var(--radius)!important;} div.wpforms-container-full .wpforms-form .wpforms-field-label{font-weight:600!important;}