/* ============================================================================ * V15 SHEET (priority 113) — reviews ribbon + V15 fixes * * Sealed-sheet compliant: new sheet, loaded AFTER v15-contrast-align (112), * so it wins the cascade. Never edits v13-finish / v14-convergence / * v15-contrast-align (all sealed). * * Fixes: * 1. Press strip contrast (invisible dark text on the dark zebra band) * 2. Reviews ribbon (scrolling marquee + rose keyword highlight) * 3. Desktop centering (hero subtitle + section heads) * 4. Mobile press strip stacking (above cookie banner + floating CTAs) * ============================================================================ */ /* ── Fix #1: Press strip contrast ──────────────────────────────────────── * "Lu dans Tastet, Tourisme Montreal..." lands on a v11-global zebra dark * section (#1a1a1a), but its label + links are dark (rgba(10,7,7,.6/.62)) = * invisible on black. Lock the strip to a deliberate dark band with cream * text + rose hover so it stays readable regardless of zebra position. */ .latoxica-press-strip { background: #1a1a1a !important; color: #F2EAD6 !important; } .latoxica-press-strip__label { color: rgba(242, 234, 214, 0.72) !important; } .latoxica-press-strip__item { color: #F2EAD6 !important; } .latoxica-press-strip__item:hover, .latoxica-press-strip__item:focus-visible { color: #EC2C91 !important; } /* ── Fix #3: Desktop centering ─────────────────────────────────────────── * Audit (1440px): hero title + subtitle, trois-adresses head, and CTA band * are already centered. The ONLY left-aligned block was the asymmetric * section copy (.latoxica-section-asymmetric__copy). Center it on desktop too * so every heading/subtitle reads centered, matching the mobile rule in * v15-contrast-align.css. The image+text split is preserved; only the text * within the copy column is centered. */ @media (min-width: 769px) { .latoxica-section-asymmetric__copy, .latoxica-section-asymmetric__copy h2, .latoxica-section-asymmetric__copy p { text-align: center !important; } .latoxica-section-asymmetric__copy { align-items: center !important; } .latoxica-section-asymmetric__copy .latoxica-eyebrow { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; } .latoxica-section-asymmetric__cta { justify-content: center !important; } } /* ── Fix #4: Mobile press strip clearance ──────────────────────────────── * On mobile the press strip + footer were obscured by the fixed bottom * overlays (the dismissible cookie banner, and the persistent 73px sticky * Commander/Reserver CTA bar at z-index 50). Reserve bottom scroll room so * every in-flow element (incl. the press strip) can clear the persistent CTA * and be read in full. The consent banner is a temporary, intentionally * prominent gate; once dismissed only the 73px CTA remains, which this clears. */ @media (max-width: 768px) { body { padding-bottom: 92px; } /* Trim the consent banner's oversized mobile padding so it covers less. */ .cookie-consent-banner__inner { padding: 16px 0 !important; } } /* ── Fix #2: Reviews ribbon (scrolling + rose keyword highlight) ────────── * v11-reviews.css had DISABLED the marquee (animation:none) and stacked the * cards vertically. Restore the horizontal infinite ribbon using the existing * GPU-friendly keyframes (latoxica-marquee-scroll, translate3d) from * reviews-marquee.css. Pause on hover/focus; collapse to a centered static * list under prefers-reduced-motion. Loaded at 113, beats v11-reviews. */ .latoxica-testimonials-marquee__viewport { overflow: hidden !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important; } .latoxica-testimonials-marquee__track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: max-content !important; gap: 1.5rem !important; animation: latoxica-marquee-scroll 70s linear infinite !important; will-change: transform; } .latoxica-testimonials-marquee:hover .latoxica-testimonials-marquee__track, .latoxica-testimonials-marquee:focus-within .latoxica-testimonials-marquee__track { animation-play-state: paused !important; } /* Ribbon card sizing: fixed-width cards in a row, capped height with fade. */ .latoxica-testimonials-marquee__track .latoxica-testimonial-card { flex: 0 0 auto !important; width: 340px !important; max-width: 340px !important; text-align: left !important; } .latoxica-testimonials-marquee__track .latoxica-testimonial-card__quote { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } /* Rose keyword highlight inside reviews (override the UA yellow ). */ mark.latoxica-review-kw { background: transparent; color: #EC2C91; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .latoxica-testimonials-marquee__track { animation: none !important; flex-wrap: wrap !important; width: 100% !important; justify-content: center !important; } .latoxica-testimonials-marquee__track .latoxica-testimonial-card__quote { -webkit-line-clamp: unset; overflow: visible; } .latoxica-testimonials-marquee__viewport { -webkit-mask-image: none !important; mask-image: none !important; } } /* ── V15 #5: Magic MCP (21st.dev) sourced scroll-reveal — blur-up focus-in ─ * Adapted from a 21st.dev scroll-reveal pattern (fade + slide + blur on * viewport entry) into the theme's existing IntersectionObserver reveal * (.latoxica-reveal -> .is-visible). V15 extends the reveal to the main * content sections; this layer adds the premium blur-up. DESKTOP-ONLY (mobile * keeps the lighter fade+slide, no blur cost) and fully OFF under * reduced-motion. GPU transform/opacity + a one-shot blur that settles to 0. */ /* HERO-ONLY blur-up focus-in: the hero is above the fold and reliably revealed * at load by the hardening script (.is-visible), so there is zero * content-hiding risk. Desktop-only (mobile keeps a sharp hero), fully OFF * under reduced-motion. GPU transform/opacity + a one-shot blur that settles * to 0. The content sections stay statically visible (no opacity:0 reveal). */ @media (prefers-reduced-motion: no-preference) and (min-width: 769px) { .latoxica-hero-a.latoxica-reveal { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1); } .latoxica-hero-a.latoxica-reveal:not(.is-visible) { filter: blur(6px); } .latoxica-hero-a.latoxica-reveal.is-visible { filter: blur(0); } } /* ── V15 alignment fixes (wide-desktop centering) ──────────────────────── * Several blocks had a max-width / fixed width but margin:0, leaving them * left-shifted (or overflowing) on wide desktop while centered on mobile. */ /* Hero subtitle: 520px max-width with margin:0 sat left of the centered title * (box center 490 @1440, 730 @1920). Center its box. */ .latoxica-hero-a__sub { margin-left: auto !important; margin-right: auto !important; } /* Reservation/booking widget (used on birria + storefronts): width:100% PLUS * 32px h-margins overflowed right by 32px on wide desktop. width:auto honors * the margins symmetrically so the iframe fits and centers on every viewport. */ .latoxica-reservation-card__widget { width: auto !important; max-width: 100% !important; box-sizing: border-box; } /* Cookie consent: the accept/refuse buttons were left-aligned (off-center * -398 @1440). Center them within the banner so they read as a clear, * reachable choice on every viewport. */ .cookie-consent-banner__actions { text-align: center !important; } .cookie-consent-banner__inner { text-align: center; } /* Reservation hero: H1 + subhead had a max-width but margin:0, sitting left of * the centered eyebrow (off -150 @1440). Center their boxes. */ .latoxica-reservation-hero h1, .latoxica-reservation-hero__subhead, .latoxica-reservation-hero__pills { margin-left: auto !important; margin-right: auto !important; }