/* client-overrides.css — 423 Taco. Hand-authored, never written by the build
* (static-overrides.css is refreshed from shared/templates on every rebuild, so
* per-site CSS must live here). Linked last, so it wins the cascade.
*
* Records the 2026-08-17 live-vs-staging QC and the 2026-08-18 palette pass — see
* 05-review/live-vs-staging-qc-2026-08-17.md
*
* ============================ THE PALETTE ==================================
* #00807b dark teal surface — white type on it (4.80:1)
* #a8e0dd pale teal surface — black type on it (14.37:1)
* #000000 black surface — white type on it (header, footer, hero bands)
* #F830D6 brand pink ACCENT ONLY — dividers, and text on the black chrome
* (6.39:1). Never a surface behind body copy: white on it
* is 3.29:1, and it is 1.46:1 against the dark teal.
*
* THE TYPOGRAPHY RULE (operator, 2026-08-18): a section's heading and its body
* always sit on the same side of the light/dark line as each other.
* dark surface -> heading AND body light light surface -> both dark
* The mixed case (black heading + white body on teal) is what this replaces.
* ===========================================================================
*/
:root {
/* --- dark teal sections (.main_color): both light ---------------------- */
--enfold-main-color-bg: #00807b;
--enfold-main-color-heading: #fff; /* was #000 — the site's only rule breach */
--enfold-main-color-color: #fff;
--enfold-main-color-secondary: #fff;
/* Themed buttons + pills in these sections. Originally the brand magenta; the
* 2026-08-18 palette pass moved it to dark teal to kill a white-on-pink 3.29:1
* label — which made every themed button dark teal ON a dark teal section, i.e.
* a 1:1 button. "menu" / "drink menu" on /mexican-food/ were invisible apart from
* a hairline; the home's hero CTAs only read at all because a photo sits behind
* them. Restored to pink in its LIGHT form (the section-header gradient's light
* stop), which is a real accent again and measures properly:
* black label on #FBE0F6 17.09:1 (needs 4.5)
* #FBE0F6 chip on #00807b 3.93:1 (needs 3.0 for a UI boundary)
* Label goes black to match — white on it would be 1.2:1. */
--enfold-main-color-primary: #FBE0F6;
--enfold-main-color-button-font: #000;
/* --- pale teal sections (.alternate_color): both dark ------------------ */
/* These are the 17 menu-page blocks. They were #f82fd6, which forced all-black
* type and broke the rhythm against the teal sections. */
--enfold-alternate-color-bg: #a8e0dd;
--enfold-alternate-color-border: #a8e0dd;
--enfold-alternate-color-heading: #000;
--enfold-alternate-color-color: #000;
--enfold-alternate-color-secondary: #000;
/* --- black chrome: accent text stays pink (6.39:1 on black) ------------ */
--enfold-header-color-primary: #F830D6;
--enfold-footer-color-primary: #F830D6; /* phone number, "Monday – Sunday" */
/* --- socket (copyright bar): dark teal, light type --------------------- */
--enfold-socket-color-bg: #00807b;
--enfold-socket-color-secondary: #fff;
}
/* P3 — dividers are the brand-pink accent site-wide. Avia draws the rule under a
* special-heading as a border on two nested elements, and colours it per section
* (pink in the old pink sections, #00afa9 on teal, black on the hero) — which read
* as three different dividers. One accent instead. Decorative, so the 2.25:1 it
* measures against the pale teal carries no AA duty; the hue separation does the
* work. */
#top .special-heading-border,
#top .hr-inner-style,
#top .av-special-heading .special-heading-border,
#top .hr .hr-inner,
#top .hr .hr-inner[class*="inner-border"] {
border-color: #F830D6;
}
/* Enfold's `av-menu-button-colored` pill. Its label comes from
* `--enfold-main-color-constant-font` (white) rather than the button-font token, so
* the light-pink accent has to be said explicitly here or the label stays white on
* pink. NOTE: the only instance was the old /mexican-food/ anchor-nav "DRINKS" chip,
* which `promote-menu-layout.py` replaced — no page currently renders this. Kept
* because the rule is correct and costs nothing if the widget ever returns. */
#top #wrap_all .main_color .av-menu-button-colored > a .avia-menu-text {
background-color: #FBE0F6;
border-color: #FBE0F6;
color: #000;
}
/* P4 — menu section subheadings ("Available Mon.–Fri. / After 3PM + $3") shipped at
* 15px/19.5px, below even the 22px catalogue descriptions under them, so they read
* as fine print rather than as terms attached to the section. Matched to the body
* copy in the teal sections: 20px/33px. */
#top .av-subheading,
#top .av-subheading p {
font-size: 20px;
line-height: 33px;
}
/* The main-nav hover / current-page pill is the one pink the theme hard-codes
* rather than tokenises (`#top #header .av-main-nav > li...`), so it needs matching
* selectors, not a variable. It was white on pink at 3.29:1. Dark teal keeps a
* visible pill against the black header AND gives the label 4.80:1. */
#top #header .av-main-nav > li.current-menu-item > a,
#top #header .av-main-nav > li:hover > a,
#top #header_main_alternate .current-menu-item {
background-color: #00807b;
border-color: #00807b;
color: #fff;
}
#top #header .av-main-nav > li.current-menu-item > a > .avia-menu-text,
#top #header .av-main-nav > li:hover > a > .avia-menu-text {
color: #fff;
}
.av_seperator_small_border .av-main-nav > li.current-menu-item > a > .avia-menu-text,
.av_seperator_small_border .av-main-nav > li:hover > a > .avia-menu-text,
#top #wrap_all #header #menu-item-search.current-menu-item > a,
#top #wrap_all #header #menu-item-search:hover > a {
border-color: #00807b;
}
/* R1 — the home reviews band. The Trustindex slider replaced the caption of a
* fullwidth slider, whose caption is position:absolute inside a padding-bottom
* aspect box (1500x430 -> 413px tall at 1440px). A review card is taller than the
* 65px of text it replaced, so the box has to stop dictating the height or the
* widget gets clipped. Caption goes static, the aspect padding goes away, and the
* photo becomes a real background instead of a laid-out ![]()
. */
/* Avia lays a fullwidth slider out as: aspect-ratio padding box -> absolutely
* positioned slides stacked on top of each other -> absolutely positioned caption.
* That only works while the caption is shorter than the box. shared/templates'
* static-overrides.css already unwinds this for single-slide sliders under
* `.ym-single-slide`, but only at <=1024px; above that the slides stay absolute and
* the band collapsed to 0px tall (with overflow:hidden, the widget vanished).
* Same unwinding, all widths, scoped to this one slider. */
#top #full_slider_1 .avia-slideshow,
#top #full_slider_1 .avia-slideshow-inner {
height: auto !important;
overflow: visible;
}
#top #full_slider_1 .avia-slideshow-inner {
padding-bottom: 0 !important;
}
#top #full_slider_1 li.avia-slideshow-slide {
position: relative !important;
top: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
min-height: 320px;
}
#top #full_slider_1 .avia-slide-wrap {
position: relative !important;
height: auto !important;
}
#top #full_slider_1 .av-slideshow-caption {
position: relative !important;
height: auto !important;
z-index: 2;
}
#top #full_slider_1 .slideshow_caption,
#top #full_slider_1 .slideshow_inner_caption,
#top #full_slider_1 .slideshow_align_caption {
position: relative;
height: auto;
display: block;
width: 100%;
max-width: 100%;
padding-top: 34px;
padding-bottom: 34px;
}
/* Keep the rather than swapping in a CSS background — it carries the WebP
* source and the alt text the SEO pass wrote. Just take it out of flow so it backs
* the band at whatever height the widget ends up needing. */
#top #full_slider_1 picture {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
}
#top #full_slider_1 picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The reviews sit on a photo, so give the widget its own surface. Dark, to stay in
* the black/teal/pale-teal family rather than introducing a fourth. */
/* Side padding is for Trustindex's own prev/next arrows: they overlay the track's
* outer edges, so with a flush panel they sat on top of the first and last card and
* clipped the review text. */
#top .ym-reviews-caption {
max-width: 1010px;
margin: 0 auto;
padding: 22px 42px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.72);
}
@media only screen and (max-width: 767px) {
#top .ym-reviews-caption {
padding: 18px 30px;
}
}
#top .ym-reviews-caption .ti-widget {
margin: 0 !important;
}
/* D2 — the Mexican Burgers section separator, added with the 2026-08-11 menu
* refresh, never got the height rule Avia generates for the other 17 grid rows
* on this page, so it rendered 60px and showed as a teal band between MEXICAN
* BURGERS and SIDES. Match the generated ones exactly. */
#av-layout-grid-mburg .av-mburgcell-423t {
vertical-align: top;
height: 20px;
min-height: 20px;
background-color: #ffffff;
padding: 0 !important;
}
/* D4 — the home keeps Enfold's alternate logo (it belongs to the transparent
* header), but with the theme JS stripped BOTH copies paint, stacked pixel-on-
* pixel. Live shows one. Here both variants are the same file, so hiding the
* alternate is visually identical and saves the second request. (Interior pages
* never had the element; it is removed from their markup outright.) */
#top #header .logo .subtext.avia-standard-logo-sub {
display: none;
}
/* D3 — the a11y pass re-tagged the footer widget titles from h4 to h2 to close a
* skipped heading level; the theme uppercases every h2, so the footer started
* shouting "FIND US" / "HOURS" where the live site reads "Find Us" / "Hours".
* The Avia wrapper still records the intended visual level, so key off that and
* keep the h2 for the outline. */
#top .av-special-heading-h4 .av-special-heading-tag {
text-transform: none;
}
/* R29 (2026-08-18) — the phone number is this site's PRIMARY conversion (there are
* no forms), but as inline text inside it rendered a 139x24px tap
* target on every page — half the 48px WCAG 2.5.5 / checklist minimum, on the one
* control the whole site exists to get tapped.
*
* Grown with vertical padding cancelled by an equal negative margin, so the touch
* box gets taller while the text baseline — and therefore the address line right
* below it — does not move. Verified 0px layout shift at 390/768/1440.
*
* inline-block (not a ::after overlay) so the anchor's own border box is really
* 48px: an invisible pseudo-element would satisfy a thumb but still report 24px
* to any auditing tool, which is how this stayed invisible in the first place.
* Touch widths only — desktop has a cursor and does not need the padding. */
@media (max-width: 1024px) {
#top .avia_textblock a[href^="tel:"] {
display: inline-block;
padding-top: 12px;
padding-bottom: 12px;
margin-top: -12px;
margin-bottom: -12px;
}
}