/* public/home-refresh.css * ───────────────────────────────────────────────────────────────────────── * Homepage-only visual refresh (2026-09, stage 1 of the site redesign). * * SCOPE: every rule below is prefixed with body.hm-home-refresh. Only the v1 * homepage template (public/home.html) carries that class, so this file can * never restyle another page -- nor the v2 homepage, which reuses home.html's * (and therefore this ) but renders its own . * * TOKENS: shared values come from public/design/hm-tokens.css (linked first). * Every var(--hm-*) carries the approved literal as its fallback, so if the * token file fails to load the page still renders exactly as approved; * test/designFoundation.test.js checks each fallback equals its token. * Hero-only tints and the overlay stay local: nothing else uses them. * * FALLBACK: if this file fails to load, the page falls back to home.html's * own inline styles, which still render the previous design correctly. So * nothing here may be load-bearing for behaviour -- it is presentation only. * * Deliberately NOT touched here: the shared navigation (#hm-global-nav), * which is part of the site shell used across ~96 pages and is redesigned as * its own reviewed step. */ /* ── Hero: edge-to-edge photograph, centred width-limited content ───────── */ /* The photograph is the fixed hero image home.html sets as --h5b-bg (Pexels 13811682, see docs/asset-register.md); this file only frames it. */ body.hm-home-refresh .hero-5b { display: flex; align-items: center; min-height: 600px; padding: 120px 0 44px; background-color: var(--hm-navy-deep, #09233d); background-image: var(--h5b-bg, none); background-size: cover; background-position: center 56%; isolation: isolate; } body.hm-home-refresh .hero-5b::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9, 35, 61, .91) 0%, rgba(9, 35, 61, .69) 42%, rgba(9, 35, 61, .22) 100%); } body.hm-home-refresh .hero-5b .wrap2 { position: relative; z-index: 1; width: 100%; max-width: var(--hm-max-content, 1200px); padding: 0 var(--hm-gutter, 40px); } body.hm-home-refresh .h5b-grid { grid-template-columns: 1.15fr .85fr; gap: 65px; margin-bottom: 0; } body.hm-home-refresh .hero-5b .eyebrow2 { font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b8ddc5; margin-bottom: 18px; } /* Wording is unchanged from production (approved decision 1); only the treatment differs. */ body.hm-home-refresh .hero-5b h1 { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-weight: 400; font-size: 65px; line-height: 1.04; letter-spacing: -1.5px; max-width: 640px; color: var(--hm-white, #fff); text-wrap: balance; } body.hm-home-refresh .hero-5b h1 em { font-style: italic; font-weight: 400; color: #b5d9bf; } body.hm-home-refresh .hero-5b .sub2 { font-family: var(--hm-font-body, 'DM Sans', Arial, system-ui, sans-serif); font-size: 15px; line-height: 1.85; color: #e0e7e8; max-width: 470px; margin: 22px 0; } body.hm-home-refresh .hero-5b .proof2 { font-size: .76rem; color: #cee3d2; } body.hm-home-refresh .hero-5b .proof2 strong { color: var(--hm-white, #fff); } /* Photo credit for the fixed hero image: plain text, no hotel caption. */ body.hm-home-refresh .h5b-credit { margin-top: 26px; font-size: .72rem; color: rgba(255, 255, 255, .66); } /* ── Tracking form card ─────────────────────────────────────────────────── */ body.hm-home-refresh .hform { max-width: 460px; padding: 26px; border-radius: var(--hm-radius-panel, 17px); background: var(--hm-white, #fff); color: var(--hm-ink, #0d2135); box-shadow: var(--hm-shadow-raised, 0 12px 50px rgba(0, 21, 34, .22)); } body.hm-home-refresh .hform-tabs { background: var(--hm-surface-muted, #eef2ef); padding: 4px; border-radius: 25px; margin-bottom: 20px; } body.hm-home-refresh .hform-tab { min-height: 40px; border-radius: 22px; font-size: .8rem; font-weight: 700; color: var(--hm-muted, #586976); transition: background-color var(--hm-fast, 150ms), color var(--hm-fast, 150ms); } body.hm-home-refresh .hform-tab.on { background: var(--hm-ink, #0d2135); color: var(--hm-white, #fff); } body.hm-home-refresh .hform-tab:focus-visible { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: 2px; } body.hm-home-refresh .hf-fld { margin-bottom: 14px; } body.hm-home-refresh .hf-fld label { font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--hm-ink, #0d2135); margin-bottom: 6px; } body.hm-home-refresh .hf-fld input { min-height: var(--hm-control-min, 44px); padding: 10px 12px; border: 1px solid var(--hm-field-border, #d4ded4); border-radius: var(--hm-radius-control, 8px); background: var(--hm-white, #fff); font-size: .92rem; transition: border-color var(--hm-fast, 150ms), box-shadow var(--hm-fast, 150ms); } body.hm-home-refresh .hf-cur input { padding-left: 26px; } body.hm-home-refresh .hf-fld input:focus { border-color: var(--hm-green, #1a6b4a); box-shadow: 0 0 0 3px var(--hm-focus-glow, rgba(26, 107, 74, .16)); } body.hm-home-refresh .hf-consent { font-size: .76rem; color: var(--hm-muted, #586976); gap: 9px; } body.hm-home-refresh .hf-consent input { width: 16px; height: 16px; accent-color: var(--hm-green, #1a6b4a); } body.hm-home-refresh .hform-go { min-height: 48px; border-radius: var(--hm-radius-control, 8px); background: var(--hm-green, #1a6b4a); font-weight: 700; transition: background-color var(--hm-fast, 150ms); } body.hm-home-refresh .hform-go:hover { background: var(--hm-green-dark, #125038); } body.hm-home-refresh .hform-go:disabled { cursor: progress; } body.hm-home-refresh .hform-go:focus-visible { outline: 2px solid var(--hm-ink, #0d2135); outline-offset: 3px; } body.hm-home-refresh .hf-fine { color: var(--hm-muted, #586976); } body.hm-home-refresh .hf-fine a, body.hm-home-refresh .hform-ok .ok-link { color: var(--hm-green, #1a6b4a); } /* Founder proof: same production copy, quieter framing. */ body.hm-home-refresh .hf-proof { margin: 16px 0 0; padding: 14px 0 0; background: none; border-left: 0; border-top: 1px solid var(--hm-line, #e3e6e2); border-radius: 0; } body.hm-home-refresh .hf-proof-head { font-size: .82rem; color: var(--hm-green-dark, #125038); } body.hm-home-refresh .hf-proof-body { font-size: .78rem; color: var(--hm-muted, #586976); } /* ── Server-rendered deal cards, now directly below the hero ────────────── */ body.hm-home-refresh .h5b-dealband { background: var(--hm-cream, #faf9f6); color: var(--hm-ink, #0d2135); padding: 34px 0 10px; } body.hm-home-refresh .h5b-dealband .wrap2 { max-width: var(--hm-max-content, 1200px); padding: 0 var(--hm-gutter, 40px); } /* No cards (empty feed, or an SSR fallback) means no section: a heading with nothing under it reads as broken. */ body.hm-home-refresh .h5b-dealband:has(.h5b-cards:empty) { display: none; } body.hm-home-refresh .h5b-caught { margin: 0 0 14px; } body.hm-home-refresh .h5b-caught-label { color: var(--hm-muted, #586976); } body.hm-home-refresh .h5b-caught-arrow, body.hm-home-refresh .h5b-live { color: var(--hm-green, #1a6b4a); } body.hm-home-refresh .h5b-card { border: 1px solid var(--hm-line, #e3e6e2); box-shadow: var(--hm-shadow-card, 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08)); transition: transform var(--hm-fast, 150ms); } body.hm-home-refresh .h5b-card:focus-visible { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: 3px; } /* A hotel's name is its identity: wrap it, never truncate it. */ body.hm-home-refresh .h5b-card-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } body.hm-home-refresh .h5b-now { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); } /* ── Provider strip ─────────────────────────────────────────────────────── */ body.hm-home-refresh .pvs { background: var(--hm-mint, #edf3ee); padding: 22px 20px; border-bottom: 1px solid var(--hm-line, #e3e6e2); } body.hm-home-refresh .pvs-in { max-width: var(--hm-max-content, 1200px); justify-content: center; background: transparent; border: 0; box-shadow: none; padding: 0; } body.hm-home-refresh .pvs-lead { font-size: .84rem; font-weight: 500; color: var(--hm-muted, #586976); } body.hm-home-refresh .pvs-item { font-size: .95rem; color: var(--hm-ink, #0d2135); } body.hm-home-refresh .pvs-fine { text-align: center; } /* ── Breakpoints (1050 / 880 / 750 / 500) ───────────────────────────────── */ @media (max-width: 1050px) { body.hm-home-refresh .hero-5b h1 { font-size: 53px; } body.hm-home-refresh .h5b-grid { gap: 44px; } body.hm-home-refresh .hero-5b .wrap2, body.hm-home-refresh .h5b-dealband .wrap2 { padding: 0 32px; } } /* home.html stacks the hero at 880px; the overlay follows the stacking. */ @media (max-width: 880px) { body.hm-home-refresh .hero-5b { min-height: 0; padding: 104px 0 40px; } body.hm-home-refresh .hero-5b::before { background: linear-gradient(180deg, rgba(9, 35, 61, .86), rgba(9, 35, 61, .5)); } /* Must restate the single column: the scoped two-column rule above outranks home.html's own unscoped 880px stacking rule. */ body.hm-home-refresh .h5b-grid { grid-template-columns: 1fr; gap: 30px; } body.hm-home-refresh .hform { max-width: none; } body.hm-home-refresh .h5b-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 750px) { body.hm-home-refresh .hero-5b h1 { font-size: 46px; } body.hm-home-refresh .hero-5b .wrap2, body.hm-home-refresh .h5b-dealband .wrap2 { padding: 0 var(--hm-gutter-mobile, 20px); } body.hm-home-refresh .hform { padding: 22px; } body.hm-home-refresh .h5b-cards { grid-template-columns: 1fr; } } /* Below 375px a side-by-side pair leaves each date field ~115px wide, and the rendered date loses its year behind the picker icon (verified at 320px and at 1280px/400% zoom, in 543a692 as well). Stack the pairs instead. */ @media (max-width: 374px) { body.hm-home-refresh .hf-row { grid-template-columns: 1fr; } } @media (max-width: 500px) { body.hm-home-refresh .hero-5b h1 { font-size: 38px; letter-spacing: -1px; } body.hm-home-refresh .hero-5b .sub2 { font-size: 14px; } body.hm-home-refresh .hform { padding: 20px; } } @media (prefers-reduced-motion: reduce) { body.hm-home-refresh .hform-tab, body.hm-home-refresh .hf-fld input, body.hm-home-refresh .hform-go, body.hm-home-refresh .h5b-card { transition: none; } body.hm-home-refresh .h5b-card:hover { transform: none; } } /* ══ Prototype homepage composition (2026-09-13) ═══════════════════════════ Source: hotelmonitor-ux-refresh site.js home() + site.css (.site-home, .home-hero, .home-partners, .section-header, .journey-steps, .destinations-grid, .quote-block, .callout-band, .blog-grid). Order in home.html: hero, partners, journey, destinations, live drops, founder quote, call-out, guides, then the production sections the prototype does not show (.hp-more). Values below are the prototype's. */ /* Hero: solid header above it (no pull-up), full-bleed photograph, prototype padding. */ body.hm-home-refresh .hero-5b { margin-top: 0; padding: 56px 0; min-height: 570px; } @media (max-width: 1050px) { body.hm-home-refresh .hero-5b { padding: 45px 0; } } @media (max-width: 750px) { body.hm-home-refresh .hero-5b { padding: 35px 0; min-height: 0; } body.hm-home-refresh .hero-5b::before { background: linear-gradient(180deg, rgba(9, 35, 61, .86), rgba(9, 35, 61, .48)); } body.hm-home-refresh .hero-5b .wrap2 { padding: 0 var(--hm-gutter-mobile, 20px); } } body.hm-home-refresh .hform { border-radius: 17px; padding: 26px; } /* Partners strip: full-width mint band directly under the hero. */ body.hm-home-refresh .pvs { padding: 0; background: var(--hm-mint, #edf3ee); border-bottom: 1px solid var(--hm-line, #e3e6e2); } body.hm-home-refresh .pvs-in { max-width: var(--hm-max-content, 1200px); margin: 0 auto; padding: 24px 40px 20px; background: none; border: 0; border-radius: 0; box-shadow: none; justify-content: center; gap: 10px 37px; } body.hm-home-refresh .pvs-lead { font-size: 12px; font-weight: 400; color: var(--hm-muted, #586976); } body.hm-home-refresh .pvs-list { gap: 12px 30px; justify-content: center; } body.hm-home-refresh .pvs-item { font-size: 14px; } body.hm-home-refresh .pvs-fine { font-size: 11px; color: var(--hm-muted, #586976); max-width: 760px; margin: 4px auto 0; } /* Shared section frame (prototype .workspace / .section / .section-header). */ body.hm-home-refresh .hp-section { padding: 62px 0; background: var(--hm-cream, #faf9f6); } body.hm-home-refresh .hp-wrap { max-width: var(--hm-max-content, 1200px); margin: 0 auto; padding: 0 var(--hm-gutter, 40px); box-sizing: border-box; } body.hm-home-refresh .hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; margin-bottom: 27px; } body.hm-home-refresh .hp-head h2 { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; color: var(--hm-ink, #0d2135); max-width: 600px; margin: 0; } body.hm-home-refresh .hp-lede { font-size: 13px; line-height: 1.7; color: var(--hm-muted, #586976); margin: 12px 0 0; max-width: 570px; } body.hm-home-refresh .hp-lede a { color: var(--hm-green, #1a6b4a); } body.hm-home-refresh .hp-textlink { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--hm-green, #1a6b4a); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* Journey steps. */ body.hm-home-refresh .hp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; padding: 28px 0; } body.hm-home-refresh .hp-num { display: block; font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-size: 38px; line-height: 1; color: #668d70; padding-bottom: 15px; border-bottom: 1px solid #bfcfc0; margin-bottom: 20px; } body.hm-home-refresh .hp-step h3 { font-size: 16px; font-weight: 700; color: var(--hm-ink, #0d2135); margin: 0 0 11px; } body.hm-home-refresh .hp-step p { font-size: 13px; line-height: 1.8; color: var(--hm-muted, #586976); margin: 0; } /* Destinations: prototype card, with the approved no-image panel in place of photography. */ body.hm-home-refresh .hp-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } body.hm-home-refresh .hp-dest { display: block; background: #fff; border: 1px solid var(--hm-line, #e3e6e2); border-radius: 13px; overflow: hidden; color: var(--hm-ink, #0d2135); text-decoration: none; transition: transform .18s, box-shadow .18s; } body.hm-home-refresh .hp-dest:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(23, 59, 33, .06); } body.hm-home-refresh .hp-dest:focus-visible { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: 3px; } body.hm-home-refresh .hp-dest-blank { height: 175px; display: grid; place-items: center; background: #e4ebe3; color: #5f7f66; font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-size: 60px; } body.hm-home-refresh .hp-dest-body { padding: 20px; } body.hm-home-refresh .hp-dest h3 { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-weight: 400; font-size: 28px; margin: 0; } body.hm-home-refresh .hp-dest p { font-size: 12px; color: var(--hm-muted, #586976); margin: 9px 0 17px; } body.hm-home-refresh .hp-dest-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--hm-green, #1a6b4a); } /* Live drops keep their cards, framed as a section. */ body.hm-home-refresh .h5b-dealband { background: var(--hm-cream, #faf9f6); } /* Founder quote. */ body.hm-home-refresh .hp-quote-grid { display: grid; grid-template-columns: 200px 1fr; gap: 50px; align-items: center; } body.hm-home-refresh .hp-quote-number { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-size: 95px; line-height: 1; letter-spacing: -3px; color: var(--hm-green, #1a6b4a); } body.hm-home-refresh .hp-quote blockquote { margin: 0; font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-size: 32px; line-height: 1.4; color: var(--hm-ink, #0d2135); } body.hm-home-refresh .hp-quote blockquote strong { font-weight: 400; color: var(--hm-green, #1a6b4a); } body.hm-home-refresh .hp-quote-who { font-size: 11px; color: var(--hm-muted, #586976); margin: 16px 0 0; } body.hm-home-refresh .hp-quote-who a { color: var(--hm-green, #1a6b4a); } /* Call-out band. */ body.hm-home-refresh .hp-callout-wrap { padding-top: 0; } body.hm-home-refresh .hp-callout { background: var(--hm-ink, #0d2135); color: #fff; border-radius: 19px; padding: 42px; display: flex; gap: 45px; align-items: center; justify-content: space-between; } body.hm-home-refresh .hp-callout h2 { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-weight: 400; font-size: 42px; line-height: 1.08; color: #fff; margin: 0; max-width: 580px; } body.hm-home-refresh .hp-callout p { color: #cfdbdc; font-size: 13px; margin: 13px 0 0; } body.hm-home-refresh .hp-btn-light { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px; border-radius: 9px; background: #fff; color: var(--hm-green, #1a6b4a); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } body.hm-home-refresh .hp-btn-light:hover { background: var(--hm-mint, #edf3ee); } /* Guides: the server-rendered cards as the prototype blog grid. */ body.hm-home-refresh .hp-guides .b-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; } body.hm-home-refresh .hp-guides .b-card { display: flex; flex-direction: column; min-height: 240px; padding: 24px; background: #fff; border: 1px solid var(--hm-line, #e3e6e2); border-radius: 13px; color: var(--hm-ink, #0d2135); text-decoration: none; box-shadow: none; } body.hm-home-refresh .hp-guides .b-card .kicker { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-green, #1a6b4a); margin-bottom: 15px; } body.hm-home-refresh .hp-guides .b-card h4 { font-family: var(--hm-font-display, 'Instrument Serif', Georgia, 'Times New Roman', serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 14px; color: var(--hm-ink, #0d2135); } body.hm-home-refresh .hp-guides .b-card p { font-size: 12px; line-height: 1.7; color: var(--hm-muted, #586976); margin: 0 0 20px; } body.hm-home-refresh .hp-guides .b-card::after { content: 'Read the guide \2192'; margin-top: auto; font-size: 12px; color: var(--hm-green, #1a6b4a); } /* Production-only sections after the prototype sequence. */ body.hm-home-refresh .hp-more { border-top: 1px solid var(--hm-line, #e3e6e2); } @media (max-width: 1050px) { body.hm-home-refresh .hp-head h2 { font-size: 36px; } } @media (max-width: 750px) { body.hm-home-refresh .hp-section { padding: 38px 0; } body.hm-home-refresh .hp-wrap { padding: 0 var(--hm-gutter-mobile, 20px); } body.hm-home-refresh .pvs-in { padding: 24px 20px 18px; } body.hm-home-refresh .hp-head h2 { font-size: 34px; } body.hm-home-refresh .hp-steps { gap: 22px; } body.hm-home-refresh .hp-dest-grid, body.hm-home-refresh .hp-guides .b-cards { grid-template-columns: repeat(2, 1fr); } body.hm-home-refresh .hp-callout { padding: 28px; gap: 25px; } body.hm-home-refresh .hp-callout h2 { font-size: 34px; } body.hm-home-refresh .hp-quote-grid { grid-template-columns: 120px 1fr; gap: 25px; } body.hm-home-refresh .hp-quote-number { font-size: 65px; } body.hm-home-refresh .hp-quote blockquote { font-size: 26px; } } @media (max-width: 500px) { body.hm-home-refresh .hp-head { flex-direction: column; align-items: flex-start; gap: 13px; } body.hm-home-refresh .hp-head h2 { font-size: 33px; } body.hm-home-refresh .hp-section { padding: 33px 0; } body.hm-home-refresh .hp-steps { grid-template-columns: 1fr; gap: 26px; } body.hm-home-refresh .hp-num { padding-bottom: 10px; margin-bottom: 14px; } body.hm-home-refresh .hp-dest-grid, body.hm-home-refresh .hp-guides .b-cards { grid-template-columns: 1fr; } body.hm-home-refresh .hp-dest-blank { height: 190px; } body.hm-home-refresh .hp-callout { flex-direction: column; align-items: flex-start; padding: 27px; } body.hm-home-refresh .hp-callout h2 { font-size: 35px; } body.hm-home-refresh .hp-quote-grid { grid-template-columns: 1fr; gap: 10px; } body.hm-home-refresh .hp-quote-number { font-size: 75px; } body.hm-home-refresh .hp-quote blockquote { font-size: 27px; } } @media (prefers-reduced-motion: reduce) { body.hm-home-refresh .hp-dest { transition: none; } body.hm-home-refresh .hp-dest:hover { transform: none; } } /* Compact secondary block (approved 2026-09-13): one live-deals row, Telegram text link, one-line methodology, collapsed FAQs, compact destination links. */ body.hm-home-refresh .hp-more #deals { padding: 44px 0; } body.hm-home-refresh .hp-more .deals { grid-template-columns: repeat(3, 1fr); } body.hm-home-refresh .hp-telegram { text-align: center; margin: 18px 0 0; font-size: 14px; } body.hm-home-refresh .hp-telegram a { color: #9fd8bf; font-weight: 600; } body.hm-home-refresh .hp-method { max-width: var(--hm-max-content, 1200px); margin: 0 auto; padding: 22px var(--hm-gutter, 40px); box-sizing: border-box; font-size: 14px; color: var(--hm-muted, #586976); border-bottom: 1px solid var(--hm-line, #e3e6e2); } body.hm-home-refresh .hp-method a { color: var(--hm-green, #1a6b4a); font-weight: 600; } body.hm-home-refresh .hp-more .band.paper { padding: 40px 0; } body.hm-home-refresh .hp-more .faq { display: block; max-width: 760px; } body.hm-home-refresh .hp-more details.qa { border-bottom: 1px solid var(--hm-line, #e3e6e2); padding: 0; background: none; box-shadow: none; } body.hm-home-refresh .hp-more details.qa summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--hm-ink, #0d2135); } body.hm-home-refresh .hp-more details.qa summary:focus-visible { outline: 2px solid var(--hm-green, #1a6b4a); outline-offset: 2px; } body.hm-home-refresh .hp-more details.qa p { margin: 0 0 14px; color: var(--hm-muted, #586976); } body.hm-home-refresh .hp-more .dest-grid { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; } body.hm-home-refresh .hp-more .dest-card { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--hm-line, #e3e6e2); border-radius: 999px; background: #fff; box-shadow: none; transform: none; } body.hm-home-refresh .hp-more .dest-card .dn { font-size: 13px; margin: 0; } body.hm-home-refresh .hp-more .dest-card .dp { display: none; } body.hm-home-refresh .hp-more .dest-card .de { margin: 0; line-height: 0; } @media (max-width: 1050px) { body.hm-home-refresh .hp-more .deals { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 750px) { body.hm-home-refresh .hp-method { padding: 18px var(--hm-gutter-mobile, 20px); } } @media (max-width: 600px) { body.hm-home-refresh .hp-more .deals { grid-template-columns: 1fr; } }