body {
background-color: var(--color-background);
}
.hero--split {
align-items: stretch;
}
.hero-slider {
position: relative;
border-radius: 28px;
overflow: hidden;
box-shadow: var(--shadow-lg);
background-color: #000;
}
.hero-slider__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--transition-slow) var(--transition-timing);
}
.hero-slider__slide.is-active {
position: relative;
opacity: 1;
}
.hero-slider__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-slider__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--space-6);
color: #fff;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.05));
}
.hero-slider__caption h2 {
margin-bottom: var(--space-2);
font-size: var(--font-size-2xl);
}
.hero-slider__caption p {
margin-bottom: 0;
max-width: 40rem;
}
.hero-slider__nav {
position: absolute;
left: 50%;
bottom: var(--space-3);
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
}
.hero-slider__dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: background-color var(--transition-fast) ease-out,
transform var(--transition-fast) ease-out,
width var(--transition-fast) ease-out;
}
.hero-slider__dot.is-active {
width: 18px;
background: var(--color-primary);
transform: translateY(-1px);
}
.fine-dining-grid {
gap: var(--space-8);
}
.fine-dining-image {
border-radius: 28px;
overflow: hidden;
}
.fine-dining-list,
.poker-list,
.events-grid ul {
padding-left: 1.1rem;
}
.fine-dining-list li,
.poker-list li,
.events-grid li {
margin-bottom: 0.35rem;
list-style: disc;
}
.chef-grid {
gap: var(--space-8);
}
.chef-signature-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.reservation-form__success,
.contact-form__success {
margin-top: var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-md);
background-color: var(--color-success-soft);
color: var(--gray-800);
font-size: var(--font-size-sm);
}
.environment-card {
height: 100%;
}
.gallery-grid {
gap: var(--space-6);
}
.events-grid {
gap: var(--space-6);
}
.events-grid .card {
height: 100%;
}
.carousel__slide {
min-width: 100%;
}
.contact-grid {
gap: var(--space-8);
}
@media (min-width: 768px) {
.hero-slider {
min-height: 520px;
}
}
@media (max-width: 767px) {
.hero__media {
margin-top: var(--space-6);
}
.hero-slider__caption {
padding: var(--space-4);
}
.hero-slider__caption h2 {
font-size: var(--font-size-xl);
}
}
Document