/* ============================================================
ZenHotels Design Tweaks — Live transfer from the redesign mockup
Out of scope: .footer__*, .home-app-promo, .app-promo* (untouched)
============================================================ */
/* ===== Part 1 — Foundation: brand color variables + Montserrat baseline ===== */
:root {
--zh-pink: #EC5A5B;
--zh-pink-d: #d44546;
--zh-blue: #004661;
--zh-blue-d: #00334a;
--zh-violet: #5C77CC;
--zh-violet-d:#4a62b0;
--zh-cream: #F0EDE8;
--zh-ink: #1a2330;
--zh-mute: #6b7280;
--zh-line: #e6e2dc;
--zh-shadow: 0 6px 20px rgba(0, 70, 97, 0.08);
--zh-shadow-lg: 0 12px 32px rgba(0, 70, 97, 0.14);
}
/* Default body type — Montserrat, baseline ink color. Wrapped in :where()
so it has zero specificity and individual theme rules still win where
they need to. Footer and app-promo blocks are explicitly NOT targeted. */
:where(body, .wrapper-content, .site, p) {
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* ============================================================
Part 2 — Header
============================================================ */
/* Bottom-align logo and menu on a single row */
header.container {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
padding-top: 6px !important;
padding-bottom: 14px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.header-elements {
align-self: flex-end !important;
}
/* Hide the heart/favorites icon (kept in markup, just hidden visually) */
.header-elements-favorites { display: none !important; }
/* Inline horizontal logo lockup (zenhotels | TRAVEL DEALS) — viewBox 500×80 */
.zh-header-logo {
display: block;
height: 44px;
width: auto;
max-width: 286px;
}
@media (max-width: 768px) {
.zh-header-logo { height: 35px; max-width: 231px; }
}
/* ============================================================
Part 3 — Trust strip (above the header, outside .home-scroller)
============================================================ */
.zh-trust-strip {
background: #fff;
border-top: 1px solid var(--zh-line);
border-bottom: 1px solid var(--zh-line);
padding: 12px 0;
/* Sprint 19: top margin halved (12px -> 6px) — tighter gap below the header. */
margin: 6px 0 4px;
}
/* Sprint 20: homepage only — pull the strip up so the gap to the header is
visibly halved. The (invisible) first .holiday-types section between the
header and the strip adds ~17 CSS px of empty space; a -10px margin-top
on the strip pulls it into that area without affecting other pages
(where the strip sits directly below the header and a negative margin
would overlap it).
Sprint 21: match the bottom gap to the (Sprint 20) top gap (~13 CSS px)
so the strip has equal breathing room above and below on the homepage. */
body.home .zh-trust-strip {
margin-top: -10px;
margin-bottom: 13px;
}
.zh-trust-strip__inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.zh-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--zh-ink);
flex: 1 1 220px;
justify-content: center;
}
.zh-trust-item strong { color: var(--zh-blue); font-weight: 700; }
.zh-trust-item .zh-icon {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--zh-blue);
}
.zh-trust-item .zh-icon svg { width: 100%; height: 100%; display: block; }
/* Trustpilot star rating with partial fill (e.g., 4.3/5 → 89%) */
.zh-stars-rating {
position: relative;
display: inline-block;
font-size: 18px;
letter-spacing: 1px;
line-height: 1;
vertical-align: middle;
}
.zh-stars-rating .zh-stars-bg { color: #d0d6dc; }
.zh-stars-rating .zh-stars-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #00b67a;
white-space: nowrap;
pointer-events: none;
}
/* ============================================================
Part 4 — Hero H1
============================================================ */
.home-hero { position: relative; }
.home-hero__inner { position: relative; z-index: 2; }
.home-hero__content { position: relative; z-index: 2; }
.home-hero__content h1 {
font-family: "Montserrat", sans-serif;
font-weight: 800;
color: #ffffff;
font-size: clamp(32px, 4.6vw, 52px);
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 12px;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
/* ============================================================
Part 5 — "Select holiday type" section
============================================================ */
/* Section padding — tight, controlled by inner container */
.holiday-types {
padding-bottom: 20px !important;
}
.holiday-types > .container,
.holiday-types .container {
padding-top: 20px !important;
margin-top: 0 !important;
}
/* "Select holiday type" title — Montserrat 800 in brand blue with pink underline rule */
.holiday-types .section-title {
padding-top: 0 !important;
margin-top: 0 !important;
margin-bottom: 9px !important;
padding-bottom: 0 !important;
}
.holiday-types .section-title h3,
.holiday-types h3 {
font-family: "Montserrat", sans-serif;
color: var(--zh-blue);
font-weight: 800;
letter-spacing: -0.01em;
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.holiday-types h3::after {
content: "";
display: block;
width: 48px;
height: 3px;
background: var(--zh-pink);
margin-top: 12px;
border-radius: 2px;
}
/* Holiday-type chip text — brand blue, tightened to the icon above */
.holiday-types-carousel {
margin-top: 0 !important;
padding-top: 0 !important;
}
.holiday-type-item__image {
margin-bottom: 0 !important;
}
.holiday-type-item__title {
display: block;
font-weight: 600;
color: var(--zh-blue);
font-size: 14px;
margin-top: -8px !important;
padding-top: 0 !important;
}
/* ============================================================
Part 6 — "Explore top destinations"
============================================================ */
.top-destinations {
padding-top: 0 !important;
margin-top: 0 !important;
padding-bottom: 20px !important;
margin-bottom: 0 !important;
}
.top-destinations > .container,
.top-destinations .container {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.top-destinations__items {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.top-destinations__item__title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Section heading — matches Travel-ideas treatment */
.top-destinations h2,
.top-destinations h3 {
font-family: "Montserrat", sans-serif;
color: var(--zh-blue);
font-weight: 800;
letter-spacing: -0.01em;
}
.top-destinations h2::after,
.top-destinations h3::after {
content: "";
display: block;
width: 48px;
height: 3px;
background: var(--zh-pink);
margin-top: 12px;
border-radius: 2px;
}
/* 9px gap between title and country thumbnails */
.top-destinations h3 {
margin-bottom: 9px !important;
}
.top-destinations__items {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Fixed-size circular thumbnails (every item identical) */
.top-destinations__item img {
display: block !important;
width: 159px !important;
height: 159px !important;
max-width: 159px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 50% !important;
margin: 0 auto 0 !important;
transform: none;
transition: transform 0.2s ease;
}
.top-destinations__item:hover img {
transform: translateY(-2px);
}
/* Country name — brand blue, 8px gap below the icon */
.top-destinations__item__title {
font-weight: 700;
color: var(--zh-blue);
letter-spacing: 0.01em;
margin-top: 8px !important;
padding-top: 0 !important;
}
/* Destinations page only: the .global-hero sits flush against both the
header above and the "Top destinations" section below. Add a gap below
the hero equal to the band between the header menu and the hero (22px —
header menu bottom 110px, hero top 132px), so the hero is evenly spaced. */
.page-template-destinations .top-destinations {
margin-top: 22px !important;
}
/* ============================================================
Part 7 — Deal cards ("Travel ideas and inspiration")
============================================================ */
/* Section spacing — gap above the "Travel ideas" heading driven solely by
.top-destinations padding-bottom (zero out everything else). */
.deals {
padding-top: 0 !important;
margin-top: 0 !important;
}
.deals > .container,
.deals .container {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Section heading — uniform with Select holiday type / Explore top destinations */
.deals h2,
.deals h3 {
font-family: "Montserrat", sans-serif;
color: var(--zh-blue);
font-weight: 800;
letter-spacing: -0.01em;
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 12px !important;
}
.deals .offer-listing-inner,
.offer-listing-inner {
margin-top: 0 !important;
padding-top: 0 !important;
}
.deals h2::after,
.deals h3::after {
content: "";
display: block;
width: 48px;
height: 3px;
background: var(--zh-pink);
margin-top: 12px;
border-radius: 2px;
}
/* Card container */
.offer-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--zh-line);
box-shadow: var(--zh-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.offer-card:hover {
transform: translateY(-4px);
box-shadow: var(--zh-shadow-lg);
}
.offer-card-image { position: relative; }
.offer-card-image img { transition: transform 0.4s ease; }
.offer-card:hover .offer-card-image img { transform: scale(1.04); }
/* Holiday-type tag — pink pill in the top-left of the card */
.offer-card-holiday-type {
background: var(--zh-pink);
color: #fff !important;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 12px;
border-radius: 999px;
display: inline-block;
box-shadow: 0 2px 6px rgba(236, 90, 91, 0.35);
}
.offer-card-holiday-type a { color: #fff !important; text-decoration: none; }
/* Price — white pill, blue label + pink price */
.offer-card-price {
background: rgba(255, 255, 255, 0.96);
color: var(--zh-blue);
font-weight: 800;
font-size: 18px;
border-radius: 10px;
padding: 8px 12px;
box-shadow: 0 4px 12px rgba(0, 70, 97, 0.15);
}
.offer-card-price [data-price] {
color: var(--zh-pink);
font-weight: 800;
font-size: 20px;
}
/* Content area */
.offer-card-content { padding: 18px 20px 20px; }
.offer-card-title {
color: var(--zh-blue);
font-weight: 700;
font-size: 17px;
line-height: 1.3;
margin: 0 0 6px;
}
.offer-card-subtitle {
color: var(--zh-mute);
font-size: 13.5px;
line-height: 1.45;
}
/* Location — hide theme's blue-gray SVG pin, keep only a red 📍 emoji pin */
.offer-card-location {
color: var(--zh-blue);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
}
.offer-card-location svg { display: none; }
.offer-card-location::before {
content: "📍 ";
margin-right: 2px;
}
/* "Posted on" — urgency cue, pink with clock prefix */
.offer-card-posted-on {
color: var(--zh-pink);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
}
.offer-card-posted-on::before {
content: "🕐 ";
margin-right: 2px;
}
/* Member-rate badge — small Loyalty-Violet pill in bottom-right corner with hover tooltip */
.offer-card.has-member-rate { border: 2px solid var(--zh-violet); }
.offer-card-member-rate {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 5;
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--zh-violet) 0%, var(--zh-violet-d) 100%);
color: #fff;
font-weight: 700;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 9px 4px 21px;
border-radius: 999px;
box-shadow: 0 3px 8px rgba(92, 119, 204, 0.35);
cursor: help;
line-height: 1;
}
.offer-card-member-rate::before {
content: "★";
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
}
.offer-card-member-rate::after {
content: "Members get extra discounts on top of public rates. Free to join.";
position: absolute;
right: 0;
bottom: calc(100% + 8px);
background: var(--zh-blue);
color: #fff;
padding: 10px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
width: 220px;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
z-index: 20;
}
.offer-card-member-rate:hover::after {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
Part 8 — "Show more" button (centered, brand colors)
============================================================ */
.deals__more {
display: block;
width: fit-content;
margin: 24px auto 0;
background: transparent;
color: var(--zh-pink);
border: 2px solid var(--zh-pink);
border-radius: 999px;
padding: 12px 28px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
letter-spacing: 0.02em;
text-align: center;
}
.deals__more:hover {
background: var(--zh-pink);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(236, 90, 91, 0.3);
}
/* ============================================================
Part 9 — Newsletter section (sibling before .home-app-promo)
The app-promo banner itself is intentionally not modified.
============================================================ */
.zh-newsletter {
background: linear-gradient(135deg, var(--zh-blue) 0%, var(--zh-blue-d) 100%);
color: #fff;
border-radius: 20px;
padding: 22px 32px 24px;
margin: 28px auto 24px;
max-width: 1080px;
text-align: center;
box-shadow: var(--zh-shadow-lg);
position: relative;
overflow: hidden;
}
.zh-newsletter::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(236, 90, 91, 0.45), transparent 70%);
pointer-events: none;
}
.zh-newsletter::after {
content: "";
position: absolute;
bottom: -60px; left: -40px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(92, 119, 204, 0.35), transparent 70%);
pointer-events: none;
}
.zh-newsletter__title {
font-family: "Montserrat", sans-serif;
font-style: normal;
font-weight: 700;
color: #ffffff;
font-size: clamp(24px, 2.6vw, 32px);
margin: 0 0 8px;
position: relative;
}
.zh-newsletter__sub {
font-size: 15px;
opacity: 0.9;
margin: 0 0 14px;
position: relative;
color: #fff;
}
.zh-newsletter__form {
display: flex;
gap: 8px;
max-width: 520px;
margin: 0 auto;
position: relative;
}
.zh-newsletter__form input {
flex: 1;
padding: 14px 18px;
border: none;
border-radius: 999px;
font-size: 15px;
font-family: inherit;
outline: none;
color: var(--zh-ink);
}
.zh-newsletter__form button {
padding: 14px 28px;
border: none;
border-radius: 999px;
background: var(--zh-pink);
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
font-family: inherit;
}
.zh-newsletter__form button:hover:not(:disabled) {
background: var(--zh-pink-d);
transform: translateY(-1px);
}
.zh-newsletter__form button:disabled { opacity: 0.85; cursor: default; }
.zh-newsletter__note {
font-size: 12px;
opacity: 0.65;
margin-top: 10px;
position: relative;
color: #fff;
}
/* External-margin-only tweak on .home-app-promo: tightens the gap to the
footer below. Internal banner styling is NOT modified. */
.home-app-promo {
margin-bottom: 8px !important;
}
/* ============================================================
Sprint 26 — Mobile homepage polish (≤767px)
Fixes the homepage on phones: kills the stray horizontal scroll
(the page was rendering wider than the viewport, leaving the
layout shifted right with "empty extra space" on the left edge),
tightens the trust strip into an intentional 2×2 grid, dials the
hero H1 down so it fits cleanly, and pins the partner search
widget to the hero card width. Desktop/tablet (>767px) untouched.
============================================================ */
@media (max-width: 767px) {
/* Belt + braces: clamp the document to the viewport so nothing
can push the page wider. `clip` is preferred (doesn't create a
scroll container, won't break position:sticky); `hidden` is the
fallback for older iOS Safari. */
html, body.home {
overflow-x: hidden;
overflow-x: clip;
max-width: 100vw;
}
body.home .home-scroller,
body.home .wrapper-content {
max-width: 100vw;
overflow-x: hidden;
overflow-x: clip;
}
/* Trust strip — 2×2 grid feels intentional, not "leftover desktop". */
body.home .zh-trust-strip {
margin: -8px 0 10px;
padding: 10px 0;
}
body.home .zh-trust-strip__inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px 12px;
padding: 0 16px;
max-width: 100%;
box-sizing: border-box;
}
body.home .zh-trust-item {
flex: none;
min-width: 0;
font-size: 12.5px;
justify-content: flex-start;
gap: 8px;
}
body.home .zh-trust-item .zh-icon { width: 22px; height: 22px; }
body.home .zh-stars-rating { font-size: 13px; }
/* Hero — fit cleanly inside the viewport. */
.home-hero {
max-width: 100vw;
overflow-x: hidden;
overflow-x: clip;
}
.home-hero__inner {
padding: 14px !important;
min-height: 360px;
}
.home-hero__content {
max-width: 100%;
min-width: 0;
}
.home-hero__content h1 {
font-size: 22px !important;
line-height: 1.18 !important;
margin-bottom: 12px !important;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
/* Partner search widget (loaded from cpa.zenhotels.com) — its
`.zen-div` uses `all: initial` which can leak past the hero card
on phones. Force the container chain to respect the slot width. */
.home-hero__content .zh-search,
.home-hero__content .zh-search > .zen-div,
.home-hero__content .zh-search .zen-tabs,
.home-hero__content .zh-search .zen-tabs-body {
max-width: 100% !important;
min-width: 0 !important;
width: auto !important;
box-sizing: border-box !important;
}
.home-hero__content .zh-search .zen-tabs-body {
padding: 16px !important;
}
}
/* ============================================================
Sprint 27 — Stronger mobile-overflow lock + diagnostic
Sprint 26 deployed the trust-strip grid and H1 sizing correctly
(we can see them on the user's iPhone), but horizontal scroll
was still possible. Likely cause on iOS Safari: `overflow-x` on
html/body needs both `!important` AND an explicit `width: 100%`
to actually pin the document width. Also nuke off-screen fixed
elements (CookieYes preference modal sits at left:-250 by default,
which iOS can include in the scrollable area).
The `body.home::before` "MOBILE OK" pill is a temporary diagnostic
— if visible on your phone, this @media block is reaching iOS and
the issue is elsewhere; if absent, the rules aren't loading.
============================================================ */
@media (max-width: 767px) {
/* Hard lock — explicit width + max-width + overflow, all !important */
html {
overflow-x: hidden !important;
overflow-x: clip !important;
width: 100% !important;
max-width: 100% !important;
}
body.home {
overflow-x: hidden !important;
overflow-x: clip !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
body.home .home-scroller,
body.home .wrapper-content,
body.home .home-hero {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-x: clip !important;
}
/* Direct body children must not exceed viewport. Owl-carousel
widgets are exempted (they handle their own internal scroll). */
body.home > div:not(.cky-overlay):not(.cky-modal):not(.cky-consent-container):not(.cky-btn-revisit-wrapper),
body.home > section {
max-width: 100% !important;
}
/* CookieYes preferences modal sits at left:-250 by default (slides
in when "Customise" is clicked). On iOS Safari that off-screen
fixed element can extend the scrollable area. Park it via
transform instead, which doesn't contribute to scroll width. */
.cky-modal:not(.cky-modal-open) {
left: 0 !important;
right: 0 !important;
transform: translateX(-100%) !important;
width: 100vw !important;
max-width: 100% !important;
}
/* DIAGNOSTIC — small "MOBILE OK" pill, top-right of viewport.
Removed in Sprint 28 (confirmed reaching iOS). */
}
/* ============================================================
Sprint 28 — Deal-page hero stack, 2-col destinations,
broader overflow lock, pill removal
Confirmed in Sprint 27 that the mobile @media block reaches
iOS. This drop:
- Removes the diagnostic "MOBILE OK" pill.
- Broadens the overflow lock to *all* pages (Sprint 27 only
targeted body.home, so deal pages still had horizontal
scroll — that's why the booking card was visible cut at
the right edge on the user's iPhone).
- Homepage: "Explore top destinations" lays out as a 2×3
grid on phones instead of one country per row.
- Deal pages: `.ee-hero` switches to flex-column so the
booking card (`.ee-booking`) stacks under the hero
content (effectively "under the subtitle"), full-width
with proper margins. The theme's own mobile rule sets
`position: static` but leaves `.ee-hero` as flex-row,
so the card lands as a sibling alongside `.ee-hero-inner`
and gets clipped off-screen. Setting flex-direction:
column fixes the actual stacking.
- Tames the long Mid-range chip in `.ee-eyebrow` (wraps
instead of overflowing) and dials the `.ee-title` size
down so it fits.
- Section titles (`.top-destinations h2/h3`, `.deals h2/h3`)
get a phone-safe font-size cap.
============================================================ */
@media (max-width: 767px) {
/* Kill the diagnostic pill. */
body.home::before { content: none !important; }
/* Broaden the overflow lock from `body.home` to `body`.
Sprint 27's rules were scoped to home only; deal pages
still had horizontal scroll because nothing constrained
them. */
body {
overflow-x: hidden !important;
overflow-x: clip !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
body .ee-hero {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-x: clip !important;
}
/* Homepage: 2-column grid for "Explore top destinations". */
body.home .top-destinations__items {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 18px 12px;
padding: 0 16px;
max-width: 100%;
box-sizing: border-box;
}
body.home .top-destinations__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
body.home .top-destinations__item img {
width: 100% !important;
max-width: 150px !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Phone-safe section-title size so headings don't overflow. */
body.home .top-destinations h2,
body.home .top-destinations h3,
body.home .deals h2,
body.home .deals h3,
body.home .holiday-types h3 {
font-size: clamp(22px, 6.2vw, 28px) !important;
overflow-wrap: anywhere;
}
/* ---- Deal pages ---- */
/* Stack the hero vertically so the booking card lands under
the title/subtitle/meta block instead of beside it. */
body.single-deal .ee-hero {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
height: auto !important;
min-height: 0 !important;
padding-bottom: 0 !important;
}
body.single-deal .ee-hero-inner {
padding: 24px 16px 8px !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.single-deal .ee-booking {
position: static !important;
transform: none !important;
top: auto !important;
right: auto !important;
width: calc(100% - 32px) !important;
max-width: 100% !important;
margin: 0 16px 16px !important;
box-sizing: border-box;
}
/* Eyebrow line ("May 22, 2026 · Spain · Beach · Mid-range")
— let it wrap rather than overflow. */
body.single-deal .ee-eyebrow {
flex-wrap: wrap !important;
row-gap: 4px;
font-size: 14px !important;
}
body.single-deal .ee-eyebrow::before { display: none; }
/* Deal H1 — fit cleanly. */
body.single-deal .ee-title {
font-size: clamp(22px, 6vw, 32px) !important;
overflow-wrap: anywhere;
}
}
/* ============================================================
Sprint 29 — App-promo redesign, footer disclaimer shrink,
trust-strip homepage-only, deal-page hero banner
- Homepage app-promo banner ("A better experience in the app")
is restyled to match the zenhotels.com reference: zenhotels
wordmark logo above the title, no bullet list, all three app
store badges in a single row, no QR code, no small app icon.
- The footer disclaimer paragraph ("Our website is not
responsible for price variations…") is dialled down to 11px
so it takes less vertical space.
- The Sprint 16 trust strip (Trustpilot · 2.7M+ hotels · Secure
booking · 20M+ travellers) is shown ONLY on the homepage on
phones; hidden on deal pages, destinations, guides, etc.
- Deal-page hero image flips from a full-bleed background cover
(~700px tall when content stacked) to a fixed 180px-tall
banner image at the top, with title/eyebrow/meta/booking on a
white background below — "twice smaller in height" effective
for the visible image footprint.
============================================================ */
@media (max-width: 767px) {
/* ---- (A) App-promo banner ---- */
/* Replace the (hidden on mobile) phone mockup img content with
the zenhotels wordmark SVG, shown above the title. */
body.home .app-promo__mock {
display: block !important;
content: url("data:image/svg+xml;utf8,") !important;
width: auto !important;
height: 36px !important;
max-width: 200px !important;
margin: 0 auto 10px !important;
}
/* Hide bullet list — reference layout is logo + title + badges only. */
body.home .app-promo p,
body.home .app-promo ul,
body.home .app-promo li { display: none !important; }
body.home .app-promo h2 {
font-size: 18px !important;
line-height: 1.3 !important;
margin: 0 0 14px !important;
text-align: center !important;
white-space: nowrap;
}
/* Badges in one row; hide the small zh-app-icon (first child). */
body.home .app-promo__text__buttons {
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
padding: 0;
}
body.home .app-promo__text__buttons a:first-child { display: none !important; }
body.home .app-promo__text__buttons a {
flex: 0 0 auto;
}
body.home .app-promo__text__buttons a img {
height: 28px !important;
width: auto !important;
max-height: 28px !important;
max-width: 100% !important;
display: block;
}
body.home .app-promo__qr { display: none !important; }
body.home .home-app-promo {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* ---- (B) Footer disclaimer ----
Targets the bare sibling of .footer__content inside