/*
Theme Name: MyTheme Cannes
Theme URI: https://cannes.com.ua/
Author: Ivatech Studio
Author URI: https://cannes.com.ua/
Description: Cannes Hotels — modern booking experience for the French Riviera. Implements the "Cannes" design system: Riviera-navy primary, Sunset coral accent, Sand warm-cream surfaces; Geist + Geist Mono typography; WCAG 2.2 AA. Monolithic stylesheet — all module CSS in css/ is intentionally empty.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme-cannes
Tags: hotels, travel, editorial, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
/* Self-hosted Geist + Geist Mono (latin + latin-ext bundled).
Files live in /fonts/geist/ and /fonts/geist-mono/.
400 + 500 of Geist preloaded in via mytheme_cannes_preload_fonts(). */
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/geist/geist-400.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/geist/geist-500.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/geist/geist-600.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/geist/geist-700.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/geist-mono/geist-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/geist-mono/geist-mono-500.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/geist-mono/geist-mono-600.woff2") format("woff2");
}
/* ============================================================
1. DESIGN TOKENS (:root)
============================================================ */
:root {
/* Riviera — primary deep navy */
--color-riviera-50: #F0F4F9;
--color-riviera-100: #DCE5EF;
--color-riviera-200: #B9C9DD;
--color-riviera-300: #8FA6BF;
--color-riviera-400: #5C7CA0;
--color-riviera-500: #3D5D85;
--color-riviera-600: #2C4870;
--color-riviera-700: #1E3A5F;
--color-riviera-800: #16294A;
--color-riviera-900: #0F1D36;
--color-riviera-950: #08111F;
/* Sunset — warm coral accent */
--color-sunset-50: #FDF6F2;
--color-sunset-100: #FAE9DF;
--color-sunset-200: #F4D2BF;
--color-sunset-300: #ECB8A0;
--color-sunset-400: #E8B4A0;
--color-sunset-500: #DC8A6A;
--color-sunset-600: #C56849;
--color-sunset-700: #A04E36;
--color-sunset-800: #7B3B29;
--color-sunset-900: #5C2C1F;
/* Sand — warm neutrals */
--color-sand-50: #FBFAF7;
--color-sand-100: #F5F1E8;
--color-sand-200: #EBE5D5;
--color-sand-300: #D9D0BC;
--color-sand-400: #B8AC93;
--color-sand-500: #8C8270;
--color-sand-600: #6D6451;
--color-sand-700: #4D4738;
--color-sand-800: #2D2A26;
--color-sand-900: #1A1815;
/* Slate — cool neutrals for UI chrome */
--color-slate-50: #F8FAFB;
--color-slate-100: #EEF2F4;
--color-slate-200: #DCE3E8;
--color-slate-300: #C0CBD3;
--color-slate-400: #94A3B0;
--color-slate-500: #6B7A87;
--color-slate-600: #4F5C68;
--color-slate-700: #3A4450;
--color-slate-800: #252D36;
--color-slate-900: #141A20;
/* Semantic states */
--color-success-bg: #E6F1EC;
--color-success-fg: #1F5E45;
--color-success-solid: #2F7D5F;
--color-warning-bg: #FBF1DC;
--color-warning-fg: #7A5418;
--color-warning-solid: #C58A2F;
--color-error-bg: #F8E3E3;
--color-error-fg: #8A2929;
--color-error-solid: #B23B3B;
--color-info-bg: #E3ECF5;
--color-info-fg: #1E3A5F;
--color-info-solid: #2C5F8C;
/* Semantic aliases */
--color-bg-page: var(--color-sand-50);
--color-bg-surface: #FFFFFF;
--color-bg-surface-alt: var(--color-sand-100);
--color-bg-inverse: var(--color-riviera-900);
--color-bg-muted: var(--color-slate-100);
--color-fg-default: var(--color-sand-800);
--color-fg-muted: var(--color-slate-600);
--color-fg-subtle: var(--color-slate-600);
--color-fg-inverse: var(--color-sand-50);
--color-fg-accent: var(--color-sunset-700);
--color-fg-link: var(--color-riviera-700);
--color-fg-link-hover: var(--color-riviera-800);
--color-border-subtle: var(--color-slate-200);
--color-border-default: var(--color-slate-500);
--color-border-strong: var(--color-slate-600);
--color-border-emphasis: var(--color-riviera-700);
--color-border-focus: var(--color-riviera-500);
--color-action-primary: var(--color-riviera-700);
--color-action-primary-hover: var(--color-riviera-800);
--color-action-primary-press: var(--color-riviera-900);
--color-action-primary-fg: #FFFFFF;
--color-action-secondary: var(--color-sand-50);
--color-action-secondary-hover: var(--color-sand-100);
--color-action-secondary-fg: var(--color-sand-800);
--color-action-secondary-border: var(--color-slate-300);
--color-action-accent: var(--color-sunset-700);
--color-action-accent-hover: var(--color-sunset-800);
--color-action-accent-fg: #FFFFFF;
--color-action-ghost-hover: var(--color-sand-100);
/* Typography */
--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--text-2xs: 0.6875rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: clamp(1.25rem, 0.5vw + 1.125rem, 1.375rem);
--text-2xl: clamp(1.5rem, 0.75vw + 1.3rem, 1.75rem);
--text-3xl: clamp(1.875rem, 1.2vw + 1.5rem, 2.25rem);
--text-4xl: clamp(2.25rem, 2vw + 1.75rem, 3rem);
--text-5xl: clamp(3rem, 3vw + 2rem, 4rem);
--text-6xl: clamp(4rem, 4vw + 2.5rem, 5rem);
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0em;
--tracking-wide: 0.02em;
--tracking-caps: 0.06em;
/* Spacing (4-px base) */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/* Radii */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;
/* Elevation */
--shadow-1: 0 1px 2px rgba(45,42,38,.06), 0 1px 1px rgba(45,42,38,.04);
--shadow-2: 0 4px 12px rgba(45,42,38,.06), 0 2px 4px rgba(45,42,38,.04);
--shadow-3: 0 12px 32px rgba(45,42,38,.08), 0 4px 12px rgba(45,42,38,.04);
--shadow-4: 0 24px 64px rgba(15,29,54,.18), 0 8px 24px rgba(15,29,54,.08);
--shadow-focus: 0 0 0 2px var(--color-bg-page), 0 0 0 5px rgba(30,58,95,.45);
/* Layout */
--container-max: 1280px;
--gutter-mobile: 1.5rem;
--gutter-tablet: 3rem;
--gutter-desktop: 5rem;
--hit-target-min: 44px;
/* Motion */
--ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
--duration-instant: 80ms;
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
/* ----- Legacy compatibility (Brvnara Modern --cnn-* and Review Vault --rv-*) ----- */
--cnn-font-display: var(--font-sans);
--cnn-font-body: var(--font-sans);
--cnn-font-mono: var(--font-mono);
--cnn-cream-50: var(--color-sand-50);
--cnn-sand-200: var(--color-sand-200);
--cnn-stone: var(--color-sand-700);
--cnn-forest: var(--color-riviera-700);
--cnn-moss: var(--color-riviera-500);
--cnn-ochre: var(--color-sunset-600);
--cnn-white: #FFFFFF;
--cnn-page-bg: var(--color-bg-page);
--cnn-text: var(--color-fg-default);
--cnn-text-muted: var(--color-fg-muted);
--cnn-link: var(--color-fg-link);
--cnn-line: var(--color-border-subtle);
--rv-color-paper: #FFFFFF;
--rv-color-surface-raised: #FFFFFF;
--rv-color-surface-sunken: var(--color-sand-100);
--rv-color-ink: var(--color-fg-default);
--rv-color-muted: var(--color-fg-muted);
--rv-color-rule: var(--color-border-subtle);
--rv-color-primary: var(--color-action-primary);
--rv-color-accent: var(--color-action-accent);
--rv-color-primary-soft: var(--color-riviera-100);
--rv-color-accent-soft: var(--color-sunset-100);
--rv-color-focus: var(--color-border-focus);
--rv-font-serif: var(--font-sans);
--rv-font-sans: var(--font-sans);
--rv-font-mono: var(--font-mono);
--rv-text-xs: var(--text-xs);
--rv-text-sm: var(--text-sm);
--rv-text-base: var(--text-base);
--rv-text-lg: var(--text-lg);
--rv-text-xl: var(--text-xl);
--rv-text-2xl: var(--text-2xl);
--rv-leading-tight: var(--leading-tight);
--rv-leading-snug: var(--leading-snug);
--rv-leading-normal: var(--leading-normal);
--rv-leading-relaxed: var(--leading-relaxed);
--rv-tracking-tight: var(--tracking-tight);
--rv-tracking-wide: var(--tracking-wide);
--rv-tracking-caps: var(--tracking-caps);
--rv-space-0: var(--space-0);
--rv-space-1: var(--space-1);
--rv-space-2: var(--space-2);
--rv-space-3: var(--space-3);
--rv-space-4: var(--space-4);
--rv-space-5: var(--space-5);
--rv-space-6: var(--space-6);
--rv-space-7: var(--space-8);
--rv-space-8: var(--space-10);
--rv-space-9: var(--space-12);
--rv-radius-sm: var(--radius-sm);
--rv-radius-md: var(--radius-md);
--rv-radius-lg: var(--radius-lg);
--rv-radius-pill: var(--radius-full);
--rv-dur-fast: var(--duration-fast);
--rv-dur-base: var(--duration-base);
--rv-dur-slower: var(--duration-slow);
--rv-ease-out-soft: var(--ease-out-quart);
--rv-container-prose: 46rem;
--rv-container-text: 64rem;
--rv-container-wide: 84rem;
--rv-header-height: 72px;
}
/* ============================================================
2. RESET + BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
font-family: var(--font-sans);
font-size: 16px;
line-height: var(--leading-normal);
color: var(--color-fg-default);
background: var(--color-bg-page);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-fg-default);
background: var(--color-bg-page);
font-feature-settings: "ss01", "cv11";
min-height: 100vh;
overflow-x: hidden;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--color-fg-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out-quart); }
a:hover { color: var(--color-fg-link-hover); }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-snug);
color: var(--color-fg-default);
}
h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-fg-muted); }
p { line-height: var(--leading-relaxed); }
::selection { background: var(--color-sunset-200); color: var(--color-sand-900); }
/* ============================================================
3. A11Y UTILITIES
============================================================ */
:focus { outline: none; }
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-xs);
}
.cnn-sr-only,
.cn-sr-only,
.screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.cnn-skip,
.cn-skip {
position: absolute;
left: 16px;
top: 16px;
padding: 10px 16px;
border-radius: var(--radius-sm);
background: var(--color-riviera-700);
color: #fff;
font-weight: var(--weight-medium);
text-decoration: none;
transform: translateY(-150%);
transition: transform var(--duration-base) var(--ease-out-quart);
z-index: 200;
}
.cnn-skip:focus,
.cnn-skip:focus-visible,
.cn-skip:focus {
transform: translateY(0);
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
4. LAYOUT — containers, sections, wraps
============================================================ */
.wrap,
.cnn-container,
.cn-container,
.rv-wrap {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .wrap, .cnn-container, .cn-container, .rv-wrap { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .wrap, .cnn-container, .cn-container, .rv-wrap { padding-inline: var(--gutter-desktop); } }
.cnn-section,
.cnn-band,
.rv-section {
padding-block: var(--space-12);
}
@media (min-width: 768px) { .cnn-section, .cnn-band, .rv-section { padding-block: var(--space-16); } }
@media (min-width: 1024px) { .cnn-section, .cnn-band, .rv-section { padding-block: var(--space-20); } }
.cnn-section--tight, .cnn-band--tight { padding-block: var(--space-8); }
.cnn-section--loose, .cnn-band--loose { padding-block: var(--space-24); }
.cnn-section--surface, .cnn-band--surface { background: var(--color-bg-surface); }
.cnn-section--alt, .cnn-band--alt { background: var(--color-bg-surface-alt); }
.cnn-section--inverse, .cnn-band--inverse { background: var(--color-bg-inverse); color: var(--color-fg-inverse); }
.cnn-section--inverse h1, .cnn-section--inverse h2, .cnn-section--inverse h3,
.cnn-band--inverse h1, .cnn-band--inverse h2, .cnn-band--inverse h3 { color: var(--color-fg-inverse); }
/* WCAG: any text inside dark-bg sections (cta-band, foot, inverse) must use light fg.
Override muted/default fg-tokens that would otherwise inherit dark colors. */
.cnn-section--inverse, .cnn-band--inverse,
.rv-cta-band, .cnn-foot {
--color-fg-default: var(--color-fg-inverse);
--color-fg-muted: var(--color-sand-200);
--color-fg-subtle: var(--color-sand-300);
}
.rv-cta-band a:not(.rv-button):not(.rv-button--inverted),
.cnn-foot a:not(.rv-button):not(.rv-button--inverted) { color: var(--color-sand-100); }
.rv-cta-band a:not(.rv-button):not(.rv-button--inverted):hover,
.cnn-foot a:not(.rv-button):not(.rv-button--inverted):hover { color: #fff; }
.cnn-section__inner,
.cnn-band__inner {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-section__inner, .cnn-band__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-section__inner, .cnn-band__inner { padding-inline: var(--gutter-desktop); } }
.cnn-section__header,
.cnn-band__header,
.cnn-section-header {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-8);
max-width: 64ch;
}
.cnn-section__header--centered,
.cnn-section-header--centered { align-items: center; text-align: center; margin-inline: auto; }
.cnn-section__eyebrow,
.cnn-eyebrow,
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
}
.cnn-section__title,
.cnn-section-title,
.cnn-band__title {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
line-height: var(--leading-tight);
color: var(--color-fg-default);
}
.cnn-section__lede,
.cnn-band__lede,
.cnn-section-lede {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-fg-muted);
max-width: 60ch;
}
.cnn-section__grid,
.cnn-band__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 640px) { .cnn-section__grid, .cnn-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-section__grid, .cnn-band__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.cnn-band__grid--2 { grid-template-columns: 1fr !important; }
@media (min-width: 768px) { .cnn-band__grid--2 { grid-template-columns: repeat(2, 1fr) !important; } }
.cnn-band__grid--4 {}
@media (min-width: 1024px) { .cnn-band__grid--4 { grid-template-columns: repeat(4, 1fr) !important; } }
.cnn-section__more,
.cnn-section-cta {
margin-top: var(--space-8);
display: flex;
justify-content: center;
}
.cnn-band--usp .cnn-band__grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .cnn-band--usp .cnn-band__grid { grid-template-columns: repeat(3, 1fr); } }
.cnn-band--usp .cnn-band__item,
.cnn-usp__item {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-6);
background: var(--color-bg-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-subtle);
}
.cnn-usp__icon { color: var(--color-action-primary); width: 32px; height: 32px; }
.cnn-usp__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-fg-default); }
.cnn-usp__text { font-size: var(--text-sm); color: var(--color-fg-muted); line-height: var(--leading-relaxed); }
/* ============================================================
5. NAVIGATION (.cnn-nav)
============================================================ */
.cnn-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(251, 250, 247, 0.85);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--color-border-subtle);
}
.cnn-nav__inner {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--gutter-mobile);
max-width: var(--container-max);
margin-inline: auto;
min-height: 64px;
}
@media (min-width: 768px) { .cnn-nav__inner { padding-inline: var(--gutter-tablet); min-height: 72px; gap: var(--space-6); } }
@media (min-width: 1024px) { .cnn-nav__inner { padding-inline: var(--gutter-desktop); gap: var(--space-8); } }
.cnn-nav__brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-fg-default);
text-decoration: none;
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
letter-spacing: var(--tracking-snug);
}
.cnn-nav__brand img,
.cnn-nav__brand svg { height: 32px; width: auto; }
.cnn-nav__brand-text { font-weight: var(--weight-semibold); }
.cnn-nav__primary,
.cnn-nav__menu {
display: none;
align-items: center;
gap: var(--space-1);
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 1024px) { .cnn-nav__primary, .cnn-nav__menu { display: flex; } }
.cnn-nav__primary a,
.cnn-nav__menu a,
.cnn-nav__link {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-fg-default);
text-decoration: none;
transition: background-color var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
min-height: 36px;
}
.cnn-nav__primary a:hover,
.cnn-nav__menu a:hover,
.cnn-nav__link:hover { background: var(--color-action-ghost-hover); color: var(--color-fg-default); }
.cnn-nav__primary a[aria-current="page"],
.cnn-nav__menu a[aria-current="page"],
.cnn-nav__menu .current-menu-item > a,
.cnn-nav__menu .current_page_item > a { color: var(--color-fg-link); font-weight: var(--weight-semibold); }
.cnn-nav__actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-2);
}
.cnn-nav__icon-btn {
width: var(--hit-target-min);
height: var(--hit-target-min);
border-radius: var(--radius-sm);
display: inline-grid;
place-items: center;
background: transparent;
color: var(--color-fg-default);
border: 0;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out-quart);
}
.cnn-nav__icon-btn:hover { background: var(--color-action-ghost-hover); }
.cnn-nav__icon-btn svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
.cnn-nav__phone {
display: none;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-fg-default);
text-decoration: none;
min-height: var(--hit-target-min);
}
@media (min-width: 768px) { .cnn-nav__phone { display: inline-flex; } }
.cnn-nav__phone:hover { background: var(--color-action-ghost-hover); color: var(--color-fg-default); }
.cnn-nav__phone svg {
width: 16px; height: 16px;
fill: var(--color-action-primary);
color: var(--color-action-primary);
}
.cnn-nav__burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: var(--hit-target-min);
height: var(--hit-target-min);
border-radius: var(--radius-sm);
background: transparent;
border: 0;
cursor: pointer;
color: var(--color-fg-default);
padding: 0;
}
.cnn-nav__burger span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform var(--duration-fast) var(--ease-out-quart),
opacity var(--duration-fast) var(--ease-out-quart);
}
.cnn-nav__burger:hover { background: var(--color-action-ghost-hover); }
.cnn-nav__burger:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }
/* Open state — 3 bars morph into ✕ */
.cnn-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cnn-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cnn-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.cnn-nav__burger span { transition: none; }
}
@media (min-width: 1024px) { .cnn-nav__burger { display: none; } }
/* Search drawer (overlay below navbar). Toggled via JS adding .is-open
* or flipping aria-hidden to "false". Default state: hidden. */
.cnn-nav__search {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-surface);
border-bottom: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-3);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity var(--duration-base) var(--ease-out-quart),
transform var(--duration-base) var(--ease-out-quart),
visibility 0s linear var(--duration-base);
z-index: 40;
}
.cnn-nav__search.is-open,
.cnn-nav__search[aria-hidden="false"] {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.cnn-nav__search-form { display: flex; gap: var(--space-2); max-width: 640px; margin-inline: auto; }
.cnn-nav__search-input {
flex: 1;
height: var(--hit-target-min);
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-default);
background: #fff;
font: var(--weight-regular) var(--text-base)/1.4 var(--font-sans);
color: var(--color-fg-default);
}
.cnn-nav__search-input::placeholder { color: var(--color-fg-subtle); }
.cnn-nav__search-input:focus-visible {
outline: none;
border-color: var(--color-border-emphasis);
box-shadow: 0 0 0 3px rgba(30,58,95,.15);
}
.cnn-nav__search-submit {
min-height: var(--hit-target-min);
padding: 0 var(--space-5);
border-radius: var(--radius-sm);
background: var(--color-action-primary);
color: var(--color-action-primary-fg);
font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
border: 0;
cursor: pointer;
}
.cnn-nav__search-submit:hover { background: var(--color-action-primary-hover); }
/* Mobile menu drawer */
.cnn-nav.is-menu-open .cnn-nav__primary,
.cnn-nav.is-menu-open .cnn-nav__menu {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: var(--color-bg-surface);
padding: var(--space-4) var(--gutter-mobile);
gap: var(--space-1);
border-bottom: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-3);
}
@media (min-width: 1024px) {
.cnn-nav.is-menu-open .cnn-nav__primary,
.cnn-nav.is-menu-open .cnn-nav__menu {
position: static;
flex-direction: row;
padding: 0;
background: transparent;
box-shadow: none;
border: 0;
}
}
/* ============================================================
6. BUTTONS (.cnn-btn + .cn-btn primitives)
============================================================ */
.cnn-btn,
.cn-btn,
.btn {
--_bg: var(--color-action-primary);
--_bg-hover: var(--color-action-primary-hover);
--_bg-press: var(--color-action-primary-press);
--_fg: var(--color-action-primary-fg);
--_border: transparent;
--_h: 44px;
--_px: 18px;
--_fs: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: var(--_h);
min-width: var(--_h);
padding: 0 var(--_px);
border-radius: var(--radius-md);
background: var(--_bg);
color: var(--_fg);
border: 1px solid var(--_border);
font: var(--weight-medium) var(--_fs)/1 var(--font-sans);
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--duration-fast) var(--ease-out-quart),
color var(--duration-fast) var(--ease-out-quart),
transform var(--duration-instant) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart);
-webkit-tap-highlight-color: transparent;
}
.cnn-btn:hover, .cn-btn:hover, .btn:hover { background: var(--_bg-hover); color: var(--_fg); }
.cnn-btn:active, .cn-btn:active, .btn:active { background: var(--_bg-press); transform: scale(0.98); }
.cnn-btn:focus-visible, .cn-btn:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cnn-btn[disabled], .cnn-btn:disabled, .cn-btn:disabled {
background: var(--color-slate-100);
color: var(--color-slate-400);
cursor: not-allowed;
border-color: transparent;
}
.cnn-btn--primary, .cn-btn--primary, .btn-primary {}
.cnn-btn--secondary, .cn-btn--secondary, .btn-secondary {
--_bg: var(--color-action-secondary);
--_bg-hover: var(--color-action-secondary-hover);
--_bg-press: var(--color-sand-200);
--_fg: var(--color-action-secondary-fg);
--_border: var(--color-action-secondary-border);
}
.cnn-btn--ghost, .cn-btn--ghost, .btn-ghost {
--_bg: transparent;
--_bg-hover: var(--color-action-ghost-hover);
--_bg-press: var(--color-sand-200);
--_fg: var(--color-fg-default);
--_border: transparent;
}
.cnn-btn--accent, .cn-btn--accent, .btn-accent {
--_bg: var(--color-action-accent);
--_bg-hover: var(--color-action-accent-hover);
--_bg-press: var(--color-sunset-800);
--_fg: var(--color-action-accent-fg);
}
.cnn-btn--inverted, .btn-inverted {
--_bg: var(--color-bg-surface);
--_bg-hover: var(--color-sand-100);
--_bg-press: var(--color-sand-200);
--_fg: var(--color-action-primary);
--_border: var(--color-action-primary);
}
.cnn-btn--danger, .cn-btn--danger {
--_bg: var(--color-error-solid);
--_bg-hover: #9A2F2F;
--_bg-press: var(--color-error-fg);
--_fg: #fff;
}
.cnn-btn--text, .cn-btn--text {
--_bg: transparent;
--_bg-hover: transparent;
--_bg-press: transparent;
--_fg: var(--color-fg-link);
--_h: auto;
--_px: 0;
padding: 0;
min-width: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
.cnn-btn--text:hover, .cn-btn--text:hover { color: var(--color-fg-link-hover); background: transparent; }
.cnn-btn--sm, .cn-btn--sm, .btn-sm { --_h: 36px; --_px: 14px; --_fs: 14px; }
.cnn-btn--md, .cn-btn--md { --_h: 44px; --_px: 18px; --_fs: 15px; }
.cnn-btn--lg, .cn-btn--lg, .btn-lg { --_h: 52px; --_px: 22px; --_fs: 16px; }
.cnn-btn--xl, .cn-btn--xl { --_h: 60px; --_px: 28px; --_fs: 17px; }
.cnn-btn--icon, .cn-btn--icon { padding: 0; width: var(--_h); }
.cnn-btn--block, .cn-btn--block { display: flex; width: 100%; }
.cnn-btn__icon { display: inline-flex; align-items: center; }
.cnn-btn__icon svg { width: 18px; height: 18px; }
/* .btn-book is required for gtag conversion tracking — visually identical to primary */
.btn-book {}
/* ============================================================
7. CARDS (.cnn-card + .cn-card)
============================================================ */
.cnn-card,
.cn-card {
display: flex;
flex-direction: column;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--duration-base) var(--ease-out-quart),
box-shadow var(--duration-base) var(--ease-out-quart),
border-color var(--duration-base) var(--ease-out-quart);
text-decoration: none;
color: inherit;
height: 100%;
}
.cnn-card:hover,
.cn-card--interactive:hover,
.cnn-card.cnn-reveal:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
border-color: var(--color-border-default);
}
a.cnn-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.cnn-card__media {
position: relative;
aspect-ratio: 16 / 10;
background: var(--color-slate-200);
overflow: hidden;
}
.cnn-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-quart);
}
.cnn-card:hover .cnn-card__media img { transform: scale(1.03); }
.cnn-card__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
flex: 1;
}
.cnn-card__title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--color-fg-default);
margin: 0;
}
.cnn-card__meta {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-fg-muted);
}
.cnn-card__meta svg { width: 14px; height: 14px; }
.cnn-card__loc {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--color-fg-muted);
}
.cnn-card__loc svg { width: 14px; height: 14px; color: var(--color-action-primary); }
.cnn-card__badge,
.cnn-card .cnn-badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 1;
}
.cnn-card__fav {
position: absolute;
top: var(--space-2);
right: var(--space-2);
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0;
display: grid;
place-items: center;
cursor: pointer;
color: var(--color-sand-800);
z-index: 2;
}
.cnn-card__fav:hover { background: #fff; }
.cnn-card__fav[aria-pressed="true"] { color: var(--color-sunset-700); }
.cnn-card__fav svg { width: 18px; height: 18px; }
.cnn-card__price-row {
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
}
.cnn-card__price {
font-family: var(--font-mono);
font-feature-settings: "tnum", "zero";
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
letter-spacing: var(--tracking-snug);
}
.cnn-card__price-per {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-regular);
color: var(--color-fg-muted);
}
/* ============================================================
8. BADGES + TAGS
============================================================ */
.cnn-badge,
.cn-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 22px;
padding: 0 var(--space-2);
border-radius: var(--radius-full);
background: var(--color-sand-100);
color: var(--color-sand-800);
font: var(--weight-medium) 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
white-space: nowrap;
}
.cnn-badge--premium, .cn-badge--accent { background: var(--color-sunset-100); color: var(--color-sunset-800); }
.cnn-badge--available, .cn-badge--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.cnn-badge--warning, .cn-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.cnn-badge--danger, .cnn-badge--soldout, .cn-badge--error { background: var(--color-error-bg); color: var(--color-error-fg); }
.cnn-badge--new, .cn-badge--info { background: var(--color-info-bg); color: var(--color-info-fg); }
.cnn-badge--solid, .cn-badge--solid { background: var(--color-riviera-700); color: #fff; }
.cnn-tag,
.cn-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 30px;
padding: 0 var(--space-3);
border-radius: var(--radius-full);
background: #fff;
color: var(--color-fg-default);
border: 1px solid var(--color-border-default);
font: var(--weight-medium) 13px/1 var(--font-sans);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out-quart);
}
.cnn-tag:hover, .cn-tag:hover { background: var(--color-sand-50); border-color: var(--color-border-strong); }
.cnn-tag[aria-pressed="true"], .cn-tag[aria-pressed="true"], .cnn-tag--active, .cn-tag--active {
background: var(--color-riviera-700); border-color: var(--color-riviera-700); color: #fff;
}
/* ============================================================
9. FORMS — .cnn-field + .cn-* + CF7
============================================================ */
.cnn-field,
.cn-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-4);
}
.cnn-field__label,
.cn-field__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-fg-default);
display: flex;
align-items: center;
gap: var(--space-1);
}
.cnn-field__hint, .cn-field__hint { font-size: var(--text-xs); color: var(--color-fg-muted); line-height: 1.4; }
.cnn-field__error, .cn-field__error { font-size: var(--text-xs); color: var(--color-error-fg); line-height: 1.4; }
.cnn-input,
.cnn-select,
.cnn-textarea,
.cn-input,
.cn-select,
.cn-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: var(--hit-target-min);
padding: 10px var(--space-4);
border-radius: var(--radius-sm);
background: #fff;
border: 1px solid var(--color-border-default);
font: var(--weight-regular) var(--text-base)/1.4 var(--font-sans);
color: var(--color-fg-default);
transition: border-color var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart);
}
input::placeholder, textarea::placeholder { color: var(--color-fg-subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none;
border-color: var(--color-border-emphasis);
box-shadow: 0 0 0 3px rgba(30,58,95,.15);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error-solid); }
input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(178,59,59,.18); }
textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }
select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
/* Contact Form 7 */
.wpcf7 .screen-reader-response,
.wpcf7-form .screen-reader-response {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wpcf7-response-output:empty { display: none; }
.wpcf7-form { display: flex; flex-direction: column; gap: var(--space-4); }
.wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wpcf7-form p > br { display: none; }
.wpcf7-form label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-fg-default); display: block; line-height: 1.4; }
.wpcf7-form label span[aria-hidden="true"] { color: var(--color-action-accent, var(--color-sunset-700)); margin-left: 2px; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control:not([type="submit"]) {
width: 100%;
min-height: var(--hit-target-min);
padding: 10px var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-default);
background: #fff;
font: var(--weight-regular) var(--text-base)/1.4 var(--font-sans);
color: var(--color-fg-default);
}
.wpcf7-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.wpcf7-form-control:not([type="submit"]):focus-visible {
outline: none;
border-color: var(--color-action-primary);
box-shadow: var(--shadow-focus);
}
.wpcf7-form-control[type="submit"],
.wpcf7-submit,
input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--hit-target-min);
padding: 0 var(--space-5);
border-radius: var(--radius-md);
background: var(--color-action-primary);
color: var(--color-action-primary-fg);
border: 0;
font: var(--weight-medium) var(--text-base)/1 var(--font-sans);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out-quart), transform var(--duration-instant) var(--ease-out-quart);
align-self: flex-start;
}
.wpcf7-form-control[type="submit"]:hover, .wpcf7-submit:hover, input[type="submit"]:hover { background: var(--color-action-primary-hover); }
.wpcf7-form-control[type="submit"]:active, .wpcf7-submit:active, input[type="submit"]:active { transform: scale(0.98); }
.wpcf7-not-valid { border-color: var(--color-error-solid) !important; }
.wpcf7-not-valid-tip { color: var(--color-error-fg); font-size: var(--text-xs); margin-top: var(--space-1); }
.wpcf7-response-output {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 0;
background: var(--color-info-bg);
color: var(--color-info-fg);
font-size: var(--text-sm);
}
.wpcf7 form.sent .wpcf7-response-output { background: var(--color-success-bg); color: var(--color-success-fg); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background: var(--color-error-bg); color: var(--color-error-fg); }
/* ============================================================
10. HERO — .cnn-hero + variants
============================================================ */
.cnn-hero {
position: relative;
padding-block: var(--space-12) var(--space-16);
background: var(--color-bg-page);
overflow: hidden;
}
@media (min-width: 1024px) { .cnn-hero { padding-block: var(--space-20) var(--space-24); } }
.cnn-hero__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
display: grid;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 768px) { .cnn-hero__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-hero__inner { padding-inline: var(--gutter-desktop); grid-template-columns: 1.1fr 1fr; gap: var(--space-16); } }
.cnn-hero__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-accent);
margin-bottom: var(--space-4);
}
.cnn-hero__title {
font-size: var(--text-5xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
color: var(--color-fg-default);
margin: 0 0 var(--space-4);
max-width: 16ch;
}
.cnn-hero__title em { font-style: normal; color: var(--color-fg-accent); }
.cnn-hero__lede {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-regular);
line-height: var(--leading-relaxed);
letter-spacing: 0;
text-transform: none;
color: var(--color-fg-muted);
margin-bottom: var(--space-6);
max-width: 48ch;
}
.cnn-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-4);
}
.cnn-hero__photo,
.cnn-hero__visual {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--color-slate-200);
box-shadow: var(--shadow-3);
}
.cnn-hero__photo img,
.cnn-hero__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cnn-hero--editorial { background: var(--color-bg-page); }
.cnn-hero--inverse {
background: var(--color-bg-inverse);
color: var(--color-fg-inverse);
}
.cnn-hero--inverse .cnn-hero__title,
.cnn-hero--inverse .cnn-hero__lede,
.cnn-hero--inverse .cnn-hero__eyebrow { color: var(--color-fg-inverse); }
.cnn-hero--inverse .cnn-hero__eyebrow { color: var(--color-sunset-300); }
.cnn-hero--inverse .cnn-hero__lede { color: var(--color-sand-200); }
/* ============================================================
11. HOMEPAGE SECTIONS — featured, listings, discover, editorial, journal, stats, ai-finder, newsletter, countries, cta-band, pullquote
============================================================ */
.cnn-featured__grid,
.cnn-listings__grid,
.cnn-discover__grid,
.cnn-countries__grid {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cnn-featured__grid, .cnn-listings__grid, .cnn-discover__grid, .cnn-countries__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-featured__grid, .cnn-listings__grid, .cnn-discover__grid, .cnn-countries__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.cnn-editorial {
background: var(--color-bg-surface);
}
.cnn-editorial__inner {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
display: grid;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 768px) { .cnn-editorial__inner { padding-inline: var(--gutter-tablet); gap: var(--space-10); } }
@media (min-width: 1024px) { .cnn-editorial__inner { padding-inline: var(--gutter-desktop); grid-template-columns: 1fr 1.1fr; gap: var(--space-16); } }
.cnn-editorial__photo {
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--color-slate-200);
}
.cnn-editorial__photo img { width: 100%; height: 100%; object-fit: cover; }
.cnn-editorial__quote {
position: relative;
margin: var(--space-2) 0 var(--space-5);
padding: 0 0 0 var(--space-5);
border-left: 3px solid var(--color-action-accent, var(--color-action-primary));
font-family: var(--font-sans);
font-size: var(--text-xl);
line-height: var(--leading-snug);
font-weight: var(--weight-medium);
font-style: italic;
letter-spacing: var(--tracking-snug);
color: var(--color-fg-default);
text-transform: none;
max-width: 56ch;
}
@media (min-width: 1024px) { .cnn-editorial__quote { font-size: var(--text-2xl); padding-left: var(--space-6); } }
.cnn-editorial__attribution {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
}
.cnn-pullquote,
.cnn-band--pullquote {
background: var(--color-bg-inverse);
color: var(--color-fg-inverse);
padding-block: var(--space-16);
}
.cnn-pullquote__text {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
text-align: center;
max-width: 32ch;
margin-inline: auto;
color: var(--color-fg-inverse);
}
.cnn-stats__grid,
.cnn-band--stats .cnn-band__grid {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .cnn-stats__grid, .cnn-band--stats .cnn-band__grid { grid-template-columns: repeat(4, 1fr); } }
.cnn-stat,
.cnn-stat__item {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4) 0;
border-top: 1px solid var(--color-border-subtle);
}
.cnn-stat__value {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-4xl);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
letter-spacing: var(--tracking-tight);
}
.cnn-stat__label {
font-size: var(--text-sm);
color: var(--color-fg-muted);
}
.cnn-journal__grid {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .cnn-journal__grid { grid-template-columns: repeat(3, 1fr); } }
.cnn-ai-finder {
background: linear-gradient(135deg, var(--color-riviera-700) 0%, var(--color-riviera-900) 100%);
color: var(--color-fg-inverse);
border-radius: var(--radius-xl);
padding: var(--space-12);
margin-block: var(--space-12);
overflow: hidden;
position: relative;
}
.cnn-ai-finder__title {
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
color: var(--color-fg-inverse);
margin-bottom: var(--space-3);
letter-spacing: var(--tracking-tight);
}
.cnn-ai-finder__lede {
font-size: var(--text-lg);
color: var(--color-sand-200);
margin-bottom: var(--space-6);
max-width: 56ch;
}
.cnn-ai-finder__form,
.cnn-ai-finder__input {
background: rgba(255,255,255,0.1);
color: var(--color-fg-inverse);
border-color: rgba(255,255,255,0.2);
}
.cnn-ai-finder__input::placeholder { color: var(--color-sand-300); }
.cnn-newsletter {
background: var(--color-bg-surface);
border-radius: var(--radius-xl);
padding: var(--space-12);
margin-block: var(--space-12);
text-align: center;
}
.cnn-newsletter__title {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-3);
letter-spacing: var(--tracking-snug);
}
.cnn-newsletter__form {
display: flex;
gap: var(--space-2);
max-width: 480px;
margin: var(--space-6) auto 0;
flex-wrap: wrap;
}
.cnn-newsletter__form input[type="email"] { flex: 1; min-width: 240px; }
.cnn-cta-band {
background: var(--color-bg-inverse);
color: var(--color-fg-inverse);
padding-block: var(--space-16);
text-align: center;
}
.cnn-cta-band__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-sunset-300);
margin-bottom: var(--space-3);
}
.cnn-cta-band__title,
.cnn-cta-band__body {
color: var(--color-fg-inverse);
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
max-width: 32ch;
margin-inline: auto;
margin-bottom: var(--space-6);
}
.cnn-cta-band .cnn-btn { background: var(--color-action-accent); color: var(--color-action-accent-fg); }
.cnn-cta-band .cnn-btn:hover { background: var(--color-action-accent-hover); }
/* ============================================================
12. HOTEL SINGLE PAGE
============================================================ */
.cnn-hotel { display: block; }
.cnn-hotel__header {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-block: var(--space-8) var(--space-6);
padding-inline: var(--gutter-mobile);
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
}
@media (min-width: 768px) {
.cnn-hotel__header {
padding-inline: var(--gutter-tablet);
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-6);
}
}
@media (min-width: 1024px) { .cnn-hotel__header { padding-inline: var(--gutter-desktop); } }
.cnn-hotel__header-inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-hotel__header-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-hotel__header-inner { padding-inline: var(--gutter-desktop); } }
.cnn-hotel__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin-bottom: var(--space-2);
}
.cnn-hotel__title,
.cnn-hotel__name {
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
color: var(--color-fg-default);
margin: 0 0 var(--space-3);
}
.cnn-hotel__location {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-base);
color: var(--color-fg-muted);
font-style: normal;
}
.cnn-hotel__location svg { width: 16px; height: 16px; color: var(--color-action-primary); }
.cnn-hotel__rating {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
}
.cnn-hotel__rating-score {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
}
.cnn-hotel__rating-label { font-size: var(--text-sm); color: var(--color-fg-muted); }
/* Gallery mosaic */
.cnn-hotel__gallery {
max-width: var(--container-max);
margin: 0 auto var(--space-10);
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-hotel__gallery { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-hotel__gallery { padding-inline: var(--gutter-desktop); } }
.cnn-hotel__gallery-grid {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (min-width: 768px) {
.cnn-hotel__gallery-grid {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
aspect-ratio: 16 / 9;
}
.cnn-hotel__gallery-grid > :first-child {
grid-row: 1 / 3;
}
}
.cnn-hotel__gallery-tile {
position: relative;
border: 0;
padding: 0;
background: var(--color-slate-200);
cursor: pointer;
overflow: hidden;
aspect-ratio: 16 / 10;
}
@media (min-width: 768px) { .cnn-hotel__gallery-tile { aspect-ratio: auto; } }
.cnn-hotel__gallery-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-quart);
}
.cnn-hotel__gallery-tile:hover img { transform: scale(1.03); }
.cnn-hotel__gallery-tile:focus-visible {
outline: none;
box-shadow: inset 0 0 0 3px var(--color-border-focus);
}
.cnn-hotel__gallery-more {
position: absolute;
inset: 0;
background: rgba(15, 29, 54, 0.55);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: #fff;
pointer-events: none;
}
/* Hotel layout: article + sticky aside */
.cnn-hotel__layout {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
display: grid;
gap: var(--space-8);
}
@media (min-width: 768px) { .cnn-hotel__layout { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) {
.cnn-hotel__layout {
padding-inline: var(--gutter-desktop);
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--space-10);
}
}
.cnn-hotel__article,
.cnn-hotel__main {
min-width: 0;
}
.cnn-hotel__sections {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.cnn-hotel__section {
padding-block: var(--space-6);
border-top: 1px solid var(--color-border-subtle);
}
.cnn-hotel__section:first-child { border-top: 0; padding-top: 0; }
.cnn-hotel__section-title {
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
margin-bottom: var(--space-4);
}
.cnn-hotel__section-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin-bottom: var(--space-2);
}
.cnn-hotel__sticky {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--color-bg-surface);
border-top: 1px solid var(--color-border-subtle);
padding: var(--space-3) var(--gutter-mobile);
display: flex;
gap: var(--space-3);
align-items: center;
z-index: 30;
box-shadow: var(--shadow-3);
}
@media (min-width: 1024px) { .cnn-hotel__sticky { display: none; } }
.cnn-hotel__sticky .cnn-btn { flex: 1; }
.cnn-hotel__similar {
max-width: var(--container-max);
margin-inline: auto;
margin-top: var(--space-6);
padding-inline: var(--gutter-mobile);
padding-top: var(--space-8);
padding-bottom: var(--space-4);
border-top: 1px solid var(--color-border-subtle);
}
@media (min-width: 768px) { .cnn-hotel__similar { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-hotel__similar { padding-inline: var(--gutter-desktop); } }
.cnn-hotel__similar .cnn-section-header { margin-bottom: var(--space-5); }
.cnn-hotel__similar .cnn-section-title { font-size: var(--text-2xl); }
.cnn-hotel__similar .cnn-card__media { aspect-ratio: 4 / 3; }
.cnn-hotel__similar .cnn-card__body { padding: var(--space-4); gap: var(--space-1); }
.cnn-hotel__similar .cnn-card__title { font-size: var(--text-base); }
/* ============================================================
13. BOOKING ASIDE — .cnn-booking
============================================================ */
.cnn-booking {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-self: start;
height: auto;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-1);
}
@media (min-width: 1024px) {
.cnn-booking {
position: sticky;
top: calc(72px + var(--space-4));
}
}
.cnn-booking__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin: 0 0 var(--space-2);
}
.cnn-booking__price-row {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin: 0;
}
.cnn-booking__price-eur {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
color: var(--color-fg-default);
letter-spacing: var(--tracking-tight);
line-height: 1;
}
.cnn-booking__price-per {
font-size: var(--text-sm);
color: var(--color-fg-muted);
}
.cnn-booking__rating {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
margin: 0;
}
.cnn-booking__rating-score {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
padding: var(--space-2) var(--space-2);
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: 1;
background: var(--color-success-bg);
color: var(--color-success-fg);
border-radius: var(--radius-md);
letter-spacing: var(--tracking-tight);
}
.cnn-booking__rating-label {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
line-height: 1.2;
}
.cnn-booking__rating-count {
font-family: var(--font-mono);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
}
.cnn-booking__rating-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cnn-booking__cta {
width: 100%;
margin: 0;
}
.cnn-booking__cta .cta-buttons {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.cnn-booking__cta .cta-buttons > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 48px;
padding: 0 var(--space-5);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
text-decoration: none;
background: var(--color-action-primary);
color: var(--color-bg-surface);
border: 1px solid var(--color-action-primary);
border-radius: var(--radius-md);
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
cursor: pointer;
}
.cnn-booking__cta .cta-buttons > a:hover {
background: var(--color-fg-default);
border-color: var(--color-fg-default);
color: var(--color-bg-surface);
}
.cnn-booking__cta .cta-buttons > a:focus-visible {
outline: 2px solid var(--color-action-primary);
outline-offset: 2px;
}
.cnn-booking__cta .cta-buttons > a.cta-phone,
.cnn-booking__cta .cta-buttons > a.btn-call {
background: transparent;
color: var(--color-action-primary);
}
.cnn-booking__cta .cta-buttons > a.cta-phone:hover,
.cnn-booking__cta .cta-buttons > a.btn-call:hover {
background: var(--color-action-primary);
color: var(--color-bg-surface);
}
.cnn-booking__trust {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle);
font-size: var(--text-xs);
color: var(--color-fg-muted);
}
.cnn-booking__trust li,
.cnn-booking__trust-item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.cnn-booking__trust svg {
width: 16px; height: 16px;
flex-shrink: 0;
fill: none; stroke: var(--color-success-solid);
stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cnn-concierge {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-subtle);
display: flex; flex-direction: column; gap: var(--space-1);
}
.cnn-concierge__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin: 0;
}
.cnn-concierge__title {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
margin: 0;
}
.cnn-concierge__tel {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-fg-default);
text-decoration: none;
margin-top: var(--space-1);
min-height: var(--hit-target-min);
}
.cnn-concierge__tel:hover { color: var(--color-action-accent); }
.cnn-concierge__tel:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-xs);
}
.cnn-concierge__tel svg {
width: 18px; height: 18px;
flex-shrink: 0;
fill: none; stroke: var(--color-action-accent);
stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cnn-concierge__meta {
font-size: var(--text-xs);
color: var(--color-fg-muted);
margin: 0;
}
/* ============================================================
14. LIGHTBOX — .cnn-lightbox
============================================================ */
.cnn-lightbox {
position: fixed;
inset: 0;
background: rgba(8, 17, 31, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: var(--space-4);
}
.cnn-lightbox.is-open,
.cnn-lightbox[aria-hidden="false"] { display: flex; }
.cnn-lightbox__image,
.cnn-lightbox img {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius-md);
}
.cnn-lightbox__close,
.cnn-lightbox__nav {
position: absolute;
width: var(--hit-target-min);
height: var(--hit-target-min);
border-radius: var(--radius-full);
background: rgba(255,255,255,0.1);
color: #fff;
border: 0;
display: grid;
place-items: center;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out-quart);
}
.cnn-lightbox__close:hover,
.cnn-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.cnn-lightbox__close:focus-visible,
.cnn-lightbox__nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
.cnn-lightbox__close { top: var(--space-4); right: var(--space-4); }
.cnn-lightbox__nav--prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.cnn-lightbox__nav--next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.cnn-lightbox__close svg, .cnn-lightbox__nav svg { width: 20px; height: 20px; }
.cnn-lightbox__counter {
position: absolute;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: #fff;
background: rgba(255,255,255,0.1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
}
/* ============================================================
15. AMENITIES / HIGHLIGHTS / FACILITIES (hotel detail)
============================================================ */
.cnn-amenities__grid,
.cnn-facilities__grid,
.cnn-highlights__grid {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cnn-amenities__grid, .cnn-facilities__grid, .cnn-highlights__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-amenities__grid, .cnn-facilities__grid { grid-template-columns: repeat(3, 1fr); } }
.cnn-amenity,
.cnn-facility,
.cnn-highlight {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) 0;
}
.cnn-amenity__icon,
.cnn-facility__icon,
.cnn-highlight__icon {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--color-sand-100);
color: var(--color-action-primary);
flex-shrink: 0;
}
.cnn-amenity__icon svg,
.cnn-facility__icon svg,
.cnn-highlight__icon svg { width: 18px; height: 18px; }
.cnn-amenity__label,
.cnn-facility__label,
.cnn-highlight__label {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-fg-default);
}
.cnn-amenity__text,
.cnn-facility__text,
.cnn-highlight__text {
font-size: var(--text-sm);
color: var(--color-fg-muted);
line-height: var(--leading-relaxed);
}
/* ============================================================
16. ROOMS list
============================================================ */
.cnn-rooms__list,
.cnn-rooms__grid {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.cnn-room,
.cnn-room-card {
display: grid;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
align-items: center;
}
@media (min-width: 768px) {
.cnn-room, .cnn-room-card {
grid-template-columns: 160px 1fr auto;
}
}
.cnn-room__media {
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-slate-200);
}
.cnn-room__media img { width: 100%; height: 100%; object-fit: cover; }
.cnn-room__name {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
margin-bottom: var(--space-1);
}
.cnn-room__meta {
font-size: var(--text-sm);
color: var(--color-fg-muted);
line-height: var(--leading-relaxed);
}
.cnn-room__price {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
text-align: right;
}
.cnn-room__price-per {
display: block;
font-family: var(--font-sans);
font-size: var(--text-xs);
color: var(--color-fg-muted);
font-weight: var(--weight-regular);
}
.cnn-room__cta {
grid-column: 1 / -1;
}
@media (min-width: 768px) { .cnn-room__cta { grid-column: auto; } }
/* ============================================================
17. REVIEWS
============================================================ */
.cnn-reviews__summary {
display: grid;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
@media (min-width: 768px) { .cnn-reviews__summary { grid-template-columns: 280px 1fr; } }
.cnn-reviews__score {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-5);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
}
.cnn-reviews__score-value {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-5xl);
font-weight: var(--weight-bold);
color: var(--color-fg-default);
letter-spacing: var(--tracking-tight);
}
.cnn-reviews__score-label {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
}
.cnn-reviews__score-count {
font-size: var(--text-xs);
color: var(--color-fg-muted);
}
.cnn-reviews__aspects {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.cnn-reviews__aspect {
display: grid;
grid-template-columns: 120px 1fr 48px;
gap: var(--space-3);
align-items: center;
}
.cnn-reviews__aspect-label {
font-size: var(--text-sm);
color: var(--color-fg-default);
}
.cnn-reviews__aspect-bar {
height: 6px;
background: var(--color-slate-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.cnn-reviews__aspect-fill {
height: 100%;
background: var(--color-action-primary);
border-radius: var(--radius-full);
}
.cnn-reviews__aspect-value {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-align: right;
}
.cnn-reviews__list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.cnn-review {
padding: var(--space-5);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
}
.cnn-review__header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.cnn-review__avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--color-riviera-100);
display: grid;
place-items: center;
font-weight: var(--weight-semibold);
color: var(--color-riviera-800);
flex-shrink: 0;
}
.cnn-review__author { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.cnn-review__date { font-size: var(--text-xs); color: var(--color-fg-muted); }
.cnn-review__rating {
font-family: var(--font-mono);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
margin-left: auto;
}
.cnn-review__body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-fg-default); }
/* Reviews carousel (data-rv-carousel) */
[data-rv-carousel] { position: relative; }
[data-rv-carousel] .tailcategories { overflow: hidden; }
[data-rv-carousel] .tailcategories .inner { display: flex; gap: var(--space-4); transition: transform var(--duration-base) var(--ease-out-quart); }
[data-rv-carousel] .single-review { flex: 0 0 100%; }
@media (min-width: 768px) { [data-rv-carousel] .single-review { flex: 0 0 calc(50% - var(--space-2)); } }
@media (min-width: 1024px) { [data-rv-carousel] .single-review { flex: 0 0 calc(33.333% - var(--space-3)); } }
.single-review__meta {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
}
.single-review__meta-item {
display: inline-flex; align-items: center; gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-fg-muted);
}
.single-review__meta-item svg {
width: 14px; height: 14px;
flex-shrink: 0;
fill: none; stroke: currentColor;
stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.single-review__meta-item--verified { color: var(--color-success-fg); }
.single-review__meta-item--verified svg { stroke: var(--color-success-solid); }
[data-rv-carousel] .circle-buttons {
display: flex;
gap: var(--space-2);
margin-top: var(--space-4);
}
[data-rv-carousel] .circle-buttons button {
width: var(--hit-target-min);
height: var(--hit-target-min);
border-radius: var(--radius-full);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
color: var(--color-fg-default);
display: grid;
place-items: center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out-quart);
}
[data-rv-carousel] .circle-buttons button:hover:not(:disabled) {
background: var(--color-sand-50);
border-color: var(--color-border-strong);
}
[data-rv-carousel] .circle-buttons button:disabled { opacity: 0.4; cursor: not-allowed; }
[data-rv-carousel] .circle-buttons button svg { width: 18px; height: 18px; }
/* ============================================================
18. LOCATION MAP
============================================================ */
.cnn-location-map,
#map-container {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-slate-200);
}
/* ============================================================
19. SURROUNDINGS / NEARBY
============================================================ */
.cnn-surroundings__grid {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cnn-surroundings__grid { grid-template-columns: repeat(2, 1fr); } }
.cnn-surrounding {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
}
/* ============================================================
20. RELATED / SIMILAR HOTELS
============================================================ */
.cnn-related,
.cnn-similar {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cnn-related, .cnn-similar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-related, .cnn-similar { grid-template-columns: repeat(3, 1fr); } }
/* ============================================================
21. ACCORDION — .cnn-acc
============================================================ */
.cnn-acc {
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-border-subtle);
}
.cnn-acc__item { border-bottom: 1px solid var(--color-border-subtle); }
.cnn-acc__header {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) 0;
background: transparent;
border: 0;
cursor: pointer;
font: var(--weight-medium) var(--text-base)/1.4 var(--font-sans);
color: var(--color-fg-default);
text-align: left;
min-height: var(--hit-target-min);
}
.cnn-acc__icon {
color: var(--color-fg-muted);
transition: transform var(--duration-base) var(--ease-out-quart);
}
.cnn-acc__icon svg { width: 18px; height: 18px; }
.cnn-acc__item[open] .cnn-acc__icon,
.cnn-acc__item.is-open .cnn-acc__icon { transform: rotate(180deg); }
.cnn-acc__panel,
.cnn-acc__panel-inner {
padding: 0 0 var(--space-4);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-fg-default);
}
/* ============================================================
22. FOOTER — .cnn-foot
============================================================ */
.cnn-foot {
background: var(--color-riviera-900);
color: var(--color-sand-200);
padding-block: calc(var(--space-12) + 48px) var(--space-6);
margin-top: 0;
position: relative;
}
.cnn-foot::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C240,0 480,48 720,24 C960,0 1200,48 1440,24' stroke='%23DC8A6A' stroke-width='2' fill='none' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
.cnn-foot__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-foot__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-foot__inner { padding-inline: var(--gutter-desktop); } }
.cnn-foot__grid {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
margin-bottom: var(--space-12);
}
@media (min-width: 640px) { .cnn-foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); } }
.cnn-foot__brand,
.cnn-foot__col {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.cnn-foot__logo { display: inline-block; align-self: center; }
.cnn-foot__logo img,
.cnn-foot__logo svg { width: 140px; height: 140px; display: block; }
.cnn-foot__tagline { font-size: var(--text-sm); color: var(--color-sand-300); line-height: var(--leading-relaxed); max-width: 36ch; }
.cnn-foot__office,
.cnn-foot__contact { font-size: var(--text-sm); color: var(--color-sand-300); font-style: normal; line-height: var(--leading-relaxed); }
.cnn-foot__office a, .cnn-foot__contact a { color: var(--color-sand-100); }
.cnn-foot__office a:hover, .cnn-foot__contact a:hover { color: #fff; }
.cnn-foot__office-row {
display: inline-flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
}
.cnn-foot__office li + li { margin-top: var(--space-2); }
.cnn-foot__office-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-sunset-400, var(--color-sunset-500));
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.cnn-foot__heading {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-sand-50);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-2);
}
.cnn-foot__list,
.cnn-foot__nav ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
}
.cnn-foot__list a,
.cnn-foot__nav a {
font-size: var(--text-sm);
color: var(--color-sand-200);
text-decoration: none;
}
.cnn-foot__list a:hover,
.cnn-foot__nav a:hover { color: #fff; }
.cnn-foot__bottom {
padding-top: var(--space-6);
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--color-sand-400);
}
.cnn-foot__legal {
list-style: none;
margin: 0;
padding: 0;
border: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--color-sand-400);
}
.cnn-foot__legal li { display: inline-flex; }
.cnn-foot__legal a, .cnn-foot__bottom a { color: var(--color-sand-300); text-decoration: none; }
.cnn-foot__legal a:hover, .cnn-foot__bottom a:hover { color: #fff; }
/* ============================================================
23. PAGE HEADERS / BREADCRUMBS / PROSE
============================================================ */
.cnn-page-header,
.page-header {
padding-block: var(--space-10) var(--space-6);
background: var(--color-bg-page);
border-bottom: 1px solid var(--color-border-subtle);
}
.cnn-page-header__inner,
.page-header__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-page-header__inner, .page-header__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-page-header__inner, .page-header__inner { padding-inline: var(--gutter-desktop); } }
.cnn-page-title,
.page-title {
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
margin-bottom: var(--space-3);
}
.cnn-page-lede,
.page-lede {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-fg-muted);
max-width: 56ch;
}
.cnn-breadcrumbs {
background: var(--color-bg-page);
border-bottom: 1px solid var(--color-border-subtle);
}
.cnn-breadcrumbs__inner {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-3) var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-breadcrumbs__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-breadcrumbs__inner { padding-inline: var(--gutter-desktop); } }
.cnn-breadcrumbs__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.cnn-breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 24px;
min-width: 0;
max-width: 100%;
}
.cnn-breadcrumbs__link {
color: var(--color-fg-muted);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out-quart);
}
.cnn-breadcrumbs__link:hover { color: var(--color-fg-default); }
.cnn-breadcrumbs__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.cnn-breadcrumbs__current {
color: var(--color-fg-default); font-weight: var(--weight-medium);
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.cnn-breadcrumbs__sep { color: var(--color-fg-subtle); user-select: none; }
/* Legacy fallback */
.breadcrumbs { display: none; }
.cnn-prose,
.rv-prose,
.entry-content,
.post-content {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-fg-default);
max-width: 64ch;
}
.cnn-prose > * + *,
.rv-prose > * + *,
.entry-content > * + *,
.post-content > * + * { margin-top: var(--space-4); }
.cnn-prose h2, .rv-prose h2, .entry-content h2, .post-content h2 { margin-top: var(--space-10); font-size: var(--text-2xl); }
.cnn-prose h3, .rv-prose h3, .entry-content h3, .post-content h3 { margin-top: var(--space-8); font-size: var(--text-xl); }
.cnn-prose p, .rv-prose p, .entry-content p, .post-content p { line-height: var(--leading-relaxed); }
.cnn-prose a:not(.outline-button), .rv-prose a:not(.outline-button),
.entry-content a:not(.outline-button), .post-content a:not(.outline-button) {
color: var(--color-fg-link);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.cnn-prose ul, .rv-prose ul, .entry-content ul, .post-content ul,
.cnn-prose ol, .rv-prose ol, .entry-content ol, .post-content ol {
padding-left: var(--space-5);
list-style: revert;
}
.cnn-prose li + li, .rv-prose li + li, .entry-content li + li, .post-content li + li { margin-top: var(--space-2); }
.cnn-prose blockquote, .rv-prose blockquote, .entry-content blockquote {
padding-left: var(--space-5);
border-left: 3px solid var(--color-action-accent);
font-size: var(--text-lg);
color: var(--color-fg-muted);
font-style: italic;
}
.cnn-prose img, .rv-prose img, .entry-content img { border-radius: var(--radius-md); }
.cnn-prose hr, .rv-prose hr, .entry-content hr {
border: 0;
height: 1px;
background: var(--color-border-subtle);
margin-block: var(--space-8);
}
/* ============================================================
24. SEARCH / FILTER BAR (.cnn-search*, .rv-filterbar)
============================================================ */
.cnn-search,
.cnn-search-bar,
.rv-filterbar,
.hotels-search-filter {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-1);
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: end;
}
.cnn-search__field,
.rv-filterbar__field {
flex: 1 1 200px;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.cnn-search__label,
.rv-filterbar__label {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
}
/* ============================================================
25. .rv-* LEGACY (Review Vault) — minimal overrides on Cannes palette
============================================================ */
.rv-hotel-card,
.rv-search-card,
.rv-blog-card,
.rv-card {
display: flex;
flex-direction: column;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--duration-base) var(--ease-out-quart), box-shadow var(--duration-base) var(--ease-out-quart);
text-decoration: none;
color: inherit;
}
.rv-hotel-card:hover, .rv-search-card:hover, .rv-blog-card:hover, .rv-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.rv-card__media,
.rv-hotel-card__media,
.rv-blog-card__media,
.rv-search-card__media {
aspect-ratio: 16 / 10;
background: var(--color-slate-200);
overflow: hidden;
}
.rv-card__media img, .rv-hotel-card__media img,
.rv-blog-card__media img, .rv-search-card__media img {
width: 100%; height: 100%; object-fit: cover;
}
/* rv-page wrappers (used by archive, blog index, generic listing pages) */
.rv-page__section { padding-block: var(--space-12); }
@media (min-width: 768px) { .rv-page__section { padding-block: var(--space-16); } }
@media (min-width: 1024px) { .rv-page__section { padding-block: var(--space-20); } }
.rv-page__section--tight { padding-block: var(--space-10) var(--space-12); }
@media (min-width: 1024px) { .rv-page__section--tight { padding-block: var(--space-12) var(--space-20); } }
.rv-page__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .rv-page__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .rv-page__inner { padding-inline: var(--gutter-desktop); } }
/* rv-journal grid (archive of blog posts) */
.rv-journal__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 640px) { .rv-journal__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rv-journal__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.rv-blog-card__category {
font-family: var(--font-mono);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin: var(--space-3) var(--space-5) 0;
}
.rv-blog-card__title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
color: var(--color-fg-default);
margin: var(--space-1) var(--space-5) 0;
}
.rv-blog-card__deck {
font-size: var(--text-sm);
color: var(--color-fg-muted);
line-height: var(--leading-relaxed);
margin: var(--space-2) var(--space-5) 0;
}
.rv-blog-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
align-items: center;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
margin: var(--space-3) var(--space-5) var(--space-5);
}
.rv-blog-card__meta-sep { color: var(--color-fg-subtle); }
.rv-card__body,
.rv-hotel-card__body {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.rv-card__title, .rv-hotel-card__title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--color-fg-default);
}
.rv-section,
.rv-page-section {
padding-block: var(--space-12);
}
@media (min-width: 1024px) { .rv-section, .rv-page-section { padding-block: var(--space-16); } }
.rv-page-hero {
padding-block: var(--space-12);
background: var(--color-bg-page);
border-bottom: 1px solid var(--color-border-subtle);
}
.rv-page-hero__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .rv-page-hero__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .rv-page-hero__inner { padding-inline: var(--gutter-desktop); } }
.rv-page-hero__copy {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 60ch;
}
.rv-page-hero__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin: 0;
}
.rv-page-hero__title {
font-family: var(--font-sans);
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
color: var(--color-fg-default);
margin: 0;
}
@media (min-width: 1024px) { .rv-page-hero__title { font-size: var(--text-5xl); } }
.rv-page-hero__deck {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-fg-muted);
margin: var(--space-2) 0 0;
max-width: 60ch;
}
.rv-amenities,
.rv-rooms,
.rv-reviews,
.rv-gallery,
.rv-booking,
.rv-newsletter,
.rv-concierge,
.rv-identity {
/* Layout already handled by .cnn-* equivalents in shared markup; legacy classes inherit. */
color: var(--color-fg-default);
}
.rv-hotels-search,
.rv-search {
display: flex;
flex-direction: column;
gap: 0;
}
.rv-search__main { display: flex; flex-direction: column; gap: 0; }
.rv-search__inner {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .rv-search__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .rv-search__inner { padding-inline: var(--gutter-desktop); } }
.rv-search__hero {
padding-block: var(--space-10) var(--space-8);
background: var(--color-bg-page);
border-bottom: 1px solid var(--color-border-subtle);
}
@media (min-width: 1024px) { .rv-search__hero { padding-block: var(--space-12) var(--space-10); } }
.rv-search__eyebrow {
font-family: var(--font-mono); font-size: var(--text-xs);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted); margin: 0 0 var(--space-2);
}
.rv-search__title {
font-family: var(--font-sans);
font-size: var(--text-3xl); font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
color: var(--color-fg-default); margin: 0 0 var(--space-3);
overflow-wrap: break-word; word-break: break-word;
}
@media (min-width: 1024px) { .rv-search__title { font-size: var(--text-4xl); } }
.rv-search__title em {
font-style: italic;
color: var(--color-action-accent, var(--color-sunset-700));
font-weight: var(--weight-bold);
}
.rv-search__deck {
font-size: var(--text-base); color: var(--color-fg-muted);
max-width: 56ch; margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
}
@media (min-width: 1024px) { .rv-search__deck { font-size: var(--text-lg); } }
/* Inline refine-search form */
.rv-search-form--inline { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; }
.rv-search-form__label {
font-family: var(--font-mono); font-size: var(--text-2xs);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
}
.rv-search-form__row {
display: flex; align-items: center;
gap: var(--space-2);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
transition: border-color var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart);
}
.rv-search-form__row:focus-within {
border-color: var(--color-action-primary);
box-shadow: var(--shadow-focus);
}
.rv-search-form__icon {
width: 18px; height: 18px;
color: var(--color-fg-muted);
flex-shrink: 0;
}
.rv-search-form__input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: var(--space-2) 0;
font: var(--weight-regular) var(--text-base)/1.4 var(--font-sans);
color: var(--color-fg-default);
}
.rv-search-form__input:focus-visible { outline: none; }
.rv-search-form__input::placeholder { color: var(--color-fg-muted); }
.rv-search-form__submit {
flex-shrink: 0;
height: 40px; padding: 0 var(--space-4);
background: var(--color-action-primary);
color: var(--color-action-primary-fg, #fff);
border: 0; border-radius: var(--radius-sm);
font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out-quart);
}
.rv-search-form__submit:hover { background: var(--color-action-primary-hover); }
.rv-search-form__submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Results list */
.rv-search__list { padding-block: var(--space-10); }
@media (min-width: 1024px) { .rv-search__list { padding-block: var(--space-12); } }
.rv-search__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .rv-search__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rv-search__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.rv-search__item { display: block; margin: 0; padding: 0; }
/* Card type label inside .rv-blog-card on search */
.rv-search-card__sep { margin-inline: var(--space-1); color: var(--color-fg-subtle); }
.rv-search-card__loc { color: var(--color-fg-muted); }
/* Empty / no-query / no-results state */
.rv-search__empty {
padding-block: var(--space-16) var(--space-20);
text-align: center;
}
.rv-search__empty .rv-search__inner {
display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.rv-search__hint {
font-size: var(--text-lg); color: var(--color-fg-muted);
max-width: 56ch; margin: 0;
line-height: var(--leading-relaxed);
}
/* ============================================================
26. UTILITIES — reveal, divider, stack, row, hidden
============================================================ */
.cnn-reveal {
opacity: 0;
transform: translateY(8px);
transition: opacity var(--duration-slow) var(--ease-out-quart), transform var(--duration-slow) var(--ease-out-quart);
}
.cnn-reveal.is-visible,
.cnn-reveal.is-active {
opacity: 1;
transform: translateY(0);
}
.cnn-divider,
.cn-divider,
.rv-divider {
border: 0;
height: 1px;
background: var(--color-border-subtle);
margin: 0;
}
.cnn-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cnn-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cnn-stars,
.cn-stars { display: inline-flex; gap: 1px; color: var(--color-sunset-500); }
.cnn-stars svg, .cn-stars svg { width: 14px; height: 14px; }
.cnn-mono,
.tabular {
font-family: var(--font-mono);
font-feature-settings: "tnum", "zero";
}
.is-hidden, .hidden, [hidden] { display: none !important; }
/* ============================================================
27. WORDPRESS BLOCKS / CORE
============================================================ */
.wp-block-image img,
.gallery img,
.size-full img,
.size-large img,
.size-medium img,
.size-thumbnail img { border-radius: var(--radius-sm); max-width: 100%; height: auto; }
.alignwide { max-width: min(100%, calc(var(--container-max) + 96px)); margin-inline: auto; }
.alignfull { max-width: 100%; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin-right: var(--space-4); margin-bottom: var(--space-3); }
.alignright { float: right; margin-left: var(--space-4); margin-bottom: var(--space-3); }
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3);
margin-block: var(--space-4);
}
.gallery-item { margin: 0; }
.gallery-caption { font-size: var(--text-xs); color: var(--color-fg-muted); margin-top: var(--space-1); }
.wp-block-button__link,
.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--hit-target-min);
padding: 0 var(--space-5);
border-radius: var(--radius-md);
background: var(--color-action-primary);
color: var(--color-action-primary-fg);
font-weight: var(--weight-medium);
text-decoration: none;
}
.wp-block-button__link:hover { background: var(--color-action-primary-hover); color: var(--color-action-primary-fg); }
/* ============================================================
28. RESPONSIVE OVERRIDES (single-hotel mobile etc.)
============================================================ */
@media (max-width: 1023px) {
.cnn-booking { position: static; max-height: none; overflow: visible; }
.cnn-hotel__sticky { padding: var(--space-3) var(--gutter-mobile); }
body.single-hotels { padding-bottom: 84px; }
}
@media (max-width: 639px) {
h1, .cnn-hero__title, .cnn-page-title, .cnn-hotel__title { font-size: var(--text-4xl); }
.cnn-section__title, .cnn-section-title { font-size: var(--text-2xl); }
.cnn-card__body, .cnn-room, .cnn-review, .cnn-booking { padding: var(--space-4); }
.cnn-hero { padding-block: var(--space-10); }
.cnn-section, .cnn-band { padding-block: var(--space-10); }
}
/* ============================================================
30. EXTRA BEM ELEMENTS — full coverage for templates
============================================================ */
/* ---- Nav brand text + search drawer internals ---- */
.cnn-nav__brand-name { font-weight: var(--weight-semibold); font-size: var(--text-base); letter-spacing: var(--tracking-snug); }
.cnn-nav__search-inner {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-6) var(--gutter-mobile);
}
@media (min-width: 768px) { .cnn-nav__search-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-nav__search-inner { padding-inline: var(--gutter-desktop); } }
.cnn-nav__search-row {
display: flex; align-items: center; gap: var(--space-3);
border-bottom: 2px solid var(--color-action-primary);
padding-bottom: var(--space-2);
}
.cnn-nav__search-icon {
width: 20px; height: 20px; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
color: var(--color-fg-muted);
}
.cnn-nav__search-icon svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
.cnn-nav__search-hint {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-fg-muted);
margin: var(--space-3) 0 0;
letter-spacing: var(--tracking-caps);
}
/* ---- Page wrappers ---- */
.cnn-home, .rv-main, .rv-search-results, .rv-rooms, .rv-amenities, .rv-rules, .rv-reviews-section, .rv-nearby, .rv-overview { display: block; }
.rv-main__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .rv-main__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .rv-main__inner { padding-inline: var(--gutter-desktop); } }
.rv-main__content { display: flex; flex-direction: column; gap: var(--space-12); }
/* ---- Hero extras ---- */
.cnn-hero__type { display: flex; flex-direction: column; gap: var(--space-2); }
/* ---- Featured block ---- */
.cnn-featured { padding-block: var(--space-12); }
@media (min-width: 1024px) { .cnn-featured { padding-block: var(--space-16); } }
.cnn-featured__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .cnn-featured__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-featured__inner { padding-inline: var(--gutter-desktop); } }
.cnn-featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); flex-wrap: wrap; }
.cnn-featured__see-all { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-fg-link); text-decoration: underline; text-underline-offset: 3px; }
.cnn-featured__see-all:hover { color: var(--color-fg-link-hover); }
/* ---- Editorial ---- */
.cnn-editorial__type { display: flex; flex-direction: column; font-family: var(--font-sans); font-size: var(--text-base); text-transform: none; letter-spacing: normal; color: var(--color-fg-default); }
.cnn-editorial__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-fg-accent); margin: 0 0 var(--space-3); }
.cnn-editorial__title { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--color-fg-default); margin: 0 0 var(--space-4); text-transform: none; max-width: 22ch; }
@media (min-width: 1024px) { .cnn-editorial__title { font-size: var(--text-4xl); } }
.cnn-editorial__body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-fg-default); text-transform: none; letter-spacing: normal; margin: 0 0 var(--space-5); max-width: 60ch; }
.cnn-editorial__byline { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-fg-muted); margin: 0; }
.cnn-editorial__media { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-slate-200); box-shadow: var(--shadow-2); }
.cnn-editorial__media img { width: 100%; height: 100%; object-fit: cover; }
/* ---- Listings (homepage + /hotels/) ---- */
.cnn-listings { padding-block: var(--space-12); }
@media (min-width: 1024px) { .cnn-listings { padding-block: var(--space-16); } }
.cnn-listings__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .cnn-listings__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-listings__inner { padding-inline: var(--gutter-desktop); } }
.cnn-listings__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); flex-wrap: wrap; }
.cnn-listings__count { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-fg-muted); }
.cnn-listings__layout {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.cnn-listings__layout {
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--space-10);
align-items: start;
}
}
.cnn-listings__more { display: flex; justify-content: center; margin-top: var(--space-8); }
/* ---- Filters ---- */
.cnn-filters {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
@media (min-width: 1024px) {
.cnn-filters {
position: sticky;
top: calc(72px + var(--space-4));
margin-bottom: 0;
}
}
.cnn-filters__group { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.cnn-filters__group:last-child { padding-bottom: 0; border-bottom: 0; }
.cnn-filters__title {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
margin: 0;
}
.cnn-filters__list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.cnn-filters__list li { display: inline-flex; }
.cnn-filters__list a {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
min-height: 32px;
background: var(--color-bg-page, transparent);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-fg-default);
text-decoration: none;
line-height: 1;
transition: background var(--duration-fast) var(--ease-out-quart),
border-color var(--duration-fast) var(--ease-out-quart),
color var(--duration-fast) var(--ease-out-quart);
}
.cnn-filters__list a:hover {
background: var(--color-action-primary);
border-color: var(--color-action-primary);
color: var(--color-action-primary-fg, #fff);
}
.cnn-filters__list a:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* ---- USP item (full BEM block) ---- */
.cnn-usp { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) 0; }
.cnn-usp__num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-action-primary); letter-spacing: var(--tracking-tight); line-height: 1; }
.cnn-usp__body { font-size: var(--text-sm); color: var(--color-fg-muted); line-height: var(--leading-relaxed); }
/* ---- CTA band extras ---- */
.cnn-cta-band__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .cnn-cta-band__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cnn-cta-band__inner { padding-inline: var(--gutter-desktop); } }
.cnn-cta-band__row { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; width: 100%; }
@media (min-width: 768px) { .cnn-cta-band__row { flex-direction: row; justify-content: center; flex-wrap: wrap; } }
.cnn-cta-band__form { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 480px; margin-inline: auto; width: 100%; }
.cnn-cta-band__input {
flex: 1; min-width: 220px;
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
color: #fff;
}
@media (max-width: 767px) {
.cnn-cta-band__input { width: 100%; min-width: 0; }
}
.cnn-cta-band__input::placeholder { color: rgba(255,255,255,0.5); }
.cnn-cta-band__input:focus-visible { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.cnn-cta-band__fineprint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-sand-300); text-align: left; align-self: stretch; }
/* ---- Footer extras ---- */
.cnn-foot__top {
display: grid; gap: var(--space-8);
grid-template-columns: 1fr;
margin-bottom: var(--space-12);
}
@media (min-width: 640px) { .cnn-foot__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-foot__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); } }
.cnn-foot__col-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-sand-50); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); }
.cnn-foot__copy { font-size: var(--text-sm); color: var(--color-sand-300); line-height: var(--leading-relaxed); }
/* ---- Footer: mobile centred layout ---- */
@media (max-width: 639px) {
.cnn-foot__top { text-align: center; }
.cnn-foot__brand,
.cnn-foot__col { align-items: center; }
.cnn-foot__tagline { margin-inline: auto; }
.cnn-foot__office { padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.cnn-foot__office li { width: 100%; display: flex; justify-content: center; }
.cnn-foot__office-row { justify-content: center; }
.cnn-foot__list,
.cnn-foot__nav ul { align-items: center; }
.cnn-foot__legal,
.cnn-foot__bottom { justify-content: center; text-align: center; }
}
/* ---- Hotel header extras ---- */
.cnn-hotel__header-type {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.cnn-hotel__header-eyebrow {
font-family: var(--font-mono); font-size: var(--text-2xs);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted); margin: 0;
}
.cnn-hotel__header-title {
font-family: var(--font-sans);
font-size: var(--text-4xl); font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
text-transform: none;
color: var(--color-fg-default); margin: 0 0 var(--space-3);
}
.cnn-hotel__header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: var(--text-base); color: var(--color-fg-muted); }
.cnn-hotel__header-rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.cnn-hotel__header-score {
font-family: var(--font-mono); font-feature-settings: "tnum";
font-size: var(--text-base); font-weight: var(--weight-semibold);
padding: var(--space-1) var(--space-2);
background: var(--color-success-bg); color: var(--color-success-fg);
border-radius: var(--radius-sm);
}
.cnn-hotel__header-rating-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-fg-default); }
.cnn-hotel__header-score-sep { color: var(--color-fg-subtle); }
.cnn-hotel__header-deck {
font-family: var(--font-sans);
font-size: var(--text-lg); font-weight: var(--weight-regular);
color: var(--color-fg-muted); line-height: var(--leading-relaxed);
text-transform: none; letter-spacing: 0;
margin-top: var(--space-3); max-width: 64ch;
}
.cnn-hotel__header-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.cnn-hotel__similar-grid {
display: grid; gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cnn-hotel__similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cnn-hotel__similar-grid { grid-template-columns: repeat(4, 1fr); } }
/* ---- Nearby block (single hotel) ---- */
.cnn-nearby { display: flex; flex-direction: column; gap: var(--space-4); }
.cnn-nearby__grid {
display: grid; gap: var(--space-3);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cnn-nearby__grid { grid-template-columns: repeat(2, 1fr); } }
.cnn-nearby__card {
padding: var(--space-4);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
}
.cnn-nearby__card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.cnn-nearby__group-icon { color: var(--color-action-primary); display: inline-flex; }
.cnn-nearby__group-icon svg { width: 18px; height: 18px; }
.cnn-nearby__card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-fg-default); }
.cnn-nearby__card-count { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--text-xs); color: var(--color-fg-muted); margin-left: auto; }
.cnn-nearby__list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.cnn-nearby__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.cnn-nearby__place { color: var(--color-fg-default); }
.cnn-nearby__dist { font-family: var(--font-mono); font-feature-settings: "tnum"; color: var(--color-fg-muted); margin-left: auto; }
/* ---- Rating chip ---- */
.cnn-rating { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-feature-settings: "tnum"; }
.cnn-rating__score { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-fg-default); }
.cnn-rating__sep { color: var(--color-fg-subtle); }
/* ---- Price helper ---- */
.cnn-price__per { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-fg-muted); }
/* ============================================================
31. LEGACY .rv-* — coverage for templates that still use Review Vault BEM
============================================================ */
/* rv-section structure */
.rv-section__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .rv-section__inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .rv-section__inner { padding-inline: var(--gutter-desktop); } }
.rv-section__header { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.rv-section__eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-fg-muted); }
.rv-section__title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); color: var(--color-fg-default); }
.rv-section__deck { font-size: var(--text-base); color: var(--color-fg-muted); max-width: 56ch; line-height: var(--leading-relaxed); }
/* rv-overview */
/* В hotel layout .rv-main__inner живёт внутри узкой grid-колонки .cnn-hotel__article,
поэтому собственные max-width/padding-inline (для page-level контейнера) лишние —
сужают prose уже сужённого столбца. Сбрасываем именно для этого контекста. */
.cnn-hotel__article .rv-main__inner { max-width: none; padding-inline: 0; }
.rv-overview { display: flex; flex-direction: column; gap: var(--space-3); }
.rv-overview__body {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-fg-default);
max-width: none;
}
.rv-overview__body > * + * { margin-top: var(--space-4); }
.rv-overview__body h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.rv-overview__body h3 { margin-top: var(--space-10); margin-bottom: var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.rv-overview__body h4 { margin-top: var(--space-8); margin-bottom: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.rv-overview__body > :first-child { margin-top: 0; }
/* rv-keyfacts grid — карточки «icon-left / label-top / value-bottom».
Grid внутри .rv-keyfact: icon в первой колонке span 2 ряда, label
сверху-справа, value снизу-справа. nowrap гарантирует, что
«3:00 · 12:00» и «Free Wi-Fi» не разорвутся. */
.rv-keyfacts { padding-top: 0; padding-bottom: var(--space-6); }
.rv-keyfacts__inner {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
.rv-keyfacts__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rv-keyfact {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: var(--space-3);
row-gap: 2px;
align-items: center;
padding: var(--space-4);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rv-keyfact:hover {
border-color: var(--color-action-primary);
}
.rv-keyfact__icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
color: var(--color-action-primary);
flex-shrink: 0;
display: inline-flex;
}
.rv-keyfact__icon svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.rv-keyfact__label {
grid-row: 1;
grid-column: 2;
align-self: end;
justify-self: center;
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.2;
font-weight: 500;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--color-fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rv-keyfact__value {
grid-row: 2;
grid-column: 2;
align-self: start;
justify-self: center;
text-align: center;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: 1.25;
color: var(--color-fg-default);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rv-keyfact__value > span {
margin-left: 4px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--color-fg-muted);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 480px) {
.rv-keyfact { padding: var(--space-3); column-gap: var(--space-2); }
.rv-keyfact__icon svg { width: 24px; height: 24px; }
}
/* rv-amenities — категории удобств: 1/2/3-col grid карточек.
В каждой карточке: header (категория-иконка + title) и список chips
(по одному amenity на chip с галочкой). HTML структура — facilities.php. */
.rv-amenities__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.rv-amenities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.rv-amenities__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-amenities__group {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rv-amenities__group:hover {
border-color: var(--color-border-default);
box-shadow: var(--shadow-2);
}
.rv-amenities__group-head {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border-subtle);
}
.rv-amenities__group-head > svg {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--color-action-primary);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.rv-amenities__group-title {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
line-height: 1.25;
letter-spacing: var(--tracking-snug);
}
.rv-amenities__items {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.rv-amenities__item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--space-1) var(--space-3);
background: var(--color-bg-page);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-fg-default);
transition: border-color 120ms ease, background-color 120ms ease;
}
.rv-amenities__item:hover {
border-color: var(--color-border-default);
background: var(--color-bg-surface);
}
.rv-amenities__check {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--color-success-solid);
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* rv-location — объединённый блок: address card + map + nearby grid */
.rv-location .rv-section__inner > * + * { margin-top: var(--space-5); }
.rv-location .rv-section__header { margin-bottom: 0; }
.rv-location__address-card {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-1);
}
.rv-location__address-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--color-action-primary);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.rv-location__address-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rv-location__address-label {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-fg-muted);
}
.rv-location__address-card address {
margin: 0;
font-style: normal;
font-size: var(--text-base);
line-height: 1.4;
color: var(--color-fg-default);
}
.rv-location__map {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-subtle);
background: var(--color-slate-200);
}
.rv-location__sub-header {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.cnn-nearby__card {
box-shadow: var(--shadow-1);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cnn-nearby__card:hover {
border-color: var(--color-border-default);
box-shadow: var(--shadow-2);
}
.cnn-nearby__card-head > svg {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--color-action-primary);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (min-width: 1024px) {
.cnn-nearby__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* rv-rooms — каталог комнат: 1/2/3-col grid с hover-lift, имя + цена в одну
строку, общая CTA-кнопка ниже списка. Структура HTML (rooms.php):
ul.rv-rooms__list > li.rv-rooms__item > {.rv-rooms__row, .rv-rooms__meta}
.rv-rooms__row содержит .rv-rooms__name + .rv-rooms__price (inline). */
.rv-rooms__list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.rv-rooms__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.rv-rooms__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-rooms__item {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.rv-rooms__item:hover {
border-color: var(--color-border-default);
box-shadow: var(--shadow-2);
transform: translateY(-2px);
}
.rv-rooms__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
}
.rv-rooms__name {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
line-height: 1.3;
letter-spacing: var(--tracking-snug);
min-width: 0;
flex: 1;
}
.rv-rooms__price {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
flex-shrink: 0;
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-action-primary);
letter-spacing: var(--tracking-tight);
line-height: 1;
white-space: nowrap;
}
.rv-rooms__from {
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
color: var(--color-fg-muted);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.rv-rooms__meta {
margin: 0;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--color-fg-muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.rv-rooms__meta-sep {
color: var(--color-border-default);
font-weight: var(--weight-medium);
user-select: none;
}
.rv-rooms__cta {
display: flex;
justify-content: center;
margin-top: var(--space-6);
}
.rv-rooms__book {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-width: 220px;
height: 48px;
padding: 0 var(--space-6);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
text-decoration: none;
background: var(--color-action-primary);
color: var(--color-bg-surface);
border: 1px solid var(--color-action-primary);
border-radius: var(--radius-md);
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
cursor: pointer;
}
.rv-rooms__book:hover {
background: var(--color-fg-default);
border-color: var(--color-fg-default);
color: var(--color-bg-surface);
transform: translateY(-1px);
}
.rv-rooms__book:focus-visible {
outline: 2px solid var(--color-action-primary);
outline-offset: 3px;
}
.rv-rooms__book svg {
width: 16px;
height: 16px;
transition: transform 120ms ease;
}
.rv-rooms__book:hover svg { transform: translateX(2px); }
/* rv-rules grid */
.rv-rules { display: flex; flex-direction: column; gap: var(--space-4); }
.rv-rules__grid {
display: grid; gap: var(--space-5);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .rv-rules__grid { grid-template-columns: repeat(2, 1fr); } }
.rv-rules__group { display: flex; flex-direction: column; gap: var(--space-2); }
.rv-rules__group-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-fg-default); }
.rv-rules__list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.rv-rules__item { font-size: var(--text-sm); color: var(--color-fg-default); line-height: var(--leading-relaxed); padding-left: var(--space-4); position: relative; }
.rv-rules__item::before { content: "·"; position: absolute; left: 4px; color: var(--color-action-primary); font-weight: var(--weight-bold); }
/* rv-reviews — секция «What guests say»: aspects-grid + карточки отзывов
с собственной обвязкой, score-badge, цветовое разделение Liked / Could be
improved, modal dialog для длинных отзывов. */
.rv-reviews-section { padding-block: var(--space-8); }
/* Hotel sections — компактнее, чем общий .rv-section page-padding,
чтобы блоки на странице отеля не разрывались огромными интервалами. */
.cnn-hotel__sections > .rv-section { padding-block: var(--space-4); }
@media (min-width: 768px) {
.cnn-hotel__sections > .rv-section { padding-block: var(--space-6); }
}
.rv-reviews__carousel { display: flex; flex-direction: column; gap: var(--space-4); }
/* Aspects: 2-col grid на десктопе */
.rv-reviews__aspects {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3) var(--space-6);
margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
.rv-reviews__aspects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rv-review-aspect { display: flex; flex-direction: column; gap: 6px; }
.rv-review-aspect__header { display: flex; justify-content: space-between; align-items: center; }
.rv-review-aspect__label {
font-size: var(--text-sm);
color: var(--color-fg-default);
font-weight: var(--weight-medium);
}
.rv-review-aspect__value {
font-family: var(--font-mono); font-feature-settings: "tnum";
font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--color-fg-default);
}
.rv-review-aspect__track {
height: 8px;
background: var(--color-bg-page);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-full);
overflow: hidden;
}
.rv-review-aspect__fill {
height: 100%;
background: var(--color-action-primary);
border-radius: var(--radius-full);
transition: width 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* Review card — полноценная обвязка с hover-усилением тени */
.single-review {
display: flex; flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.single-review:hover {
border-color: var(--color-border-default);
box-shadow: var(--shadow-2);
}
.single-review__head {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.single-review__head-text {
display: flex; flex-direction: column;
gap: var(--space-2);
min-width: 0; flex: 1;
}
.single-review .title {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-fg-default);
line-height: 1.25;
letter-spacing: var(--tracking-snug);
}
.single-review .score {
display: inline-flex;
align-items: center; justify-content: center;
flex-shrink: 0;
min-width: 52px;
padding: var(--space-2) var(--space-3);
font-family: var(--font-mono); font-feature-settings: "tnum";
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: 1;
background: var(--color-success-bg);
color: var(--color-success-fg);
border-radius: var(--radius-md);
letter-spacing: var(--tracking-tight);
}
/* Review body — split «Liked» / «Could be improved» */
.reviews-text {
display: flex; flex-direction: column;
gap: var(--space-3);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-fg-default);
}
.reviews-text p { margin: 0; }
.single-review__pos,
.single-review__neg {
display: flex; flex-direction: column;
gap: var(--space-1);
}
.single-review__split-label {
margin: 0 0 var(--space-1);
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.single-review__pos .single-review__split-label { color: var(--color-success-fg); }
.single-review__neg .single-review__split-label { color: var(--color-fg-muted); }
.single-review__pos .single-review__split-label::before { content: "+ "; }
.single-review__neg .single-review__split-label::before { content: "− "; }
/* Read more — ghost text-button */
.read-more {
align-self: flex-start;
margin-top: calc(var(--space-1) * -1);
padding: 0;
background: none; border: 0;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-action-primary);
cursor: pointer;
text-underline-offset: 3px;
text-decoration: underline;
text-decoration-thickness: 1px;
}
.read-more:hover { text-decoration-thickness: 2px; }
.read-more:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 3px; }
/* Native