@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"); :root {  --bel-primary-900: #1A1814;
--bel-primary-800: #2C2820;
--bel-primary-700: #3E382E;
--bel-primary-600: #5C554A;
--bel-primary-500: #6E665C;
--bel-primary-400: #7A7268;
--bel-primary-300: #C4BCB0;
--bel-primary-200: #DDD8D0;
--bel-primary-100: #EDEAE5;
--bel-primary-50:  #F6F4F1; --bel-secondary-900: #0C2340;
--bel-secondary-800: #133158;
--bel-secondary-700: #1B4370;
--bel-secondary-600: #245B8E;
--bel-secondary-500: #2E74AC;
--bel-secondary-400: #5294C4;
--bel-secondary-300: #356D8E;
--bel-secondary-200: #B5D4EA;
--bel-secondary-100: #DBE9F4;
--bel-secondary-50:  #EFF5FA; --bel-accent-700: #8B3A1F;
--bel-accent-600: #A8472A;
--bel-accent-500: #B5522F;
--bel-accent-400: #D97B5A;
--bel-accent-300: #E8A488;
--bel-accent-200: #F2CFC0;
--bel-accent-100: #FAE8E0; --bel-white:     #FFFFFF;
--bel-off-white: #FAFAF8;
--bel-black:     #0F0E0C; --bel-success:       #3A7D44;
--bel-success-light: #E8F3EA;
--bel-warning:       #946B10;
--gold:              #946B10;
--bel-warning-light: #FBF3E0;
--bel-error:         #B83232;
--bel-error-light:   #FAEAEA;
--bel-info:          var(--bel-secondary-500);
--bel-info-light:    var(--bel-secondary-100); --bel-gradient-dusk:       linear-gradient(135deg, #1A1814 0%, #0C2340 50%, #2E74AC 100%);
--bel-gradient-confluence:  linear-gradient(180deg, #245B8E 0%, #133158 100%);
--bel-gradient-warm-fade:   linear-gradient(180deg, rgba(198,93,58,0.08) 0%, rgba(198,93,58,0) 100%);
--bel-gradient-card-hover:  linear-gradient(180deg, rgba(26,24,20,0) 40%, rgba(26,24,20,0.85) 100%); --bel-font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
--bel-font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
--bel-font-mono:    "IBM Plex Mono", "Courier New", monospace;
--bel-text-display:  3.5rem;
--bel-text-h1:       2.75rem;
--bel-text-h2:       2rem;
--bel-text-h3:       1.5rem;
--bel-text-h4:       1.25rem;
--bel-text-h5:       1.0625rem;
--bel-text-h6:       1rem;
--bel-text-body:     1rem;
--bel-text-body-lg:  1.125rem;
--bel-text-small:    1rem;
--bel-text-caption:  1rem;
--bel-text-price:    1.75rem;
--bel-lh-display: 1.05;
--bel-lh-h1:      1.1;
--bel-lh-h2:      1.2;
--bel-lh-h3:      1.3;
--bel-lh-h4:      1.35;
--bel-lh-body:    1.65;
--bel-lh-small:   1.55;
--bel-lh-caption: 1.5;
--bel-ls-display: -0.02em;
--bel-ls-h1:      -0.015em;
--bel-ls-h2:      -0.01em;
--bel-ls-h3:      -0.005em;
--bel-ls-h6:      0.1em; --bel-space-2xs: 0.25rem;
--bel-space-xs:  0.5rem;
--bel-space-sm:  0.75rem;
--bel-space-md:  1rem;
--bel-space-lg:  1.5rem;
--bel-space-xl:  2rem;
--bel-space-2xl: 3rem;
--bel-space-3xl: 4rem;
--bel-space-4xl: 6rem;
--bel-space-5xl: 8rem; --bel-container-max:     1280px;
--bel-container-narrow:  960px;
--bel-container-text:    720px;
--bel-container-padding: 1.5rem; --bel-shadow-subtle:   0 1px 3px rgba(26,24,20,0.06), 0 1px 2px rgba(26,24,20,0.04);
--bel-shadow-medium:   0 4px 16px rgba(26,24,20,0.08), 0 2px 6px rgba(26,24,20,0.05);
--bel-shadow-dramatic: 0 12px 40px rgba(26,24,20,0.12), 0 4px 12px rgba(26,24,20,0.06);
--bel-shadow-inner:    inset 0 2px 4px rgba(26,24,20,0.06);
--bel-shadow-glow:     0 0 0 3px rgba(46,116,172,0.2); --bel-radius-none: 0;
--bel-radius-sm:   4px;
--bel-radius-md:   8px;
--bel-radius-lg:   12px;
--bel-radius-xl:   16px;
--bel-radius-full: 9999px; --bel-transition-fast:    150ms ease-out;
--bel-transition-default: 250ms ease-in-out;
--bel-transition-slow:    400ms ease-in-out;
--bel-transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
--bel-transition-slide:   350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
--bel-transition-fade:    300ms ease-in; --bel-z-base:    1;
--bel-z-card:    10;
--bel-z-sticky:  100;
--bel-z-header:  200;
--bel-z-dropdown:300;
--bel-z-overlay: 400;
--bel-z-modal:   500;
--bel-z-toast:   600;
} @media (min-width: 768px) {
:root {
--bel-container-padding: 2rem;
}
} @media (min-width: 1024px) {
:root {
--bel-container-padding: 2.5rem;
}
} @media (max-width: 767px) {
:root {
--bel-text-display: 2.25rem;
--bel-text-h1:      2rem;
--bel-text-h2:      1.5rem;
--bel-text-h3:      1.25rem;
--bel-text-price:   1.5rem;
}
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 400;
line-height: var(--bel-lh-body);
color: var(--bel-primary-800);
background: var(--bel-primary-50);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--bel-secondary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
a:hover {
color: var(--bel-secondary-700);
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
word-wrap: normal !important;
}
*:focus-visible {
outline: 2px solid var(--bel-secondary-500);
outline-offset: 3px;
border-radius: var(--bel-radius-sm);
box-shadow: var(--bel-shadow-glow);
}
.skip-link {
position: absolute;
top: -100%;
left: var(--bel-space-md);
z-index: calc(var(--bel-z-toast) + 1);
padding: var(--bel-space-xs) var(--bel-space-md);
background: var(--bel-primary-900);
color: var(--bel-white);
text-decoration: none;
border-radius: 0 0 var(--bel-radius-sm) var(--bel-radius-sm);
font-size: var(--bel-text-small);
}
.skip-link:focus {
top: 0;
} h1, h2, h3 {
font-family: var(--bel-font-heading);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-sm);
font-weight: 400;
}
h4, h5, h6 {
font-family: var(--bel-font-body);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-sm);
}
h1 {
font-size: var(--bel-text-h1);
line-height: var(--bel-lh-h1);
letter-spacing: var(--bel-ls-h1);
}
h2 {
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
letter-spacing: var(--bel-ls-h2);
}
h3 {
font-size: var(--bel-text-h3);
line-height: var(--bel-lh-h3);
letter-spacing: var(--bel-ls-h3);
}
h4 {
font-size: var(--bel-text-h4);
line-height: var(--bel-lh-h4);
font-weight: 600;
}
h5 {
font-size: var(--bel-text-h5);
line-height: 1.4;
font-weight: 600;
letter-spacing: 0.02em;
}
h6 {
font-size: var(--bel-text-h6);
line-height: 1.4;
font-weight: 700;
letter-spacing: var(--bel-ls-h6);
text-transform: uppercase;
}
p {
margin: 0 0 var(--bel-space-md);
}
blockquote {
border-left: 4px solid var(--bel-accent-500);
padding: var(--bel-space-md) var(--bel-space-lg);
margin: var(--bel-space-lg) 0;
font-family: var(--bel-font-heading);
font-style: italic;
font-size: var(--bel-text-body-lg);
line-height: var(--bel-lh-body);
color: var(--bel-primary-700);
background: var(--bel-primary-100);
border-radius: 0 var(--bel-radius-sm) var(--bel-radius-sm) 0;
}
pre {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
background: var(--bel-primary-100);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
padding: var(--bel-space-lg);
overflow-x: auto;
}
code {
font-family: var(--bel-font-mono);
font-size: 0.875em;
background: var(--bel-primary-100);
border-radius: var(--bel-radius-sm);
padding: 0.15em 0.4em;
}
hr {
border: none;
height: 1px;
background: var(--bel-primary-200);
margin: var(--bel-space-xl) 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: var(--bel-space-lg) 0;
}
th, td {
padding: var(--bel-space-sm);
text-align: left;
border-bottom: 1px solid var(--bel-primary-200);
}
th {
font-family: var(--bel-font-body);
font-weight: 600;
font-size: var(--bel-text-small);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bel-primary-900);
background: var(--bel-primary-100);
} .bel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.875rem 1.75rem;
border-radius: var(--bel-radius-sm);
transition: all var(--bel-transition-default);
cursor: pointer;
min-height: 48px;
text-decoration: none;
border: 2px solid transparent;
line-height: 1.4;
gap: var(--bel-space-xs);
}
.bel-btn--primary,
a.bel-btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.875rem 1.75rem;
border-radius: var(--bel-radius-sm);
transition: all var(--bel-transition-default);
cursor: pointer;
min-height: 48px;
text-decoration: none;
line-height: 1.4;
background: var(--bel-accent-600);
color: var(--bel-white);
border: 2px solid transparent;
box-shadow: var(--bel-shadow-subtle);
}
.bel-btn--primary:hover,
a.bel-btn--primary:hover {
background: var(--bel-accent-700);
box-shadow: var(--bel-shadow-medium);
transform: translateY(-1px);
}
.bel-btn--primary:active,
a.bel-btn--primary:active {
background: var(--bel-accent-700);
transform: translateY(0);
box-shadow: var(--bel-shadow-inner);
}
.bel-btn--primary:focus-visible,
a.bel-btn--primary:focus-visible {
box-shadow: var(--bel-shadow-glow);
outline: none;
}
.bel-btn--primary:disabled,
a.bel-btn--primary:disabled {
background: var(--bel-primary-300);
color: var(--bel-primary-500);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.bel-btn--secondary,
a.bel-btn--secondary {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.875rem 1.75rem;
border-radius: var(--bel-radius-sm);
transition: all var(--bel-transition-default);
cursor: pointer;
min-height: 48px;
text-decoration: none;
line-height: 1.4;
background: transparent;
color: var(--bel-primary-900);
border: 2px solid var(--bel-primary-300);
}
.bel-btn--secondary:hover,
a.bel-btn--secondary:hover {
border-color: var(--bel-primary-900);
background: var(--bel-primary-50);
}
.bel-btn--secondary:active,
a.bel-btn--secondary:active {
background: var(--bel-primary-100);
}
.bel-btn--secondary:focus-visible,
a.bel-btn--secondary:focus-visible {
box-shadow: var(--bel-shadow-glow);
outline: none;
}
.bel-btn--ghost,
a.bel-btn--ghost {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.5rem 1rem;
border-radius: var(--bel-radius-sm);
transition: all var(--bel-transition-default);
cursor: pointer;
text-decoration: none;
line-height: 1.4;
background: transparent;
color: var(--bel-secondary-600);
border: none;
}
.bel-btn--ghost:hover,
a.bel-btn--ghost:hover {
color: var(--bel-secondary-700);
background: var(--bel-secondary-50);
}
.bel-btn--ghost:active,
a.bel-btn--ghost:active {
background: var(--bel-secondary-100);
}
.bel-btn--inverted,
a.bel-btn--inverted {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.875rem 1.75rem;
border-radius: var(--bel-radius-sm);
transition: all var(--bel-transition-default);
cursor: pointer;
min-height: 48px;
text-decoration: none;
line-height: 1.4;
background: var(--bel-white);
color: var(--bel-secondary-900);
border: 2px solid transparent;
}
.bel-btn--inverted:hover,
a.bel-btn--inverted:hover {
background: var(--bel-primary-50);
transform: translateY(-1px);
box-shadow: var(--bel-shadow-medium);
} .bel-hotel-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
box-shadow: var(--bel-shadow-subtle);
overflow: hidden;
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default), border-color var(--bel-transition-default);
}
.bel-hotel-card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-4px);
border-color: var(--bel-primary-300);
}
.bel-hotel-card__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.bel-hotel-card__figure {
overflow: hidden;
aspect-ratio: 16 / 10;
position: relative;
}
.bel-hotel-card__figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.bel-hotel-card:hover .bel-hotel-card__figure img {
transform: scale(1.05);
}
.bel-hotel-card__price {
position: absolute;
bottom: var(--bel-space-sm);
right: var(--bel-space-sm);
background: var(--bel-accent-500);
color: var(--bel-white);
font-family: var(--bel-font-mono);
font-weight: 600;
font-size: var(--bel-text-small);
padding: 0.375rem 0.75rem;
border-radius: var(--bel-radius-sm);
}
.bel-hotel-card__stars {
position: absolute;
bottom: var(--bel-space-sm);
left: var(--bel-space-sm);
color: var(--bel-warning);
display: inline-flex;
gap: 2px;
}
.bel-hotel-card__body {
padding: var(--bel-space-lg);
}
.bel-hotel-card__tag {
font-family: var(--bel-font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-2xs);
}
.bel-hotel-card__title {
font-family: var(--bel-font-heading);
font-size: 1.25rem;
line-height: var(--bel-lh-h3);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-xs);
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bel-hotel-card__desc {
font-size: var(--bel-text-body);
line-height: var(--bel-lh-body);
color: var(--bel-primary-600);
margin: 0 0 var(--bel-space-md);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bel-hotel-card__meta {
font-family: var(--bel-font-body);
font-size: 0.8125rem;
color: var(--bel-primary-500);
display: flex;
flex-wrap: wrap;
gap: 1rem;
} .bel-hotel-card__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
line-height: var(--bel-lh-h3);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-xs);
}
.bel-hotel-card__location {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin-bottom: var(--bel-space-sm);
}
.bel-hotel-card__rating {
position: absolute;
top: var(--bel-space-sm);
right: var(--bel-space-sm);
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
font-weight: 600;
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
}
.bel-hotel-card__cta {
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-accent-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-hotel-card:hover .bel-hotel-card__cta {
color: var(--bel-accent-700);
} .bel-search__inner {
background: var(--bel-white);
border: 2px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
box-shadow: var(--bel-shadow-medium);
padding: 0.5rem;
}
.bel-search__inner:focus-within {
border-color: var(--bel-secondary-500);
box-shadow: var(--bel-shadow-glow);
}
.bel-search__form {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
.bel-search__input {
flex: 1;
min-width: 0;
padding: 0.75rem 1rem;
border: none;
background: transparent;
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
color: var(--bel-primary-900);
outline: none;
}
.bel-search__input::placeholder {
color: var(--bel-primary-500);
}
.bel-search__input:focus {
box-shadow: none;
}
.bel-search__btn {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
padding: 0.75rem 1.5rem;
min-width: 120px;
min-height: 48px;
background: var(--bel-accent-600);
color: var(--bel-white);
border: 2px solid transparent;
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--bel-transition-default), box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
box-shadow: var(--bel-shadow-subtle);
white-space: nowrap;
justify-content: center;
}
.bel-search__btn:hover {
background: var(--bel-accent-700);
box-shadow: var(--bel-shadow-medium);
transform: translateY(-1px);
}
.bel-search__btn:active {
background: var(--bel-accent-700);
transform: translateY(0);
box-shadow: var(--bel-shadow-inner);
}
.bel-search__btn:focus-visible {
box-shadow: var(--bel-shadow-glow);
outline: none;
}
.bel-search__btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.bel-search {
padding: var(--bel-space-sm);
}
.bel-search__form {
flex-direction: column;
gap: var(--bel-space-sm);
}
.bel-search__input {
width: 100%;
padding: var(--bel-space-sm) var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
}
.bel-search__btn {
width: 100%;
min-width: unset;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.bel-search__btn {
min-width: 140px;
}
} .bel-stars {
display: inline-flex;
gap: 2px;
align-items: center;
}
.bel-stars__star {
width: 20px;
height: 20px;
}
.bel-stars__star--compact {
width: 16px;
height: 16px;
}
.bel-stars__star--large {
width: 24px;
height: 24px;
}
.bel-stars__star--filled {
color: var(--bel-warning);
}
.bel-stars__star--empty {
color: var(--bel-primary-300);
}
.bel-stars__value {
font-family: var(--bel-font-mono);
font-weight: 600;
color: var(--bel-primary-900);
margin-left: var(--bel-space-xs);
}
.bel-stars__count {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin-left: var(--bel-space-2xs);
} .bel-stars svg {
width: 16px;
height: 16px;
}
.bel-stars--empty svg {
color: var(--bel-primary-300);
} .bel-breadcrumbs {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 400;
color: var(--bel-primary-500);
padding: var(--bel-space-md) 0;
margin-bottom: var(--bel-space-lg);
}
.bel-breadcrumbs a {
color: var(--bel-secondary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-breadcrumbs a:hover {
color: var(--bel-secondary-700);
text-decoration: underline;
}
.bel-breadcrumbs .separator {
margin: 0 var(--bel-space-xs);
color: var(--bel-primary-300);
}
.bel-breadcrumbs .current {
color: var(--bel-primary-900);
font-weight: 500;
} .bel-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--bel-space-xs);
padding: var(--bel-space-2xl) 0;
}
.bel-pagination a,
.bel-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--bel-radius-sm);
color: var(--bel-primary-700);
text-decoration: none;
transition: background var(--bel-transition-fast), color var(--bel-transition-fast);
}
.bel-pagination a:hover {
background: var(--bel-primary-100);
color: var(--bel-primary-900);
}
.bel-pagination .current,
.bel-pagination__item--active {
background: var(--bel-primary-900);
color: var(--bel-white);
}
.bel-pagination .dots {
color: var(--bel-primary-400);
}
.bel-pagination .prev:disabled,
.bel-pagination .next:disabled {
opacity: 0.3;
cursor: not-allowed;
} .bel-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: var(--bel-z-header);
background: transparent;
transition: background var(--bel-transition-default), box-shadow var(--bel-transition-default);
}
.bel-nav--scrolled {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--bel-shadow-subtle);
border-bottom: 1px solid var(--bel-primary-200);
}
.bel-nav__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.bel-nav__logo a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--bel-primary-900);
gap: var(--bel-space-xs);
}
.bel-nav__logo-img {
height: 36px;
width: auto;
}
.bel-nav__logo-text {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
line-height: var(--bel-lh-h3);
color: var(--bel-primary-900);
letter-spacing: var(--bel-ls-h3);
} body.home .bel-nav:not(.bel-nav--scrolled) .bel-nav__logo-text,
body.home .bel-nav:not(.bel-nav--scrolled) .bel-nav__logo a {
color: var(--bel-white);
}
body.home .bel-nav:not(.bel-nav--scrolled) .bel-nav__links a {
color: var(--bel-white);
}
body.home .bel-nav:not(.bel-nav--scrolled) .bel-nav__phone {
color: rgba(255,255,255,0.85);
}
body.home .bel-nav:not(.bel-nav--scrolled) .bel-nav__burger span {
background: var(--bel-white);
} .bel-nav__links {
display: none;
}
.bel-nav__links .bel-nav__menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: var(--bel-space-xs);
}
.bel-nav__links .bel-nav__menu li {
position: relative;
}
.bel-nav__links .bel-nav__menu a {
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--bel-primary-700);
text-decoration: none;
letter-spacing: 0.02em;
padding: 0.5rem 1rem;
position: relative;
transition: color var(--bel-transition-fast);
}
.bel-nav__links .bel-nav__menu a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0.5rem;
width: 0;
height: 2px;
background: var(--bel-accent-500);
transition: width var(--bel-transition-default);
}
.bel-nav__links .bel-nav__menu a:hover::after,
.bel-nav__links .bel-nav__menu .current-menu-item > a::after,
.bel-nav__links .bel-nav__menu .current_page_item > a::after {
width: calc(100% - 1rem);
}
.bel-nav__links .bel-nav__menu a:hover {
color: var(--bel-primary-900);
}
.bel-nav__links .bel-nav__menu a:active {
color: var(--bel-accent-600);
} .bel-nav__links .bel-nav__menu li > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--bel-white);
box-shadow: var(--bel-shadow-medium);
border-radius: var(--bel-radius-sm);
padding: var(--bel-space-xs) 0;
min-width: 200px;
list-style: none;
z-index: var(--bel-z-dropdown);
}
.bel-nav__links .bel-nav__menu li:hover > ul,
.bel-nav__links .bel-nav__menu li.is-open > ul {
display: block;
}
.bel-nav__links .bel-nav__menu li > ul a {
display: block;
padding: var(--bel-space-xs) var(--bel-space-lg);
font-size: var(--bel-text-small);
white-space: nowrap;
}
.bel-nav__links .bel-nav__menu li > ul a::after {
display: none;
} .bel-nav__actions {
display: none;
align-items: center;
gap: var(--bel-space-md);
}
.bel-nav__phone {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-nav__phone:hover {
color: var(--bel-accent-500);
}
.bel-nav__email {
display: flex;
align-items: center;
color: var(--bel-primary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-nav__email:hover {
color: var(--bel-accent-500);
}
.bel-nav__cta {
display: none;
} .bel-nav__burger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: var(--bel-space-xs);
gap: 5px;
}
.bel-nav__burger span {
display: block;
width: 22px;
height: 2px;
background: var(--bel-primary-800);
border-radius: 1px;
transition: transform var(--bel-transition-default), opacity var(--bel-transition-fast);
}
@media (min-width: 1024px) {
.bel-nav__links {
display: block;
}
.bel-nav__actions {
display: flex;
}
.bel-nav__burger {
display: none;
}
.bel-nav__cta {
display: inline-flex;
}
}
@media (max-width: 767px) {
.bel-nav {
height: 60px;
}
.bel-nav__inner {
height: 60px;
}
} .bel-mobile-menu {
position: fixed;
inset: 0;
z-index: var(--bel-z-overlay);
opacity: 0;
visibility: hidden;
transition: opacity var(--bel-transition-fade), visibility var(--bel-transition-fade);
pointer-events: none;
}
.bel-mobile-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.bel-mobile-menu__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity var(--bel-transition-fade);
}
.bel-mobile-menu.is-open .bel-mobile-menu__overlay {
opacity: 1;
}
.bel-mobile-menu__panel {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: min(380px, 85vw);
background: var(--bel-white);
transform: translateX(100%);
transition: transform var(--bel-transition-slide);
overflow-y: auto;
padding: var(--bel-space-3xl) var(--bel-space-xl) var(--bel-space-xl);
}
.bel-mobile-menu.is-open .bel-mobile-menu__panel {
transform: translateX(0);
}
.bel-mobile-menu__close {
position: absolute;
top: var(--bel-space-md);
right: var(--bel-space-md);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--bel-primary-700);
transition: color var(--bel-transition-fast);
}
.bel-mobile-menu__close:hover {
color: var(--bel-primary-900);
}
.bel-mobile-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.bel-mobile-menu__list li {
border-bottom: 1px solid var(--bel-primary-100);
}
.bel-mobile-menu__list a {
display: block;
padding: var(--bel-space-md) 0;
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
color: var(--bel-primary-900);
text-decoration: none;
text-align: center;
line-height: var(--bel-lh-h3);
transition: color var(--bel-transition-fast);
}
.bel-mobile-menu__list a:hover {
color: var(--bel-accent-500);
}
.bel-mobile-menu__list .sub-menu {
list-style: none;
padding: 0 0 0 var(--bel-space-lg);
margin: 0;
}
.bel-mobile-menu__list .sub-menu a {
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
}
.bel-mobile-menu__contact {
margin-top: var(--bel-space-2xl);
padding-top: var(--bel-space-xl);
border-top: 1px solid var(--bel-primary-200);
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
}
.bel-mobile-menu__contact a {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
text-decoration: none;
}
.bel-mobile-menu__contact a:hover {
color: var(--bel-accent-500);
} .bel-footer {
background: var(--bel-secondary-900);
color: var(--bel-primary-300);
padding: var(--bel-space-4xl) 0 var(--bel-space-xl) 0;
}
.bel-footer a {
color: rgba(255,255,255,0.7);
transition: color var(--bel-transition-fast);
}
.bel-footer a:hover {
color: var(--bel-white);
}
.bel-footer__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-footer__brand {
margin-bottom: var(--bel-space-xl);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bel-space-sm);
}
.bel-footer__logo {
display: flex;
justify-content: center;
width: 100%;
}
.bel-footer__logo img {
width: 180px;
height: 180px;
object-fit: contain;
}
.bel-footer__site-name {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
color: var(--bel-white);
text-decoration: none;
line-height: var(--bel-lh-h3);
}
.bel-footer__site-name:hover {
color: var(--bel-accent-300);
}
.bel-footer__tagline {
font-size: var(--bel-text-small);
color: rgba(196,188,176,0.6);
margin: 0;
line-height: var(--bel-lh-small);
}
.bel-footer__columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--bel-space-xl);
margin-bottom: var(--bel-space-xl);
}
.bel-footer__heading {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bel-white);
margin-bottom: var(--bel-space-md);
}
.bel-footer__menu {
list-style: none;
margin: 0;
padding: 0;
}
.bel-footer__menu li + li {
margin-top: var(--bel-space-xs);
}
.bel-footer__menu a {
font-size: 0.875rem;
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-footer__menu a:hover {
color: var(--bel-white);
}
.bel-footer__contact-item {
display: flex;
align-items: flex-start;
gap: var(--bel-space-xs);
font-size: var(--bel-text-small);
margin-bottom: var(--bel-space-sm);
color: rgba(196,188,176,0.7);
}
.bel-footer__contact-item svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--bel-accent-300);
}
.bel-footer__contact-item a {
color: rgba(196,188,176,0.7);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-footer__contact-item a:hover {
color: var(--bel-white);
}
.bel-footer__bottom {
border-top: 1px solid rgba(196,188,176,0.15);
padding-top: var(--bel-space-xl);
margin-top: var(--bel-space-xl);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--bel-space-md);
}
.bel-footer__social {
display: flex;
gap: var(--bel-space-md);
}
.bel-footer__social a {
color: var(--bel-primary-400);
transition: color var(--bel-transition-fast);
}
.bel-footer__social a:hover {
color: var(--bel-accent-400);
}
.bel-footer__copyright {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
@media (max-width: 1023px) {
.bel-footer__columns {
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-2xl);
}
}
@media (max-width: 767px) {
.bel-footer {
padding: var(--bel-space-2xl) 0 var(--bel-space-lg);
}
.bel-footer__columns {
grid-template-columns: 1fr;
gap: var(--bel-space-xl);
}
.bel-footer__bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
} .bel-page {
padding-top: 72px;
min-height: 100vh;
}
@media (max-width: 767px) {
.bel-page {
padding-top: 60px;
}
}
.bel-container {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
} .bel-hero {
position: relative;
z-index: 2;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bel-primary-900);
margin-top: -72px;
padding-top: 72px;
}
.bel-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
will-change: transform;
}
.bel-hero__overlay {
position: absolute;
inset: 0;
background: var(--bel-gradient-dusk);
opacity: 0.7;
}
.bel-hero__content {
position: relative;
z-index: 2;
text-align: center;
max-width: 680px;
padding: var(--bel-space-5xl) var(--bel-container-padding);
color: var(--bel-white);
}
.bel-hero__overline {
font-family: var(--bel-font-body);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--bel-white);
opacity: 0.8;
margin-bottom: var(--bel-space-md);
}
.bel-hero__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-display);
font-weight: 400;
line-height: var(--bel-lh-display);
letter-spacing: var(--bel-ls-display);
color: var(--bel-white);
margin: 0 0 var(--bel-space-lg);
}
.bel-hero__subtitle {
font-size: var(--bel-text-body-lg);
line-height: var(--bel-lh-body);
color: rgba(255,255,255,0.85);
max-width: var(--bel-container-text);
margin: 0 auto var(--bel-space-xl);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bel-hero__meta {
display: flex;
gap: var(--bel-space-xl);
justify-content: center;
flex-wrap: wrap;
}
.bel-hero__meta-item {
text-align: center;
} .bel-hero__search {
position: relative;
max-width: 560px;
margin: var(--bel-space-xl) auto 0;
width: 100%;
}
.bel-hero__search-box {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 2px solid rgba(255, 255, 255, 0.45);
border-radius: var(--bel-radius-full);
padding: 0.35rem 0.35rem 0.35rem 1.25rem;
transition: border-color var(--bel-transition-default), box-shadow var(--bel-transition-default);
}
.bel-hero__search-box:focus-within {
border-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.bel-hero__search-icon {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.5);
margin-right: var(--bel-space-sm);
}
.bel-hero__search-input {
flex: 1;
min-width: 0;
padding: 0.6rem 0;
border: none;
background: transparent;
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
color: var(--bel-white);
outline: none;
}
.bel-hero__search-input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.bel-hero__search-btn {
flex-shrink: 0;
padding: 0.7rem 1.75rem;
border: none;
border-radius: var(--bel-radius-full);
background: var(--bel-accent-500);
color: var(--bel-white);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
transition: background var(--bel-transition-fast), transform var(--bel-transition-fast);
}
.bel-hero__search-btn:hover {
background: var(--bel-accent-600);
transform: translateY(-1px);
}
.bel-hero__search-btn:active {
transform: translateY(0);
} .bel-hero__search-results {
position: fixed;
background: var(--bel-white);
border: 1px solid var(--bel-primary-100);
border-radius: var(--bel-radius-lg);
box-shadow: 0 16px 48px rgba(12,35,64,0.18), 0 4px 12px rgba(12,35,64,0.08);
max-height: 400px;
overflow: hidden;
z-index: 9999;
opacity: 0;
transform: translateY(-4px);
transition: opacity 200ms ease, transform 200ms ease;
padding: var(--bel-space-xs) 0;
}
.bel-hero__search-results:not([hidden]) {
opacity: 1;
transform: translateY(0);
}
.bel-hero__search-results[hidden] {
display: none;
}
.bel-hero__search-result {
display: flex;
align-items: center;
gap: var(--bel-space-md);
padding: var(--bel-space-sm) var(--bel-space-lg);
text-decoration: none;
color: var(--bel-primary-800);
transition: background 120ms ease;
position: relative;
}
.bel-hero__search-result + .bel-hero__search-result {
border-top: 1px solid var(--bel-primary-50);
}
.bel-hero__search-result:hover,
.bel-hero__search-result.is-focused {
background: var(--bel-secondary-50);
}
.bel-hero__search-result-img {
width: 56px;
height: 42px;
object-fit: cover;
border-radius: var(--bel-radius-sm);
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.bel-hero__search-result-info {
flex: 1;
min-width: 0;
}
.bel-hero__search-result-name {
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 600;
color: var(--bel-primary-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.bel-hero__search-result:hover .bel-hero__search-result-name {
color: var(--bel-secondary-700);
}
.bel-hero__search-result-loc {
font-size: var(--bel-text-small);
color: var(--bel-primary-400);
margin-top: 1px;
}
.bel-hero__search-result-rating {
flex-shrink: 0;
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
font-weight: 700;
min-width: 36px;
text-align: center;
padding: 0.3em 0.5em;
border-radius: var(--bel-radius-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
line-height: 1;
}
.bel-hero__search-all {
display: flex;
align-items: center;
justify-content: center;
gap: var(--bel-space-xs);
padding: var(--bel-space-md) var(--bel-space-lg);
font-size: var(--bel-text-body);
font-weight: 600;
color: var(--bel-secondary-600);
text-decoration: none;
border-top: 1px solid var(--bel-primary-100);
margin-top: var(--bel-space-xs);
transition: background 120ms ease, color 120ms ease;
}
.bel-hero__search-all:hover {
background: var(--bel-secondary-50);
color: var(--bel-secondary-800);
}
.bel-hero__search-empty {
padding: var(--bel-space-xl) var(--bel-space-lg);
text-align: center;
color: var(--bel-primary-400);
font-size: var(--bel-text-body);
}
@media (max-width: 767px) {
.bel-hero__search-box {
padding: 0.25rem 0.25rem 0.25rem 1rem;
}
.bel-hero__search-btn {
padding: 0.6rem 1.25rem;
font-size: var(--bel-text-small);
}
}
.bel-hero__scroll-cue,
.bel-hero__scroll-cue {
position: absolute;
bottom: var(--bel-space-xl);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bel-space-xs);
color: var(--bel-white);
opacity: 0.6;
font-size: var(--bel-text-caption);
letter-spacing: 0.05em;
text-transform: uppercase;
animation: bel-pulse 2s ease-in-out infinite;
}
@keyframes bel-pulse {
0%, 100% { transform: translateX(-50%) translateY(0); }
50%      { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 767px) {
.bel-hero {
min-height: 85vh;
margin-top: -60px;
padding-top: 60px;
}
} .bel-search {
max-width: var(--bel-container-narrow);
margin: -36px auto 0;
position: relative;
z-index: var(--bel-z-card);
padding: 0 var(--bel-container-padding);
}
@media (max-width: 767px) {
.bel-search {
margin-top: var(--bel-space-lg);
position: static;
}
} .bel-featured {
padding: var(--bel-space-4xl) 0;
background: var(--bel-primary-50);
}
.bel-featured__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-featured__header {
display: flex;
justify-content: space-between;
align-items: baseline;
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding) var(--bel-space-xl);
}
.bel-featured__view-all {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h6);
font-weight: 700;
letter-spacing: var(--bel-ls-h6);
text-transform: uppercase;
color: var(--bel-accent-500);
margin-bottom: var(--bel-space-xs);
}
.bel-featured__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
letter-spacing: var(--bel-ls-h2);
color: var(--bel-primary-900);
margin: 0;
}
.bel-featured__view-all {
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--bel-secondary-600);
text-decoration: none;
}
.bel-featured__view-all:hover {
color: var(--bel-secondary-700);
}
.bel-featured__grid {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bel-space-xl);
}
@media (max-width: 1023px) {
.bel-featured__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-lg);
}
}
@media (max-width: 767px) {
.bel-featured {
padding: var(--bel-space-2xl) 0;
}
.bel-featured__header {
flex-direction: column;
gap: var(--bel-space-sm);
}
.bel-featured__grid {
grid-template-columns: 1fr;
gap: var(--bel-space-lg);
}
} .bel-districts {
padding: var(--bel-space-4xl) 0;
background: var(--bel-white);
}
.bel-districts__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-districts__header {
text-align: center;
max-width: var(--bel-container-text);
margin: 0 auto var(--bel-space-xl);
}
.bel-districts__eyebrow {
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-districts__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
color: var(--bel-primary-900);
margin: 0;
}
.bel-districts__filters {
display: flex;
justify-content: center;
gap: var(--bel-space-sm);
margin-bottom: var(--bel-space-xl);
flex-wrap: wrap;
}
.bel-districts__filter-btn {
padding: 0.5rem 1.25rem;
border: 1px solid var(--bel-primary-300);
border-radius: var(--bel-radius-full);
background: transparent;
color: var(--bel-primary-600);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
cursor: pointer;
transition: all var(--bel-transition-default);
}
.bel-districts__filter-btn:hover {
border-color: var(--bel-primary-900);
color: var(--bel-primary-900);
}
.bel-districts__filter-btn.is-active {
background: var(--bel-primary-900);
color: var(--bel-white);
border-color: var(--bel-primary-900);
} .bel-districts__grid {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-districts__grid-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--bel-space-md);
}
.bel-districts__card {
border: 1px solid var(--bel-primary-100);
border-radius: var(--bel-radius-md);
overflow: hidden;
background: var(--bel-white);
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
}
.bel-districts__card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-3px);
}
.bel-districts__card.is-hidden {
display: none;
}
.bel-districts__card-link {
display: block;
text-decoration: none;
color: inherit;
}
.bel-districts__card-figure {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
margin: 0;
}
.bel-districts__card-figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.bel-districts__card:hover .bel-districts__card-figure img {
transform: scale(1.06);
}
.bel-districts__badge {
position: absolute;
top: var(--bel-space-xs);
right: var(--bel-space-xs);
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
font-weight: 700;
padding: 0.2em 0.5em;
border-radius: var(--bel-radius-sm);
background: var(--bel-primary-700);
color: var(--bel-white);
line-height: 1;
}
.bel-districts__badge--gold  { background: var(--bel-accent-600); }
.bel-districts__badge--green { background: var(--bel-success); }
.bel-districts__badge--teal  { background: var(--bel-secondary-500); }
.bel-districts__card-body {
padding: var(--bel-space-sm) var(--bel-space-md) var(--bel-space-md);
}
.bel-districts__card-stars {
color: var(--bel-accent-500);
font-size: var(--bel-text-caption);
letter-spacing: 0.05em;
margin-bottom: var(--bel-space-2xs);
}
.bel-districts__card-name {
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 600;
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-2xs);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.bel-districts__card-loc {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin: 0;
}
.bel-districts__card-loc svg {
flex-shrink: 0;
}
@media (max-width: 1023px) {
.bel-districts__grid-inner {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.bel-districts {
padding: var(--bel-space-2xl) 0;
}
.bel-districts__grid-inner {
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-sm);
}
} .bel-advantages {
padding: var(--bel-space-4xl) 0;
background: var(--bel-secondary-900);
color: var(--bel-white);
}
.bel-advantages__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-advantages__inner {
text-align: center;
margin-bottom: var(--bel-space-3xl);
}
.bel-advantages__label {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
color: var(--bel-white);
margin: 0;
}
.bel-advantages__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--bel-space-xl);
}
.bel-advantages__item {
text-align: center;
}
.bel-advantages__icon {
width: 48px;
height: 48px;
margin: 0 auto var(--bel-space-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--bel-accent-400);
}
.bel-advantages__label {
font-family: var(--bel-font-body);
font-size: var(--bel-text-h4);
font-weight: 600;
color: var(--bel-white);
margin-bottom: var(--bel-space-xs);
}
.bel-advantages__item h3 {
font-family: var(--bel-font-body);
font-size: var(--bel-text-h5);
font-weight: 600;
color: var(--bel-white);
margin: 0 0 var(--bel-space-xs);
}
.bel-advantages__desc,
.bel-advantages__item p {
font-size: var(--bel-text-small);
color: var(--bel-primary-300);
max-width: 280px;
margin: 0 auto;
text-align: center;
line-height: var(--bel-lh-small);
}
@media (max-width: 1023px) {
.bel-advantages__inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.bel-advantages {
padding: var(--bel-space-2xl) 0;
}
.bel-advantages__inner {
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-lg);
}
} .bel-testimonials {
padding: var(--bel-space-4xl) 0;
background: var(--bel-primary-50);
}
.bel-testimonials__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-testimonials__header {
text-align: center;
margin-bottom: var(--bel-space-2xl);
}
.bel-testimonials__eyebrow {
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-testimonials__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
color: var(--bel-primary-900);
margin: 0;
}
.bel-testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bel-space-lg);
}
.bel-testimonials__card {
background: var(--bel-white);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-lg);
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
border: 1px solid var(--bel-primary-100);
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
}
.bel-testimonials__card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-2px);
}
.bel-testimonials__card-top {
display: flex;
align-items: center;
gap: var(--bel-space-sm);
}
.bel-testimonials__score {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-body);
font-weight: 700;
background: var(--bel-secondary-900);
color: var(--bel-white);
padding: 0.25em 0.5em;
border-radius: var(--bel-radius-sm);
line-height: 1;
}
.bel-testimonials__label {
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-700);
}
.bel-testimonials__quote {
flex: 1;
margin: 0;
}
.bel-testimonials__quote p {
font-size: var(--bel-text-body);
font-style: italic;
color: var(--bel-primary-700);
line-height: 1.6;
margin: 0;
}
.bel-testimonials__footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--bel-space-sm);
margin-top: auto;
padding-top: var(--bel-space-sm);
border-top: 1px solid var(--bel-primary-100);
}
.bel-testimonials__who {
display: flex;
flex-direction: column;
gap: 2px;
}
.bel-testimonials__author {
font-weight: 600;
font-size: var(--bel-text-body);
color: var(--bel-primary-900);
font-style: normal;
}
.bel-testimonials__origin {
font-size: var(--bel-text-small);
color: var(--bel-primary-400);
}
.bel-testimonials__hotel {
font-size: var(--bel-text-small);
color: var(--bel-secondary-500);
text-decoration: none;
text-align: right;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bel-testimonials__hotel:hover {
color: var(--bel-secondary-700);
}
@media (max-width: 1023px) {
.bel-testimonials__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.bel-testimonials {
padding: var(--bel-space-2xl) 0;
}
.bel-testimonials__grid {
grid-template-columns: 1fr;
}
} .bel-blog-preview {
padding: var(--bel-space-4xl) 0;
background: var(--bel-white);
}
.bel-blog-preview__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-blog-preview__header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--bel-space-xl);
}
.bel-blog-preview__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
color: var(--bel-primary-900);
margin: 0;
}
.bel-blog-preview__card-link {
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
text-decoration: none;
}
.bel-blog-preview__grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--bel-space-xl);
}
.bel-blog-preview__card--large {
grid-row: 1 / 3;
}
.bel-blog-preview__card--small {
display: flex;
flex-direction: column;
gap: var(--bel-space-xl);
}
.bel-blog-preview__card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
overflow: hidden;
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
}
.bel-blog-preview__card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-2px);
}
.bel-blog-preview__card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.bel-blog-preview__eyebrow {
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
}
.bel-blog-preview__card-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
color: var(--bel-primary-900);
margin: var(--bel-space-xs) 0;
transition: color var(--bel-transition-fast);
}
.bel-blog-preview__card:hover .bel-blog-preview__card-title {
color: var(--bel-secondary-600);
}
.bel-blog-preview__date {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
@media (max-width: 767px) {
.bel-blog-preview {
padding: var(--bel-space-2xl) 0;
}
.bel-blog-preview__grid {
grid-template-columns: 1fr;
}
.bel-blog-preview__card--large {
grid-row: auto;
}
} .bel-cta {
padding: var(--bel-space-5xl) 0;
background: var(--bel-gradient-confluence);
text-align: center;
color: var(--bel-white);
position: relative;
overflow: hidden;
}
.bel-cta__inner {
max-width: var(--bel-container-narrow);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
position: relative;
z-index: 1;
}
.bel-cta__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h1);
font-weight: 400;
line-height: var(--bel-lh-h1);
letter-spacing: var(--bel-ls-h1);
margin: 0 0 var(--bel-space-lg);
}
.bel-cta__text {
font-size: var(--bel-text-body-lg);
color: rgba(255,255,255,0.85);
max-width: var(--bel-container-text);
margin: 0 auto var(--bel-space-xl);
line-height: var(--bel-lh-body);
}
.bel-cta__actions {
display: flex;
justify-content: center;
gap: var(--bel-space-md);
flex-wrap: wrap;
margin-top: var(--bel-space-xl);
}
@media (max-width: 767px) {
.bel-cta {
padding: var(--bel-space-3xl) 0;
}
.bel-cta__actions {
flex-direction: column;
align-items: center;
}
.bel-cta__actions .bel-btn--inverted,
.bel-cta__actions .bel-btn--secondary {
width: 100%;
}
} .bel-gallery {
position: relative;
border-radius: var(--bel-radius-none);
overflow: hidden;
}
.bel-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: opacity var(--bel-transition-fast);
}
.bel-gallery img:hover {
opacity: 0.85;
}
.bel-gallery__more-overlay {
position: absolute;
inset: 0;
background: rgba(26,24,20,0.7);
color: var(--bel-white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
} .bel-hotel-header {
padding: var(--bel-space-xl) 0;
background: var(--bel-white);
border-bottom: 1px solid var(--bel-primary-200);
max-width: var(--bel-container-max);
margin: 0 auto;
padding-left: var(--bel-container-padding);
padding-right: var(--bel-container-padding);
}
.bel-hotel-header__body {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--bel-space-xl);
}
.bel-hotel-header__title,
.bel-hotel-header__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h1);
line-height: var(--bel-lh-h1);
letter-spacing: var(--bel-ls-h1);
color: var(--bel-primary-900);
margin: var(--bel-space-sm) 0 0;
}
.bel-hotel-header__location {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
margin-top: var(--bel-space-xs);
}
.bel-hotel-header__facts,
.bel-hotel-header__facts {
display: flex;
align-items: center;
gap: var(--bel-space-lg);
margin-top: var(--bel-space-md);
flex-wrap: wrap;
}
.bel-hotel-header__facts span {
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
}
.bel-hotel-header__facts .bel-hotel-header__rating-badge {
color: #FFFFFF;
}
.bel-hotel-header__actions {
display: flex;
gap: var(--bel-space-sm);
}
@media (max-width: 767px) {
.bel-hotel-header__body {
flex-direction: column;
}
} .bel-hotel-content {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--bel-space-3xl);
max-width: var(--bel-container-max);
margin: var(--bel-space-xl) auto 0;
padding: var(--bel-space-3xl) var(--bel-container-padding);
align-items: start;
}
.bel-hotel-content__main {
min-width: 0;
} .bel-hotel-content__main > section,
.bel-hotel-content__main > .sh-section {
padding: 0;
margin-top: var(--bel-space-2xl);
padding-top: var(--bel-space-2xl);
border-top: 1px solid var(--bel-primary-100);
}
.bel-hotel-content__main > :first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.bel-hotel-content__sidebar {
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: var(--bel-space-xl);
}
.bel-hotel-content__sidebar > * {
flex-shrink: 0;
} .bel-booking-sidebar {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
box-shadow: var(--bel-shadow-medium);
padding: var(--bel-space-xl);
} .bel-sidebar-map {
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
overflow: hidden;
background: var(--bel-white);
}
.bel-sidebar-map__address {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
padding: var(--bel-space-sm) var(--bel-space-md);
font-style: normal;
font-size: var(--bel-text-small);
color: var(--bel-primary-700);
border-bottom: 1px solid var(--bel-primary-100);
}
.bel-sidebar-map__address svg {
flex-shrink: 0;
color: var(--bel-secondary-500);
}
.bel-sidebar-map__map {
height: 220px;
background: var(--bel-primary-100);
}
.bel-booking-sidebar__price {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-price);
font-weight: 500;
color: var(--bel-primary-900);
letter-spacing: -0.01em;
margin-bottom: var(--bel-space-2xs);
}
.bel-booking-sidebar__per-night {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin-bottom: var(--bel-space-lg);
}
.bel-booking-sidebar__fields {
display: flex;
flex-direction: column;
gap: var(--bel-space-sm);
margin-bottom: var(--bel-space-lg);
}
.bel-booking-sidebar__field label {
display: block;
font-size: var(--bel-text-caption);
font-weight: 600;
color: var(--bel-primary-600);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--bel-space-2xs);
}
.bel-booking-sidebar__field input {
width: 100%;
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
padding: var(--bel-space-xs) var(--bel-space-sm);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
color: var(--bel-primary-800);
}
.bel-booking-sidebar__field input:focus {
outline: none;
border-color: var(--bel-secondary-500);
box-shadow: var(--bel-shadow-glow);
}
.bel-booking-sidebar__total {
border-top: 1px solid var(--bel-primary-200);
padding-top: var(--bel-space-md);
margin-top: var(--bel-space-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-h4);
font-weight: 600;
}
.bel-booking-sidebar__cta {
margin-top: var(--bel-space-lg);
}
.bel-booking-sidebar__submit {
width: 100%;
}
.bel-booking-sidebar__note {
font-size: var(--bel-text-caption);
color: var(--bel-success);
margin-top: var(--bel-space-sm);
text-align: center;
}
@media (max-width: 1023px) {
.bel-hotel-content {
grid-template-columns: 1fr;
}
.bel-booking-sidebar {
position: static;
}
} .bel-rooms {
padding: var(--bel-space-3xl) 0;
border-top: 1px solid var(--bel-primary-200);
}
.bel-rooms__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin-bottom: var(--bel-space-xl);
}
.bel-rooms__table {
width: 100%;
border-collapse: collapse;
}
.bel-rooms__table th,
.bel-rooms__table td {
padding: var(--bel-space-md);
text-align: left;
border-bottom: 1px solid var(--bel-primary-200);
}
.bel-rooms__table th {
font-size: var(--bel-text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
} .bel-amenities {
padding: var(--bel-space-3xl) 0;
border-top: 1px solid var(--bel-primary-200);
}
.bel-amenities__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin-bottom: var(--bel-space-xl);
}
.bel-amenities__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--bel-space-sm);
align-items: start;
}
.bel-amenities__card {
position: relative;
border: 1px solid var(--bel-primary-100);
border-radius: var(--bel-radius-md);
background: var(--bel-off-white);
transition: border-color var(--bel-transition-fast);
}
.bel-amenities__card:hover {
border-color: var(--bel-primary-300);
}
@media (max-width: 1023px) {
.bel-amenities__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.bel-amenities__grid {
grid-template-columns: repeat(2, 1fr);
}
} .bel-location {
padding: var(--bel-space-3xl) 0;
border-top: 1px solid var(--bel-primary-200);
}
.bel-location__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin-bottom: var(--bel-space-xl);
}  .bel-location__nearby-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bel-space-md) var(--bel-space-xl);
}
.bel-location__nearby-list .elem-list {
break-inside: avoid;
background: none;
border: none;
border-radius: 0;
margin-bottom: var(--bel-space-lg);
}
.bel-location__nearby-list .elem-list-title {
padding: 0 0 var(--bel-space-xs);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bel-primary-900);
background: none;
border-bottom: 2px solid var(--bel-primary-200);
margin-bottom: var(--bel-space-2xs);
}
.bel-location__nearby-list .surroundings-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bel-space-sm);
padding: var(--bel-space-2xs) 0;
border-bottom: 1px solid var(--bel-primary-100);
}
.bel-location__nearby-list .elem-list-ul li:last-child .surroundings-item {
border-bottom: none;
}
.bel-location__nearby-list .surroundings-place {
flex: 1;
font-size: var(--bel-text-small);
color: var(--bel-primary-700);
}
.bel-location__nearby-list .surroundings-distance {
white-space: nowrap;
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
background: var(--bel-primary-100);
padding: 0.15em 0.5em;
border-radius: var(--bel-radius-full);
}
@media (max-width: 767px) {
.bel-location__nearby-list {
grid-template-columns: 1fr;
}
} .bel-reviews {
padding: var(--bel-space-3xl) 0;
border-top: 1px solid var(--bel-primary-200);
}
.bel-reviews__header {
margin-bottom: var(--bel-space-xl);
}
.bel-reviews__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin: 0;
}
.bel-reviews__score {
display: flex;
align-items: center;
gap: var(--bel-space-lg);
margin-bottom: var(--bel-space-xl);
flex-wrap: wrap;
}
.bel-reviews__score-circle {
width: 72px;
height: 72px;
border-radius: var(--bel-radius-full);
background: var(--bel-secondary-900);
color: var(--bel-white);
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h2);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bel-reviews__score-label {
font-size: var(--bel-text-h4);
font-weight: 600;
color: var(--bel-primary-800);
}
.bel-reviews__breakdown {
margin-bottom: var(--bel-space-xl);
}
.bel-reviews__breakdown-item {
display: grid;
grid-template-columns: 120px 40px 1fr;
align-items: center;
gap: var(--bel-space-sm);
margin-bottom: var(--bel-space-xs);
}
.bel-reviews__breakdown-bar {
height: 8px;
background: var(--bel-primary-100);
border-radius: var(--bel-radius-full);
overflow: hidden;
}
.bel-reviews__breakdown-bar-fill {
height: 100%;
width: var(--pct);
background: var(--bel-secondary-600);
border-radius: var(--bel-radius-full);
transition: width 600ms ease;
}
.bel-reviews__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-lg);
}
.bel-reviews__card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-100);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-lg);
}
.bel-reviews__card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--bel-space-sm);
}
.bel-reviews__card-name {
font-weight: 600;
font-size: var(--bel-text-small);
color: var(--bel-primary-900);
}
.bel-reviews__card-score {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
font-weight: 700;
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
}
.bel-reviews__card-body {
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
line-height: 1.6;
}
@media (max-width: 767px) {
.bel-reviews__grid {
grid-template-columns: 1fr;
}
.bel-reviews__breakdown-item {
grid-template-columns: 100px 35px 1fr;
}
} .bel-similar {
padding: var(--bel-space-3xl) 0;
background: var(--bel-primary-50);
}
.bel-similar__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-similar__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin-bottom: var(--bel-space-xl);
}
.bel-similar__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--bel-space-lg);
}
@media (max-width: 1023px) {
.bel-similar__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.bel-similar {
padding: var(--bel-space-2xl) 0;
}
.bel-similar__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--bel-space-md);
padding-bottom: var(--bel-space-md);
}
.bel-similar__grid .bel-hotel-card {
flex: 0 0 260px;
scroll-snap-align: start;
}
} .sh-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--bel-z-sticky);
background: var(--bel-white);
border-top: 1px solid var(--bel-primary-200);
box-shadow: 0 -4px 16px rgba(26,24,20,0.08);
padding: var(--bel-space-md) var(--bel-container-padding);
display: none;
align-items: center;
justify-content: space-between;
height: 72px;
}
@media (max-width: 1023px) {
.sh-sticky-cta {
display: flex;
}
}
.sh-sticky-cta__price {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-price);
font-weight: 600;
color: var(--bel-primary-900);
} [data-animate] {
opacity: 0;
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
[data-animate="fade-up"] {
transform: translateY(30px);
}
[data-animate="fade-in"] {
transform: none;
}
[data-animate="scale-in"] {
transform: scale(0.95);
}
[data-animate="spring-pop"] {
transform: scale(0.8);
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-animate].bel-animate--visible,
.bel-animate--visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-animate] {
opacity: 1;
transform: none;
transition: none;
}
*,
*::before,
*::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
scroll-behavior: auto;
}
}
@keyframes bel-shimmer {
0%   { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
@keyframes bel-spin {
to { transform: rotate(360deg); }
} .is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.is-active {
pointer-events: auto;
}
.is-open {
pointer-events: auto;
}
.is-hidden {
display: none;
} .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.is-visible {
opacity: 1;
transform: none;
} .hl-skeleton-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
overflow: hidden;
}
.hl-skeleton-img {
height: 200px;
background: linear-gradient(90deg, var(--bel-primary-100) 25%, var(--bel-primary-200) 50%, var(--bel-primary-100) 75%);
background-size: 800px 100%;
animation: bel-shimmer 1.4s infinite linear;
}
.hl-skeleton-body {
padding: var(--bel-space-md);
display: flex;
flex-direction: column;
gap: 10px;
}
.hl-skeleton-line {
height: 14px;
border-radius: var(--bel-radius-sm);
background: linear-gradient(90deg, var(--bel-primary-100) 25%, var(--bel-primary-200) 50%, var(--bel-primary-100) 75%);
background-size: 800px 100%;
animation: bel-shimmer 1.4s infinite linear;
}
.hl-skeleton-line:nth-child(1) { width: 80%; }
.hl-skeleton-line:nth-child(2) { width: 60%; }
.hl-skeleton-line:nth-child(3) { width: 40%; }
@media (prefers-reduced-motion: reduce) {
.hl-skeleton-img,
.hl-skeleton-line {
animation: none;
background: var(--bel-primary-200);
}
}  .hl-filter-form {
display: flex;
align-items: center;
gap: var(--bel-space-sm);
flex-wrap: wrap;
}
.hl-filter-form label {
font-size: var(--bel-text-small);
font-weight: 500;
color: var(--bel-primary-700);
}
.hl-filter-form select {
padding: var(--bel-space-xs) var(--bel-space-sm);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
color: var(--bel-primary-800);
background: var(--bel-white);
} .hl-hotels-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--bel-space-xl);
} .hl-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-small);
}
.hl-active-filters:empty {
display: none;
} .hl-view-toggle {
display: flex;
gap: var(--bel-space-2xs);
}
.hl-view-btn {
width: 36px;
height: 36px;
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
background: var(--bel-white);
color: var(--bel-primary-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--bel-transition-fast);
}
.hl-view-btn.is-active {
background: var(--bel-primary-900);
color: var(--bel-white);
border-color: var(--bel-primary-900);
} .hl-sort-select {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
padding: var(--bel-space-xs) var(--bel-space-sm);
border: 1px solid var(--bel-primary-400);
border-radius: var(--bel-radius-sm);
background: var(--bel-white);
color: var(--bel-primary-800);
cursor: pointer;
} .hl-no-results {
padding: var(--bel-space-3xl) 0;
text-align: center;
color: var(--bel-primary-500);
font-size: var(--bel-text-body-lg);
} .hl-card-rating {
position: absolute;
top: var(--bel-space-sm);
right: var(--bel-space-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
font-family: var(--bel-font-mono);
font-weight: 600;
font-size: var(--bel-text-small);
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
z-index: 1;
} .hl-filter-tag {
display: inline-flex;
align-items: center;
gap: var(--bel-space-2xs);
background: var(--bel-secondary-50);
color: var(--bel-secondary-700);
border: 1px solid var(--bel-secondary-200);
border-radius: var(--bel-radius-full);
padding: var(--bel-space-2xs) var(--bel-space-sm);
font-size: var(--bel-text-caption);
font-weight: 500;
}
.hl-filter-tag button {
background: none;
border: none;
cursor: pointer;
color: inherit;
padding: 0;
font-size: 1rem;
display: flex;
align-items: center;
}
.hl-filter-clear {
color: var(--bel-secondary-600);
font-weight: 600;
cursor: pointer;
background: none;
border: none;
font-size: var(--bel-text-small);
}
.hl-filter-clear:hover {
color: var(--bel-secondary-700);
} .hl-listing-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--bel-space-sm);
padding: var(--bel-space-md) var(--bel-container-padding);
border-bottom: 1px solid var(--bel-primary-200);
background: var(--bel-white);
} .btt-btn {
position: fixed;
bottom: var(--bel-space-xl);
right: var(--bel-space-xl);
width: 44px;
height: 44px;
border-radius: var(--bel-radius-full);
background: var(--bel-white);
color: var(--bel-primary-800);
border: 1px solid var(--bel-primary-200);
box-shadow: var(--bel-shadow-medium);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(10px);
transition: opacity var(--bel-transition-default), transform var(--bel-transition-default), background var(--bel-transition-fast);
z-index: var(--bel-z-sticky);
pointer-events: none;
}
.btt-btn.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.btt-btn:hover {
background: var(--bel-primary-50);
} .sh-sec-nav {
position: sticky;
top: 72px;
z-index: var(--bel-z-sticky);
background: var(--bel-white);
border-bottom: 1px solid var(--bel-primary-200);
}
.sh-sec-nav-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
display: flex;
gap: 0;
overflow-x: auto;
}
.sh-sec-btn {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bel-primary-500);
padding: var(--bel-space-md) var(--bel-space-lg);
border: none;
background: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--bel-transition-fast), border-color var(--bel-transition-fast);
}
.sh-sec-btn:hover {
color: var(--bel-primary-700);
}
.sh-sec-btn.is-active {
color: var(--bel-primary-900);
border-bottom-color: var(--bel-accent-500);
} .sh-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--bel-z-sticky);
background: var(--bel-white);
border-top: 1px solid var(--bel-primary-200);
box-shadow: 0 -4px 16px rgba(26,24,20,0.08);
padding: var(--bel-space-md) var(--bel-container-padding);
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
} .sh-gallery-tile {
cursor: pointer;
transition: opacity var(--bel-transition-fast);
}
.sh-gallery-tile:hover {
opacity: 0.85;
} .sh-rev-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-lg);
}
.sh-rev-card {
background: var(--bel-white);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-lg);
box-shadow: var(--bel-shadow-subtle);
}
.sh-rev-pill {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
font-weight: 600;
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
background: var(--bel-secondary-100);
color: var(--bel-secondary-700);
}
@media (max-width: 767px) {
.sh-rev-grid {
grid-template-columns: 1fr;
}
} .sh-amen-card--hidden {
display: none;
} .sh-amen-toggle,
.sh-reviews-toggle {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
background: none;
border: none;
cursor: pointer;
padding: var(--bel-space-xs) 0;
transition: color var(--bel-transition-fast);
}
.sh-amen-toggle:hover,
.sh-reviews-toggle:hover {
color: var(--bel-secondary-700);
} .sh-rooms-table {
width: 100%;
border-collapse: collapse;
}
.sh-rooms-table th,
.sh-rooms-table td {
padding: var(--bel-space-md);
text-align: left;
border-bottom: 1px solid var(--bel-primary-200);
}
.sh-rooms-table th {
font-size: var(--bel-text-small);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--bel-primary-50);
} #mp-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.88);
flex-direction: column;
gap: var(--bel-space-md);
}
#mp-lightbox.mp-lb-open {
display: flex;
}
#mp-lightbox .mp-lb-backdrop {
position: absolute;
inset: 0;
z-index: 0;
}
#mp-lightbox .mp-lb-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bel-space-sm);
max-width: 90vw;
max-height: 90vh;
}
#mp-lightbox .mp-lb-img {
max-width: 90vw;
max-height: 70vh;
object-fit: contain;
border-radius: var(--bel-radius-md);
transition: opacity var(--bel-transition-fast), transform var(--bel-transition-fast);
}
#mp-lightbox .mp-lb-img.mp-lb-fading {
opacity: 0;
transform: translateX(-10px);
}
#mp-lightbox .mp-lb-counter {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
color: rgba(255,255,255,0.6);
}
#mp-lightbox .mp-lb-close {
position: fixed;
top: var(--bel-space-md);
right: var(--bel-space-md);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: var(--bel-white);
font-size: 1.3rem;
width: 44px;
height: 44px;
border-radius: var(--bel-radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--bel-transition-fast);
}
#mp-lightbox .mp-lb-close:hover {
background: rgba(255,255,255,0.2);
}
#mp-lightbox .mp-lb-prev,
#mp-lightbox .mp-lb-next {
position: fixed;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: var(--bel-white);
width: 44px;
height: 44px;
border-radius: var(--bel-radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--bel-transition-fast);
z-index: 2;
}
#mp-lightbox .mp-lb-prev { left: var(--bel-space-md); }
#mp-lightbox .mp-lb-next { right: var(--bel-space-md); }
#mp-lightbox .mp-lb-prev:hover,
#mp-lightbox .mp-lb-next:hover {
background: rgba(255,255,255,0.25);
}
#mp-lightbox .mp-lb-thumbs {
display: flex;
gap: var(--bel-space-xs);
overflow-x: auto;
max-width: 90vw;
padding: var(--bel-space-2xs);
}
#mp-lightbox .mp-lb-thumb {
width: 56px;
height: 40px;
object-fit: cover;
border-radius: var(--bel-radius-sm);
cursor: pointer;
opacity: 0.5;
border: 2px solid transparent;
transition: opacity var(--bel-transition-fast), border-color var(--bel-transition-fast);
flex-shrink: 0;
}
#mp-lightbox .mp-lb-thumb.is-active {
opacity: 1;
border-color: var(--bel-accent-500);
} .breadcrumbs {
padding: var(--bel-space-sm) 0;
background: var(--bel-primary-50);
border-bottom: 1px solid var(--bel-primary-200);
}
.breadcrumbs ol {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bel-space-2xs);
list-style: none;
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
}
.breadcrumbs ol li {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
}
.breadcrumbs ol li + li::before {
content: '/';
color: var(--bel-primary-300);
margin: 0 var(--bel-space-2xs);
}
.breadcrumbs ol li a {
color: var(--bel-secondary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.breadcrumbs ol li a:hover {
color: var(--bel-secondary-700);
}
.breadcrumbs ol li[aria-current] {
color: var(--bel-primary-900);
font-weight: 500;
} .sr-tabs {
display: flex;
gap: var(--bel-space-xs);
flex-wrap: wrap;
margin-bottom: var(--bel-space-lg);
}
.sr-tab-btn {
padding: var(--bel-space-xs) var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-full);
background: var(--bel-white);
color: var(--bel-primary-700);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
cursor: pointer;
transition: all var(--bel-transition-fast);
min-height: 36px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--bel-space-2xs);
}
.sr-tab-btn:hover {
border-color: var(--bel-secondary-500);
color: var(--bel-secondary-600);
}
.sr-tab-btn.is-active {
background: var(--bel-secondary-600);
color: var(--bel-white);
border-color: var(--bel-secondary-600);
}
.sr-tab-count {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
opacity: 0.7;
} mark {
background: rgba(198,93,58,0.2);
color: inherit;
padding: 1px 2px;
border-radius: 2px;
} .hl-infowindow {
font-family: var(--bel-font-body);
max-width: 260px;
}
.hl-iw-img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: var(--bel-radius-sm) var(--bel-radius-sm) 0 0;
}
.hl-iw-title {
display: block;
font-family: var(--bel-font-heading);
font-size: var(--bel-text-body);
font-weight: 400;
margin: var(--bel-space-xs) 0 var(--bel-space-2xs);
}
.hl-iw-stars {
color: var(--bel-warning);
font-size: var(--bel-text-small);
}
.hl-iw-loc {
display: block;
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
margin-bottom: var(--bel-space-xs);
}
.hl-iw-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--bel-space-xs) 0;
border-top: 1px solid var(--bel-primary-200);
}
.hl-iw-rating {
background: var(--bel-secondary-600);
color: var(--bel-white);
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
padding: 3px 8px;
border-radius: var(--bel-radius-sm);
font-weight: 600;
}
.hl-iw-link {
color: var(--bel-secondary-600);
font-weight: 600;
font-size: var(--bel-text-small);
}
.hl-iw-link:hover {
color: var(--bel-secondary-700);
} .ah-hero {
position: relative;
background: var(--bel-secondary-900);
padding: var(--bel-space-4xl) 0 var(--bel-space-2xl);
text-align: center;
overflow: hidden;
}
.ah-hero-mist {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.ah-mist-blob {
position: absolute;
border-radius: var(--bel-radius-full);
filter: blur(60px);
opacity: 0.15;
}
.ah-mist-blob:nth-child(1) {
width: 400px;
height: 400px;
background: var(--bel-secondary-500);
top: -100px;
left: -100px;
animation: ah-mist-float-1 20s ease-in-out infinite;
}
.ah-mist-blob:nth-child(2) {
width: 300px;
height: 300px;
background: var(--bel-accent-500);
bottom: -50px;
right: -50px;
animation: ah-mist-float-2 25s ease-in-out infinite;
}
@keyframes ah-mist-float-1 {
0%, 100% { transform: translate(0, 0); }
50%      { transform: translate(40px, 30px); }
}
@keyframes ah-mist-float-2 {
0%, 100% { transform: translate(0, 0); }
50%      { transform: translate(-30px, -20px); }
} .ah-hero-content {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.ah-hero-eyebrow {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--bel-secondary-200);
margin: 0 0 var(--bel-space-sm);
}
.ah-hero-title {
font-family: var(--bel-font-heading);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 400;
letter-spacing: 0.12em;
color: var(--bel-secondary-200);
opacity: 0.25;
margin: 0 0 var(--bel-space-sm);
line-height: 1;
}
.ah-hero-rule {
width: 60px;
height: 3px;
background: var(--bel-accent-500);
margin: 0 auto var(--bel-space-md);
border: none;
}
.ah-hero-heading {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
color: var(--bel-white);
margin: 0 0 var(--bel-space-sm);
font-weight: 400;
}
.ah-hero-sub {
font-size: var(--bel-text-body);
color: var(--bel-secondary-200);
margin: 0 0 var(--bel-space-xl);
} .ah-search-form {
display: flex;
max-width: 480px;
margin: 0 auto;
}
.ah-search-input {
flex: 1;
padding: var(--bel-space-sm) var(--bel-space-md);
border: 1px solid var(--bel-secondary-600);
border-right: none;
border-radius: var(--bel-radius-sm) 0 0 var(--bel-radius-sm);
background: rgba(255, 255, 255, 0.1);
color: var(--bel-white);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
}
.ah-search-input::placeholder {
color: var(--bel-secondary-400);
}
.ah-search-btn {
padding: var(--bel-space-sm) var(--bel-space-md);
border: 1px solid var(--bel-secondary-600);
border-left: none;
border-radius: 0 var(--bel-radius-sm) var(--bel-radius-sm) 0;
background: var(--bel-accent-500);
color: var(--bel-white);
cursor: pointer;
transition: background var(--bel-transition-fast);
}
.ah-search-btn:hover {
background: var(--bel-accent-600);
} .ah-sidebar {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
box-shadow: var(--bel-shadow-subtle);
padding: var(--bel-space-lg);
align-self: start;
position: sticky;
top: var(--bel-space-lg);
}
.ah-sidebar-toggle {
display: none;
width: 100%;
padding: var(--bel-space-md);
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
cursor: pointer;
font-family: var(--bel-font-body);
font-weight: 600;
}
.ah-sidebar-body {
display: block;
}
@media (max-width: 767px) {
.ah-sidebar-toggle {
display: block;
}
.ah-sidebar-body {
display: none;
}
.ah-sidebar-body.is-open {
display: block;
}
} .ah-filter-form {
display: flex;
flex-direction: column;
}
.ah-filter-search {
margin-bottom: var(--bel-space-lg);
}
.ah-search-wrap {
position: relative;
}
.ah-filter-search-input {
width: 100%;
padding: var(--bel-space-xs) var(--bel-space-md) var(--bel-space-xs) var(--bel-space-xl);
border: 1px solid var(--bel-primary-400);
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
background: var(--bel-white);
}
.ah-search-ico {
position: absolute;
left: var(--bel-space-sm);
top: 50%;
transform: translateY(-50%);
color: var(--bel-primary-400);
pointer-events: none;
}
.ah-sort-select {
width: 100%;
padding: var(--bel-space-xs) var(--bel-space-sm);
border: 1px solid var(--bel-primary-400);
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
background: var(--bel-white);
cursor: pointer;
}
.ah-apply-btn {
width: 100%;
padding: var(--bel-space-sm) var(--bel-space-md);
border: none;
border-radius: var(--bel-radius-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
font-family: var(--bel-font-body);
font-weight: 600;
font-size: var(--bel-text-small);
cursor: pointer;
transition: background var(--bel-transition-fast);
}
.ah-apply-btn:hover {
background: var(--bel-secondary-700);
} .ah-filter-group {
margin-bottom: var(--bel-space-lg);
}
.ah-filter-label {
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-primary-900);
margin-bottom: var(--bel-space-xs);
}
.ah-filter-options {
display: flex;
flex-direction: column;
gap: var(--bel-space-xs);
}
.ah-chips {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-xs);
}
.ah-chip {
display: inline-flex;
align-items: center;
gap: var(--bel-space-2xs);
padding: var(--bel-space-2xs) var(--bel-space-sm);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-full);
font-size: var(--bel-text-caption);
color: var(--bel-primary-700);
background: var(--bel-white);
cursor: pointer;
transition: all var(--bel-transition-fast);
}
.ah-chip:hover {
border-color: var(--bel-secondary-500);
color: var(--bel-secondary-600);
}
.ah-chip.is-active {
background: var(--bel-secondary-600);
color: var(--bel-white);
border-color: var(--bel-secondary-600);
} .ah-map-section {
background: var(--bel-primary-100);
border-bottom: 1px solid var(--bel-primary-200);
}
.ah-map-container {
width: 100%;
height: 500px;
}
.ah-map-toggle {
padding: var(--bel-space-xs) var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
background: var(--bel-white);
font-family: var(--bel-font-body);
font-weight: 500;
font-size: var(--bel-text-small);
cursor: pointer;
transition: all var(--bel-transition-fast);
}
.ah-map-toggle:hover {
border-color: var(--bel-secondary-500);
color: var(--bel-secondary-600);
} .ah-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--bel-space-md) var(--bel-container-padding);
border-bottom: 1px solid var(--bel-primary-200);
background: var(--bel-white);
flex-wrap: wrap;
gap: var(--bel-space-sm);
}
.ah-count {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
}
.ah-views {
display: flex;
gap: var(--bel-space-2xs);
} .ah-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
overflow: hidden;
transition: all var(--bel-transition-default);
}
.ah-card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-2px);
}
.ah-card-img {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.ah-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.ah-card:hover .ah-card-img img {
transform: scale(1.05);
}
.ah-card-body {
padding: var(--bel-space-lg);
}
.ah-card-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-xs);
}
.ah-card-meta {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
} .ah-bd--excellent { border-left: 4px solid var(--bel-success); }
.ah-bd--great { border-left: 4px solid var(--bel-secondary-500); }
.ah-bd--good { border-left: 4px solid var(--bel-warning); } .ah-pagination {
padding: var(--bel-space-2xl) 0;
}
.ah-pagination__inner,
.ah-pagination__inner ul,
.ah-pagination ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
gap: var(--bel-space-2xs);
list-style: none;
padding: 0;
margin: 0;
}
.ah-pagination li {
display: inline-flex;
}
.ah-pagination a,
.ah-pagination span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--bel-space-sm);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-mono);
font-size: var(--bel-text-body);
font-weight: 500;
color: var(--bel-primary-700);
text-decoration: none;
transition: all var(--bel-transition-fast);
}
.ah-pagination a:hover {
background: var(--bel-secondary-50);
border-color: var(--bel-secondary-500);
color: var(--bel-secondary-700);
}
.ah-pagination .current {
background: var(--bel-secondary-900);
border-color: var(--bel-secondary-900);
color: var(--bel-white);
font-weight: 700;
}
.ah-pagination .dots {
border: none;
color: var(--bel-primary-400);
}
.ah-pagination .prev,
.ah-pagination .next {
font-weight: 700;
} .ah-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--bel-space-xl);
max-width: 1400px;
margin: 0 auto;
padding: var(--bel-space-xl) var(--bel-container-padding);
}
@media (max-width: 991px) {
.ah-layout {
grid-template-columns: 1fr;
}
}
.ah-main {
min-width: 0;
} .ah-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--bel-space-lg);
} .ah-card-a {
display: block;
text-decoration: none;
color: inherit;
}
.ah-card-a:hover {
text-decoration: none;
color: inherit;
} .ah-card-fig {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
margin: 0;
}
.ah-card-fig img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.ah-card:hover .ah-card-fig img {
transform: scale(1.05);
} .ah-badge {
position: absolute;
top: var(--bel-space-sm);
right: var(--bel-space-sm);
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
font-size: var(--bel-text-small);
font-weight: 700;
font-family: var(--bel-font-body);
line-height: 1;
color: var(--bel-white);
background: var(--bel-primary-700);
}
.ah-bd--gold { background: var(--bel-accent-600); }
.ah-bd--green { background: var(--bel-success); }
.ah-bd--teal { background: var(--bel-secondary-500); }
.ah-bd--blue { background: var(--bel-secondary-600); }
.ah-bd--muted { background: var(--bel-primary-500); } .ah-card-stars {
color: var(--bel-accent-500);
margin-bottom: var(--bel-space-2xs);
}
.ah-card-stars svg {
width: 14px;
height: 14px;
} .ah-card-loc {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin: 0;
}
.ah-card-loc svg {
flex-shrink: 0;
} .ah-card-cta {
display: inline-block;
margin-top: var(--bel-space-sm);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
}
.ah-card-a:hover .ah-card-cta {
color: var(--bel-accent-500);
} .ah-card-exc {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin: var(--bel-space-xs) 0 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .ah-card--wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
}
.ah-card--wide .ah-card-fig {
aspect-ratio: auto;
}
@media (max-width: 767px) {
.ah-card--wide {
grid-template-columns: 1fr;
}
} .ah-tags-strip {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-xs);
margin-bottom: var(--bel-space-lg);
}
.ah-tags-strip:empty {
display: none;
} .ah-map-trigger-wrap {
margin-top: var(--bel-space-md);
}
.ah-map-trigger-btn {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
width: 100%;
padding: var(--bel-space-sm) var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
background: var(--bel-white);
font-family: var(--bel-font-body);
font-weight: 500;
font-size: var(--bel-text-small);
cursor: pointer;
transition: all var(--bel-transition-fast);
}
.ah-map-trigger-btn:hover {
border-color: var(--bel-secondary-500);
color: var(--bel-secondary-600);
}
.ah-map-badge {
margin-left: auto;
padding: 0.1em 0.5em;
border-radius: var(--bel-radius-full);
background: var(--bel-primary-100);
font-size: var(--bel-text-caption);
font-weight: 600;
} .ah-map-panel {
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
overflow: hidden;
margin-bottom: var(--bel-space-xl);
}
.ah-map-panel[hidden] {
display: none;
}
.ah-map-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--bel-space-xs) var(--bel-space-md);
background: var(--bel-primary-50);
border-bottom: 1px solid var(--bel-primary-200);
}
.ah-map-count {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
}
.ah-map-close {
padding: var(--bel-space-2xs);
border: none;
background: none;
cursor: pointer;
color: var(--bel-primary-500);
border-radius: var(--bel-radius-sm);
transition: background var(--bel-transition-fast);
}
.ah-map-close:hover {
background: var(--bel-primary-100);
}
.ah-map-canvas {
width: 100%;
height: 450px;
} .ah-empty {
text-align: center;
padding: var(--bel-space-4xl) var(--bel-container-padding);
}
.ah-empty-icon {
font-size: 3rem;
margin-bottom: var(--bel-space-lg);
opacity: 0.3;
}
.ah-empty-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
color: var(--bel-primary-700);
margin-bottom: var(--bel-space-sm);
}
.ah-empty-text {
color: var(--bel-primary-500);
font-size: var(--bel-text-body);
} .nf-code {
display: block;
font-family: var(--bel-font-mono);
font-weight: 700;
font-size: clamp(5rem, 15vw, 10rem);
line-height: 1;
color: var(--bel-primary-300);
opacity: 0.4;
margin-bottom: var(--bel-space-sm);
}
.nf-actions {
text-align: center;
}
.nf-home-btn {
margin-top: var(--bel-space-lg);
}
.nf-popular-links {
margin: var(--bel-space-lg) 0;
}
.nf-popular-label {
font-weight: 600;
color: var(--bel-primary-500);
margin-bottom: var(--bel-space-xs);
font-size: var(--bel-text-small);
}
.nf-popular-links ul {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-xs);
list-style: none;
padding: 0;
margin: 0;
}
.nf-popular-links ul li a {
display: inline-block;
padding: var(--bel-space-2xs) var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-full);
font-size: var(--bel-text-small);
color: var(--bel-secondary-600);
transition: all var(--bel-transition-fast);
}
.nf-popular-links ul li a:hover {
background: var(--bel-secondary-600);
color: var(--bel-white);
border-color: var(--bel-secondary-600);
}
.nf-suggestions {
margin: var(--bel-space-xl) 0;
}
.nf-suggest-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
margin-bottom: var(--bel-space-lg);
} .sp-progress {
position: fixed;
top: 72px;
left: 0;
height: 3px;
width: 0%;
background: var(--bel-accent-500);
z-index: var(--bel-z-dropdown);
transition: width 100ms linear;
} .sp-article {
background: var(--bel-primary-50);
}
.sp-featured {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.sp-featured-img {
width: 100%;
border-radius: var(--bel-radius-md);
margin-top: var(--bel-space-xl);
}
.sp-body {
max-width: var(--bel-container-text);
margin: 0 auto;
padding: var(--bel-space-2xl) var(--bel-container-padding);
}
.sp-header {
margin-bottom: var(--bel-space-xl);
}
.sp-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h1);
color: var(--bel-primary-900);
margin: var(--bel-space-2xs) 0 var(--bel-space-sm);
line-height: var(--bel-lh-h1);
}
.sp-meta {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
display: flex;
align-items: center;
gap: var(--bel-space-xs);
flex-wrap: wrap;
}
.sp-meta a {
color: var(--bel-secondary-600);
transition: color var(--bel-transition-fast);
}
.sp-meta a:hover {
color: var(--bel-secondary-700);
}
.sp-meta-sep {
color: var(--bel-primary-300);
}
.sp-content {
line-height: var(--bel-lh-body);
color: var(--bel-primary-800);
}
.sp-content h2 {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin-top: var(--bel-space-2xl);
}
.sp-content h3 {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
margin-top: var(--bel-space-xl);
}
.sp-content a {
color: var(--bel-secondary-600);
font-weight: 500;
}
.sp-content a:hover {
color: var(--bel-secondary-700);
}
.sp-content img {
border-radius: var(--bel-radius-md);
margin: var(--bel-space-lg) 0;
}
.sp-tags {
margin-top: var(--bel-space-xl);
padding-top: var(--bel-space-lg);
border-top: 1px solid var(--bel-primary-200);
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-xs);
}
.sp-tag {
display: inline-block;
padding: var(--bel-space-2xs) var(--bel-space-sm);
font-size: var(--bel-text-caption);
font-weight: 500;
border-radius: var(--bel-radius-full);
background: var(--bel-secondary-50);
border: 1px solid var(--bel-secondary-200);
color: var(--bel-secondary-700);
transition: all var(--bel-transition-fast);
}
.sp-tag:hover {
background: var(--bel-secondary-100);
border-color: var(--bel-secondary-300);
}
.sp-nav {
border-top: 1px solid var(--bel-primary-200);
margin-top: var(--bel-space-2xl);
padding-top: var(--bel-space-xl);
}
.sp-nav-inner {
display: flex;
justify-content: space-between;
gap: var(--bel-space-xl);
}
.sp-nav-link {
display: flex;
flex-direction: column;
gap: var(--bel-space-2xs);
padding: var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
flex: 1;
transition: border-color var(--bel-transition-fast);
text-decoration: none;
}
.sp-nav-link:hover {
border-color: var(--bel-secondary-500);
}
.sp-nav-dir {
font-size: var(--bel-text-caption);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bel-secondary-600);
}
.sp-nav-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-body);
color: var(--bel-primary-700);
line-height: var(--bel-lh-h4);
transition: color var(--bel-transition-fast);
}
.sp-nav-link:hover .sp-nav-title {
color: var(--bel-primary-900);
} .ar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--bel-space-xl);
}
.ar-card {
display: flex;
flex-direction: column;
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
box-shadow: var(--bel-shadow-subtle);
overflow: hidden;
transition: all var(--bel-transition-default);
}
.ar-card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-4px);
}
.ar-card-thumb {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
flex-shrink: 0;
}
.ar-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.ar-card:hover .ar-card-img {
transform: scale(1.04);
}
.ar-card-body {
padding: var(--bel-space-lg);
}
.ar-card-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
color: var(--bel-primary-900);
margin: var(--bel-space-2xs) 0;
line-height: var(--bel-lh-h4);
}
.ar-card-title a {
color: inherit;
text-decoration: none;
}
.ar-card-title a:hover {
color: var(--bel-secondary-600);
}
.ar-card-excerpt {
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
line-height: var(--bel-lh-body);
margin: var(--bel-space-xs) 0 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ar-card-meta {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
margin-top: var(--bel-space-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
} .ar-pagination {
margin-top: var(--bel-space-2xl);
}
.ar-pagination .nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--bel-space-xs);
}
.ar-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-body);
font-weight: 500;
font-size: var(--bel-text-small);
color: var(--bel-primary-700);
border: 1px solid var(--bel-primary-200);
background: var(--bel-white);
transition: all var(--bel-transition-fast);
text-decoration: none;
}
.ar-pagination .page-numbers:hover {
border-color: var(--bel-secondary-500);
color: var(--bel-secondary-600);
}
.ar-pagination .page-numbers.current {
background: var(--bel-secondary-600);
color: var(--bel-white);
border-color: var(--bel-secondary-600);
} .bl-hero {
position: relative;
}
.bl-featured {
padding: var(--bel-space-2xl) 0;
background: var(--bel-primary-50);
}
.bl-featured-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bl-grid-section {
padding: var(--bel-space-2xl) 0 var(--bel-space-4xl);
background: var(--bel-white);
}
.bl-grid-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
} .pg-hero {
background: var(--bel-secondary-900);
padding: var(--bel-space-4xl) 0;
text-align: center;
}
.pg-hero-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.pg-hero-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h1);
color: var(--bel-white);
margin-bottom: var(--bel-space-sm);
}
.pg-hero-subtitle {
font-size: var(--bel-text-body-lg);
color: var(--bel-primary-300);
max-width: 600px;
margin: 0 auto;
}
.pg-section {
padding: var(--bel-space-3xl) 0;
}
.pg-section-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.pg-label {
display: inline-block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
letter-spacing: var(--bel-ls-h6);
text-transform: uppercase;
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.pg-content {
line-height: var(--bel-lh-body);
color: var(--bel-primary-800);
}
.pg-content h2,
.pg-content h3 {
margin-top: var(--bel-space-xl);
}
.pg-content a {
color: var(--bel-secondary-600);
font-weight: 500;
}
.pg-content a:hover {
color: var(--bel-secondary-700);
}
.pg-content img {
border-radius: var(--bel-radius-md);
margin: var(--bel-space-lg) 0;
} .cu-section {
padding: var(--bel-space-3xl) 0;
}
.cu-section-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.cu-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--bel-space-2xl);
align-items: start;
}
.cu-cards {
display: flex;
flex-direction: column;
gap: var(--bel-space-sm);
}
.cu-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-lg);
display: flex;
align-items: flex-start;
gap: var(--bel-space-sm);
transition: border-color var(--bel-transition-fast);
}
.cu-card:hover {
border-color: var(--bel-primary-300);
}
.cu-card-icon {
width: 44px;
height: 44px;
border-radius: var(--bel-radius-md);
background: var(--bel-accent-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--bel-accent-500);
}
.cu-card h3 {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-2xs);
}
.cu-card p {
margin: 0;
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
}
.cu-card a {
color: var(--bel-secondary-600);
}
.cu-card a:hover {
color: var(--bel-secondary-700);
}
.cu-form-wrap {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-xl);
}
.cu-form {
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
}
.cu-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bel-space-md);
}
.cu-form-group {
display: flex;
flex-direction: column;
gap: var(--bel-space-2xs);
}
.cu-form-label {
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-primary-800);
}
.cu-form-input,
.cu-form-textarea {
border: 1px solid var(--bel-primary-400);
border-radius: var(--bel-radius-sm);
padding: var(--bel-space-sm) var(--bel-space-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
color: var(--bel-primary-900);
transition: border-color var(--bel-transition-fast), box-shadow var(--bel-transition-fast);
}
.cu-form-input:focus,
.cu-form-textarea:focus {
outline: none;
border-color: var(--bel-secondary-500);
box-shadow: var(--bel-shadow-glow);
}
.cu-form-textarea {
min-height: 130px;
resize: vertical;
}
.cu-form-submit {
align-self: flex-start;
}
@media (max-width: 1024px) {
.cu-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.cu-form-row { grid-template-columns: 1fr; }
}  .cs-section,
.cs-why-section,
.cs-exp-section,
.cs-steps-section,
.cs-contact-section {
padding: var(--bel-space-3xl) 0;
}
.cs-why-section { background: var(--bel-primary-50); }
.cs-steps-section { background: var(--bel-secondary-900); color: var(--bel-white); }
.cs-section-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.cs-section-header {
text-align: center;
margin-bottom: var(--bel-space-2xl);
}
.cs-section-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-sm);
}
.cs-steps-section .cs-section-title { color: var(--bel-white); }
.cs-steps-section .ah-hero-eyebrow { color: var(--bel-secondary-300); }
.cs-section-sub {
font-size: var(--bel-text-body);
color: var(--bel-primary-500);
max-width: 600px;
margin: 0 auto;
} .cs-section-header .ah-hero-eyebrow,
.cs-why-section .ah-hero-eyebrow,
.cs-exp-section .ah-hero-eyebrow,
.cs-contact-section .ah-hero-eyebrow,
.cu-section-header .ah-hero-eyebrow {
color: var(--bel-secondary-600);
}
.cs-steps-section .cs-section-sub { color: rgba(255,255,255,0.6); } .cs-opening {
padding: var(--bel-space-3xl) 0;
background: var(--bel-white);
}
.cs-opening-inner {
max-width: var(--bel-container-text);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
text-align: center;
}
.cs-opening h2 {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
margin: 0 0 var(--bel-space-md);
}
.cs-opening p {
font-size: var(--bel-text-body-lg);
color: var(--bel-primary-600);
line-height: 1.7;
}
.cs-quote {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
font-style: italic;
color: var(--bel-primary-700);
border-left: 3px solid var(--bel-accent-500);
padding-left: var(--bel-space-lg);
margin: var(--bel-space-xl) auto 0;
max-width: 520px;
text-align: left;
line-height: 1.5;
} .cs-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bel-space-xl);
}
.cs-why-card {
text-align: center;
padding: var(--bel-space-xl);
}
.cs-why-num {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h1);
font-weight: 700;
color: var(--bel-accent-500);
opacity: 0.3;
line-height: 1;
margin: 0 0 var(--bel-space-md);
}
.cs-why-card h3 {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-sm);
}
.cs-why-card p {
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
margin: 0;
line-height: 1.6;
} .cs-exp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bel-space-lg);
}
.cs-exp-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-xl);
border-top: 3px solid var(--bel-accent-500);
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
}
.cs-exp-card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-3px);
}
.cs-exp-card h3 {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-sm);
}
.cs-exp-card p {
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
margin: 0;
line-height: 1.6;
} .cs-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bel-space-lg);
}
.cs-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-100);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-xl);
text-align: center;
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
}
.cs-card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-2px);
}
.cs-card-icon {
width: 56px;
height: 56px;
border-radius: var(--bel-radius-full);
background: var(--bel-secondary-50, var(--bel-primary-50));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--bel-space-md);
color: var(--bel-secondary-600);
}
.cs-card h3 {
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 600;
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-xs);
}
.cs-card p {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin: 0;
line-height: 1.5;
} .cs-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--bel-space-xl);
text-align: center;
}
.cs-step-num {
width: 56px;
height: 56px;
border-radius: var(--bel-radius-full);
border: 2px solid var(--bel-accent-500);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--bel-space-md);
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h3);
font-weight: 700;
color: var(--bel-accent-500);
}
.cs-step h3 {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
color: var(--bel-white);
margin: 0 0 var(--bel-space-sm);
}
.cs-step p {
font-size: var(--bel-text-body);
color: rgba(255,255,255,0.65);
margin: 0;
line-height: 1.6;
} .cs-cta-phones {
margin-bottom: var(--bel-space-lg);
}
.cs-cta-phone {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h3);
font-weight: 600;
color: var(--bel-white);
text-decoration: none;
}
.cs-cta-phone:hover {
color: var(--bel-accent-300, #E8A488);
} .hp-cta-banner {
background: var(--bel-secondary-900);
padding: var(--bel-space-3xl) 0;
text-align: center;
color: var(--bel-white);
}
.hp-section-inner {
max-width: var(--bel-container-text);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.hp-cta-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
color: var(--bel-white);
margin: 0 0 var(--bel-space-sm);
}
.hp-cta-subtitle {
font-size: var(--bel-text-body);
color: rgba(255,255,255,0.65);
margin: 0 0 var(--bel-space-xl);
}
.hp-cta-buttons {
display: flex;
justify-content: center;
gap: var(--bel-space-md);
flex-wrap: wrap;
}
.hp-btn-solid {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
padding: var(--bel-space-sm) var(--bel-space-xl);
background: var(--bel-accent-500);
color: var(--bel-white);
border-radius: var(--bel-radius-sm);
font-weight: 600;
font-size: var(--bel-text-body);
text-decoration: none;
transition: background var(--bel-transition-fast);
}
.hp-btn-solid:hover {
background: var(--bel-accent-600);
color: var(--bel-white);
}
.hp-btn-outline {
display: inline-flex;
align-items: center;
padding: var(--bel-space-sm) var(--bel-space-xl);
border: 1px solid var(--bel-primary-300);
border-radius: var(--bel-radius-sm);
color: var(--bel-primary-800);
font-weight: 600;
font-size: var(--bel-text-body);
text-decoration: none;
transition: all var(--bel-transition-fast);
}
.hp-btn-outline:hover {
border-color: var(--bel-primary-900);
color: var(--bel-primary-900);
}
.hp-btn-outline--light {
border-color: rgba(255,255,255,0.3);
color: rgba(255,255,255,0.85);
}
.hp-btn-outline--light:hover {
border-color: rgba(255,255,255,0.6);
color: var(--bel-white);
} @media (max-width: 1023px) {
.cs-why-grid,
.cs-exp-grid,
.cs-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.cs-why-grid,
.cs-exp-grid,
.cs-services-grid,
.cs-steps-grid { grid-template-columns: 1fr; }
.cs-opening { padding: var(--bel-space-2xl) 0; }
.cs-section, .cs-why-section, .cs-exp-section, .cs-steps-section, .cs-contact-section { padding: var(--bel-space-2xl) 0; }
} .cs-contact-form-wrap {
max-width: 640px;
margin: 0 auto;
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-lg);
padding: var(--bel-space-2xl);
box-shadow: var(--bel-shadow-subtle);
}
.cs-contact-form-wrap .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--bel-space-lg);
}
.cs-contact-form-wrap .wpcf7-form p {
margin: 0;
}
.cs-contact-form-wrap label {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-primary-800);
margin-bottom: var(--bel-space-2xs);
}
.cs-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit) {
display: block;
width: 100%;
border: 1px solid var(--bel-primary-400);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-sm) var(--bel-space-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
color: var(--bel-primary-900);
background: var(--bel-white);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cs-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit):focus {
outline: none;
border-color: var(--bel-secondary-500);
box-shadow: var(--bel-shadow-glow);
}
.cs-contact-form-wrap .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
color: var(--bel-primary-400);
}
.cs-contact-form-wrap textarea.wpcf7-form-control {
min-height: 140px;
resize: vertical;
}
.cs-contact-form-wrap .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bel-space-xs);
min-height: 48px;
padding: var(--bel-space-sm) var(--bel-space-2xl);
background: var(--bel-secondary-900);
color: var(--bel-white);
border: none;
border-radius: var(--bel-radius-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 150ms ease, transform 150ms ease;
}
.cs-contact-form-wrap .wpcf7-submit:hover {
background: var(--bel-secondary-700);
transform: translateY(-1px);
}
.cs-contact-form-wrap .wpcf7-submit:active {
transform: translateY(0);
}
.cs-contact-form-wrap .wpcf7-submit:focus-visible {
outline: none;
box-shadow: var(--bel-shadow-glow);
} .cs-contact-form-wrap .wpcf7-not-valid {
border-color: var(--bel-error, #B83232);
}
.cs-contact-form-wrap .wpcf7-not-valid-tip {
font-size: var(--bel-text-small);
color: var(--bel-error, #B83232);
margin-top: var(--bel-space-2xs);
}
.cs-contact-form-wrap .wpcf7-response-output {
margin: var(--bel-space-md) 0 0;
padding: var(--bel-space-sm) var(--bel-space-md);
border-radius: var(--bel-radius-md);
font-size: var(--bel-text-small);
border: 1px solid var(--bel-primary-200);
}
.cs-contact-form-wrap .wpcf7-form.sent .wpcf7-response-output {
border-color: var(--bel-success, #3A7D44);
background: var(--bel-success-light, #E8F3EA);
color: var(--bel-success, #3A7D44);
}
.cs-contact-form-wrap .wpcf7-form.invalid .wpcf7-response-output,
.cs-contact-form-wrap .wpcf7-form.failed .wpcf7-response-output {
border-color: var(--bel-error, #B83232);
background: var(--bel-error-light, #FAEAEA);
color: var(--bel-error, #B83232);
} .cs-contact-form-wrap .wpcf7-spinner {
margin-left: var(--bel-space-sm);
} .cu-section-header {
text-align: center;
margin-bottom: var(--bel-space-2xl);
}
.cu-section-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-sm);
}
.cu-section-sub {
font-size: var(--bel-text-body);
color: var(--bel-primary-500);
max-width: 560px;
margin: 0 auto;
} .au-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bel-space-3xl);
align-items: center;
}
.au-prose {
line-height: var(--bel-lh-body);
color: var(--bel-primary-800);
}
.au-stats-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-lg);
padding: var(--bel-space-xl);
box-shadow: var(--bel-shadow-medium);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bel-space-lg);
}
.au-stat {
text-align: center;
padding: var(--bel-space-md) var(--bel-space-xs);
}
.au-stat-number {
display: block;
font-family: var(--bel-font-mono);
font-weight: 700;
font-size: var(--bel-text-h1);
color: var(--bel-accent-500);
line-height: 1;
}
.au-stat-label {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
margin-top: var(--bel-space-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.au-values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--bel-space-lg);
}
.au-value-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-xl);
text-align: center;
transition: all var(--bel-transition-default);
}
.au-value-card:hover {
transform: translateY(-3px);
box-shadow: var(--bel-shadow-medium);
}
.au-value-icon {
width: 56px;
height: 56px;
border-radius: var(--bel-radius-md);
background: var(--bel-secondary-50);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--bel-space-lg);
}
.au-value-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
color: var(--bel-primary-900);
margin-bottom: var(--bel-space-xs);
}
.au-value-desc {
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
line-height: var(--bel-lh-body);
}
@media (max-width: 767px) {
.au-story-grid {
grid-template-columns: 1fr;
}
} .cs-section {
padding: var(--bel-space-3xl) 0;
}
.cs-section-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.cs-services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--bel-space-lg);
}
.cs-card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-xl);
transition: border-color var(--bel-transition-fast);
}
.cs-card:hover {
border-color: var(--bel-primary-300);
} .pp-section {
padding: var(--bel-space-3xl) 0;
}
.pp-section-inner {
max-width: 860px;
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.pp-content {
color: var(--bel-primary-800);
line-height: 1.8;
font-size: var(--bel-text-body);
}
.pp-content h2 {
margin: var(--bel-space-2xl) 0 var(--bel-space-sm);
padding-bottom: var(--bel-space-xs);
border-bottom: 1px solid var(--bel-primary-200);
}
.pp-content a {
color: var(--bel-secondary-600);
}
.pp-content a:hover {
color: var(--bel-secondary-700);
} .wp-block-group {
margin: 0 auto;
}
.wp-block-group.has-global-padding {
padding-left: var(--bel-container-padding);
padding-right: var(--bel-container-padding);
}
.wp-block-group.is-layout-constrained {
max-width: var(--bel-container-max);
margin: 0 auto;
}
.wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-sm);
}
.wp-block-button__link,
.wp-element-button {
display: inline-block;
padding: 0.75rem 1.75rem;
border-radius: var(--bel-radius-sm);
font-family: var(--bel-font-body);
font-weight: 600;
font-size: var(--bel-text-body);
text-decoration: none;
cursor: pointer;
transition: all var(--bel-transition-default);
border: none;
}
.wp-block-separator {
border: none;
height: 1px;
background: var(--bel-primary-200);
margin: var(--bel-space-xl) auto;
max-width: 240px;
opacity: 0.6;
} .site-footer {
background: var(--bel-secondary-900);
color: var(--bel-primary-300);
padding: var(--bel-space-4xl) 0 var(--bel-space-xl);
}
.site-footer-inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.site-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: var(--bel-space-3xl);
margin-bottom: var(--bel-space-3xl);
}
.site-footer-brand {
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
}
.site-footer-site-name {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h3);
color: var(--bel-white);
text-decoration: none;
}
.site-footer-heading {
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-white);
margin-bottom: var(--bel-space-md);
}
.site-footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer-column ul li a {
color: rgba(255,255,255,0.7);
font-size: var(--bel-text-small);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.site-footer-column ul li a:hover {
color: var(--bel-white);
}
.site-footer-bottom {
border-top: 1px solid rgba(196,188,176,0.15);
padding-top: var(--bel-space-xl);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--bel-space-md);
}
.site-footer-copyright {
font-size: var(--bel-text-caption);
color: rgba(255,255,255,0.55);
}
.site-footer-social {
display: flex;
gap: var(--bel-space-md);
}
.site-footer-social a {
color: rgba(255,255,255,0.7);
transition: color var(--bel-transition-fast);
}
.site-footer-social a:hover {
color: var(--bel-accent-400);
}
@media (max-width: 767px) {
.site-footer-grid {
grid-template-columns: 1fr;
gap: var(--bel-space-xl);
}
.site-footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
} .kv-sidebar {
display: none;
}
.kv-sidebar-burger {
display: none;
}
.kv-sidebar-overlay {
display: none;
} .kv-sa-filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-sm);
margin-bottom: var(--bel-space-xl);
}
.kv-sa-filter-btn {
padding: var(--bel-space-xs) var(--bel-space-lg);
border-radius: var(--bel-radius-full);
border: 1px solid var(--bel-primary-300);
background: transparent;
color: var(--bel-primary-600);
cursor: pointer;
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
transition: all var(--bel-transition-default);
min-height: 44px;
}
.kv-sa-filter-btn:hover {
border-color: var(--bel-accent-500);
color: var(--bel-accent-500);
}
.kv-sa-filter-btn.is-active {
background: var(--bel-accent-500);
border-color: var(--bel-accent-500);
color: var(--bel-white);
} .kv-hero-meta {
display: flex;
gap: var(--bel-space-xl);
flex-wrap: wrap;
margin-top: var(--bel-space-xl);
}
.kv-hero-meta-label {
font-size: var(--bel-text-caption);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
.kv-hero-meta-value {
font-size: var(--bel-text-small);
color: rgba(255,255,255,0.85);
}  @media (max-width: 479px) {
.bel-hero__content {
padding: var(--bel-space-3xl) var(--bel-space-md);
}
.bel-hero__meta {
gap: var(--bel-space-md);
}
.bel-featured__grid,
.hl-hotels-grid,
.ar-grid {
grid-template-columns: 1fr;
}
.bel-advantages__inner {
grid-template-columns: repeat(2, 1fr);
gap: var(--bel-space-md);
}
.sp-nav-inner {
flex-direction: column;
}
.btt-btn {
bottom: 5.5rem;
right: var(--bel-space-md);
}
} @media (min-width: 480px) and (max-width: 767px) {
.bel-amenities__grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (min-width: 768px) {
.bel-footer__columns {
grid-template-columns: repeat(2, 1fr);
}
.bel-blog-preview__grid {
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
}
} @media (min-width: 1024px) {
.bel-featured__grid {
grid-template-columns: repeat(3, 1fr);
}
.bel-footer__columns {
grid-template-columns: repeat(4, 1fr);
}
.bel-hotel-content {
grid-template-columns: 1fr 380px;
}
.bel-similar__grid {
grid-template-columns: repeat(4, 1fr);
}
}  .bel-hero__meta-value {
display: block;
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h4);
font-weight: 600;
color: var(--bel-white);
line-height: 1.2;
}
.bel-hero__meta-label {
display: block;
font-size: var(--bel-text-caption);
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: var(--bel-space-2xs);
} .bel-search__form {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
@media (max-width: 767px) {
.bel-search__form {
flex-direction: column;
gap: var(--bel-space-sm);
}
} .bel-hotel-card__figure {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: var(--bel-radius-md) var(--bel-radius-md) 0 0;
}
.bel-hotel-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.bel-hotel-card:hover .bel-hotel-card__img {
transform: scale(1.04);
}
.bel-hotel-card__rating {
position: absolute;
top: var(--bel-space-sm);
right: var(--bel-space-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
font-family: var(--bel-font-mono);
font-weight: 600;
font-size: var(--bel-text-small);
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
z-index: 1;
}
.bel-hotel-card__desc {
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
line-height: var(--bel-lh-small);
margin-top: var(--bel-space-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}   .bel-districts__card-img--legacy {
display: none;
transition: transform 600ms ease;
}  .bel-advantages__value {
display: block;
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h2);
font-weight: 700;
color: var(--bel-white);
margin-bottom: var(--bel-space-xs);
line-height: 1;
}  .bel-blog-preview__card-link {
display: block;
text-decoration: none;
color: inherit;
}
.bel-blog-preview__card-img {
overflow: hidden;
}
.bel-blog-preview__card-img img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 500ms ease;
}
.bel-blog-preview__card:hover .bel-blog-preview__card-img img {
transform: scale(1.04);
}
.bel-blog-preview__card-body {
padding: var(--bel-space-lg);
}
.bel-blog-preview__excerpt {
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
line-height: var(--bel-lh-small);
margin: var(--bel-space-xs) 0 var(--bel-space-md);
}
.bel-blog-preview__read-more {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
transition: color var(--bel-transition-fast);
}
.bel-blog-preview__card:hover .bel-blog-preview__read-more {
color: var(--bel-secondary-700);
}
.bel-blog-preview__cta {
text-align: center;
margin-top: var(--bel-space-xl);
}
.bel-blog-preview__cta-link {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-blog-preview__cta-link:hover {
color: var(--bel-secondary-700);
} .bel-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.875rem 1.75rem;
border-radius: var(--bel-radius-sm);
transition: all var(--bel-transition-default);
cursor: pointer;
min-height: 48px;
text-decoration: none;
line-height: 1.4;
border: 2px solid transparent;
}
.bel-cta__btn--primary {
background: var(--bel-accent-600);
color: var(--bel-white);
box-shadow: var(--bel-shadow-subtle);
}
.bel-cta__btn--primary:hover {
background: var(--bel-accent-700);
box-shadow: var(--bel-shadow-medium);
transform: translateY(-1px);
}
.bel-cta__btn--secondary {
background: transparent;
color: var(--bel-white);
border-color: rgba(255,255,255,0.4);
}
.bel-cta__btn--secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.7);
color: var(--bel-white);
} .bel-gallery__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
max-height: 560px;
overflow: hidden;
}
.bel-gallery__tile {
position: relative;
overflow: hidden;
cursor: pointer;
border: none;
padding: 0;
background: var(--bel-primary-100);
}
.bel-gallery__tile--hero {
grid-row: 1 / 3;
}
.bel-gallery__tile--thumb {
min-height: 0;
}
.bel-gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--bel-transition-fast);
}
.bel-gallery__tile:hover .bel-gallery__img {
opacity: 0.85;
}
.bel-gallery__open-btn {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
position: absolute;
bottom: var(--bel-space-md);
right: var(--bel-space-md);
background: rgba(255,255,255,0.9);
color: var(--bel-primary-900);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
padding: var(--bel-space-xs) var(--bel-space-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
cursor: pointer;
transition: background var(--bel-transition-fast);
z-index: 2;
}
.bel-gallery__open-btn:hover {
background: var(--bel-white);
}
.bel-gallery--single .bel-gallery__grid--single {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
max-height: 480px;
}
@media (max-width: 767px) {
.bel-gallery__grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
max-height: none;
}
.bel-gallery__tile--hero {
grid-row: auto;
}
.bel-gallery__tile--thumb {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.bel-gallery__grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
max-height: none;
}
.bel-gallery__tile--hero {
grid-row: 1 / 3;
}
} .bel-hotel-header__breadcrumbs {
margin-bottom: var(--bel-space-md);
}
.bel-hotel-header__breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bel-space-xs);
list-style: none;
padding: 0;
margin: 0;
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
}
.bel-hotel-header__breadcrumb-item:not(:last-child)::after {
content: "/";
margin-left: var(--bel-space-xs);
color: var(--bel-primary-300);
}
.bel-hotel-header__breadcrumb-link {
color: var(--bel-secondary-600);
text-decoration: none;
transition: color var(--bel-transition-fast);
}
.bel-hotel-header__breadcrumb-link:hover {
color: var(--bel-secondary-700);
text-decoration: underline;
}
.bel-hotel-header__breadcrumb-current {
color: var(--bel-primary-700);
font-weight: 500;
}
.bel-hotel-header__main {
flex: 1;
}
.bel-hotel-header__stars {
font-size: var(--bel-text-small);
font-weight: 700;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bel-hotel-header__fact {
display: inline-flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
}
.bel-hotel-header__fact--price {
font-weight: 600;
color: var(--bel-primary-900);
}
.bel-hotel-header__rating-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-mono);
font-weight: 600;
font-size: var(--bel-text-small);
background: var(--bel-secondary-900);
color: #FFFFFF;
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
min-width: 32px;
text-align: center;
}
.bel-hotel-header__rating-label {
font-size: var(--bel-text-small);
font-weight: 500;
color: var(--bel-primary-700);
}
.bel-hotel-header__review-count {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
.bel-hotel-header__action-btn {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
padding: var(--bel-space-xs) var(--bel-space-md);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
background: var(--bel-white);
color: var(--bel-primary-700);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
cursor: pointer;
transition: all var(--bel-transition-fast);
}
.bel-hotel-header__action-btn:hover {
border-color: var(--bel-primary-400);
color: var(--bel-primary-900);
}
.bel-hotel-header__nav {
border-top: 1px solid var(--bel-primary-200);
margin-top: var(--bel-space-lg);
}
.bel-hotel-header__nav-inner {
display: flex;
gap: 0;
overflow-x: auto;
}
.bel-hotel-header__nav-btn {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bel-primary-500);
padding: var(--bel-space-md) var(--bel-space-lg);
border: none;
background: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--bel-transition-fast), border-color var(--bel-transition-fast);
}
.bel-hotel-header__nav-btn:hover {
color: var(--bel-primary-700);
}
.bel-hotel-header__nav-btn.is-active {
color: var(--bel-primary-900);
border-bottom-color: var(--bel-accent-500);
} .bel-content {
padding: var(--bel-space-3xl) 0;
}
.bel-content__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-content__header {
margin-bottom: var(--bel-space-xl);
}
.bel-content__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-content__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
color: var(--bel-primary-900);
margin: 0;
}
.bel-content__pullquote {
border-left: 4px solid var(--bel-accent-500);
padding: var(--bel-space-lg) var(--bel-space-xl);
margin: var(--bel-space-xl) 0;
font-family: var(--bel-font-heading);
font-style: italic;
font-size: var(--bel-text-body-lg);
color: var(--bel-primary-700);
background: var(--bel-primary-100);
border-radius: 0 var(--bel-radius-sm) var(--bel-radius-sm) 0;
}
.bel-content__prose {
font-size: var(--bel-text-body);
color: var(--bel-primary-800);
line-height: var(--bel-lh-body);
max-width: var(--bel-container-text);
}
.bel-content__prose p {
margin: 0 0 var(--bel-space-md);
}
.bel-content__snapshot {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--bel-space-lg);
margin-top: var(--bel-space-xl);
padding: var(--bel-space-xl);
background: var(--bel-primary-100);
border-radius: var(--bel-radius-md);
}
.bel-content__snapshot-item {
text-align: center;
}
.bel-content__snapshot-icon {
display: block;
margin: 0 auto var(--bel-space-xs);
}
.bel-content__snapshot-value {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h4);
font-weight: 600;
color: var(--bel-primary-900);
}
.bel-content__snapshot-label {
display: block;
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: var(--bel-space-2xs);
}
.bel-content__rules {
margin-top: var(--bel-space-xl);
padding: var(--bel-space-xl);
background: var(--bel-primary-50);
border-radius: var(--bel-radius-md);
border: 1px solid var(--bel-primary-200);
}
.bel-content__rules-heading {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-h4);
font-weight: 600;
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-lg);
}
.bel-content__rules-group {
margin-bottom: var(--bel-space-lg);
}
.bel-content__rules-group:last-child {
margin-bottom: 0;
}
.bel-content__rules-category {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-body);
font-weight: 600;
color: var(--bel-primary-800);
margin: 0 0 var(--bel-space-sm);
}
.bel-content__rules-list {
list-style: none;
padding: 0;
margin: 0;
}
.bel-content__rules-list li {
padding: var(--bel-space-2xs) 0;
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
border-bottom: 1px solid var(--bel-primary-200);
}
.bel-content__rules-list li:last-child {
border-bottom: none;
} .bel-rooms__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-rooms__header {
margin-bottom: var(--bel-space-xl);
}
.bel-rooms__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-rooms__lead {
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
margin-bottom: var(--bel-space-xl);
}
.bel-rooms__table-wrap {
overflow-x: auto;
margin-bottom: var(--bel-space-xl);
}
.bel-rooms__row--featured {
background: var(--bel-secondary-50);
}
.bel-rooms__cell-name {
font-weight: 600;
color: var(--bel-primary-900);
}
.bel-rooms__cell-price {
white-space: nowrap;
}
.bel-rooms__badge {
display: inline-block;
font-size: var(--bel-text-caption);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--bel-accent-600);
color: var(--bel-white);
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
margin-bottom: var(--bel-space-xs);
}
.bel-rooms__price-from {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
.bel-rooms__price-num {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-h3);
font-weight: 600;
color: var(--bel-primary-900);
}
.bel-rooms__price-unit {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
.bel-rooms__book {
margin-top: var(--bel-space-xl);
text-align: center;
}
.bel-rooms__book-btn {
display: inline-block;
padding: var(--bel-space-md) var(--bel-space-3xl);
background: var(--bel-secondary-900);
color: var(--bel-white);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 600;
text-decoration: none;
border-radius: var(--bel-radius-sm);
transition: background var(--bel-transition-fast);
}
.bel-rooms__book-btn:hover {
background: var(--bel-secondary-700);
color: var(--bel-white);
}
.bel-rooms__cards-mobile {
display: none;
}
.bel-rooms__card {
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-lg);
margin-bottom: var(--bel-space-md);
}
.bel-rooms__card--featured {
border-color: var(--bel-secondary-400);
background: var(--bel-secondary-50);
}
.bel-rooms__card-name {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
color: var(--bel-primary-900);
margin: 0 0 var(--bel-space-xs);
}
.bel-rooms__card-type {
display: block;
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-rooms__card-beds {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
margin-bottom: var(--bel-space-sm);
}
.bel-rooms__card-price {
margin: var(--bel-space-sm) 0;
}
.bel-rooms__row {
transition: background var(--bel-transition-fast);
}
.bel-rooms__row:hover {
background: var(--bel-primary-50);
}
@media (max-width: 767px) {
.bel-rooms__table-wrap {
display: none;
}
.bel-rooms__cards-mobile {
display: block;
}
} .bel-amenities__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-amenities__header {
margin-bottom: var(--bel-space-xl);
}
.bel-amenities__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-amenities__strip {
margin-bottom: var(--bel-space-xl);
overflow-x: auto;
}
.bel-amenities__strip-inner {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-xs);
}
.bel-amenities__pill {
display: inline-flex;
align-items: center;
gap: var(--bel-space-2xs);
padding: var(--bel-space-xs) var(--bel-space-md);
background: var(--bel-secondary-50);
color: var(--bel-secondary-700);
border-radius: var(--bel-radius-full);
font-size: var(--bel-text-small);
font-weight: 500;
white-space: nowrap;
}
.bel-amenities__card-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--bel-space-sm) var(--bel-space-md);
cursor: pointer;
list-style: none;
user-select: none;
} .bel-amenities__card-title {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-primary-900);
margin: 0;
line-height: 1.3;
}
.bel-amenities__card-count {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-caption);
font-weight: 600;
color: var(--bel-primary-500);
background: var(--bel-primary-100);
padding: 0.15em 0.5em;
border-radius: var(--bel-radius-full);
margin-left: auto;
margin-right: var(--bel-space-xs);
flex-shrink: 0;
}
.bel-amenities__card-list {
list-style: none;
padding: 0 var(--bel-space-md) var(--bel-space-sm);
margin: 0;
}
.bel-amenities__card-list li {
padding: var(--bel-space-2xs) 0;
font-size: var(--bel-text-caption);
color: var(--bel-primary-600);
line-height: 1.4;
}
.bel-amenities__card-list li + li {
border-top: 1px solid var(--bel-primary-100);
}
.bel-amenities__card-more {
display: block;
width: 100%;
padding: var(--bel-space-2xs) var(--bel-space-md) var(--bel-space-sm);
border: none;
background: none;
color: var(--bel-secondary-500);
font-family: var(--bel-font-body);
font-size: var(--bel-text-caption);
font-weight: 600;
text-align: left;
cursor: pointer;
transition: color var(--bel-transition-fast);
}
.bel-amenities__card-more:hover {
color: var(--bel-secondary-700);
} .bel-amenities__popover {
position: absolute;
z-index: 200;
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-md);
box-shadow: var(--bel-shadow-dramatic);
padding: 0;
min-width: 240px;
max-width: 300px;
max-height: 360px;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
}
.bel-amenities__popover.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.bel-amenities__popover-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--bel-space-sm) var(--bel-space-md);
border-bottom: 1px solid var(--bel-primary-100);
flex-shrink: 0;
}
.bel-amenities__popover-title {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 700;
color: var(--bel-primary-900);
margin: 0;
}
.bel-amenities__popover-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: none;
color: var(--bel-primary-400);
border-radius: var(--bel-radius-sm);
cursor: pointer;
transition: background var(--bel-transition-fast);
flex-shrink: 0;
}
.bel-amenities__popover-close:hover {
background: var(--bel-primary-100);
color: var(--bel-primary-700);
}
.bel-amenities__popover-list {
list-style: none;
margin: 0;
padding: var(--bel-space-xs) var(--bel-space-md);
overflow-y: auto;
flex: 1;
}
.bel-amenities__popover-list li {
padding: var(--bel-space-2xs) 0;
font-size: var(--bel-text-caption);
color: var(--bel-primary-700);
line-height: 1.4;
}
.bel-amenities__popover-list li + li {
border-top: 1px solid var(--bel-primary-50);
} .bel-amenities__card-full {
list-style: none;
padding: 0 var(--bel-space-md) var(--bel-space-sm);
margin: 0;
border-top: 1px dashed var(--bel-primary-200);
}
.bel-amenities__card-full li {
padding: var(--bel-space-2xs) 0;
font-size: var(--bel-text-caption);
color: var(--bel-primary-600);
line-height: 1.4;
}
.bel-amenities__card-full li + li {
border-top: 1px solid var(--bel-primary-100);
}
.bel-amenities__toggle {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
background: none;
border: none;
cursor: pointer;
padding: var(--bel-space-sm) 0;
margin-top: var(--bel-space-md);
transition: color var(--bel-transition-fast);
}
.bel-amenities__toggle:hover {
color: var(--bel-secondary-700);
} .bel-location__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-location__header {
margin-bottom: var(--bel-space-xl);
}
.bel-location__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-location__address {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-style: normal;
font-size: var(--bel-text-body);
color: var(--bel-primary-700);
margin-bottom: var(--bel-space-lg);
}
.bel-location__map-wrap {
border-radius: var(--bel-radius-md);
overflow: hidden;
border: 1px solid var(--bel-primary-200);
}
.bel-location__nearby {
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
}
.bel-location__nearby-title {
font-family: var(--bel-font-body);
font-size: var(--bel-text-h4);
font-weight: 600;
color: var(--bel-primary-900);
margin: 0;
} .bel-reviews__inner {
max-width: var(--bel-container-max);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-reviews__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-reviews__score-count {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
}
.bel-reviews__score-meter {
flex: 1;
height: 8px;
background: var(--bel-primary-200);
border-radius: var(--bel-radius-full);
overflow: hidden;
max-width: 200px;
}
.bel-reviews__score-meter-fill {
height: 100%;
width: var(--pct);
background: var(--bel-secondary-500);
border-radius: var(--bel-radius-full);
transition: width 600ms ease;
}
.bel-reviews__toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--bel-space-md);
margin-bottom: var(--bel-space-xl);
flex-wrap: wrap;
}
.bel-reviews__toolbar-group {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
}
.bel-reviews__toolbar-label {
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
font-weight: 500;
}
.bel-reviews__toolbar-pills {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
}
.bel-reviews__sort {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
padding: var(--bel-space-xs) var(--bel-space-sm);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
background: var(--bel-white);
color: var(--bel-primary-800);
cursor: pointer;
}
.bel-reviews__pill {
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 500;
padding: var(--bel-space-2xs) var(--bel-space-sm);
border: 1px solid var(--bel-primary-300);
border-radius: var(--bel-radius-full);
background: transparent;
color: var(--bel-primary-600);
cursor: pointer;
transition: all var(--bel-transition-fast);
}
.bel-reviews__pill:hover {
border-color: var(--bel-primary-900);
color: var(--bel-primary-900);
}
.bel-reviews__pill.is-active {
background: var(--bel-primary-900);
color: var(--bel-white);
border-color: var(--bel-primary-900);
}
.bel-reviews__toggle {
display: inline-flex;
align-items: center;
gap: var(--bel-space-xs);
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-secondary-600);
background: none;
border: none;
cursor: pointer;
padding: var(--bel-space-sm) 0;
margin-top: var(--bel-space-md);
transition: color var(--bel-transition-fast);
}
.bel-reviews__toggle:hover {
color: var(--bel-secondary-700);
}
.bel-reviews__card-who {
display: flex;
flex-direction: column;
gap: var(--bel-space-2xs);
}
.bel-reviews__card-from {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
.bel-reviews__card-date {
font-size: var(--bel-text-caption);
color: var(--bel-primary-400);
}
.bel-reviews__card-title {
font-weight: 600;
color: var(--bel-primary-900);
}
.bel-reviews__card--gold {
border-left: 3px solid #D4A520;
}
.bel-reviews__card--green {
border-left: 3px solid var(--bel-success);
}
.bel-reviews__card--teal {
border-left: 3px solid #2AACA0;
}
.bel-reviews__card--muted {
border-left: 3px solid var(--bel-primary-300);
}
.bel-reviews__breakdown-label {
font-size: var(--bel-text-small);
color: var(--bel-primary-700);
min-width: 120px;
}
.bel-reviews__breakdown-value {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-primary-900);
min-width: 28px;
text-align: right;
}
.is-hidden-init {
display: none;
} .bel-similar__header {
margin-bottom: var(--bel-space-xl);
}
.bel-similar__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-similar__card {
border-radius: var(--bel-radius-md);
overflow: hidden;
background: var(--bel-white);
box-shadow: var(--bel-shadow-subtle);
transition: box-shadow var(--bel-transition-default), transform var(--bel-transition-default);
}
.bel-similar__card:hover {
box-shadow: var(--bel-shadow-medium);
transform: translateY(-3px);
}
.bel-similar__card-link {
display: block;
text-decoration: none;
color: inherit;
}
.bel-similar__card-img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.bel-similar__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.bel-similar__card:hover .bel-similar__card-img img {
transform: scale(1.04);
}
.bel-similar__card-rating {
position: absolute;
top: var(--bel-space-sm);
right: var(--bel-space-sm);
background: var(--bel-secondary-900);
color: var(--bel-white);
font-family: var(--bel-font-mono);
font-weight: 600;
font-size: var(--bel-text-small);
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
}
.bel-similar__card-body {
padding: var(--bel-space-md);
}
.bel-similar__card-title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h4);
color: var(--bel-primary-900);
margin: var(--bel-space-xs) 0;
transition: color var(--bel-transition-fast);
}
.bel-similar__card:hover .bel-similar__card-title {
color: var(--bel-secondary-600);
}
.bel-similar__card-location {
display: flex;
align-items: center;
gap: var(--bel-space-2xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
}
.bel-similar__tags-wrap {
max-width: var(--bel-container-max);
margin: var(--bel-space-lg) auto;
padding: 0 var(--bel-container-padding);
}
.bel-similar__tags {
display: flex;
flex-wrap: wrap;
gap: var(--bel-space-xs);
}
.bel-similar__tags a {
display: inline-block;
padding: var(--bel-space-2xs) var(--bel-space-sm);
background: var(--bel-primary-100);
color: var(--bel-primary-700);
border-radius: var(--bel-radius-full);
font-size: var(--bel-text-caption);
text-decoration: none;
transition: background var(--bel-transition-fast), color var(--bel-transition-fast);
}
.bel-similar__tags a:hover {
background: var(--bel-secondary-100);
color: var(--bel-secondary-700);
} .bel-contact {
padding: var(--bel-space-3xl) 0;
border-top: 1px solid var(--bel-primary-200);
}
.bel-contact__inner {
max-width: var(--bel-container-narrow);
margin: 0 auto;
padding: 0 var(--bel-container-padding);
}
.bel-contact__header {
margin-bottom: var(--bel-space-xl);
}
.bel-contact__eyebrow {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-h6);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--bel-ls-h6);
color: var(--bel-secondary-600);
margin-bottom: var(--bel-space-xs);
}
.bel-contact__title {
font-family: var(--bel-font-heading);
font-size: var(--bel-text-h2);
line-height: var(--bel-lh-h2);
color: var(--bel-primary-900);
margin: 0;
}
.bel-contact__lead {
font-size: var(--bel-text-body);
color: var(--bel-primary-600);
line-height: var(--bel-lh-body);
margin-bottom: var(--bel-space-xl);
} .bel-contact .wpcf7 {
max-width: 640px;
}
.bel-contact .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
background: var(--bel-white);
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-lg);
padding: var(--bel-space-2xl);
box-shadow: var(--bel-shadow-subtle);
}
.bel-contact .wpcf7-form > p {
margin: 0;
}
.bel-contact .wpcf7-form label {
display: block;
font-family: var(--bel-font-body);
font-size: var(--bel-text-small);
font-weight: 600;
color: var(--bel-primary-800);
margin-bottom: var(--bel-space-2xs);
}
.bel-contact .wpcf7-form label br {
display: none;
}
.bel-contact .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-hidden) {
display: block;
width: 100%;
border: 1px solid var(--bel-primary-400);
border-radius: var(--bel-radius-md);
padding: var(--bel-space-sm) var(--bel-space-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
color: var(--bel-primary-900);
background: var(--bel-white);
margin-top: var(--bel-space-2xs);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bel-contact .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-hidden):focus {
outline: none;
border-color: var(--bel-secondary-500);
box-shadow: var(--bel-shadow-glow);
}
.bel-contact .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
color: var(--bel-primary-400);
}
.bel-contact textarea.wpcf7-form-control {
min-height: 140px;
resize: vertical;
}
.bel-contact .wpcf7-submit,
.bel-contact input[type="submit"].wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
width: 100%;
padding: var(--bel-space-md) var(--bel-space-2xl);
background: var(--bel-accent-500);
color: var(--bel-white);
border: none;
border-radius: var(--bel-radius-md);
font-family: var(--bel-font-body);
font-size: var(--bel-text-body);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
margin-top: var(--bel-space-md);
box-shadow: var(--bel-shadow-subtle);
}
.bel-contact .wpcf7-submit:hover,
.bel-contact input[type="submit"].wpcf7-submit:hover {
background: var(--bel-accent-600);
transform: translateY(-2px);
box-shadow: var(--bel-shadow-medium);
}
.bel-contact .wpcf7-submit:active {
transform: translateY(0);
}
.bel-contact .cf7-cf-turnstile {
margin: var(--bel-space-md) 0;
}
.bel-contact .wpcf7-not-valid {
border-color: var(--bel-error, #B83232);
}
.bel-contact .wpcf7-not-valid-tip {
font-size: var(--bel-text-small);
color: var(--bel-error, #B83232);
margin-top: var(--bel-space-2xs);
}
.bel-contact .wpcf7-response-output {
margin: var(--bel-space-md) 0 0;
padding: var(--bel-space-sm) var(--bel-space-md);
border-radius: var(--bel-radius-md);
font-size: var(--bel-text-small);
border: 1px solid var(--bel-primary-200);
}
.bel-contact .wpcf7-form.sent .wpcf7-response-output {
border-color: var(--bel-success, #3A7D44);
background: var(--bel-success-light, #E8F3EA);
color: var(--bel-success, #3A7D44);
}
.bel-contact .wpcf7-form .wpcf7-spinner {
display: none;
}
.bel-contact .hidden-fields-container,
.bel-contact .akismet-fields-container {
display: none;
} .bel-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--bel-z-sticky);
background: var(--bel-white);
border-top: 1px solid var(--bel-primary-200);
box-shadow: 0 -4px 16px rgba(26,24,20,0.08);
padding: var(--bel-space-md) var(--bel-container-padding);
display: none;
align-items: center;
justify-content: space-between;
height: 72px;
}
@media (max-width: 1023px) {
.bel-sticky-cta {
display: flex;
}
}
.bel-sticky-cta__info {
display: flex;
align-items: center;
gap: var(--bel-space-sm);
font-size: var(--bel-text-small);
color: var(--bel-primary-700);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} .bel-booking-sidebar__card {
display: flex;
flex-direction: column;
gap: var(--bel-space-md);
}
.bel-booking-sidebar__price-from {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
.bel-booking-sidebar__price-amount {
font-family: var(--bel-font-mono);
font-size: var(--bel-text-price);
font-weight: 600;
color: var(--bel-primary-900);
}
.bel-booking-sidebar__price-unit {
font-size: var(--bel-text-small);
color: var(--bel-primary-500);
}
.bel-booking-sidebar__rating {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
}
.bel-booking-sidebar__rating-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bel-font-mono);
font-weight: 600;
font-size: var(--bel-text-small);
background: var(--bel-secondary-900);
color: #FFFFFF;
padding: var(--bel-space-2xs) var(--bel-space-xs);
border-radius: var(--bel-radius-sm);
min-width: 32px;
}
.bel-booking-sidebar__rating-label {
font-size: var(--bel-text-small);
font-weight: 500;
color: var(--bel-primary-700);
}
.bel-booking-sidebar__rating-count {
font-size: var(--bel-text-caption);
color: var(--bel-primary-500);
}
.bel-booking-sidebar__stars {
color: var(--bel-warning);
font-size: var(--bel-text-body-lg);
letter-spacing: 2px;
}
.bel-booking-sidebar__actions {
display: flex;
flex-direction: column;
gap: var(--bel-space-sm);
}
.bel-booking-sidebar__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.875rem 1.75rem;
background: var(--bel-accent-600);
color: var(--bel-white);
font-family: var(--bel-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
border-radius: var(--bel-radius-sm);
text-decoration: none;
transition: all var(--bel-transition-default);
min-height: 48px;
}
.bel-booking-sidebar__cta:hover {
background: var(--bel-accent-700);
transform: translateY(-1px);
box-shadow: var(--bel-shadow-medium);
color: var(--bel-white);
}
.bel-booking-sidebar__phone {
display: flex;
align-items: center;
justify-content: center;
gap: var(--bel-space-xs);
width: 100%;
padding: 0.75rem 1.5rem;
border: 1px solid var(--bel-primary-200);
border-radius: var(--bel-radius-sm);
color: var(--bel-primary-700);
font-size: var(--bel-text-small);
font-weight: 500;
text-decoration: none;
transition: all var(--bel-transition-fast);
}
.bel-booking-sidebar__phone:hover {
border-color: var(--bel-primary-400);
color: var(--bel-primary-900);
}
.bel-booking-sidebar__location {
display: flex;
align-items: center;
gap: var(--bel-space-xs);
font-size: var(--bel-text-small);
color: var(--bel-primary-600);
margin: 0;
} .bel-footer__column {
display: flex;
flex-direction: column;
gap: var(--bel-space-sm);
} .bel-hotel-content__main {
min-width: 0;
}
.bel-hotel-content__sidebar {
position: sticky;
top: 88px;
} @media (min-width: 1280px) {
.bel-similar__grid {
grid-template-columns: repeat(4, 1fr);
}
} @media (prefers-reduced-motion: reduce) {
.bel-hero__scroll-cue,
.bel-hero__scroll-cue {
animation: none;
}
.ah-mist-blob {
animation: none;
}
.btt-btn {
transition: none;
}
.sp-progress {
transition: none;
}
}
.bel-content__prose a{text-decoration:underline;text-underline-offset:.15em}