.hero-salon {
border-bottom: 1px solid var(--color-border);
}
.hero-grid-salon {
align-self: stretch;
}
.hero-panel-salon {
background: radial-gradient(circle at top left, rgba(217, 119, 6, 0.2), transparent 55%), var(--color-bg-elevated);
}
.salon-hero-main-image {
position: relative;
min-height: 260px;
background-image: url("/assets/images/urban-card-salon-hero.webp");
background-size: cover;
background-position: center;
}
.hero-alert-note {
margin-top: var(--space-4);
}
.salon-section-grid {
align-items: flex-start;
}
.salon-aside {
background: radial-gradient(circle at top right, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95));
}
.salon-meta-list {
display: grid;
gap: var(--space-3);
font-size: 0.9rem;
}
.salon-meta-row {
display: flex;
justify-content: space-between;
gap: var(--space-3);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-2);
}
.salon-meta-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.salon-meta-row dt {
color: var(--color-text-muted);
}
.salon-meta-row dd {
font-family: var(--mono-font);
color: var(--color-primary);
}
.salon-feature-list {
display: grid;
gap: var(--space-4);
}
.salon-feature-item h3 {
font-size: 1rem;
}
.salon-bullet-grid {
display: grid;
gap: var(--space-4);
}
.salon-bullet-item h3 {
font-size: 1rem;
}
.salon-bullet-list {
display: grid;
gap: var(--space-2);
font-size: 0.95rem;
}
.salon-steps {
display: grid;
gap: var(--space-4);
counter-reset: salon-step;
}
.salon-step h3 {
font-size: 1rem;
}
.salon-image-panel {
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
overflow: hidden;
background: var(--color-bg-elevated);
}
.salon-atmosphere-image,
.salon-gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.salon-testimonial {
background: linear-gradient(150deg, #020617, #111827);
}
.salon-faq-list {
display: grid;
gap: var(--space-4);
}
.salon-faq-item dt {
font-weight: 600;
font-size: 0.98rem;
margin-bottom: var(--space-1);
}
.salon-faq-item dd {
font-size: 0.95rem;
}
.salon-cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.salon-cta-column {
display: flex;
flex-direction: column;
gap: var(--space-3);
justify-content: center;
}
.salon-final-cta .card-shell {
background: radial-gradient(circle at top left, rgba(217, 119, 6, 0.18), transparent 55%), var(--color-bg-elevated);
}
@media (max-width: 767.98px) {
.salon-image-panel {
max-height: 260px;
}
}
Document