/* Hotelier's Choice — Programmatic Page Design System
* ----------------------------------------------------
* Stable, framework-independent component layer for all
* generated /cities/, /near/, /guides/, /asia/ pages.
*
* This file is the source of truth for visual identity on
* programmatic pages. It does not depend on Tailwind being
* fully compiled — the classes here are real CSS.
*
* Brand:
* - Cream / white / stone backgrounds
* - Charcoal text
* - Warm brown / amber accents
* - Playfair Display (headings) + Inter (body)
* - Charcoal primary CTA, warm hover
* - No blue / slate / SaaS colors
*/
/* =============================================================
* 1. Tokens
* ============================================================= */
:root {
/* Surfaces */
--hc-bg: #fbfaf7; /* page background — soft cream */
--hc-surface: #ffffff; /* card surface */
--hc-surface-alt: #f5f1ea; /* warm stone accent */
--hc-surface-deep: #efe9df; /* alt section background */
/* Text */
--hc-ink: #1f1d1a; /* charcoal — primary text */
--hc-ink-soft: #3a3631; /* secondary text */
--hc-ink-muted: #6b655c; /* meta text */
--hc-ink-subtle: #9a9389; /* placeholder / divider text */
/* Accents (warm) */
--hc-accent: #b06b1d; /* warm brown — CTAs, links */
--hc-accent-hover: #8c5316; /* darker hover */
--hc-accent-soft: #f3e9d8; /* tint background */
--hc-accent-line: #d9c19a; /* tinted border */
/* Lines */
--hc-line: #e7e1d6; /* primary border */
--hc-line-soft: #efe9df; /* subtle border */
/* Structural */
--hc-radius: 14px;
--hc-radius-sm: 8px;
--hc-radius-lg: 20px;
--hc-shadow-sm: 0 1px 2px rgba(31,29,26,.05);
--hc-shadow: 0 4px 16px rgba(31,29,26,.06);
/* Type */
--hc-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
--hc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Layout */
--hc-container: 1180px;
--hc-gutter: clamp(1rem, 3vw, 2rem);
--hc-section-gap: clamp(2.5rem, 5vw, 4.5rem);
}
/* =============================================================
* 2. Page shell
* ============================================================= */
.hc-page {
background: var(--hc-bg);
color: var(--hc-ink);
font-family: var(--hc-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.hc-main {
max-width: var(--hc-container);
margin: 0 auto;
padding: 0 var(--hc-gutter);
}
/* =============================================================
* 3. Site header — CANONICAL responsive header (Sprint 5)
*
* One header for the whole site. Two responsive states:
* - Desktop (>= 768px): logo left, nav inline right, single line, fixed height
* - Mobile (< 768px): logo left, hamburger right, slide-in drawer from right
*
* Markup contract (do not deviate):
*
*
* Behavior:
* - Toggle script: any [data-hc-toggle] click flips `data-hc-open` on the
* [data-hc-header] root. CSS handles all visual state from there.
* ============================================================= */
.hc-site-header {
background: var(--hc-bg);
border-bottom: 1px solid var(--hc-line);
position: sticky;
top: 0;
z-index: 50;
-webkit-backdrop-filter: saturate(180%) blur(8px);
backdrop-filter: saturate(180%) blur(8px);
}
.hc-site-header__inner {
max-width: var(--hc-container);
margin: 0 auto;
padding: 0 var(--hc-gutter);
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.hc-site-header__brand {
font-family: var(--hc-font-display);
font-size: 1.25rem;
font-weight: 400;
letter-spacing: -0.025em;
color: var(--hc-ink);
text-decoration: none;
white-space: nowrap;
flex: 0 0 auto;
line-height: 1;
}
.hc-site-header__nav {
display: flex;
align-items: center;
gap: 1.75rem;
font-size: 0.92rem;
white-space: nowrap;
}
.hc-site-header__nav a {
color: var(--hc-ink-soft);
text-decoration: none;
transition: color .15s ease;
font-weight: 500;
}
.hc-site-header__nav a:hover { color: var(--hc-accent); }
/* Hamburger toggle — visible on mobile only */
.hc-site-header__toggle {
display: none;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: var(--hc-radius-sm);
}
.hc-site-header__toggle:hover {
background: rgba(31,29,26,.05);
}
.hc-site-header__toggle-bar {
display: block;
width: 22px;
height: 2px;
background: var(--hc-ink);
border-radius: 1px;
transition: transform .2s ease, opacity .15s ease;
}
/* Mobile drawer — hidden on desktop */
.hc-site-drawer {
display: none;
}
@media (max-width: 767.98px) {
/* Mobile state */
.hc-site-header__nav { display: none; }
.hc-site-header__toggle { display: inline-flex; }
.hc-site-header__brand { font-size: 1.125rem; }
/* The header creates a stacking context (backdrop-filter), so a
position:fixed drawer inside it would be confined to the header.
Disable the header's backdrop-filter on mobile and let the drawer
escape via a high z-index. */
.hc-site-header {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.hc-site-drawer {
display: block;
position: fixed;
inset: 0;
z-index: 9999;
visibility: hidden;
pointer-events: none;
background: rgba(31,29,26,0);
transition: background .25s ease, visibility 0s linear .25s;
}
.hc-site-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(86vw, 320px);
background: #ffffff;
box-shadow: -8px 0 24px rgba(31,29,26,.12);
transform: translateX(100%);
transition: transform .25s ease;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.hc-site-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 var(--hc-gutter);
border-bottom: 1px solid var(--hc-line);
}
.hc-site-drawer__brand {
font-family: var(--hc-font-display);
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.025em;
color: var(--hc-ink);
line-height: 1;
}
.hc-site-drawer__close {
width: 40px;
height: 40px;
background: transparent;
border: 0;
cursor: pointer;
border-radius: var(--hc-radius-sm);
position: relative;
}
.hc-site-drawer__close:hover { background: rgba(31,29,26,.05); }
.hc-site-drawer__close::before,
.hc-site-drawer__close::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 22px;
height: 2px;
background: var(--hc-ink);
border-radius: 1px;
}
.hc-site-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.hc-site-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hc-site-drawer__nav {
display: flex;
flex-direction: column;
padding: 1.25rem var(--hc-gutter);
gap: 0.25rem;
}
.hc-site-drawer__nav a {
display: block;
padding: 0.85rem 0.5rem;
border-bottom: 1px solid var(--hc-line-soft);
color: var(--hc-ink);
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
letter-spacing: -0.005em;
}
.hc-site-drawer__nav a:hover { color: var(--hc-accent); }
/* Open state — toggled by JS via data-hc-open on the header */
[data-hc-header][data-hc-open="true"] .hc-site-drawer {
visibility: visible;
pointer-events: auto;
background: rgba(31,29,26,.4);
transition: background .25s ease, visibility 0s linear 0s;
}
[data-hc-header][data-hc-open="true"] .hc-site-drawer__panel {
transform: translateX(0);
}
[data-hc-header][data-hc-open="true"] .hc-site-header__toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
[data-hc-header][data-hc-open="true"] .hc-site-header__toggle-bar:nth-child(2) {
opacity: 0;
}
[data-hc-header][data-hc-open="true"] .hc-site-header__toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Lock body scroll when drawer is open */
html:has([data-hc-header][data-hc-open="true"]) {
overflow: hidden;
}
}
/* Premium-template fallback: legacy on premium pages uses
* Tailwind utilities (`fixed top-0 ... bg-white/80 backdrop-blur-xl`) that
* are NOT in the compiled site CSS. Without this, the header renders
* transparent and content scrolls behind it. We give legacy fixed/sticky
* elements that aren't using .hc-site-header an opaque background.
*
* IMPORTANT: We must NOT match the canonical .hc-site-header here — its
* backdrop-filter creates a containing block that traps the mobile drawer.
* The :not(.hc-site-header) guards keep this fallback off the canonical. */
.hc-page header.fixed:not(.hc-site-header),
.hc-page header[class*="sticky"]:not(.hc-site-header),
.hc-page > header:first-of-type:not(.hc-site-header) {
background: #ffffff;
border-bottom: 1px solid var(--hc-line);
-webkit-backdrop-filter: saturate(180%) blur(8px);
backdrop-filter: saturate(180%) blur(8px);
}
/* Defensive: title-wrap anchors that accidentally inherit
* .hc-affiliate-button styling (solid charcoal background) should not
* appear as buttons when their content is just a heading. */
a.hc-affiliate-button:has(> h1, > h2, > h3, > h4, > h5, > h6) {
display: inline;
background: transparent;
color: inherit;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
font-weight: inherit;
letter-spacing: inherit;
}
a.hc-affiliate-button:has(> h1, > h2, > h3, > h4, > h5, > h6):hover {
background: transparent;
color: var(--hc-accent);
}
/* Defensive: list-row jump links (e.g. Quick Answer hotel lists) that
* happen to have inline-flex utility classes accidentally inherit
* .hc-affiliate-button styling. Detect by structure: anchors that have
* a flex container as direct child but NO explicit cta-button class. */
a.hc-affiliate-button.flex,
a.hc-affiliate-button[class*="flex "]:not(.cta-button):not(.affiliate-link) {
background: transparent;
color: inherit;
padding: 0.75rem;
border: 0;
border-radius: 0.75rem;
box-shadow: none;
font-weight: inherit;
letter-spacing: inherit;
text-transform: none;
}
a.hc-affiliate-button.flex:hover,
a.hc-affiliate-button[class*="flex "]:not(.cta-button):not(.affiliate-link):hover {
background: rgba(180, 130, 80, 0.06);
color: inherit;
}
/* Tailwind utility fallbacks: warm-amber rating color used in Quick Answer
* lists and rating badges. text-amber-700 is in compiled CSS but text-amber-600
* is not — provide both so ratings remain visible. */
.text-amber-600 { color: rgb(217 119 6); }
.text-amber-500 { color: rgb(245 158 11); }
.bg-amber-50 { background-color: rgb(255 251 235); }
.bg-amber-100 { background-color: rgb(254 243 199); }
.text-amber-800 { color: rgb(146 64 14); }
/* Common utility fallbacks that some premium pages reference */
.bg-warm { background-color: var(--hc-bg); }
.text-stone-700 { color: rgb(68 64 60); }
.text-stone-800 { color: rgb(41 37 36); }
.text-stone-900 { color: rgb(28 25 23); }
.bg-stone-150 { background-color: rgb(236 234 231); }
.border-stone-150 { border-color: rgb(236 234 231); }
/* =============================================================
* 4. Breadcrumbs
* ============================================================= */
.hc-breadcrumbs {
font-size: 0.85rem;
color: var(--hc-ink-muted);
padding: 18px 0 6px;
}
.hc-breadcrumbs a {
color: var(--hc-ink-muted);
text-decoration: none;
transition: color .15s ease;
}
.hc-breadcrumbs a:hover { color: var(--hc-accent); }
.hc-breadcrumbs__sep { margin: 0 .45rem; color: var(--hc-ink-subtle); }
/* =============================================================
* 5. Hero
* ============================================================= */
.hc-hero { padding: 32px 0 12px; }
.hc-kicker {
font-family: var(--hc-font-body);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hc-accent);
font-weight: 600;
margin-bottom: 10px;
}
.hc-title {
font-family: var(--hc-font-display);
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--hc-ink);
margin: 0 0 1rem;
font-weight: 700;
}
.hc-subtitle {
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
color: var(--hc-ink-soft);
max-width: 70ch;
line-height: 1.55;
margin-bottom: 1.5rem;
}
/* =============================================================
* 6. Sections
* ============================================================= */
.hc-section {
padding: var(--hc-section-gap) 0;
border-top: 1px solid var(--hc-line-soft);
}
.hc-section:first-of-type { border-top: 0; }
.hc-section-title {
font-family: var(--hc-font-display);
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--hc-ink);
margin: 0 0 0.5rem;
font-weight: 700;
}
.hc-section-lede {
font-size: 1rem;
color: var(--hc-ink-soft);
max-width: 70ch;
margin: 0 0 1.5rem;
}
/* =============================================================
* 7. Quick Answer
* ============================================================= */
.hc-quick-answer {
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: var(--hc-radius);
padding: 1.5rem;
margin: 1rem 0 2rem;
box-shadow: var(--hc-shadow-sm);
}
.hc-quick-answer table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.hc-quick-answer th,
.hc-quick-answer td {
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid var(--hc-line-soft);
vertical-align: top;
}
.hc-quick-answer th {
font-weight: 600;
color: var(--hc-ink-soft);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hc-quick-answer tr:last-child td { border-bottom: 0; }
/* =============================================================
* 8. Hotel grid + canonical hotel card
* ============================================================= */
.hc-hotel-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.25rem 0 0;
}
.hc-hotel-card {
display: grid;
grid-template-columns: 1fr; /* mobile: stacked */
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: var(--hc-radius);
overflow: hidden;
box-shadow: var(--hc-shadow-sm);
transition: box-shadow .2s ease, transform .2s ease;
}
.hc-hotel-card:hover { box-shadow: var(--hc-shadow); }
@media (min-width: 720px) {
.hc-hotel-card {
grid-template-columns: 300px 1fr; /* desktop: image left, content right */
}
}
.hc-hotel-card__media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--hc-surface-alt);
overflow: hidden;
}
.hc-hotel-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.hc-hotel-card:hover .hc-hotel-card__image { transform: scale(1.03); }
.hc-hotel-card__badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(31,29,26,.85);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.hc-hotel-card__body {
padding: 1.25rem 1.4rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
min-width: 0;
}
.hc-hotel-card__eyebrow {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--hc-ink-muted);
}
.hc-hotel-card__name {
font-family: var(--hc-font-display);
font-size: 1.4rem;
line-height: 1.2;
font-weight: 700;
color: var(--hc-ink);
margin: 0;
}
.hc-hotel-card__name a {
color: inherit;
text-decoration: none;
}
.hc-hotel-card__name a:hover { color: var(--hc-accent); }
.hc-hotel-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
font-size: 0.85rem;
color: var(--hc-ink-muted);
margin: 0;
}
.hc-hotel-card__copy {
font-size: 0.95rem;
color: var(--hc-ink-soft);
margin: 0;
flex: 1;
}
.hc-hotel-card__cta {
margin-top: auto;
padding-top: 0.6rem;
}
/* =============================================================
* 9. Pills
* ============================================================= */
.hc-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 4px 10px;
border-radius: 999px;
background: var(--hc-surface-alt);
color: var(--hc-ink-soft);
border: 1px solid var(--hc-line);
}
.hc-pill--accent {
background: var(--hc-accent-soft);
color: var(--hc-accent-hover);
border-color: var(--hc-accent-line);
}
.hc-pill--ink {
background: var(--hc-ink);
color: #fff;
border-color: var(--hc-ink);
}
.hc-rating-pill {
background: var(--hc-ink);
color: #fff;
border: none;
font-weight: 700;
font-size: 0.8rem;
padding: 4px 10px;
border-radius: 8px;
}
.hc-price-pill {
background: var(--hc-surface-alt);
color: var(--hc-ink-soft);
border: 1px solid var(--hc-line);
font-weight: 600;
font-size: 0.78rem;
padding: 3px 9px;
border-radius: 6px;
letter-spacing: 0.04em;
}
/* =============================================================
* 10. Affiliate button
* ============================================================= */
.hc-affiliate-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
background: var(--hc-ink);
color: #fff !important;
padding: 11px 20px;
border-radius: var(--hc-radius-sm);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1px solid var(--hc-ink);
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
line-height: 1.2;
}
.hc-affiliate-button:hover {
background: var(--hc-accent-hover);
border-color: var(--hc-accent-hover);
color: #fff !important;
}
.hc-affiliate-button:active { transform: translateY(1px); }
.hc-affiliate-button--ghost {
background: transparent;
color: var(--hc-ink) !important;
border-color: var(--hc-line);
}
.hc-affiliate-button--ghost:hover {
background: var(--hc-surface-alt);
color: var(--hc-accent-hover) !important;
border-color: var(--hc-accent-line);
}
/* =============================================================
* 11. Editorial CTA / "Found your perfect hotel?" — RETIRED (Sprint 5)
* Module permanently removed site-wide. Selectors kept as no-op so any
* stale markup that slips through doesn't render anything jarring.
* ============================================================= */
.hc-editorial-note,
.hc-editorial-note__title,
.hc-editorial-note__body,
.hc-editorial-note__actions {
display: none !important;
}
/* =============================================================
* 12. Area guide
* ============================================================= */
.hc-area-guide {
display: grid;
grid-template-columns: 1fr;
gap: 1.1rem;
margin: 1.25rem 0 0;
}
@media (min-width: 720px) {
.hc-area-guide { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.hc-area-guide { grid-template-columns: repeat(3, 1fr); }
}
.hc-area-guide__zone {
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: var(--hc-radius);
padding: 1.25rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.hc-area-guide__zone h3 {
font-family: var(--hc-font-display);
font-size: 1.18rem;
margin: 0;
color: var(--hc-ink);
}
.hc-area-guide__meta {
font-size: 0.78rem;
color: var(--hc-ink-muted);
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: 600;
}
.hc-area-guide__copy {
font-size: 0.93rem;
color: var(--hc-ink-soft);
margin: 0;
}
/* =============================================================
* 13. Decision table
* ============================================================= */
.hc-decision-table {
margin: 1.25rem 0 0;
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: var(--hc-radius);
overflow: hidden;
}
.hc-decision-table table {
width: 100%;
border-collapse: collapse;
font-size: 0.93rem;
}
.hc-decision-table thead {
background: var(--hc-surface-alt);
}
.hc-decision-table th,
.hc-decision-table td {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--hc-line-soft);
vertical-align: top;
}
.hc-decision-table th {
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hc-ink-soft);
}
.hc-decision-table tr:last-child td { border-bottom: 0; }
/* =============================================================
* 14. FAQ accordion
* ============================================================= */
.hc-faq { margin: 1.25rem 0 0; display: grid; gap: 0.6rem; }
.hc-faq details {
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: var(--hc-radius-sm);
padding: 0;
transition: border-color .15s ease;
}
.hc-faq details[open] { border-color: var(--hc-accent-line); }
.hc-faq summary {
cursor: pointer;
list-style: none;
padding: 14px 18px;
font-weight: 600;
color: var(--hc-ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.hc-faq summary::-webkit-details-marker { display: none; }
.hc-faq summary::after {
content: "+";
font-size: 1.2rem;
color: var(--hc-accent);
transition: transform .2s ease;
flex-shrink: 0;
}
.hc-faq details[open] summary::after { content: "−"; }
.hc-faq__body {
padding: 0 18px 16px;
color: var(--hc-ink-soft);
font-size: 0.95rem;
line-height: 1.6;
}
/* =============================================================
* 15. Internal links
* ============================================================= */
.hc-internal-links {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 1.25rem 0 0;
}
@media (min-width: 720px) {
.hc-internal-links { grid-template-columns: repeat(2, 1fr); }
}
.hc-internal-links a {
display: block;
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: var(--hc-radius-sm);
padding: 1rem 1.2rem;
text-decoration: none;
color: var(--hc-ink);
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hc-internal-links a:hover {
border-color: var(--hc-accent-line);
background: var(--hc-surface-alt);
color: var(--hc-accent-hover);
}
.hc-internal-links a strong {
display: block;
font-family: var(--hc-font-display);
font-size: 1.1rem;
margin-bottom: 0.2rem;
font-weight: 700;
}
.hc-internal-links a span {
font-size: 0.88rem;
color: var(--hc-ink-muted);
}
/* =============================================================
* 16. Trust box
* ============================================================= */
.hc-trust-box {
background: var(--hc-accent-soft);
border: 1px solid var(--hc-accent-line);
border-radius: var(--hc-radius);
padding: 1.25rem 1.4rem;
margin: 1.5rem 0;
font-size: 0.92rem;
color: var(--hc-ink-soft);
display: grid;
gap: 0.4rem;
}
.hc-trust-box strong { color: var(--hc-ink); font-weight: 600; }
/* =============================================================
* 17. Site footer scaffold
* ============================================================= */
.hc-site-footer {
border-top: 1px solid var(--hc-line);
padding: 2.2rem 0;
margin-top: 4rem;
font-size: 0.88rem;
color: var(--hc-ink-muted);
background: var(--hc-bg);
}
.hc-site-footer__inner {
max-width: var(--hc-container);
margin: 0 auto;
padding: 0 var(--hc-gutter);
display: grid;
gap: 0.8rem;
}
.hc-site-footer a {
color: var(--hc-ink-soft);
text-decoration: none;
}
.hc-site-footer a:hover { color: var(--hc-accent); }
/* =============================================================
* 18. Utility — visually hidden (a11y)
* ============================================================= */
.hc-sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* =============================================================
* 19. Heading-font defaults (Sprint 4 follow-up)
*
* Some legacy pages have // without `font-display` /
* `font-serif` classes. Those pages still wrap content in
* `body.hc-page`, so apply Playfair Display by default here.
*
* Tailwind's `font-display`, `font-serif`, and `font-sans` classes
* remain explicit overrides (still win because they have the same
* specificity but appear after this rule via the compiled
* `_post_*.css` import order). Anchors that wrap headings already
* have their own neutralization in section 5b.
* ============================================================= */
body.hc-page h1,
body.hc-page h2,
body.hc-page h3 {
font-family: var(--hc-font-display);
letter-spacing: -0.01em;
}
/* Body copy default — when no `font-sans` is present on body */
body.hc-page {
font-family: var(--hc-font-body);
color: var(--hc-ink);
}
/* =============================================================
* 20. Hotel-card variants (Sprint 4b)
*
* Two approved card layouts:
* - .hc-hotel-card--editorial : city/luxury/neighborhood/atmosphere
* - .hc-hotel-card--decision : airport/station/transport/practical
*
* The default .hc-hotel-card layout (image-left / content-right at
* desktop) maps to the decision variant, kept for back-compat with
* pages already shipped (kansai-airport, kyoto, hiroshima, etc.).
*
* Editorial variant: large image on top, text below, generous padding,
* card occupies full width within its grid slot, premium magazine feel.
* ============================================================= */
/* === Editorial grid (single column on desktop OR 2-up at large widths
with very generous gap — never the cramped 2-up of the decision grid) === */
.hc-hotel-grid--editorial {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem; /* generous vertical rhythm */
margin: 1.5rem 0 0;
}
@media (min-width: 1024px) {
.hc-hotel-grid--editorial {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem 2.5rem; /* big row gap, comfortable col gap */
}
}
/* === Editorial card === */
.hc-hotel-card--editorial {
display: flex;
flex-direction: column;
background: var(--hc-surface);
border: 1px solid var(--hc-line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(31,29,26,0.03);
transition: box-shadow .25s ease, transform .25s ease;
/* Override the default .hc-hotel-card grid template so image-top wins */
grid-template-columns: none !important;
}
.hc-hotel-card--editorial:hover {
box-shadow: 0 18px 40px -18px rgba(31,29,26,.18), 0 4px 12px -6px rgba(31,29,26,.08);
transform: translateY(-2px);
}
/* Editorial media: large hero image on top, 16:10 (more cinematic than 4:3) */
.hc-hotel-card--editorial .hc-hotel-card__media,
.hc-hotel-card--editorial > .relative {
width: 100%;
aspect-ratio: 16 / 10;
position: relative;
overflow: hidden;
background: var(--hc-surface-alt);
}
@media (max-width: 720px) {
.hc-hotel-card--editorial .hc-hotel-card__media,
.hc-hotel-card--editorial > .relative {
aspect-ratio: 4 / 3; /* slightly taller on mobile */
}
}
.hc-hotel-card--editorial .hc-hotel-card__media img,
.hc-hotel-card--editorial > .relative img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.hc-hotel-card--editorial:hover .hc-hotel-card__media img,
.hc-hotel-card--editorial:hover > .relative img {
transform: scale(1.04);
}
/* Editorial body: generous padding, strong hierarchy */
.hc-hotel-card--editorial .hc-hotel-card__body,
.hc-hotel-card--editorial > .p-7 {
padding: 2rem 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 1;
min-width: 0;
}
@media (max-width: 720px) {
.hc-hotel-card--editorial .hc-hotel-card__body,
.hc-hotel-card--editorial > .p-7 {
padding: 1.5rem 1.5rem 1.5rem;
}
}
/* Editorial typography: bigger hotel name, more breathing room */
.hc-hotel-card--editorial .hc-hotel-card__eyebrow,
.hc-hotel-card--editorial .hc-eyebrow {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hc-accent);
margin: 0 0 0.4rem;
}
.hc-hotel-card--editorial .hc-hotel-card__name,
.hc-hotel-card--editorial h3 {
font-family: var(--hc-font-display);
font-size: 1.65rem;
line-height: 1.18;
font-weight: 700;
color: var(--hc-ink);
margin: 0 0 0.15rem;
letter-spacing: -0.01em;
}
@media (max-width: 720px) {
.hc-hotel-card--editorial .hc-hotel-card__name,
.hc-hotel-card--editorial h3 {
font-size: 1.4rem;
}
}
.hc-hotel-card--editorial .hc-hotel-card__copy,
.hc-hotel-card--editorial > .p-7 > p:not(.hc-hotel-card__eyebrow):not(.hc-hotel-card__meta) {
font-size: 0.98rem;
line-height: 1.55;
color: var(--hc-ink-soft);
margin: 0;
}
/* Editorial CTA pinned to bottom */
.hc-hotel-card--editorial .hc-hotel-card__cta {
margin-top: auto;
padding-top: 1rem;
}
/* Tag chips inside editorial cards: slightly more breathing room */
.hc-hotel-card--editorial .hc-pill {
padding: 5px 11px;
font-size: 0.74rem;
}
/* === Decision card (alias for the existing default layout) === */
/* Keeps the current image-left / content-right behavior; this class
makes the intent explicit on airport/station pages. */
.hc-hotel-card--decision {
/* Inherit defaults; nothing to override — decision == default. */
}
/* === Editorial card: neutralize .hc-affiliate-button INSIDE the hotel name ===
* Some templates render hotel names as
* (anchor inside heading). The existing :has(> hN) rule only catches the inverse
* pattern (anchor wraps heading), leaving the name styled as a dark pill button
* inside editorial cards. This rule strips button styling from any affiliate
* anchor that is a direct child of a heading inside an editorial card so the
* name reads as proper editorial typography. */
.hc-hotel-card--editorial h1 > a.hc-affiliate-button,
.hc-hotel-card--editorial h2 > a.hc-affiliate-button,
.hc-hotel-card--editorial h3 > a.hc-affiliate-button,
.hc-hotel-card--editorial h4 > a.hc-affiliate-button,
.hc-hotel-card--editorial h5 > a.hc-affiliate-button,
.hc-hotel-card--editorial h6 > a.hc-affiliate-button {
display: inline !important;
background: transparent !important;
color: inherit !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
line-height: inherit !important;
}
.hc-hotel-card--editorial h1 > a.hc-affiliate-button:hover,
.hc-hotel-card--editorial h2 > a.hc-affiliate-button:hover,
.hc-hotel-card--editorial h3 > a.hc-affiliate-button:hover,
.hc-hotel-card--editorial h4 > a.hc-affiliate-button:hover,
.hc-hotel-card--editorial h5 > a.hc-affiliate-button:hover,
.hc-hotel-card--editorial h6 > a.hc-affiliate-button:hover {
background: transparent !important;
color: var(--hc-accent) !important;
}