/* ===================================================================================================================== READING COMFORT FOR VISITORS AGED 40+ — Boyer Brush theme. Built 2026-10-25 on Fred's approval: A + B + C1. C2 is NOT approved: the orange links stay #c93c17 (theme.json accent-text). Loaded after style.css, store-finder.css and the plugin styles (functions.php, handle 'boyer-readability-40', wp_enqueue_scripts priority 1000, depends on 'boyer'). Sections A, B and C1 below are the approved mock-up CSS, rule for rule and in that order (read40/proposal_v2: optionA.css sha256 8a5ce83d…a272, optionB.css 99cd4bbe…0e4f, optionC1.css 4dfa1bae…91b4; boards in read40/boards_v2). Their notes give the old value, the new value and the style.css / plugin line each rule overrides (line numbers are the 2026-10-24 style.css). The ":not(:focus)", ":not(:focus-within)" and ":not(:hover)" guards keep today's orange focus borders and hover colours, as in the mock-up. One change to a mock-up rule, on purpose: B11 leaves out the cookie panel "Show more / Afficher plus" button (it keeps today's size, like every other button). Added after C1: R1-R4 (the gaps found by the round-2 re-check) and F1 (keyboard focus not hidden behind the first-visit cookie bar, WCAG 2.4.11, item 6). ROLLBACK: delete the enqueue block "READABILITY 40+" and the block "Item 6 (Fred 2026-10-25" in functions.php and this file, or restore work/theme_snapshots/pre-readability-2026-10-25/ (see README.txt there). ===================================================================================================================== */ /* ===================================================================================================================== A — colour only (+ box outlines). New warm grey for secondary text: #4b4238 (the warm brown-grey the product descriptions already use; same family as #6b6257, darker). On white 9.83:1, cream #f7f2ea 8.82, #faf7f1 9.20, deep cream #f2ece2 8.37, map panel #efe8dc 8.08. Sizes, fonts, layout, buttons, the orange and the backgrounds are not touched by A. A11-A15: USA questions, error messages, search box outline, placeholders, "View cart" in notices. ===================================================================================================================== */ /* A1. theme.json palette "muted" #6b6257 -> #4b4238 (home promise line, product intro, how-to intro, 404 and search lines, every block that uses the "Muted" colour). */ :root, body { --wp--preset--color--muted: #4b4238; } /* A2. Footer small grey (#8a8074, 3.5-3.9:1 today) -> #4b4238 (8.82 on cream, 9.83 on the white cards). Replaces the earlier AA value #70675c. style.css:1001 .boyer-foot-h, :1006 .boyer-follow-label, :1011 + :335 .boyer-copyright, :88 .boyer-footer (inherited text colour, #5f574c). */ .boyer-foot-h, .boyer-follow-label, .boyer-copyright, .boyer-copyright span { color: #4b4238; } .boyer-footer { color: #4b4238; } /* A3. Dangers page note under the tracker (#8a8378, 3.75:1) and the buyer's-guide table note -> #4b4238. style.css:424, :439 */ .boyer-tracker-note, .boyer-compare-note { color: #4b4238; } /* A4. Every other hard-coded muted grey in style.css (#6b6257 / #6b6259 / #6b645c) used for reading text -> #4b4238. Old (crossed-out) prices are left at #6b6257 on purpose: 5.98:1 passes their 4.5 target and they must stay quieter than the real price. */ .boyer-trust p:not(.boyer-trust-title), /* :44 home trust strip descriptions (laptop) */ .boyer-shop-band .woocommerce-breadcrumb, .boyer-shop-band .woocommerce-result-count, /* :64 shop / product breadcrumb */ .woocommerce-breadcrumb, .woocommerce-result-count, /* :93 */ .boyer-us-sep, /* :342 */ .boyer-diagram-caption, /* :361 how-to diagram caption */ .boyer-patent, /* :382 */ .boyer-qual-note, /* :467 */ .boyer-wtb-note, /* :619 store finder note on cream */ .boyer-blog-grid .wp-block-post-date, /* :657 */ .boyer-post-byline, /* :664 */ .boyer-single-post .boyer-post-date, /* :675 */ .boyer-press-quote-src, .boyer-press-callout cite, .boyer-press-pull cite, .boyer-press-page figcaption, /* :814-:831 */ .boyer-cart-toast-close, /* :868 */ .boyer-sf-tap p, .boyer-sf-nopin /* store-finder.css:22, :36 */ { color: #4b4238; } .boyer-region-opt:not(.is-active):not(:hover), .boyer-lang-opt:not(.is-active):not(:hover) { color: #4b4238; } /* :608, :627 header CA|US, EN|FR */ /* A5. Footer newsletter consent line (#6b6257 13px, 5.98:1) -> #4b4238 (9.83). inc/newsletter.php:768 */ .boyer-nl .boyer-nl__consent { color: #4b4238; } /* A6. Home feature descriptions written into the template (front-page.html:146-149, style="color:#6b6257") -> #4b4238. */ [style*="color:#6b6257"], [style*="color: #6b6257"] { color: #4b4238 !important; } /* A7. Cookie settings panel paragraphs (style.css:259, #6b6257 !important) -> #4b4238. */ .cky-preference-center .cky-accordion-header-des p, .cky-preference-center .cky-preference-content-wrapper p { color: #4b4238 !important; } /* A8. Contact form help lines, character counters, sub-labels (WPForms black at 55 % = #737373, 4.74:1) -> warm #4b4238. */ body div.wpforms-container-full, body .wpforms-container { --wpforms-label-sublabel-color: #4b4238; } body div.wpforms-container-full .wpforms-field-description, body div.wpforms-container-full .wpforms-field-limit-text, body .wpforms-container .wpforms-field-sublabel { color: #4b4238 !important; } /* A9. FAQ page questions: today orange #c93c17, regular weight, same size as the answers, no link address (they look like links that go nowhere). Proposed: charcoal, semi-bold (Barlow 600, a file the site already has). */ .entry-content a[tabindex="0"]:not([href]) { color: #171310; font-weight: 600; text-decoration: none; } /* A10. Box outlines (3:1 target). The approved fix (#8a8074, 3.87:1 on white) is kept and extended. */ .wpforms-container input[type="text"]:not(:focus), .wpforms-container input[type="email"]:not(:focus), .wpforms-container input[type="tel"]:not(:focus), .wpforms-container input[type="url"]:not(:focus), .wpforms-container input[type="number"]:not(:focus), .wpforms-container textarea:not(:focus) { border-color: #8a8074 !important; } div.wpforms-container-full .wpforms-form select:not(:focus), .wpforms-container select:not(:focus) { border-color: #8a8074 !important; } .boyer-nl .boyer-nl__row input[type=email]:not(:focus) { border-color: #8a8074; } .boyer-shop-band .woocommerce-ordering select:not(:focus), .woocommerce-ordering select.orderby:not(:focus) { border-color: #8a8074; } /* :65 shop "Sort by" (#e7ddcc, 1.35:1) */ .boyer-shop-band div.product form.cart .quantity .qty:not(:focus), .boyer-shop-band div.product form.cart .boyer-qty-btn { border-color: #8a8074; } /* :136, :142 product quantity box and - / + (#ddd2c0, 1.49:1) */ .boyer-sf-input:not(:focus) { border-color: #8a8074; } /* store-finder.css:7 search box (#cfc4b3 on #faf7f1, 1.61:1) */ body .wc-block-components-quantity-selector { border-color: #8a8074 !important; } /* cart + mini-cart quantity (charcoal at 30 %, 2.0:1) */ body .wc-block-components-quantity-selector::after { border-color: #8a8074 !important; } /* A11 (round 2). USA page questions (style.css:502 .boyer-fullcmp summary: orange #c93c17 16px bold, 5.07 on white, 4.74 on the closed #faf7f1 box): same treatment as the FAQ questions (A9): charcoal #171310, semi-bold 600. Size stays 16px. The hover colour (:503, brand orange) stays. */ .boyer-fullcmp summary:not(:hover) { color: #171310; } .boyer-fullcmp summary { font-weight: 600; } /* A12 (round 2). Error messages, seen exactly when something goes wrong: WPForms field error #d63637 (4.73:1, 14px; contact and reseller forms) and WooCommerce checkout field error #cc1818 (5.66:1, 14px) -> one darker red #a61b1b (7.52 on white). The error notice box at checkout keeps its near-black text (#2f2f2f, 13.4:1) and its red frame. Also: today the theme's grey field outline (style.css:308, !important) hides WPForms' red outline on a field in error; the field in error gets the same red #a61b1b as its message (7.5:1, outline target 3:1). */ body div.wpforms-container-full, body .wpforms-container { --wpforms-label-error-color: #a61b1b; } div.wpforms-container-full .wpforms-form em.wpforms-error, div.wpforms-container-full .wpforms-form label.wpforms-error, .wpforms-container .wpforms-error:not(input):not(textarea):not(select) { color: #a61b1b !important; } .wpforms-container input.wpforms-error:not(:focus), .wpforms-container textarea.wpforms-error:not(:focus), .wpforms-container select.wpforms-error:not(:focus) { border-color: #a61b1b !important; } .wc-block-components-validation-error, .wc-block-components-validation-error > p { color: #a61b1b; } /* the label of a checkout field in error turns red too (WooCommerce #cc1818, 5.66:1) -> #a61b1b; "!important" only because WooCommerce's own rule is more specific than a mock-up line; the real rule in style.css can match WooCommerce's selector. */ .wc-block-components-text-input.has-error label, .wc-block-components-combobox .has-error label, .wc-blocks-components-select.has-error .wc-blocks-components-select__label, .wc-block-components-checkbox.has-error label { color: #a61b1b !important; } .wc-block-components-text-input.has-error input:not(:focus), .wc-blocks-components-select.has-error select:not(:focus) { border-color: #a61b1b !important; } /* A13 (round 2). Search box outlines (footer search on every page, search results and 404 page): WordPress grey #949494 (3.03:1) -> #8a8074 (3.87), the same as the footer e-mail box right beside it. */ .wp-block-search__inside-wrapper:not(:focus-within), .wp-block-search__button-outside .wp-block-search__input:not(:focus) { border-color: #8a8074; } /* A14 (round 2). Placeholders that are the only visible label: footer "Your e-mail" and "Search the site" (and the same search box on the search and 404 pages): browser grey #757575 (4.61:1) -> #6b6257 (5.98). */ .boyer-nl .boyer-nl__row input[type=email]::placeholder, .wp-block-search__input::placeholder { color: #6b6257; opacity: 1; } /* A15 (round 2). WooCommerce notice "View cart" button (after "added to your cart"): WooCommerce draws it at 70 % opacity, so its near-black text shows as #6a6d6b on the pale green box (5.08:1). Full opacity: #2f2f2f, 13.1:1. */ .wc-block-components-notice-banner .wc-forward, .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward { opacity: 1; } /* ===================================================================================================================== B — bigger small text (sizes only, on top of A). Rule used: text people read that is under 15px goes to 15-16px, on phones and laptops. One deliberate exception: short labels in CAPITALS (footer column titles, eyebrow lines, store finder labels, blog category and date, announcement bar) go to 14px: a capital letter at 14px is as tall as a lower-case letter at about 19-20px. BUTTONS KEEP TODAY'S SIZE: every button, the quantity boxes and the "Add coupons" toggle are pinned to today's size (B1c, B2b, B2c, B2d; plus R3 at the end), so B never makes a button bigger. The one listed exception is the cookie banner and its settings panel (B11), where the button labels were 12px on phones. Text boxes and drop-downs (footer search box, search page box, shop "Sort by", account log-in boxes) follow the bigger text, like the text around them; their buttons do not. Kept as they are (controls, not reading text): header CA|US and EN|FR pills (12px; the phone header row is full at 320px), "Sale!" badge, phone buy-bar product name (14px, already cut with "..." on small phones), checkout field labels that float inside the boxes ("Country/Region" 13px), the mini video label, product tabs, all buttons. Body text: 17px stays on phones; 18px on screens 1024px and wider (page content only). ===================================================================================================================== */ /* B1. theme.json font sizes: "small" 14px -> 16px, new "x-small" 15px (WooCommerce cart, mini-cart and checkout use these: product descriptions and the "Save" badge were 12.25px, names / totals / labels / terms line 14px). */ :root, body { --wp--preset--font-size--small: 16px; --wp--preset--font-size--x-small: 15px; } /* B1c. Buttons that follow the "small" size keep today's 14px: cart-page suggestion "Add to cart", search buttons marked small, checkout "Place Order" (round 2), "Add coupons" toggle (round 2). */ .wp-site-blocks .wc-block-components-product-button__button, .wp-site-blocks .wp-block-search__button.has-small-font-size, .wp-site-blocks .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon .wc-block-components-panel__button { font-size: 14px !important; } /* Note (layout check): on the cart page the "Save $8.00 CAD" badge goes onto two lines in B (the price column is only as wide as the price). Left as it is on purpose: style.css:152 (FR-M-01) lets this badge wrap because the one-line version froze Safari on French phones. */ /* B2. Body text 17px -> 18px on laptops and desktops only (1024px and wider), in the page content only: the header and the footer keep 17px. Phones stay at 17px. */ @media (min-width: 1024px) { .wp-site-blocks main { font-size: 18px; } .boyer-single-post .entry-content p { font-size: 18px; } /* style.css:678 blog text */ /* B2b. buttons keep today's 17px: labels that follow the page text size (Shop Now, Add to cart, Where to buy, blog "See the Boyer Brush", store finder "Shop online", cart "Proceed to Checkout", search / 404 "Search" (round 2)) */ .wp-site-blocks main :is(a.button, button.button, .single_add_to_cart_button):not(.wc-forward) { font-size: 17px; } .wp-site-blocks main .wp-block-button > .wp-block-button__link { font-size: 17px; } :where(.wp-site-blocks main) :where(.wp-element-button, .boyer-wtb-btn) { font-size: 17px; } .wp-site-blocks main .wc-block-cart__submit-button, .wp-site-blocks main .wc-block-cart__submit-container .wc-block-components-button { font-size: 17px; } .wp-site-blocks main .wp-block-search__button:not(.has-small-font-size) { font-size: 17px; } .wp-site-blocks main .woocommerce-tabs ul.tabs li a { font-size: 17px; } /* product tabs (controls) keep 17px */ /* cart page quantity box and its - / + (they size themselves from the text around them), the cart "remove" bin and the account page "show password" eye keep today's size (round 2) */ .wp-site-blocks main .wc-block-components-quantity-selector, .wp-site-blocks main .show-password-input { font-size: 17px; } .wp-site-blocks main .wc-block-cart-item__remove-link { font-size: 17px !important; } } /* B2d. The number inside the cart / mini-cart quantity box follows the "small" size on screens wider than phones (14px today; phones already show 16px): it keeps 14px, so the box keeps today's height (round 2). */ @media (min-width: 783px) { .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-size: 14px !important; } } /* B2c. WooCommerce notice "View cart" button keeps today's 14.9px (0.875 x 17px) while the notice text grows (B12). */ .wc-block-components-notice-banner .wc-forward, .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss { font-size: 14.875px !important; } /* B3. Footer (every page). */ .boyer-foot-h, .boyer-follow-label { font-size: 14px; } /* :1001, :1006 HELP / EXPLORE / RATED BY GRILLERS, 12px caps */ .boyer-copyright { font-size: 15px; } /* :1011 copyright, 13px */ .boyer-nl .boyer-nl__consent { font-size: 15px; } /* newsletter.php:768 consent line, 13px */ /* B4. Announcement bar on phones 12px -> 14px (laptop already 14px). style.css:281 */ @media (max-width: 782px) { .boyer-announce { font-size: 14px; } } /* B5. Home page. */ @media (max-width: 782px) { .boyer-hero .has-muted-color { font-size: 16px !important; } /* :775 promise line on phones, 14px */ .boyer-trust .boyer-trust-title { font-size: 14px; } /* :792 trust strip on phones, 11px */ } .boyer-trust p:not(.boyer-trust-title) { font-size: 15px; } /* :44 trust strip descriptions (laptop), 13px */ [style*="color:#6b6257;font-size:14px"] { font-size: 16px !important; } /* front-page.html:146-149 feature descriptions, 14px */ .boyer-eyebrow { font-size: 14px; } /* :34 caps, 13px */ .boyer-family-card p:not(.boyer-family-tag):not(.boyer-family-price) { font-size: 16px; } /* :517 family card text, 14.5px (the caps tag line stays) */ .boyer-press-callout cite, .boyer-press-pull cite { font-size: 15px; } /* :822, :827 14px */ .boyer-press-quote-src { font-size: 15px; } /* :814 13px */ .woocommerce ul.products li.product .price { font-size: 16px; } /* WooCommerce .857em = 14.6px card prices */ /* B6. Product page + how-to. */ .boyer-diagram-caption { font-size: 16px; } /* :361 14.5px */ .boyer-step-body p { font-size: 16px; } /* :354 14.5px */ .boyer-patent { font-size: 14px; } /* :382 12.5px */ .boyer-qual-note, .boyer-compare-note { font-size: 15px; } /* :467 13.5px, :439 13px */ /* B7. Dangers page. */ .boyer-tracker-note { font-size: 15px; } /* :424 13px */ .boyer-tracker li { font-size: 16px; } /* :421 15px laptop, :749 14.5px phones */ .wp-site-blocks .boyer-press-card :is(h4,h6) { font-size: 15px; } /* :549 / :553 / :747 / :759 press card titles, 11.5-12.8px (h6 -> h4 since the 2026-10-24 heading-level fix) */ /* B8. Store finder page + small headings in page content. */ .boyer-wtb-note { font-size: 15px; } /* :619 13px */ .boyer-wtb-lead, .boyer-sf-title { font-size: 14px; } /* :613, store-finder.css:5 caps 13px */ .boyer-sf-tap p, .boyer-sf-nopin { font-size: 15px; } /* store-finder.css 13px */ .boyer-sf-dist { font-size: 15px; } /* store-finder.css 14px */ .wp-site-blocks .entry-content h6, .wp-site-blocks .boyer-hl6 { font-size: 16px; } /* store finder lines under "Trusted By": h6 at the browser default 11.4px, now h3.boyer-hl6 at .67em (style.css:561, 2026-10-24 heading-level fix) */ .wp-site-blocks .entry-content h5 { font-size: 1em; } /* round 2: restaurants page "Safety", "Cleaning"... (browser default 0.83em = 14.1px) -> same size as the text, bold */ /* B9. Blog. */ .boyer-single-post .boyer-post-cat, .boyer-single-post .boyer-post-date, .boyer-blog-grid .wp-block-post-date, .boyer-post-more-lead { font-size: 14px; } /* caps 12.5-13px */ .boyer-post-byline { font-size: 15px; } /* :664 13px */ .boyer-blog-grid .wp-block-post-excerpt { font-size: 16px; } /* :658 14.5px */ .boyer-press-page figcaption { font-size: 15px; } /* :831 13.5px */ /* B10. Contact form help lines, counters and sub-labels 14px -> 15px (WPForms). */ body div.wpforms-container-full, body .wpforms-container { --wpforms-label-size-sublabel: 15px; } body div.wpforms-container-full .wpforms-field-description, body div.wpforms-container-full .wpforms-field-limit-text, body div.wpforms-container-full .wpforms-field-sublabel { font-size: 15px !important; } /* B11. Cookie banner and its settings panel (CookieYes). Phones: text 12px -> 15px, buttons 12px -> 15px (style.css:800, :802 made them compact on purpose; the bar gets taller). Laptops: text 14px -> 16px, buttons 14px -> 15px. THE ONLY BUTTONS THAT CHANGE SIZE IN B: these cookie buttons (their 12px labels were the smallest text on the site). */ .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des p, .cky-consent-container .cky-notice-des a { font-size: 16px !important; } .cky-consent-container .cky-btn { font-size: 15px !important; } @media (max-width: 782px) { .cky-consent-bar .cky-notice-des, .cky-consent-bar .cky-notice-des p, .cky-consent-bar .cky-notice-des a { font-size: 15px !important; line-height: 1.4 !important; } .cky-consent-bar .cky-btn { font-size: 15px !important; } } /* Phones: CookieYes puts 24px of extra side space inside the bar; 6px instead so the French pair « Paramètres personnalisés » + « Tout accepter » fits on one row on a 320px phone at 15px. */ @media (max-width: 782px) { .cky-consent-bar .cky-notice-des, .cky-consent-bar .cky-notice-btn-wrapper { padding-left: 6px !important; padding-right: 6px !important; } } /* Build 2026-10-25 (round-2 re-check): the mock-up listed "button" here, which grew the "Show more / Afficher plus" button 14 -> 16px; it is left out so it keeps today's size (R3). */ .cky-preference-center .cky-preference-content-wrapper, .cky-preference-center .cky-preference-content-wrapper p, .cky-preference-center .cky-preference-content-wrapper button:not(.cky-show-desc-btn), .cky-preference-center .cky-accordion-header-des, .cky-preference-center .cky-accordion-header-des p { font-size: 16px !important; } .cky-preference-center .cky-always-active { font-size: 15px !important; } .cky-preference-center .cky-btn { font-size: 15px !important; } /* B12 (round 2). Error and notice messages: WPForms field errors 14px -> 15px (the theme keeps a fixed space for one error line under each field, style.css:322-327, so the form does not move); WooCommerce checkout field errors 14px -> 16px; WooCommerce notice text ("added to your cart", checkout error box) 14.9px -> 16px. */ div.wpforms-container-full .wpforms-form em.wpforms-error, div.wpforms-container-full .wpforms-form label.wpforms-error { font-size: 15px !important; } /* the half-width "First name / Last name" columns of the reseller form are 192px wide on laptops: at 15px the French « Ce champ est obligatoire. » broke onto a second line there and touched the next field (layout check). Above 480px it stays on one line (phones up to 480px already keep room for two lines, style.css:327). */ @media (min-width: 481px) { div.wpforms-container-full .wpforms-form .wpforms-field-row-block em.wpforms-error { white-space: nowrap; } } .wc-block-components-validation-error, .wc-block-components-validation-error > p { font-size: 16px; } .wc-block-components-notice-banner { font-size: 16px; } /* B13 (round 2). "Added to your cart" pop-up (style.css:870): product name 14px -> 15px (its two buttons keep 14px). */ .boyer-cart-toast-name { font-size: 15px; } /* ===================================================================================================================== C1 — darker orange for orange TEXT THAT IS NOT A LINK (needed for the 7:1 reading target). These words were #c93c17: 5.07:1 on white, 4.74 on #faf7f1, 4.55 on cream. They are read as text (labels, eyebrow lines, "Always Active", the phone buy-bar price, "Error 404"), not as links, so the link allowance (4.5) does not apply. #c93c17 -> #a23013 on white (7.07:1). On the cream (#f7f2ea) and #faf7f1 boxes -> #942c11 (7.17 / 7.47:1). Links are NOT changed (that would be C2, not approved). NOT touched: buttons and their fills, the logo, the brand orange #f04e23 (icons, borders, stars, the big decorative step numbers / pro-tip flame / "Ditch"), the product FAQ "+" sign. ===================================================================================================================== */ /* C1a. On white and light backgrounds: #a23013 (7.07:1 on white). */ .boyer-eyebrow, .boyer-shop-band .boyer-eyebrow, /* style.css:34, :50 eyebrow lines "THE ORIGINAL BOYER BRUSH", "REAL REVIEWS" */ .boyer-family-tag, /* :516 family card caps tag */ .boyer-qual-list sup, /* :466 buyer's guide footnote numbers */ .boyer-post-more-lead, /* :665 blog "more" caps lead */ .boyer-stickybuy-price, /* :910 phone buy-bar price */ .boyer-sf-dist /* store-finder.css:29 distance "3.2 km" */ { color: #a23013; } .cky-preference-center .cky-always-active { color: #a23013 !important; } /* :260 cookie panel "Always Active" */ .wpforms-container .wpforms-required-label { color: #a23013 !important; } /* :320 contact form required star */ .has-accent-text-color:not(a):not(.wp-element-button) { color: #a23013 !important; } /* templates/404.html:4 "ERROR 404" (and any block coloured "Boyer orange (text)" that is not a link; WordPress writes these colour classes with !important) */ /* C1b. On the cream (#f7f2ea) and #faf7f1 boxes of the store finder page: #942c11 (7.17 / 7.47:1). */ .boyer-wtb-lead, .boyer-sf-title { color: #942c11; } /* style.css:613 "WHERE TO BUY", store-finder.css:5 "FIND A STORE" */ /* ===================================================================================================================== R1-R4 — the gaps found by the round-2 re-check (build 2026-10-25). ===================================================================================================================== */ /* R1. WPForms checkbox squares (reseller form 174 "In store / My online store / Markets and events", on the become-a-reseller and restaurants pages, EN + FR): WPForms draws each square with ::before in --wpforms-field-border-color, black at 25 % (#bfbfbf on white, 1.84:1) -> #8a8074 (3.87:1), the outline grey of A10. Set on the checkbox only: the text fields keep A10, and a ticked or focused square keeps WPForms' own orange (those use the button colour, not this one). */ div.wpforms-container-full .wpforms-form input[type=checkbox] { --wpforms-field-border-color: #8a8074; } /* R2. Cookie settings panel, cookie list (Cookie / Duration / Description rows, « Témoin / Durée / Description », and "No cookies to display."): CookieYes 12px -> 15px, into B with the rest of the panel text (B11). */ .cky-preference-center .cky-audit-table .cky-cookie-des-table, .cky-preference-center .cky-audit-table .cky-empty-cookies-text { font-size: 15px !important; } /* R3. Toggles that follow the "small" size (14px today) keep today's size, like every button: the checkout "+ Add apartment, suite, etc." toggle and the phone / tablet checkout "Order summary $…" toggle (its "Order summary" words keep their own size). The cookie panel "Show more / Afficher plus" is left out of B11 above. */ .wp-site-blocks .wc-block-components-address-form__address_2-toggle { font-size: 14px; } .wp-site-blocks .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title { font-size: 14px; } /* R4. No rule, on purpose: the "Sale!" badges (13px bold white on #d1421a, 4.66:1) and the announcement bar (white on the brand orange, 4.66:1) stay brand fills. */ /* ===================================================================================================================== F1 — keyboard focus never hidden behind the first-visit cookie bar (WCAG 2.4.11 Focus Not Obscured), item 6. While the bar is open, the page keeps a bottom scroll margin equal to the height the bar covers (its top edge to the bottom of the window: the phone bar is full width at the bottom, the laptop box sits 40px above it), so an element reached with Tab is scrolled up above the bar instead of staying under it. The height comes from a small script in functions.php ("Item 6") that writes --boyer-cky-bar-h; without the script the value is 0 (today's behaviour). Only scrolling changes; nothing visible. The top margin for the sticky header (style.css, html{scroll-padding-top:84px}) is untouched. ===================================================================================================================== */ html:has(.cky-consent-container:not(.cky-hide)) { scroll-padding-bottom: var(--boyer-cky-bar-h, 0px); }