/* ============================================================================ * p114-af.css — accessibility and fluidity fixes for saudicabco.com and * hajjumrahtaxi.co.uk. Shared theme: scc-network-theme. * * ADDITIVE BY DESIGN. This file is enqueued AFTER every existing stylesheet, so * each rule here wins on order alone and nothing in site.css, home-v2.css, * uiux-v3.css or the brand sheets is edited. Reverting the whole change set is * deleting one wp_enqueue_style() call. * * Every value below came from measuring the live pages, not from taste: * - touch sizes are the rendered box, rounded * - colours were solved by holding hue and saturation and moving lightness * only as far as it takes to clear 4.5:1 against the ground that actually * painted * * Deliberately NOT changed, having been measured and found fine: * --muted (#64706c) measures 4.93:1 on --paper. It looked like the culprit * and is not one. * .hut-home-proof b (#f4b000) sits on a dark bordered pill over the hero * photograph, not on the cream section behind it. Legible as built. * Anything inside .home-featured-hero or .content-hero__layout.has-media * sits over photography and cannot be judged from CSS. Left alone. * (.content-eyebrow IS handled - see section 3b, where it is split by the * ground it actually renders on rather than left as one value.) * ========================================================================== */ /* --- 1. Scroll containment ------------------------------------------------ * Stops rubber-band scroll chaining to the page behind an open drawer, and * stops Android pull-to-refresh firing mid-form. Nothing moves. */ html { overscroll-behavior-y: none; } body { overscroll-behavior: none; } /* Anything that scrolls on its own keeps the gesture to itself. */ .journey-modes, .quick-routes, .site-language > div, .site-currency > div, .mobile-nav, .consent-centre, .visitor-preferences, .entry-content .wp-block-table { overscroll-behavior: contain; } /* --- 2. Touch targets: 44px floor ----------------------------------------- * 44px is the iOS Human Interface floor and the WCAG 2.5.5 target size. * min-height only, never height, so nothing that already clears it shrinks. */ /* Text and select inputs. Checkboxes and radios are excluded - they have their own 20px convention and a 44px box would break the .check-field row. */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), select, textarea { min-block-size: 44px; } /* The search card sets these to 28/30px explicitly, so it needs beating on specificity, not just order. */ .search-card .field input, .search-card .field select, .search-card-scc .field input, .search-card-scc .field select, .search-card-hut .field input, .search-card-hut .field select { min-block-size: 44px; } /* Pill controls measured at 32-42px. */ .journey-modes button, .journey-modes > span, .quick-routes button, .site-language summary, .site-currency summary, .scc-account-button, .article-share__btn, .hut-menu-toggle, .menu-toggle { min-block-size: 44px; } /* Square controls: keep them square. */ .scc-basket-button, .article-share__btn, .hut-menu-toggle { min-inline-size: 44px; } .scc-basket-button { inline-size: 44px; block-size: 44px; min-block-size: 44px; } /* The footer currency select pins itself with min-height:34px!important, so matching it is the only way through. */ .scc-footer-currency select { min-block-size: 44px !important; } /* The consent centre is ours, not a third-party banner: its own controls are measured at 92x19 and 128x25. */ .cookie-settings-link, .consent-centre button, .visitor-preferences button { min-block-size: 44px; } .hut-menu-toggle { inline-size: 44px; block-size: 44px; } .article-share__btn { inline-size: 44px; block-size: 44px; } /* Small controls that must NOT grow visually. * .swap-button is absolutely positioned against hand-tuned top/right offsets, * .field-tip is a 17px glyph inside a label row, and the slider dots are 4px * of deliberate hairline. Growing any of them moves layout. Instead the hit * area is an absolutely positioned pseudo-element: it is out of flow, so it * changes nothing visually and everything about the target size. * ::before is used because .field-tip::after is already the tooltip. */ /* The slider arrows are a 2px shortfall and the hero shell paints over them, so the pseudo-element trick does not reach; 42 -> 44 directly is harmless in a controls bar. */ .brand-hero-slider__controls > button { min-inline-size: 44px; min-block-size: 44px; } /* The dots are a different element: `> div button`, not `> button`. They are 22x4 of deliberate hairline, so the visible dot is left exactly as it is and only the hit area grows. */ .brand-hero-slider__controls > div button { position: relative; } .brand-hero-slider__controls > div button::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 44px; block-size: 44px; transform: translate(-50%, -50%); } [dir="rtl"] .brand-hero-slider__controls > div button::before { transform: translate(50%, -50%); } .swap-button, .field-tip, .brand-hero-slider__controls > button { position: relative; } .swap-button::before, .field-tip::before, .brand-hero-slider__controls > button::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 44px; block-size: 44px; transform: translate(-50%, -50%); /* no background: this is a hit area, not a shape */ } /* RTL: translate(-50%) is physical, so mirror it when the inline axis flips. */ [dir="rtl"] .swap-button::before, [dir="rtl"] .field-tip::before, [dir="rtl"] .brand-hero-slider__controls > button::before { transform: translate(50%, -50%); } /* --- 3. Contrast ---------------------------------------------------------- * Solved per pair. The comment on each line is measured-before -> measured-after * against the ground that actually painted. */ /* Booking form helper text. This is the copy that stops a customer entering an incomplete address, so it is content, not decoration. SCC paints these #7c8b85 from a rule that is not in any linked stylesheet - it is injected inline - so no selector can outrank it and !important is the only honest option here. HUT is fine on specificity alone. */ .field .scc-google-address-status { color: #68726e; } /* 3.65 -> 4.56 */ .search-card .route-fields label.field.location-field > span, .search-card .route-fields label.field .scc-google-address-status { color: #66736e !important; /* 3.35 -> 4.64 */ } #pickup-location-help, #dropoff-location-help { color: #6b7370; } /* 4.06 -> 4.53 */ .quick-routes > span { color: #6b7370; } /* 3.82 -> 4.59 */ .journey-modes button small { color: #6b7370; } /* 3.82 -> 4.59 */ /* Field labels and the notes under date, time and currency. */ .search-card .field > span, .search-card .field small { color: #66736e; } /* 3.35 -> 4.64 */ /* Language and currency choosers, header and drawer. */ /* The chooser dropdown sits on different grounds per brand - SCC on pale mint #f0f5f2, HUT on the brand yellow #ffd11a - so one value cannot serve both. Measured and solved separately. */ .scc-brand-scc .site-language > div small, .scc-brand-scc .site-currency > div small { color: #64726a; } /* 4.26 -> 4.60 */ .scc-brand-hut .site-language > div small, .scc-brand-hut .site-currency > div small { color: #535f58; } /* 3.22 -> 4.59 */ .site-language summary b, .site-currency summary b, .site-language summary small, .site-currency summary small { color: #5f6864; } /* 3.76 -> 4.68 */ .header-selector-label { color: #5f6864; } /* 4.48 -> 4.79 */ /* Numbered process markers on light panels. */ .scc-home-confidence ol > li > b, .home-process ol > li > b { color: #63756e; } /* 2.31 -> 4.63 */ /* HUT service-grid numerals: .scc-brand-hut.home .hut-home-service-grid>a>small */ .scc-brand-hut.home .hut-home-service-grid > a > small { color: #807143; } /* 2.64 -> 4.61 */ /* HUT guide eyebrows: .hut-home-guides .home-guides__heading p / .hut-service-stack span */ .hut-home-guides .home-guides__heading p, .hut-service-stack span { color: #90711d; } /* 3.97 -> 4.59 */ /* Gold-on-gold service labels, and the HUT guide/fleet near-misses. Values are the residual solve taken with the patch already applied, so they are the real remaining gap rather than the original one. */ .hut-home-service-grid > a > b, .hut-home-service-grid small { color: #5a4500; } /* 2.36 -> 4.70 */ .hut-home-guides .home-guides__heading > p, .hut-home-intro p { color: #906a00; } /* 4.17 -> 4.67 */ .hut-fleet-card small, .hut-home-fleet__grid article small { color: #916d0d; } /* 4.43 -> 4.67 */ .home-faq__layout > header > span { color: #63706b; } /* 4.47 -> 4.65 */ .vehicle-card .muted, .results-card small { color: #7a7569; } /* 4.40 -> 4.57 */ /* Advanced-options summary line, outside .field so the earlier rule misses it. */ .search-advanced-toggle small { color: #6c7572; } /* 3.96 -> 4.59 */ /* Language and currency choosers also render the code as , not just . */ .site-language summary small, .site-currency summary small { color: #646e6a; } /* 4.26 -> 4.62 */ /* Dark grounds: lighten rather than darken. */ .scc-footer-bottom { color: #728179; } /* 4.00 -> 4.64 */ .hut-footer-bottom { color: #837b68; } /* 3.73 -> 4.51 */ /* Eyebrow inside the dark confidence panel. The theme already contains the right answer: one rule sets #91e4bf (light mint, intended for the dark panel) and a later one re-darkens it to #006b4d, which is the bug. This restores the theme's own value rather than inventing a colour, and matches the losing rule's specificity (0,4,0) so it wins on order. #91e4bf on #062d23 measures 11.3:1. */ .scc-brand-scc.home .scc-home-confidence__copy .home-v2__eyebrow { color: #91e4bf; } /* 2.28 -> 11.3 */ /* Account gateway eyebrow, gold on white. */ .scc-account-eyebrow { color: #946c00; } /* 2.11 -> 4.76 */ /* --- 3b. The three two-ground colours, split ------------------------------ * * Each of these classes renders on BOTH a light and a dark background, so no * single value clears AA on both (it needs relative luminance <= 0.183 against * white and >= 0.200 against #111 - a contradiction). Measured every instance * on the live pages, grouped by the background that actually paints, and split * accordingly. * * .content-eyebrow, measured: * DARK #0b0d0e section.content-cta HUT * DARK #13261f section.content-cta SCC * DARK #082c23 .content-hero SCC * DARK #342a05 .content-hero HUT * LIGHT #f8f3e7 #faf8f1 .content-section / .route-offers HUT * LIGHT #f7f9f6 #ffffff .content-section / .route-offers SCC * * The light default below is set at the SAME specificity as the theme's base * rule, which is deliberate: SCC already paints some .content-section eyebrows * #64706c from a more specific rule, and those measure 4.82:1 and are fine. * A blanket override would have turned them green for no reason. Matching the * base rule's specificity means only the instances that actually fall through * to the accent are touched - the cascade does the selection. * * On the dark grounds the bright accent already clears AA comfortably * (#83c934 on #13261f is 7.4:1), so those are restored rather than altered. */ .content-eyebrow { color: #517c20; } /* 2.03 -> 4.66 on light */ .scc-brand-hut .content-eyebrow { color: #896700; } /* 1.39 -> 4.76 on light */ /* Dark panels: keep the accent. Higher specificity than the light defaults above, so these win wherever they apply. */ .content-cta .content-eyebrow, .content-hero .content-eyebrow { color: var(--accent); } /* 7.4:1, unchanged */ .scc-brand-hut .content-cta .content-eyebrow, .scc-brand-hut .content-hero .content-eyebrow { color: #ffc928; } /* unchanged */ /* The featured fleet card is the #111 one; the rest are on white where the existing #756e5d already measures 5.07:1. Only the dark card moves. */ .hut-home-fleet__grid article.is-featured > div span { color: #837b68; } /* 3.73 -> 4.51 */ /* Only the FIRST service card carries the dark gradient (linear-gradient(145deg,#063b2d,#006b4d)); the other five are on #f7f9f7 where #006b4d already measures 6.18:1. Only the gradient card moves. */ .scc-brand-scc.home .scc-home-services .home-service-card:first-child b { color: #aee772; /* 4.43 -> 4.52 */ } /* .content-eyebrow was previously NOT changed here. * * Darkening it to clear 4.5:1 on the white sections fixed 6 findings and broke * 10: the same class is used as text on dark CTA bands and on the content hero, * where the bright accent is correct and a dark olive fails just as badly in * the other direction. The A/B run caught it - 3.34:1 on scc/route, * 2.74:1 on hut/article - and the rule was withdrawn. * * No single value satisfies both grounds. This needs a design decision, not a * CSS override: either a second class for the dark-panel eyebrow (e.g. * .content-eyebrow--on-dark keeping the accent) so the light-panel one can be * darkened, or a token pair resolved per section. Flagged rather than forced. */ /* Primary CTA gradient. White on the light end measured 4.21:1. The darker stop is untouched, so the button reads the same; only the far end of the ramp moves and the brand green (#006b4d) is unchanged. */ .scc-brand-scc.home .home-featured-hero__search .search-submit, .scc-home-booking .search-card-scc .search-submit { background-image: linear-gradient(135deg, #006b4d, #007a54); /* 4.21 -> 5.37 */ } /* Hero action button: white on --scc-bright (#00a873) measured 3.07:1. Darkened for this button only - the token is left alone because it is used elsewhere at large sizes where it already passes. Specificity matches the rule it overrides (0,5,0). */ .scc-brand-scc.home .home-featured-hero .home-hero-actions a.is-primary, .home-featured-hero .scc-home-booking .home-hero-actions a.is-primary { border-color: #00835b; background: #00835b; /* 3.07 -> 4.78 */ } /* Any other white-on-#00a873 control. --scc-bright is fine at 24px+ where it only needs 3.0, so the token is left alone and only the small-text buttons are darkened. */ a.is-primary, button.is-primary { --scc-bright: #00835b; } /* --- 4. Reduced motion ---------------------------------------------------- * The hero slider autoplays. Respect the OS setting. */ @media (prefers-reduced-motion: reduce) { .brand-hero-slider__track, .brand-hero-slider img { transition: none !important; animation: none !important; } } /* --- 5. v8 residual contrast ---------------------------------------------- * * The 25 contrast findings left after v7. Solved the same way as everything * above: hold hue and saturation, move lightness only as far as it takes to * clear AA against the ground that ACTUALLY paints - measured on the live * pages, at 375 and 1440, which agreed exactly. * * Selectors here are the real ancestor chains, resolved by walking the live * DOM. The solver reports three-level paths like "article > div > small"; * shipping that would repaint half the site. * * TWO ARE DELIBERATELY NOT FIXED - see section 5b at the end. * ONE REPORTED FAILURE IS NOT A FAILURE - see section 5c. */ /* HUT care-list tiles: gold label on the gold panel (#edaf00). The v7 rule targeted .hut-home-service-grid > a > small; these tiles are .hut-home-care__list > article > div > small, a different component that happens to share the colour. 2.36 -> 4.70. Specificity matters here and the first attempt got it wrong: the theme rule is `.scc-brand-hut.home .hut-home-care__list small` at (0,3,1), so a (0,1,3) child-combinator selector loses no matter how late it is printed. Matching the theme's own selector exactly means this wins on source order, which is the same technique section 3b uses. */ .scc-brand-hut.home .hut-home-care__list small { color: #5a4500; } /* HUT booking-card head, gold on cream (#fff8df). The v7 rule covered .hut-home-intro p and the guides heading, not the search card. 4.17 -> 4.67 Two rules paint this: hut.css sets #80651b at (0,2,1) and hut-home-refresh.css overrides it with #9a7100 at (0,3,1). Matching the WINNER's specificity, not the first one found. */ .scc-brand-hut .hut-home-refresh .search-head small { color: #906a00; } /* HUT fleet cards, "or similar" on white. Excludes .is-featured deliberately: that card is #aaaaaa on #111 and measures 8.13:1 - already fine, and darkening it would break it. 4.40 -> 4.57 */ .hut-home-fleet__grid > article:not(.is-featured) > h3 > em { color: #7a7569; } /* HUT featured fleet card, the #111 one. This is v7's own value landing 0.01 short of the line - the smallest possible nudge, not a new colour. Scoped to the fleet grid so .hut-footer-bottom, which shares #837b68 and measures fine on the footer, is untouched. 4.49 -> 4.66 */ .hut-home-fleet__grid > article.is-featured > div > span { color: #867e6a; } /* HUT route offer cards, seven vehicle-class labels, one rule. Covers .is-selected too - same colour, same ground. 4.43 -> 4.67 */ .route-offer-grid > button.route-offer-card > small { color: #916d0d; } /* HUT account gateway eyebrow, on account AND login. The ground is linear-gradient(135deg, #fff4bf, #ffffff), so the value has to clear AA against the DARKER stop, not the white one: #946c00 measures 4.77:1 on white but only ~4.26:1 on #fff4bf, which is what the gate reported. #856100 measures 5.13:1 on #fff4bf and 5.69:1 on white - passes on every point along the ramp. */ .scc-account-gateway .scc-account-eyebrow { color: #856100; } /* SCC final-CTA arrow chip. The link is a white pill with dark green text; the arrow sits in its own circular chip painted --scc-bright (#00a873), and white on that measures 3.07:1 at 12px. Darkened to #00835b, exactly the value v7 already uses for small text on this token elsewhere, so the brand green is unchanged and only this chip moves. 3.07 -> 4.78 Both properties are set: the token in case the chip paints via var(--scc-bright), and background-color in case it does not. */ .scc-home-final .shell > a > span { --scc-bright: #00835b; background-color: #00835b; } /* --- 5b. Measured, and deliberately left alone ---------------------------- * * .hut-home-proof b (the "✓") * Probe reads #f4b000 on #fff8df, 1.79:1. That is the wrong ground: the * tick sits inside a dark bordered pill over the hero photograph, not on * the cream section behind it. Settled by screenshot in an earlier pass * (p114-gate/hut-proof.png) and re-confirmed here. Legible as built. * Changing it to #936a00 would make it WORSE against the pill it is * actually on. * * .confidence-number ("01", "02", "03") * White at 12px on pale mint #d8e9e1, 1.26:1. This is a decorative * watermark numeral behind the confidence panel, not reading matter - the * same numbers are announced by the list items beside it. Solving it to * #666666 would clear AA and destroy the effect. * This is a DESIGN decision, not a CSS one, and it belongs with the * identity work: either accept it as decorative and mark it * aria-hidden="true", or promote it to real text and give it a real * colour. Flagged rather than forced. */ /* --- 5c. Reported, but not a defect --------------------------------------- * * a > h3 > span, the #00a873 arrow on white in the SCC service cards, is * reported by the SOLVER at 3.07:1 against a 4.5 requirement. It renders at * 24px/700, which is WCAG large-scale text, so the requirement is 3.0 and it * passes. The probe scores it correctly (probe.js line 212 sets * large = px >= 24). The solver keys its lookup on tag + text, so every * span containing "→" collapses onto one key and this one inherited the * 12px chip's threshold. Instrument, not site. No rule written. */