/* BetterYou+ — static page typography (trust, legal and editorial-standards pages). * * WHY THIS FILE EXISTS * * The trust and legal pages were written to the BetterYou+ standard and then rendered by the * parent theme's default page template, which knows nothing about it. Measured across all ten * pages at 390/768/1440 on 2026-09-04, before this file existed: * * body 14px against a 19px desktop floor / 17px mobile floor * line length 162 characters on desktop, against a bound of 80 * headings 18–22px against 22px mobile / 24px desktop * --------------------------------------------------------------- * 235 defects across 10 pages * * A 162-character line is the one that matters. Terms of Use and the Privacy Policy are the * longest documents on the site, and they were the only ones set at full container width with * no measure at all. The reading experience was worse precisely where the reading was hardest. * * WHAT THIS DOES NOT DO * * It introduces NO new design values. Every number below is an existing token from tokens.css * — `--byp-measure` (68ch) has been declared since Step 1 and simply had no consumer on this * template. This is the token source being connected, not a per-page CSS patch, which is why * it is one stylesheet keyed on the page template rather than ten blocks of overrides. * * It also does not import the article experience. A policy document is not an article: no * hero, no table of contents, no recirculation, no newsletter interruption, no ad slots. The * scope below is deliberately `article.page` so nothing here can reach a post. * * THEME STATE * * Colour comes only from tokens, and tokens flip on Soledad's `pcdark-mode` body class. There * is therefore no dark-mode block in this file, and there must not be one: a second state * authority is the exact bug tokens.css documents at its head. */ /* ---- the reading column ------------------------------------------------- * Scoped away from the homepage (its own template) and from posts. `.entry-content` inside * `article.page` is the static-page body and nothing else. */ body.page:not(.page-template-direction-d) article.page .inner-post-entry.entry-content { max-width: var(--byp-measure); /* 68ch — 1170px became ~620px of actual line */ margin-inline: auto; font-family: var(--byp-body); font-size: var(--byp-body-size); line-height: var(--byp-body-leading); color: var(--byp-ink); } body.page:not(.page-template-direction-d) article.page .entry-content p, body.page:not(.page-template-direction-d) article.page .entry-content li { font-family: var(--byp-body); font-size: var(--byp-body-size); line-height: var(--byp-body-leading); color: var(--byp-ink); } body.page:not(.page-template-direction-d) article.page .entry-content p { margin: 0 0 1.15em; } /* ---- headings ----------------------------------------------------------- * The page title and the section headings were within 2px of each other, which is a hierarchy * a reader cannot see. Display face, and a real step between the levels. */ body.page:not(.page-template-direction-d) .entry-title, body.page:not(.page-template-direction-d) article.page .entry-content h1 { font-family: var(--byp-display); font-size: clamp(28px, 1.55rem + 1.6vi, 40px); line-height: 1.15; letter-spacing: -0.01em; color: var(--byp-ink); } body.page:not(.page-template-direction-d) article.page .entry-content h2 { font-family: var(--byp-display); font-size: clamp(24px, 1.32rem + 0.62vi, 28px); line-height: 1.25; color: var(--byp-ink); /* Section rhythm: a legal document is scanned before it is read, so the gap above a * heading has to be clearly larger than the gap between paragraphs. */ margin: 2.1em 0 0.55em; } body.page:not(.page-template-direction-d) article.page .entry-content h3 { font-family: var(--byp-display); /* 22px/24px are the typography law's floors for the `display` kind on mobile/desktop. * The first draft set 20-23px, which read fine and failed the audit — h3 is graded as a * heading, not as supporting text. */ /* The slope matters as much as the bounds: at 0.28vi this clamp peaked at 23.87px on a * 1440 viewport and never reached its own 24px ceiling, failing the desktop floor by * 0.13px. 0.55vi reaches 24px by tablet width and holds there. */ font-size: clamp(22px, 1.24rem + 0.55vi, 24px); line-height: 1.3; color: var(--byp-ink); margin: 1.5em 0 0.4em; } body.page:not(.page-template-direction-d) article.page .entry-content h2:first-child, body.page:not(.page-template-direction-d) article.page .entry-content h3:first-child { margin-top: 0; } /* ---- lists -------------------------------------------------------------- * Policy pages carry a lot of enumerated obligations. Cramped list items are the fastest way * to make a short list look like fine print. */ body.page:not(.page-template-direction-d) article.page .entry-content ul, body.page:not(.page-template-direction-d) article.page .entry-content ol { margin: 0 0 1.25em; padding-inline-start: 1.35em; } body.page:not(.page-template-direction-d) article.page .entry-content li { margin-bottom: 0.5em; } body.page:not(.page-template-direction-d) article.page .entry-content li::marker { color: var(--byp-ink-3); } /* ---- links -------------------------------------------------------------- * Underlined, because a policy page is exactly where a reader needs to see which words are * routes to another obligation. Burgundy passes on the ivory ground at 9.51:1. */ body.page:not(.page-template-direction-d) article.page .entry-content a { color: var(--byp-burgundy); text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: from-font; } body.page:not(.page-template-direction-d) article.page .entry-content a:hover, body.page:not(.page-template-direction-d) article.page .entry-content a:focus-visible { color: var(--byp-crimson-text); } /* ---- the opening paragraph ---------------------------------------------- */ body.page:not(.page-template-direction-d) article.page .entry-content .byp-lede { /* Must stay ABOVE body prose. Soledad sets `.entry-content p` in em against a 16px * parent, which lands at 22.4px and beats the rule above on specificity; a lede at * 21.5px was therefore rendering SMALLER than the paragraphs beneath it. Rather than * fight the cascade with !important, the lede is simply scaled to clear it. */ /* Ceiling is 23.5px, not 25px: `body` is capped at 24px on desktop by the typography * law and a 25px lede failed it as too_large. It still clears the 22.4px paragraphs * beneath it, which is the hierarchy this rule exists for. */ /* The slope has to be steep enough to clear body prose by TABLET, not just by desktop. * Soledad's em-based paragraph rule lands at a constant 22.4px from 768px upward, so a * gently-scaling lede was still smaller than its own body text at 768 — the inversion * was fixed on desktop and left in place at the commonest tablet width. */ font-size: clamp(19px, 1.05rem + 1.05vi, 23.5px); line-height: 1.55; color: var(--byp-ink-2); margin-bottom: 1.6em; } /* ---- effective-date footer ---------------------------------------------- * Every legal document now ends with the date it took effect. It is furniture, so it is set * as furniture — but above the `utility` floor, because a reader checking whether a policy is * current is doing something that matters. */ body.page:not(.page-template-direction-d) article.page .entry-content .byp-effective { margin-top: 2.4em; padding-top: 1.1em; border-top: 1px solid var(--byp-rule); font-size: 15px; line-height: 1.5; color: var(--byp-ink-3); /* 7.4:1 on canvas, 8.27:1 in dark */ } /* ---- contextual disclosure ---------------------------------------------- * Set by wpos/disclosure.py when a governed disclosure is inserted. The floors here are the * ones that module enforces (>=12px, >=4.5:1); these values clear both with room, because a * disclosure that only just passes is one stylesheet change away from failing. * * PRESENCE IS NOT VISIBILITY. This block exists so that a disclosure cannot be quietly * rendered at caption size in a pale grey and still count as having been made. */ .byp-disclosure { font-family: var(--byp-body); font-size: 16px; line-height: 1.55; color: var(--byp-ink-2); background: var(--byp-cream, transparent); border-left: 3px solid var(--byp-burgundy); padding: 0.75em 1em; margin: 1.4em 0; } @media (max-width: 480px) { .byp-disclosure { font-size: 15px; } } /* ---- mobile ------------------------------------------------------------- * The measure does the work on wide screens; on a phone the container is already narrower * than 68ch, so only the type size changes. */ @media (max-width: 767px) { body.page:not(.page-template-direction-d) article.page .inner-post-entry.entry-content, body.page:not(.page-template-direction-d) article.page .entry-content p, body.page:not(.page-template-direction-d) article.page .entry-content li { /* `var(--byp-body-size-mob)` again, and this is the fix rather than the workaround. * The token WAS 16.5px — 0.5px below the 17px mobile floor the typography law sets for * continuous prose — so this file hard-coded 17px and left the two artefacts * disagreeing. The token has been reconciled to the law (tokens.css), so reading it is * now the same 17px this literal was, and the next author who reaches for the token * gets the law instead of the trap. */ font-size: var(--byp-body-size-mob); } } /* ══════════════════════════════════════════════════════════════════════════════ TARGET SIZE on the parent-theme chrome these pages render — 2026-09-05 The trust templates fall through to the Soledad parent's header and breadcrumb, which no direction-d surface uses, so controls that were never part of the BetterYou+ masthead only ever appear here. Device QC reported them as `touch_target` on the trust pages alone, and that is why: the control was always this small, and the publication's own chrome simply does not contain it. `a.crumb` measured 35x16 at 390px. It is an ordinary navigation link — not a citation, not a sentence link — so the WCAG 2.2 Target Size (Minimum) exemption for text inside prose does not apply and 24px is the floor. Same technique as the masthead and homepage corrections: `min-height` so the MEASURED box clears the floor, then a pseudo-element for a comfortable hit area. The breadcrumb sits on its own line above the title, so a 40px-tall hit area cannot capture a tap meant for anything else. ══════════════════════════════════════════════════════════════════════════════ */ body.page:not(.page-template-direction-d) a.crumb { position: relative; display: inline-flex; align-items: center; min-height: 24px; } body.page:not(.page-template-direction-d) a.crumb::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 40px; } /* ═══════════════════════════════════════════════════════════════════════════════ PAGES BUILT ON THE ELEMENTOR HEADER/FOOTER TEMPLATE — 2026-09-07 Every rule above requires `article.page .entry-content`. The FAQ does not have one: its template is `elementor_header_footer`, which emits `the_content()` BARE into the page wrapper, so the ten policy-page rules have never once applied to it. Measured before touching anything, at 1440px: question headings 14px / 500 ← the same size and weight as the body text paragraphs 1425px wide ← roughly 200 characters a line

none at all The content is a direct child of `div.wrapper-boxed`, which also contains the header and the footer and has 69 children. CLAUDE.md records what happens when you root a descendant selector at a wrapper like that — `.header-style-header-10 a` once matched every anchor on the site and collapsed the category cards. So this is scoped two ways: by the body class that only this template carries, and by DIRECT-CHILD, which the header's and footer's own contents can never satisfy because they are nested inside
and