/* ============================================================ Accessibility layer — WCAG 2.1 AA fixes (2026-07-17 audit) Loaded last on every template so its overrides win the cascade. ============================================================ */ /* --- Skip link (2.4.1) --- */ .skip-link{position:absolute;top:-52px;left:16px;z-index:100000;background:var(--mc-red,#B11226);color:#fff; padding:13px 22px;border-radius:0 0 10px 10px;font-family:'Instrument Sans',sans-serif;font-size:12px; font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:top .2s ease;} .skip-link:focus{top:0;outline:2px solid #fff;outline-offset:-4px;} /* --- Contrast bumps (1.4.3 / 1.4.11) — same selectors, later cascade --- */ .mc-cf-field input::placeholder,.mc-cf-field textarea::placeholder{color:rgba(245,237,224,0.55)!important;} .mc-cf-consent{color:rgba(245,237,224,0.62)!important;} .field input{border-color:rgba(245,237,224,0.38)!important;} .adv-field input[type="text"]{border-bottom-color:rgba(245,237,224,0.45)!important;} .listings-filter{border-color:rgba(245,237,224,0.38)!important;} .cgc-chat-input textarea::placeholder{color:rgba(245,237,224,0.55)!important;} .cgc-form input::placeholder{color:rgba(245,237,224,0.55)!important;} .opf-combo .opf-trigger{border-bottom-color:rgba(20,17,13,0.45)!important;} .opf-dot{border-color:rgba(20,17,13,0.55)!important;} .calc-note{color:rgba(245,237,224,0.66)!important;} .calc-out-section-label{color:rgba(245,237,224,0.66)!important;} .combo-option .meta{color:rgba(245,237,224,0.66)!important;} .prop-breadcrumb{color:rgba(26,23,18,0.72)!important;} .mario-card .micro{color:rgba(245,240,232,0.66)!important;} /* --- Focus visible restored (2.4.7) --- */ #calc-price:focus-visible,#calc-bua:focus-visible,.adv-field input:focus-visible{ outline:2px solid var(--mc-red,#B11226)!important;outline-offset:2px;} .combo-trigger:focus-visible,.opf-trigger:focus-visible,.opf-opt:focus-visible, .combo-option:focus-visible,.quiz-option:focus-visible,.skip-link:focus-visible{ outline:2px solid var(--mc-red,#B11226)!important;outline-offset:2px;} /* --- Mobile drawer out of tab order while closed (4.1.2/2.4.3) --- */ #mobileDrawer[aria-hidden="true"]{visibility:hidden;transition:transform .3s ease,visibility 0s linear .35s;} #mobileDrawer[aria-hidden="false"]{visibility:visible;transition:transform .3s ease;} /* --- Language banner reflow at 320px (1.4.10) --- */ .cgc-lang-banner{max-width:calc(100vw - 24px)!important;box-sizing:border-box;} /* --- Marquee pause + reduced motion (2.2.2) --- */ .partner-track:hover,.partner-track:focus-within{animation-play-state:paused!important;} @media (prefers-reduced-motion:reduce){ .partner-track{animation:none!important;} .cgc-lang-banner{animation:none!important;} /* Site-wide stand-down: neutralise every animation/transition for users who have asked their OS for reduced motion, without deleting or altering the underlying declarations for everyone else. */ *,*::before,*::after{ animation-duration:0.001ms!important; animation-iteration-count:1!important; transition-duration:0.001ms!important; scroll-behavior:auto!important; } } /* --- 1.4.3 contrast lift on dark sections ----------------------------------- From measuring every red text element on all 1075 pages in a real browser: 23,833 elements, 9,309 failing, every one of them on a dark background. #E8425F is the smallest lift clearing 4.5:1 on all dark tokens (5.07/5.25/4.67). Brand red #C41E3A is untouched elsewhere - headlines, buttons, italics and every cream surface, where it already passes 5.15:1 and this lighter red would fail. Elements whose identity was ambiguous in source were skipped, not guessed. */ [data-a11y-lift]{color:#E8425F!important;} .rec-note, .sig, .cm-eyebrow, .dv-tier{color:#E8425F!important;} /* --------------------------------------------------------------------------- 1.4.3 round two — 21 failures found by axe-core in a real browser that the earlier per-element pass missed. It measured text against the background it could compute; axe measures the background actually painted, including inherited and image backgrounds. Different method, better answer. No new colours were invented. Every value below is a token the brand already uses, chosen because it measures >= 4.5:1 against the background axe reported: #E8425F accent on dark 4.62:1 on #14161e 4.76:1 on #131313 #C41E3A accent on light 5.59:1 on #fafaf8 5.03:1 on #f5ede0 #6d6a64 muted text on light 4.75:1 on #f5f0e8 4.64:1 on #f5ede0 #ffffff text on mid-grey 4.52:1 on #797671 5.72:1 on #696661 !important is required: several of these carry the colour in an inline style attribute, and an important author declaration is what overrides that. --------------------------------------------------------------------------- */ /* white on cream, 1.13:1 — the text was effectively invisible */ .phone-meta{color:#6d6a64!important;} /* muted labels on the cream surface, 2.01:1 and 3.57:1 */ .mc-dom-source, .lbl[data-copy-key^="dom_stat_"]{color:#6d6a64!important;} /* accent on dark surfaces, 3.08:1 and 3.18:1 — take the lift red already in use */ .podcast-eyebrow{color:#E8425F!important;} /* These are NOT in the footer, which is what I assumed first and why the rule did nothing: they live in section.legal-band > .legal-grid > .legal-cards, and the colour sits in an inline style attribute (color:var(--mc-red)). An important author declaration is what beats a non-important inline one. */ .legal-cards a span, .legal-cards a:hover span{color:#E8425F!important;} /* A bug in the earlier contrast work, not a new one. [data-a11y-lift] applies the DARK-surface red unconditionally, so a stamped element sitting on a LIGHT surface now fails the other way - measured 3.74:1 on the new sitemap pages, which inherited a stamped span when their skeleton was cloned. Scoped override rather than unpicking the stamp. */ body.cgc-sitemap [data-a11y-lift], body.cgc-sitemap .lbl{color:#C41E3A!important;} /* nav, wordmark and language switch over the mid-grey hero, 3.04:1 to 3.99:1. Selectors taken from axe's own output, not guessed - an earlier guess at .sitemap-page matched nothing at all and would have silently done nothing. text-shadow does not change the measured ratio; it is there because these sit over photography, where a single sampled background colour understates the problem for real eyes. dropdown-nav.css already carries `.nav-pill > .nav-item > a {color:rgba(245,237, 224,0.78) !important}`. Both declarations are important, so specificity decides, and my first attempt (`.nav-item > a`) lost. Matching its selector exactly. The 0.78 alpha is the actual cause of the failure: the colour is fine, the transparency is what drags it to 3.69:1. dropdown-nav.css is per-market and not mine to edit, so this overrides rather than changes it. */ .nav-pill > .nav-item > a, .nav-pill > a, .nav-pill > .nav-item > a:visited, .nav-item > a, .nav-item > a:visited, .brand-lockup > span, .cgc-lang-trigger, .cgc-lang-label{ color:#ffffff!important; text-shadow:0 1px 2px rgba(0,0,0,0.45); } /* --------------------------------------------------------------------------- 1.4.10 Reflow — no two-dimensional scrolling at 320px CSS px. This criterion was marked UNVERIFIED for weeks because headless Edge refuses to emulate a viewport below ~503px. Playwright can, and it failed: 30px of sideways scroll on the home page, 53px on /contact, and 10,319px on the Arabic build. Three genuinely different causes, measured per element: nav row button.mobile-toggle ended at 367px in a 320px viewport, because the nav's children refuse to shrink (no min-width:0). /contact .qc-link is laid out 373px wide inside 320. /ar/ an off-canvas drawer and a decorative watermark, positioned with left/right offsets that flip under RTL and land far outside the page. overflow-x:clip, not hidden — clip does not create a scroll container, so position:sticky keeps working. It is applied only to the off-canvas cases; the two content overflows above are fixed by making the content fit, because clipping real content would trade a WCAG failure for unreachable text. --------------------------------------------------------------------------- */ html, body{overflow-x:clip;} @media (max-width:420px){ /* The burger menu was landing at left:323px in a 320px viewport - completely off screen, so on a small phone there was no way to open the menu at all. Clipping the overflow had HIDDEN this rather than fixed it, which is worse than the scrollbar it replaced. The arithmetic: nav 320 wide, padding 24px each side -> 272px of content box. Inside it .nav-brand measured 261px with flex-shrink:0, plus a 12px gap and a 44px toggle = 329px needed. 57px short. So: trim the padding, let the brand shrink instead of refusing to, and pin the toggle to the end. */ .top-nav{padding-left:12px!important;padding-right:12px!important;gap:8px!important;} .top-nav, .nav-pill{max-width:100%;} .top-nav > *, .nav-pill > *{min-width:0;} .nav-brand{flex:0 1 auto!important;min-width:0!important; padding-left:10px!important;padding-right:10px!important; overflow:hidden;} .nav-brand > *{min-width:0;} /* Ellipsis here was MY regression: it stopped the nav overflowing but truncated the wordmark to "COSTA GLOB..." at 320px. Step the type down instead so the whole name fits - a clipped brand is not an acceptable price for a tidy nav. */ .brand-lockup{overflow:hidden;white-space:nowrap;min-width:0;} nav.top-nav .nav-brand .brand-lockup, nav.top-nav .nav-brand .brand-lockup span{font-size:9px!important;letter-spacing:0.09em!important;} nav.top-nav .nav-brand .brand-lockup .slash{margin:0 3px!important;} .mobile-toggle{margin-left:auto!important;flex:0 0 auto;} /* quick-contact rail: buttons were wider than the screen */ .qc-rail{max-width:100%;} .qc-rail .qc-link{max-width:100%;box-sizing:border-box;} /* decorative watermark must never widen the page */ .cgc-watermark{max-width:100vw;overflow:hidden;} } /* --------------------------------------------------------------------------- 2.4.7 Focus Visible — a real browser, focusing each control and comparing computed style before and after, found the entire contact form has no focus ring at all: #cf-name #cf-email #cf-phone #cf-interest #cf-budget #cf-country #cf-message all compute to `outline: 3px none`. A sighted keyboard user filling that form cannot tell which field they are in. Earlier rules here covered specific controls one at a time and kept missing new ones, so this is a floor for everything interactive. #E8425F clears 3:1 for non-text contrast (1.4.11) on both the dark and cream surfaces, and the white halo keeps the ring visible where it lands on a mid-tone photograph. --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="option"]:focus-visible, [contenteditable="true"]:focus-visible{ outline:2px solid #E8425F!important; outline-offset:2px!important; box-shadow:0 0 0 4px rgba(255,255,255,0.55)!important; } /* keep the ring off the page when focus came from a mouse click */ a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none!important;box-shadow:none!important;} /* 1.4.11 — the breadcrumb "Home" link was distinguishable by colour alone. An underline is the only fix that works for someone who cannot see the hue. */ /* the actual breadcrumb class is .crumb - .prop-breadcrumb was another guess that matched nothing. axe reported the link at 1.67:1 against the surrounding text, i.e. only the hue distinguishes it. */ /* Four different breadcrumb classes exist in this build - .crumbs (576), .gl-crumb (168), .crumb (144), .prop-breadcrumb (8). I found the first two by fixing one, re-running, and being handed the next, which is a slow way to work. Enumerated them from the markup instead, so this covers all of them. */ .crumb a, .crumbs a, .gl-crumb a, .prop-breadcrumb a, .breadcrumb a, nav[aria-label*="readcrumb"] a{ text-decoration:underline!important;text-underline-offset:2px;} /* --------------------------------------------------------------------------- 1.4.3 round three. Widening the sample from 10 pages to 28 surfaced page types I had not looked at - /buyers-guide/ and /communities/* - with 13 more failures. The lesson is about the sample, not the fix: a clean result on a handful of pages says nothing about the other thousand. Values below reuse #6d6a64 and #ffffff where they fit, and derive the rest by sliding lightness while keeping hue and saturation, so nothing changes character. --------------------------------------------------------------------------- */ /* 82px decorative section numerals, 1.44:1 on near-white. Large text only needs 3:1, and they were nowhere near even that. #d06d78 keeps the blush tone at 3.26:1. */ .section-num{color:#d06d78!important;} /* Count badges on the listing filters. Colour was NOT the problem here and my first attempt at it made one of them worse: .count carries opacity:0.55, so whatever colour is declared gets blended toward the background before it reaches the eye. Setting a darker grey simply produced a paler blend. Opacity is the cause, so opacity is what gets fixed; the two chips then need opposite colours because the active one has a solid red background and the inactive one is white. */ .count{opacity:1!important;} .listings-filter.is-active .count{color:#ffffff!important;} .listings-filter:not(.is-active) .count{color:#6d6a64!important;} /* table-of-contents labels on near-black, 3.46:1 */ .toc-row > span{color:#7d7b77!important;} /* article hero byline and date on cream, 4.01:1 - just short */ .hero-meta > span, .hero-meta > span > strong{color:#6d6a64!important;} /* Developer pages: an h3 sub-label carrying color:rgba(20,17,13,0.45) in an inline style attribute - 45% ink on near-white measures exactly 3:1, and small text needs 4.5:1. Matching on the style attribute itself is the honest selector here: the element has no class, its parent has no class, and inventing one would mean editing the markup on every developer page in eight languages to fix a colour. */ [style*="rgba(20,17,13,0.45)"]{color:#6d6a64!important;} @media (max-width:345px){ nav.top-nav .nav-brand .brand-lockup, nav.top-nav .nav-brand .brand-lockup span{font-size:8px!important;letter-spacing:0.06em!important;} nav.top-nav .nav-brand{padding-left:9px!important;padding-right:9px!important;} } /* ═══════════════════════════════════════════════════════════════════════════ 2026-07-29 — the shapes still failing on Dubai, measured not assumed. Every selector below was purity-tested across 140 pages and came back 100% consistent. Each is scoped to the dark section it lives in rather than used bare, because the match counts were thin (4-14 elements) and a bare .k or .l could appear anywhere. On a dark surface these need LIGHTER text, so a wrong guess here breaks something - the scoping is the insurance. ═══════════════════════════════════════════════════════════════════════════ */ /* Muted grey captions on near-black (L=0.003). #6c6a67 sits at 3.69:1 at 10.5px and 13px, both under the 4.5:1 small-text threshold. #8a8884 gives 5.6:1 and is a shade away from the original. */ .cs-stats div.k, .cs-wrap div.k, .facts span.l, .aside .facts span.l{color:#8a8884!important;} /* The brand red on near-black. #c41e3a is 3.38:1 at 10.5px bold - bold does not help below 18.66px. #de4058 is the same red lifted to 4.7:1. */ section.sc-mario div.label{color:#de4058!important;} /* The oversized zone numerals on /communities. #eecace on #fafaf8 is 1.43:1 - the worst ratio anywhere on either site. At 81.92px it only needs 3:1, and it misses even that by more than half. THIS ONE IS A VISIBLE DESIGN CHANGE, not an invisible correction: a pale blush numeral becomes a muted rose. It is flagged in the handoff for Ben's call. #b4787f gives 3.4:1. To put it back, delete this rule - nothing else depends on it. */ span.zone-num{color:#b4787f!important;} /* --- Round 2 on Dubai. Purity-tested over 200 pages, 100% consistent each. ----- Note .cta-sub appears twice below with OPPOSITE fixes: it is light inside section.hero and dark inside section.urgency, on the same page. That is why every selector here carries its section. A bare .cta-sub rule would have fixed one and broken the other. */ /* muted greys on near-white */ section.dev-list span.row-meta-label{color:#6b6a67!important;} /* 3.48 -> 5.2 */ section.dev-quote div.attrib, section.dev-quote div.attrib strong, section.dev-quote div.attrib .notranslate{color:#6a655e!important;} /* 4.03 -> 5.3 */ section.hero div.cta-sub{color:#6a655e!important;} /* 3.63 -> 5.3 */ section.testi cite{color:#6b6b6a!important;} /* 4.41 -> 5.4 */ /* brand red on its own 10% tint - 4.48 is a miss, not a rounding error */ section.draft-notice span.pill{color:#b01a33!important;} /* 4.48 -> 5.3 */ /* the dark half: these need LIFTING, not darkening */ aside.aside div.role, .cs-wrap div.role{color:#8a8884!important;} /* 3.69 -> 5.6 */ section.pod-mario div.pod-eyebrow{color:#de4058!important;} /* 3.38 -> 4.7 */ /* This one carries an inline style="color:rgba(245,237,224,0.45)", so it needs !important to be reached at all - a stylesheet !important outranks an inline declaration that has none. */ section.urgency div.cta-sub{color:#8f8b84!important;} /* 4.04 -> 5.9 */ /* --- Round 3 on Dubai. Purity-tested over 240 pages. -------------------------- .gl-related and .pg-related were on the earlier "never rule on these, they are light on some pages and dark on others" list, so they were measured rather than trusted either way: 36 and 28 matches, every one dark. Scoped to .lbl only. */ /* The global [data-a11y-lift] rule already lifts this red, but `h2 .no` is more specific than an attribute selector, so it was winning and landing at 4.42 - a miss by 0.08, which is still a miss. */ section.cs-body span.no, div.story span.no{color:#de4058!important;} section.cs-q div.by{color:#8a8884!important;} /* 3.69 -> 5.6 */ section.gl-related span.lbl, section.pg-related span.lbl{color:#de4058!important;} /* 3.38 -> 4.7 */ /* The colour rule above WAS applying - the element renders rgb(222,64,88) exactly as asked - and it still failed at 4.13, because span.no also carries opacity:0.92, which blends it back toward the black behind it. That is the fifth contrast failure on this project that turned out to be an opacity rule rather than a colour one. Checked first that the 0.92 is static and not a fade-in, so restoring it breaks no animation; at this size the difference between 0.92 and 1 is invisible, and it buys 4.13 -> 4.70. */ section.cs-body span.no, div.story span.no{opacity:1!important;} /* The held-out run found one page my own sample had missed: the same red-on-black label, in section.cm-mario instead of section.sc-mario. I had fixed the school variant and not looked for siblings - so the rule was right and its reach was wrong. Measured properly this time: 300 pages, 168 matching elements across cm-, sc- and dv-mario, every single one on a dark surface. One rule instead of three, with better evidence behind it than the three had. */ /* Narrowed from [class*="-mario"] to the three variants that actually failed. The wildcard fixed 3 and cost contrast on 5 others that were already fine - still passing, but a rule should not reach past the problem it solves. */ section.cm-mario div.label, section.sc-mario div.label, section.dv-mario div.label{color:#de4058!important;} /* ═══ The last 6 on Dubai, found only by sweeping all 1,091 pages ═════════════ A 120-page sample reported zero. Measured across all 8 locales first: each of these matches 1-2 elements on a single page, all on one consistent surface. */ /* Brand red on near-black, 3.41:1 at 10px bold - bold earns no allowance below 18.66px. The lighter red measures 4.7:1 on this surface. */ .form-eyebrow{color:#de4058!important;} /* dark cards; light funnels override per-page */ /* Both of these are rgba(10,9,7,0.55) - the ink is fine, the 55% alpha is what fails. Replacing with the solid equivalent that clears the threshold rather than nudging the alpha, so there is nothing left to blend. */ .section-eyebrow{color:#6b6a67!important;} /* on white 4.43 -> 5.5 */ .mario-sig .role, .mario-sig .role .notranslate{color:#65625b!important;} /* on cream 4.31 -> 5.7 */ /* ═══ Hover-only labels, found by tabbing the page and looking at the screen ═══ The section dots reveal their name on :hover and NOT on :focus, so a mouse user sees "Properties" and a keyboard user gets a red ring on one of thirteen identical grey dots. The information exists; it is simply handed to mice and withheld from keyboards. Measured: at rest opacity 0, on focus opacity 0, on hover opacity 0.85. Not a strict WCAG AA failure - the focus ring itself is visible, so 2.4.7 is satisfied - and every automated pass over 1,808 pages reported this page clean. It took a person tabbing through and noticing the dots were unlabelled. Which is the honest limit of the tooling, written down where it happened. Anything a pointer reveals, focus should reveal too. */ .dot-nav .dot-btn:focus-visible + .dot-label, .dot-nav .dot-btn:focus-visible ~ .dot-label, .dot-nav li:focus-within .dot-label{opacity:.85!important;} /* ── Mobile map sheet: clear the floating widgets ───────────────────────────── Tapping a pin on a phone opens the listing as a bottom sheet. The chat bubble, "Back to top" and "Cookie settings" are fixed at z 8000-9000 and sit on top of it, covering the sheet's price and its "Open listing" button. Hidden only while a sheet is open, and only at phone widths - on desktop the popup is small and the widgets never overlap it. visibility rather than display so nothing reflows, and the transition matches the sheet's own. The :has() rule is a belt-and-braces duplicate of the class a11y.js toggles, for the case where the observer never runs. */ @media (max-width: 1079px) { /* Two SEPARATE rules on purpose. A comma-separated selector list is thrown away entirely if any one selector in it is unsupported, so pairing :has() with the class selectors meant that on any engine without :has() - and, as it turned out, here too - neither half applied and the widgets never hid. The class rule is the one that does the work; the :has() rule is a bonus for engines that have it, and it can now fail alone. */ body.cgc-sheet-open .cgc-chat, body.cgc-sheet-open .cgc-back-to-top, body.cgc-sheet-open .cgc-consent-reopen { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease, visibility 0.2s ease; } body:has(.leaflet-popup) .cgc-chat, body:has(.leaflet-popup) .cgc-back-to-top, body:has(.leaflet-popup) .cgc-consent-reopen { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ── The blurred, unclickable screen after tapping a map pin ────────────────── .mobile-drawer-backdrop (dropdown-nav.css) declares backdrop-filter: blur(6px); opacity: 0; <- the only thing hiding it opacity does not disable backdrop-filter on iOS WebKit: the filter still samples and blurs everything behind the element even at zero opacity. The element covers the viewport at z-index 199, so the whole page goes soft while the widgets at z 8000+ stay sharp - exactly what Ben photographed after tapping a pin on a phone. Fix: the blur only exists while the drawer is genuinely open. Declaring `none` in the base rule costs nothing when the drawer is closed and removes the entire failure mode rather than the one route to it. pointer-events is restated for the same reason - a backdrop that cannot be seen must not be able to swallow taps. */ /* !important because 64 pages per site inline their own copy of this rule in a