/* ============================================================================ * 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:not(.has-scc-google-address-error) .scc-google-address-status { color: #68726e; } /* 3.65 -> 4.56 */ /* The :not() is load-bearing, not tidiness. Measured 2026-08-24: this rule is (0,4,1) !important and was outranking the theme's own error colour (.field.has-scc-google-address-error .scc-google-address-status -> #982222, no !important, (0,3,0)). So a place-picker block rendered in the same muted grey as the passive hint beside it, which is why a customer pressing "Check capacity and continue" saw nothing happen at all. Excluding the error state restores #982222 (7.58:1) and keeps the resting state at 4.64. */ .search-card .route-fields label.field.location-field:not(.has-scc-google-address-error) > span, .search-card .route-fields label.field:not(.has-scc-google-address-error) .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. Re-measured 2026-08-29: BOTH brands render this on the same ground and #916d0d gave 4.04, not the 4.67 this comment claimed. Corrected to #6a4b07 (6.1) and left unscoped - it is the same component. */ .route-offer-grid > button.route-offer-card > small { color: #6a4b07; } /* 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. */ /* --- 6. Hero slider controls: trapped stacking context --------------------- * * MEASURED, 2026-08-23, both brands x {1440, 834, 390}, 6/6 combinations. * * Before: every control in the homepage background slider - both arrows and * all four dots - hit-tested to div.shell.home-featured-hero__inner. * Reachable: false. After the one declaration below: every control * hit-tests to itself. Reachable: true. Pixel diff of the full 1440x900 * render, before vs after, is bounded to exactly the 225x44 controls box * (SCC 1115,155; HUT 1064,207) - nothing else on the page moves or repaints. * * CAUSE. uiux-v3.css gives .home-featured-hero > .brand-hero-slider--background * `position:absolute; z-index:0`. A positioned element with a numeric z-index * creates a stacking context, so the controls' own `z-index:4` is resolved * INSIDE that context and can never rise above it. The hero shell * (.home-featured-hero__inner, z-index:2) is a later sibling in the same * parent context, so it paints over the whole slider, controls included. * The shell is transparent, so the controls stayed visible - which is why * this read as a hit-area problem for so long. It was never a size problem: * the 44x44 ::before in section 2 above was already correct and already live. * * FIX. z-index:auto stops the wrapper creating a context without changing * where it paints: it is still `position:absolute` and still the first * positioned child, so the slide images continue to paint below the * .home-featured-hero__overlay (z-index:1) and the shell (z-index:2), while * the controls' z-index:4 now resolves against those siblings and wins. * * SAFE BECAUSE. The one element that could have escaped with it, * .brand-hero-slide__copy (z-index:2), is not rendered at all in the * --background variant - measured absent on both brands at every viewport. * Nothing else inside the slider carries a z-index. * * !important is required: uiux-v3.css is the theme's own sheet and this * plugin wins on source order, but the theme selector * (.home-featured-hero > .brand-hero-slider--background) is already as * specific as this one, and the theme sheet is per-brand and drifts. * * NOT A DEFECT, recorded here so it is not "fixed" later: the two arrows are * display:none below 720px. The dots remain, and they are reachable. That is * a deliberate mobile treatment, not a casualty of this bug. */ .home-featured-hero > .brand-hero-slider--background { z-index: auto !important; } /* P114 CONTRAST COMPLETION - 2026-08-29 (Claude) * Global chrome only. Measured on live: .scc-footer-contact > span rendered * #74847e on the composited footer ground #0a2919 = 3.97:1 against a 4.5:1 * requirement at 12px. Lifted to #a8b9b3 (approx 7:1) - same hue family, no * new palette value introduced. Scoped, and no !important: this file is * enqueued at priority 9999 so it already wins on order. */ .scc-footer .scc-footer-contact>span{color:#a8b9b3} /* ============================================================================ * P114 CONTRAST ROUND 2 - 2026-08-29 (Claude) * * Same root cause as the round-1 SCC homepage fix: p114-brand-redesign-v2 and * the theme disagree about which components are light and which are dark. The * plugin enqueues at priority 140 and this file at 9999, so these rules win on * order; each is scoped to its brand and component, and none uses !important - * deliberately, because a blanket !important contrast rule in this file once * outranked the theme's own error colour and hid a failed search for weeks. * * Every colour below already exists in the codebase. Palette is FROZEN. * Ratios stated are measured against the composited winning background. * ==========================================================================*/ /* SCC route pages - plugin paints .route-promise dark (#032d22) while the theme * leaves the paragraph at its light-ground colour. Measured live 2.24:1. */ .scc-brand-scc .route-promise p{color:#fff} /* SCC route pages - vehicle chooser. Measured 4.04-4.36:1 against #e5eee9. */ .route-offer-card strong>small{color:#4f6058} .route-offer-card h3>em{color:#4f6058} .route-offers__heading>p{color:#4f6058} .scc-brand-scc .route-offers__heading .content-eyebrow, .scc-brand-scc .faq-section .content-eyebrow{color:#075c43} /* SCC contact - plugin repaints the active step pill #eaf4ee, theme's white * numeral is left stranded on it. Measured 1.12:1. */ .scc-brand-scc .contact-experience .contact-progress__item.is-active span{color:#10241d} /* SCC contact aside - plugin paints the panel dark, theme link stays brand * green on it. Measured 2.04:1. */ .scc-brand-scc .contact-aside a{color:#b8e878} /* SCC homepage confidence pills - tick icon is a UI graphic on a pale pill. * SC 1.4.11 needs 3:1; measured 1.41:1. */ .scc-brand-scc .scc-home-confidence__copy li>svg{color:#006b4d} /* HUT - plugin shifts three light grounds to warmer creams that the theme's * muted greys were tuned against. Measured 4.36-4.49:1, all just under AA. */ .scc-brand-hut .results-head small, .scc-brand-hut .vehicle-option .price{color:#6a4b07} .scc-brand-hut .visitor-preferences__field small{color:#4b3900} .scc-brand-hut .consent-choice small{color:#594607} /* HUT FAQ eyebrow - gold #896700 measured 4.37 on the light ground. */ .scc-brand-hut .faq-section .content-eyebrow{color:#6a4b07} /* ============================================================================ * P114 CONTRAST ROUND 3 + TAP TARGETS - 2026-08-30 (Claude) * From a 26-combination sweep: both brands x en/ar/ur/id x 390 and 1440. * Only four distinct contrast defects remained estate-wide. Values below * already exist in the codebase; palette remains FROZEN; no !important. * ==========================================================================*/ /* Contact progress label. Measured SCC 3.65, HUT 3.59 on the light panel. */ .contact-progress .contact-progress__item>b{color:#3f5750} /* Fleet page eyebrow - third instance of the same .content-eyebrow pattern. * Kept explicitly scoped rather than styling .content-eyebrow globally, which * would also hit the instances that legitimately sit on dark grounds. */ .scc-brand-scc .network-fleet-heading .content-eyebrow{color:#075c43} .scc-brand-hut .network-fleet-heading .content-eyebrow{color:#6a4b07} /* HUT homepage guides eyebrow. Measured 4.42 in both EN and AR. */ .scc-brand-hut .home-guides__heading>div>p{color:#735500} /* ---- Tap targets: genuine WCAG 2.5.8 failures (under 24x24) ------------- * Hit area is expanded with a transparent ::after overlay rather than padding, * so nothing moves and no layout shifts. */ /* Hero slider controls measured 22x12 (en) and 22x4 (ar) on BOTH brands - the * Arabic case is effectively unclickable. Register #37 still calls for the * slider to be replaced; this makes the existing controls reachable meanwhile. */ .brand-hero-slider__controls button{position:relative} .brand-hero-slider__controls button::after{content:"";position:absolute;inset:-14px -6px} /* Breadcrumb links measured 34x19 (height fails). */ .breadcrumbs a{position:relative;display:inline-block} .breadcrumbs a::after{content:"";position:absolute;inset:-4px -2px} /* Footer support email link measured 16-19px tall on both brands. */ .scc-footer a[href^="mailto:"], .hut-footer a[href^="mailto:"]{position:relative;display:inline-block} .scc-footer a[href^="mailto:"]::after, .hut-footer a[href^="mailto:"]::after{content:"";position:absolute;inset:-5px -2px} /* ============================================================================ * P114 CLOSED-DETAILS LANGUAGE MENU - 2026-08-30 (Claude) * * MEASURED: details.site-language--header is CLOSED (open === false) yet its * dropdown panel renders at 172x38 per option, painted and tabbable, sitting * over the header/hero. Keyboard users tab into links they cannot see, and the * options are exposed to assistive tech from every page. * * CAUSE: site.css sets `.site-language > div { position: absolute }` (and * `fixed` in a media query). Nothing sets display:block - the positioning is * enough. A closed
hides its non-summary children via the UA's * content-visibility containment on the slot, and an absolutely positioned * child escapes that containment. So the panel is hidden only by whatever * happens to paint over it, which is why it surfaced during a reachability * probe and not by eye. * * FIX: hide the panel explicitly while the menu is closed. Specificity * (0,2,2) beats site.css's (0,1,1), and this file loads last, so no * !important is needed. Scoped to :not([open]) so the open menu is untouched. * Covers both the header and drawer variants and both brands. * ==========================================================================*/ details.site-language:not([open]) > div{display:none} /* =========================================================================== 2026-08-30 - SCC mobile sweep (round 5), measured at 375 CSS px. Both corrections below are SCC-only. HUT was measured at the same width in the same pass and has neither defect: it renders no .confidence-number, and it returned zero sub-24px links. =========================================================================== */ /* 1. The decorative step numeral in the confidence panel. .confidence-number is white at 50% alpha and sits at z-index:2 over the API fleet photograph inside .scc-home-confidence__visual. It measured 1.07:1 against the placeholder gradient in the pre-reveal state, and a screenshot after the reveal confirmed the same outcome for a different reason: the Camry photo is near-white across its upper third, which is exactly where the numeral lands. Either way it reads as blank. The brand palette is frozen, so the numeral keeps its white and the legibility comes from a shadow - which holds over whatever photograph the API happens to serve, rather than assuming this one. */ body.scc-brand-scc .scc-home-confidence__visual .confidence-number{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.92), 0 0 8px rgba(0,0,0,.6); } /* 2. "Contact Saudi Cab Co" in the FAQ section header is display:inline with no padding - 124x17 CSS px, under the 24x24 minimum of WCAG SC 2.5.8. This is the same ::after hit-area pattern already used in this file for the hero slider controls, the breadcrumbs and the footer mailto: the visual design is untouched and only the touch region grows (to 45px tall). */ body.scc-brand-scc .home-faq__layout > header a[href$="/contact/"]{ position:relative; } body.scc-brand-scc .home-faq__layout > header a[href$="/contact/"]::after{ content:""; position:absolute; inset:-14px -10px; }