.showrooms-page {
background: #f8f9fa;
min-height: 100vh;
} .city-tabs-wrapper {
display: flex;
justify-content: center;
padding: 40px 0 32px;
}
.city-tabs {
display: inline-flex;
gap: 8px;
background: #fff;
padding: 6px;
border-radius: 8px;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.city-tab {
padding: 10px 28px;
border: none;
background: transparent;
color: #4b5563;
font-size: 15px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
transition: all 0.25s ease;
font-family: inherit;
}
.city-tab:hover {
color: #11338b;
background: #f3f4f6;
}
.city-tab.active {
background: #11338b;
color: #fff;
} .showrooms-main {
display: flex;
align-items: flex-start;
gap: 40px;
padding: 0 24px 80px;
max-width: 1280px;
margin: 0 auto;
} .city-label-wrapper {
flex-shrink: 0;
width: 90px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 16px;
will-change: transform;
transition: transform 0.4s ease;
}
.city-label {
writing-mode: vertical-lr;
transform: rotate(180deg);
font-size: 80px;
font-weight: 900;
color: #d1d5db;
letter-spacing: 4px;
text-transform: uppercase;
white-space: nowrap;
user-select: none;
line-height: 0.85;
transition: color 0.3s ease;
} .showrooms-content {
flex: 1;
min-width: 0;
} .showroom-cards {
display: flex;
flex-direction: column;
gap: 24px;
} .showroom-card {
display: grid;
grid-template-columns: 42% 58%;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 24px rgba(0,0,0,0.05);
transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.showroom-card:hover {
box-shadow: 0 6px 32px rgba(0,0,0,0.10);
}
.showroom-card.hidden {
display: none;
} .showroom-card-image {
position: relative;
overflow: hidden;
min-height: 280px;
}
.showroom-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.showroom-card:hover .showroom-card-image img {
transform: scale(1.04);
} .showroom-card-details {
padding: 36px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.showroom-card-title {
font-size: 22px;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 22px;
line-height: 1.3;
} .showroom-info-rows {
margin-bottom: 22px;
}
.showroom-info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid #e5e7eb;
gap: 16px;
}
.showroom-info-row:last-child {
border-bottom: none;
}
.info-label {
font-weight: 600;
color: #374151;
font-size: 14px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
color: #4b5563;
font-size: 14px;
text-align: right;
line-height: 1.6;
}
.info-value a {
color: #4b5563;
text-decoration: none;
transition: color 0.2s;
}
.info-value a:hover {
color: #1e3a5f;
} .working-hours {
border-top: 2px solid #e5e7eb;
padding-top: 18px;
}
.working-hours-title {
font-size: 13px;
font-weight: 700;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.working-hours-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 14px;
}
.working-hours-row .day {
color: #6b7280;
}
.working-hours-row .time {
font-weight: 600;
color: #374151;
}
.working-hours-row .time.closed {
color: #dc2626;
font-weight: 700;
} @media (max-width: 1024px) {
.city-label {
font-size: 54px;
}
.city-label-wrapper {
width: 66px;
}
.showrooms-main {
gap: 24px;
padding: 0 16px 60px;
}
.showroom-card-details {
padding: 28px 28px;
}
.showroom-card-title {
font-size: 19px;
}
}
@media (max-width: 768px) {
.city-tabs-wrapper {
padding: 28px 0 24px;
}
.city-tab {
padding: 8px 18px;
font-size: 13px;
}
.showrooms-main {
flex-direction: column;
padding: 0 16px 50px;
gap: 0;
}
.city-label-wrapper {
width: 100%;
padding: 0 0 20px;
justify-content: flex-start;
}
.city-label {
writing-mode: horizontal-tb;
transform: none;
font-size: 32px;
letter-spacing: 2px;
color: #9ca3af;
}
.showroom-card {
grid-template-columns: 1fr;
}
.showroom-card-image {
min-height: 200px;
max-height: 240px;
}
.showroom-card-details {
padding: 24px 20px;
}
.showroom-card-title {
font-size: 18px;
margin-bottom: 16px;
}
}
@media (max-width: 480px) {
.city-tabs {
flex-wrap: wrap;
justify-content: center;
}
.city-tab {
padding: 8px 14px;
font-size: 12px;
}
.city-label {
font-size: 26px;
}
.info-label {
font-size: 12px;
}
.info-value {
font-size: 13px;
}
}