a layout WRAPPER holding
the language picker, phone number and book button
An unqualified `.nav-cta{background-color:...}` painted that wrapper as a
235x48 amber slab with square corners across the header on every content
page. Reported visually 2026-08-05 after three rounds of me insisting the
header measured clean - it did measure clean, because I was measuring
overflow and contrast, never "did I invent a background".
The site already styles the real button. Take the text colour only. */
a.nav-cta:not(#_),a.nav-cta:not(#_):visited{
color:var(--brand-deep)!important;
font-weight:600!important;
}
a.nav-cta:not(#_):hover{color:var(--brand-deep)!important}
/* --- 5b. DARK SURFACES - MUST COME AFTER EVERY INK RULE ABOVE -------------
The page is not uniformly light. It has dark teal bands, and the site
already marks them with its own `.bg-teal` / `.text-white` convention:
nav.navbar-redesign · div.core-sidebar
section.stats-section.bg-teal.text-white · footer.bg-teal.text-white
The ink rules above carry :not(#_) specificity, which OUTRANKS the site's
plain `.text-white`. So v1 and v2 of this file silently pushed body copy
and headings onto dark teal:
ink #0B1F24 on #006666 -> 2.50:1
ink-body #33474D on #006666 -> 1.44:1
brand #0A5F58 on #006666 -> 1.11:1
Measured result: 67 elements below WCAG AA before the patch, 81 after.
The patch made accessibility WORSE. This block is the fix.
LESSON: never set a global text colour without knowing the surface under
it. CSS cannot infer that, so every dark container has to be named. */
.bg-teal *:not(#_),
nav.navbar-redesign *:not(#_),
.core-sidebar *:not(#_){color:var(--on-dark)!important}
.bg-teal h1:not(#_),.bg-teal h2:not(#_),.bg-teal h3:not(#_),.bg-teal h4:not(#_),
.core-sidebar h1:not(#_),.core-sidebar h2:not(#_),
.core-sidebar h3:not(#_),.core-sidebar h4:not(#_){color:var(--on-dark)!important}
.bg-teal .text-muted:not(#_),.bg-teal small:not(#_),
.core-sidebar .text-muted:not(#_),.core-sidebar small:not(#_),
header .text-muted:not(#_),nav .text-muted:not(#_),
header small:not(#_),nav small:not(#_){color:var(--on-dark-muted)!important}
/* Links on dark bands read white with an underline, not brand teal. */
.bg-teal a:not(#_),.core-sidebar a:not(#_){color:var(--on-dark)!important;text-decoration:underline}
/* The amber CTA is re-asserted LAST with extra specificity, because the
`nav.navbar-redesign *` rule above would otherwise turn it white on amber. */
/* Re-asserted after the dark-band rules above, which would otherwise turn the
amber button's label white. Colour ONLY - the site owns this button's
background, and forcing one here is what painted the wrapper amber. */
a.nav-cta:not(#_):not(#__),a.nav-cta:not(#_):not(#__):visited,
a.nav-cta:not(#_):not(#__) *{
color:var(--brand-deep)!important;
}
/* Primary buttons keep white labels wherever they sit. */
.btn-primary:not(#_):not(#__),.btn-primary:not(#_):not(#__) *{color:#fff!important}
/* The "Visit cleanmyshoes.ae" CTA carries an INLINE style hardcoding Bootstrap's
default blue (#0d6efd) on a teal-branded site - the only blue on the page.
Inline styles beat author rules, so this needs !important to reach it.
Colour only; padding, radius and size are left exactly as authored. */
section.shoe-cleaning-aeo a[style]:not(#_):not(#__){
background:var(--brand)!important;
color:#fff!important;
}
section.shoe-cleaning-aeo a[style]:not(#_):not(#__):hover{background:var(--brand-ink)!important}
/* --- 5c. LIGHT ISLANDS INSIDE DARK BANDS ---------------------------------
THIS IS THE BUG THIS FILE KEEPS SHIPPING. Fourth occurrence, 2026-08-05.
`.bg-teal *`, `nav.navbar-redesign *` and `.core-sidebar *` are broad by
necessity, and they overshoot onto any child that paints its OWN light
background. Caught visually, NOT by the contrast audit, which scored them
as "20 remaining pre-existing failures":
a.btn-book white on white 1.00:1 invisible button
a.btn-sidebar white on white 1.00:1 invisible button
.btn-phone white on amber 2.03:1
.contact-info-card white on #F5F5F5 1.09:1 (v4 scoped this fix to
.core-sidebar; the card actually lives in footer.bg-teal)
Every light island has to be named. CSS cannot detect "this child repainted
its background", so there is no clever general rule - only this list. When a
new light component is added inside a dark band, it must be added here. */
:is(.bg-teal,nav.navbar-redesign,.core-sidebar,footer.bg-teal)
:is(.btn-book,.btn-sidebar,.card,.contact-info-card,.bg-white,.bg-light,
.dropdown-menu,.dropdown-menu-custom):not(#_):not(#__),
:is(.bg-teal,nav.navbar-redesign,.core-sidebar,footer.bg-teal)
:is(.btn-book,.btn-sidebar,.card,.contact-info-card,.bg-white,.bg-light,
.dropdown-menu,.dropdown-menu-custom):not(#_):not(#__) *{
color:var(--ink-body)!important;
}
:is(.bg-teal,nav.navbar-redesign,.core-sidebar,footer.bg-teal)
:is(.card,.contact-info-card,.bg-white):not(#_):not(#__) :is(h1,h2,h3,h4,h5,.fw-bold,.text-teal){
color:var(--ink)!important;
}
/* --- 5f. FOOTER "AREAS WE SERVE" BAND - MISSING GUTTER -------------------
Reported as "overflow". It is NOT overflow: documentElement.scrollWidth
equals clientWidth at 390, 530, 1280 and 1920 - there is no horizontal
scrollbar at any width, patched or unpatched.
The band is a direct child of footer.bg-teal that sits OUTSIDE the
.container-custom wrapper, with padding-left:0 at every level of its chain:
footer.bg-teal > .container-custom left 256 w 1400 padL 22px ✓
footer.bg-teal > div (no class) left 0 w 1912 padL 0px ✗
So "Areas We Serve in Dubai" starts at x=0 and the "Laundry JLT" link sits
at left:0 - flush to the screen edge, first glyph touching the bezel. In a
screenshot that reads as clipped text ("reas We Serve", "aundry JLT").
Fix: give it the same width and gutter as the columns above it. The teal
background belongs to the footer, not this div, so constraining the div
does not shrink the coloured band. PRE-EXISTING - not caused by this file. */
footer.bg-teal > div:not([class]):not(#_){
max-width:1400px;
margin-left:auto!important;
margin-right:auto!important;
padding-left:22px!important;
padding-right:22px!important;
}
/* --- 5e. COMPONENT-SCOPED TYPE -------------------------------------------
A global scale maps size to TAG. Real components need size mapped to ROLE.
`.step-title` is an h3 inside a 3-up card - it must not compete with the
page h2. Reported visually 2026-08-05; the global h3 made card titles
nearly as large as section headings. */
.step-title:not(#_):not(#__){
font-size:1.375rem!important; /* 22px */
line-height:1.3!important;
letter-spacing:-0.01em!important;
}
/* FAQ questions. The site set these at 18.4px; body{font-size:16px} pulled them
down to 16px inside a pill that stayed 60px tall, which reads as unbalanced
even though the text measures dead-centre (offset -1px, verified). Restore
the intended size - the box was designed around it. */
.faq-button:not(#_):not(#__),.accordion-button:not(#_):not(#__){
font-size:1.125rem!important; /* 18px */
line-height:1.35!important;
}
/* NO align-items override on .process-step. I added `align-items:center` to
correct a 3px badge offset and it made the offset +16px - the row contains
the title AND its description, so centring aligns the badge to the middle of
the whole text block instead of to the title. `flex-start` was already right.
The perceived misalignment was the 36px h3 towering over the badge; sizing
.step-title to 22px above fixes it. Measured: -3px offset, imperceptible.
Do not re-add this rule. */
/* --- 5d. BUTTONS - LABEL MUST BEAT ITS OWN BACKGROUND --------------------
Named individually because each sits on a different surface. The teal-on-teal
pair is PRE-EXISTING, not caused by this file, but it renders an invisible
"BOOK NOW" on a booking page, so it is fixed here rather than left alone. */
/* Third :not() needed - the light-island rule in 5c also matches these and
would otherwise hand them --ink-body. These are brand buttons on white, so
they take the brand teal, which is also what the site intended (it used
#0d7377, a fourth teal; this unifies it). */
a.btn-book:not(#_):not(#__):not(#___),a.btn-book:not(#_):not(#__):not(#___) *,
a.btn-sidebar:not(#_):not(#__):not(#___),a.btn-sidebar:not(#_):not(#__):not(#___) *{
color:var(--brand)!important; /* white background */
}
/* NO .btn-phone rule. It sits on the TEAL nav and the site already renders it
white at 5.62:1. I coloured it deep teal because it appeared to sit on amber
- but that amber was the wrapper background THIS FILE had invented. When the
invented background was removed, the "fix" for it became dark-on-teal at
2.48:1. A fix built on top of a bug becomes a bug when the bug is removed.
Do not re-add. */
.btn-teal:not(#_):not(#__),.btn-teal:not(#_):not(#__) *,
.btn-check-now:not(#_):not(#__),.btn-check-now:not(#_):not(#__) *,
.faq-contact-btn:not(#_):not(#__),.faq-contact-btn:not(#_):not(#__) *{
color:#fff!important; /* teal background - was teal-on-teal at 1.11:1 */
}
/* Bootstrap .btn-light is #F8F9FA - a near-WHITE button. Inside a .bg-teal
.text-white section it inherits white and vanishes ("BOOK NOW", 1.05:1).
The .btn-light.text-teal variant elsewhere was already correct. */
.btn-light:not(#_):not(#__),.btn-light:not(#_):not(#__) *{
color:var(--brand-deep)!important;
}
/* Bootstrap's default body colour #212529 leaks through on components the
theme never styled. Collapse it onto our ink. */
.accordion-body:not(#_),.card-body:not(#_),.list-group-item:not(#_){color:var(--ink-body)!important}
.btn-primary:not(#_){
background-color:var(--brand)!important;
border-color:var(--brand)!important;
color:#fff!important;
}
.btn-primary:not(#_):hover,.btn-primary:not(#_):focus{
background-color:var(--brand-ink)!important;
border-color:var(--brand-ink)!important;
}
.btn:not(#_),button:not(#_),a.nav-cta:not(#_){ /* `a.` - see the .nav-cta note in 5 */
font-family:var(--font-body)!important;
font-size:var(--t-base)!important;
font-weight:600!important;
letter-spacing:-0.005em!important;
line-height:1.2!important;
}
::selection{background:var(--brand);color:#fff}
/* --- 5g. THE WHITE GAP on the homepage services block --------------------
PRE-EXISTING, not caused by this file - verified by A/B with the stylesheet
disabled (row 900 / container 1400 in both states).
The container is 1400px but its contents are explicitly narrower:
p max-width:800px (style.min.css)
.row max-width:900px (INLINE on the element)
so an 800-900px column sat left-aligned in a 1400px box, leaving ~500px of
dead space. Narrowing the container to 940px (900 + its 2x20px padding)
makes the whole block a centred 900px column. Nothing is widened - long
body text at 1400px would be far worse to read than the gap was to look at. */
.services-brand-trimmed .container-custom:not(#_){max-width:940px!important}
.services-brand-trimmed p:not(#_){max-width:none!important}
/* --- 5h. AEO / long-form keyword sections --------------------------------
.about-aeo-section · .aeo-quick-reference · .shoe-cleaning-aeo
These exist for search and the COPY IS DELIBERATE - not touched here. This
is presentation only. Measured problems:
- paragraphs 900px wide at 18px = ~100 characters per line (60-75 reads)
- tables at 4px cell padding with no header treatment - crammed
- h2 at 48px on a supplementary block competes with the page's own title
Constraining the CONTAINER (rather than each element) keeps headings, text
and tables on one shared edge - the mistake in an earlier version was
capping
alone, which left paragraphs narrower than the headings above
them and read as broken alignment. */
/* 700px + 17px = 72 characters per line, MEASURED on a real 358-character
paragraph (chars / rendered line count), not estimated. For reference:
880px @16px -> 90 chars 760px @16px -> 90 700px @17px -> 72
660px @17px -> 72 620px @17px -> 60
60-75 is the readable band. An earlier pass guessed average glyph width and
concluded 880px was fine; counting rendered lines said 90. */
:is(.about-aeo-section,.aeo-quick-reference,.shoe-cleaning-aeo) .container:not(#_){
max-width:700px!important;
}
:is(.about-aeo-section,.aeo-quick-reference,.shoe-cleaning-aeo) h2:not(#_):not(#__){
font-size:2rem!important; /* 32 - supplementary, not a page title */
line-height:1.15!important;
margin-bottom:var(--s-6)!important;
}
:is(.about-aeo-section,.aeo-quick-reference,.shoe-cleaning-aeo) h3:not(#_):not(#__){
font-size:1.375rem!important; /* 22 - a real article sub-heading needs a
step above body; card titles do not */
line-height:1.3!important;
margin-top:var(--s-8)!important;
margin-bottom:var(--s-3)!important;
}
:is(.about-aeo-section,.aeo-quick-reference,.shoe-cleaning-aeo) p:not(#_),
:is(.about-aeo-section,.aeo-quick-reference,.shoe-cleaning-aeo) li:not(#_){
font-size:1.0625rem!important; /* 17 - see the measure note above */
line-height:1.75!important;
}
/* Tables: give them room and a real header row. */
:is(.aeo-quick-reference,.shoe-cleaning-aeo) table:not(#_){
width:100%!important;
border-collapse:collapse!important;
font-size:0.9375rem!important;
margin:var(--s-6) 0!important;
background:#fff!important;
border:1px solid var(--rule)!important;
}
:is(.aeo-quick-reference,.shoe-cleaning-aeo) th:not(#_){
background:var(--brand-wash)!important;
color:var(--ink)!important;
font-weight:600!important;
text-align:left!important;
padding:12px 16px!important;
border-bottom:1px solid var(--rule)!important;
}
:is(.aeo-quick-reference,.shoe-cleaning-aeo) td:not(#_){
padding:12px 16px!important;
border-bottom:1px solid var(--rule)!important;
color:var(--ink-body)!important;
vertical-align:top!important;
}
:is(.aeo-quick-reference,.shoe-cleaning-aeo) tbody tr:nth-child(even) td:not(#_){
background:#FBFCFC!important;
}
/* Wide tables must scroll inside their own box, never push the page sideways. */
:is(.aeo-quick-reference,.shoe-cleaning-aeo) .table-responsive:not(#_){
overflow-x:auto!important;
}
/* --- 6. What this file deliberately does NOT do --------------------------
It does not touch layout containers, grid, section padding, card widths or
image sizing. Those need eyes on a rendered page across breakpoints, and
changing them blind is how you ship a broken mobile layout. The 8px space
tokens are defined above and used only for type rhythm; wiring them into
layout is a separate, visual pass.
REVERTING THE TEAL HEADINGS: if teal headings are a deliberate brand call
rather than drift, change `--ink` to `var(--brand)` in section 2. One line,
everything follows. I set them near-black because both competitors reserve
colour for CTAs, and blanket-coloured headings are the loudest template
signal on a page - but it is your brand, not mine. */