:root {
--text: #101010;
--muted: #6f6f6f;
--border: #e9e9e9;
--bg: #ffffff;
--soft: #f3f4f6;
--brand: #b4000a;
--footer-gap: 70px;
}
/* Fancybox v5 (@fancyapps/ui): default z-index 1050 ends up under theme fixed UI
(.btn-overflow 9900, drawers/modals ~9999, review overlays 999999). */
.fancybox__container {
z-index: 10000000 !important;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
overflow-x: hidden;
margin: 0;
font-family: Onest, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
color: var(--text);
background: #fff;
}
#page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#page>.footer-wrap {
margin-top: auto !important;
}
a {
-webkit-tap-highlight-color: transparent;
}
.container {
padding-inline: 14px;
width: min(1200px, calc(100% - 56px));
margin-inline: auto;
}
.container-fluid {
width: min(calc(100% - 100px));
margin-inline: auto;
}
/* ========== HERO ========== */
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.justify-content-between {
justify-content: space-between;
}
.hero {
position: relative;
min-height: 660px;
overflow: hidden;
/* background image: .hero__bg only */
}
.collection-card__overlay2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}
.topbar {
position: relative;
z-index: 120;
background: #fff;
border-bottom: 1px solid #f0f0f0;
}
.topbar__inner {
height: 72px;
display: flex;
align-items: center;
gap: 28px;
}
.logo {
font-weight: 800;
letter-spacing: .06em;
text-decoration: none;
color: var(--brand);
font-size: 34px;
white-space: nowrap;
flex-shrink: 0;
}
/* ===== TOP NAV (your markup) ===== */
.nav {
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
margin-left: 10px;
flex: 1;
}
/* ul */
.nav .nav__list {
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
list-style: none;
margin: 0;
padding: 0;
/* важно: чтобы буллиты/отступы точно не вылезли */
}
/* li */
.nav .nav__list>li {
position: relative;
margin: 0;
padding: 0;
}
/* link */
.nav .nav__link {
color: #202020;
text-decoration: none;
font-size: 15px;
font-weight: 500;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* active (WP classes) */
.nav .current-menu-item>.nav__link,
.nav .current-menu-ancestor>.nav__link,
.nav .current_page_item>.nav__link,
.nav .current_page_ancestor>.nav__link {
color: var(--brand);
font-weight: 700;
}
/* caret for items with children */
.nav .menu-item-has-children>.nav__link::after {
content: "";
width: 10px;
height: 10px;
opacity: 1;
display: inline-block;
transform: translateY(1px);
background: currentColor;
-webkit-mask: url(/wp-content/themes/customthemes/img/chev.svg) no-repeat center / contain;
background: url(/wp-content/themes/customthemes/img/chev.svg) no-repeat center / contain;
}
/* ===== dropdown ===== */
.nav .sub-menu {
position: absolute;
top: calc(100% + 0px);
left: 0;
z-index: 1000;
display: none;
flex-direction: column;
gap: 2px;
list-style: none;
margin: 0;
padding: 10px;
background: #fff;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
min-width: 220px;
}
.nav .sub-menu li {
margin: 0;
padding: 0;
}
.nav .sub-menu .nav__link {
display: flex;
padding: 10px 12px;
border-radius: 10px;
font-weight: 500;
color: #202020;
}
.nav .sub-menu .nav__link:hover {
color: var(--brand);
background: rgba(0, 0, 0, .04);
}
/* show dropdown */
.nav .menu-item-has-children:hover>.sub-menu {
display: flex;
}
.topbar__right {
display: flex;
align-items: center;
gap: 14px;
}
.mini-select {
height: 36px;
padding: 0 10px;
border: 0;
background: transparent;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #222;
font-weight: 500;
font-size: 15px;
}
.mini-select__chev {
width: 10px;
height: 10px;
display: inline-block;
margin-left: 6px;
position: relative;
top: 1px;
/* подгон по вертикали */
opacity: .55;
/* как в макете */
}
.mini-select__chev::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
/* это и есть V */
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: 0;
cursor: pointer;
font-weight: 700;
border-radius: 10px;
}
.btn--primary {
height: 38px;
padding: 0 18px;
background: var(--brand);
color: #fff;
width: 120px;
height: 46px;
}
.hero__bg {
position: absolute;
position: absolute;
inset: 72px 0 0 0;
background: url(img/bg1.jpg) center / cover no-repeat;
transform: translateZ(0);
height: 100%;
top: 0;
}
.hero__content {
position: relative;
z-index: 2;
padding-top: 221px;
}
.hero__title {
margin: 0 0 40px 0;
font-size: 64px;
line-height: 1.05;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}
/* === HERO search (макетный) === */
.search {
width: min(865px, 100%);
height: 64px;
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.search__cell {
height: 100%;
display: flex;
align-items: center;
gap: 12px;
border: 0;
background: transparent;
padding: 0 18px;
color: #111;
border-radius: 8px;
}
.search__cell--location {
min-width: 260px;
}
.search__cell--query {
flex: 1;
padding-right: 10px;
}
.search__cell--filters {
width: 64px;
justify-content: center;
padding: 0;
cursor: pointer;
}
.search__divider {
width: 1px;
height: 26px;
align-self: center;
background: #ececec;
margin-right: 15px;
}
.search__ico {
width: 18px;
height: 18px;
display: block;
opacity: .9;
}
.search__ico--brand {
opacity: 1;
filter: none;
/* если иконка уже красная */
}
.search__text {
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
.search__chev {
margin-left: auto;
opacity: .55;
font-size: 11px;
}
.search__input {
border: 0;
outline: none;
width: 100%;
font-size: 15px;
font-weight: 500;
color: #111;
}
.search__input::placeholder {
color: #9b9b9b;
font-weight: 500;
}
.search__submit {
width: 120px;
border: 0;
background: var(--brand);
color: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
margin: 4px;
/* ключ */
height: 46px;
/* ключ */
border-radius: 8px;
/* ключ */
}
/* мобилка: превращаем в аккуратную стопку */
@media (max-width: 820px) {
.search {
height: auto;
padding: 10px;
border-radius: 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.search__divider {
display: none;
}
.search__cell {
height: 52px;
border: 1px solid #e9e9e9;
border-radius: 12px;
background: #fff;
}
.search__cell--location {
grid-column: 1 / -1;
min-width: auto;
}
.search__cell--query {
grid-column: 1 / 2;
}
.search__cell--filters {
grid-column: 2 / 3;
width: 56px;
border-radius: 12px;
}
.search__submit {
grid-column: 1 / -1;
width: 100%;
height: 52px;
border-radius: 12px;
}
/* Оверлей поиска: явная колонка под крестик (как у filters в hero) */
.search--overlay .search__cell--query {
min-width: 0;
}
.search--overlay .search__cell--close {
grid-column: 2 / 3;
grid-row: 1;
align-self: center;
}
}
/* ========== VENUE TYPES ========== */
.venue {
padding-top: 100px;
background: #fff;
}
.venue__title {
font-size: 30px;
line-height: 1.05;
margin: 0 0 28px;
font-weight: 500;
letter-spacing: -0.02em;
}
.venue-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 340px 340px;
gap: 10px;
}
.card {
position: relative;
background: #f2f3f5;
border-radius: 26px;
overflow: hidden;
color: var(--text);
}
.card__body {
position: absolute;
inset: 0;
padding: 34px 34px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 2;
}
.card__meta {
display: flex;
flex-direction: column;
gap: 12px;
}
.card__title {
margin: 0;
font-size: 28px;
font-weight: 500;
letter-spacing: -0.02em;
}
.pill {
display: inline-flex;
align-items: center;
padding: 8px 0;
justify-content: center;
border-radius: 6px;
border: none;
background: rgba(255, 255, 255, .55);
color: #939393;
font-weight: 500;
width: fit-content;
width: 97px;
height: 38px;
font-size: 14px;
text-align: center;
}
.card__cta {
color: var(--brand);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
}
.arrow {
font-size: 16px;
transform: translateY(-1px);
}
.card__media {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-end;
bottom: 0;
right: 0;
}
.card__media img {
height: auto;
width: auto;
object-fit: cover;
}
.card--big {
grid-column: 1 / -1;
}
.card--big .card__media {
justify-content: flex-end;
}
.card--big .card__media img {
height: auto;
width: auto;
position: absolute;
bottom: 0;
}
.card--small .card__title {
font-size: 28px;
font-weight: 500;
}
.card__media--right img {
max-width: 64%;
max-width: 100%;
position: absolute;
bottom: 0;
right: 0;
}
/* ========== Responsive ========== */
@media (max-width: 1000px) {
.nav {
display: none;
}
.hero__title {
font-size: 52px;
}
.venue__title {
font-size: 52px;
}
}
@media (max-width: 820px) {
.hero {
min-height: 620px;
}
.hero__content {
padding-top: 120px;
}
.search {
height: auto;
flex-wrap: wrap;
padding: 10px;
gap: 10px;
}
.search__divider {
display: none;
}
.search__filters {
width: 48px;
height: 44px;
border: 1px solid var(--border);
border-radius: 12px;
}
.btn--search {
width: 100%;
height: 44px;
border-radius: 12px;
}
.search__field {
height: 44px;
border: 1px solid var(--border);
border-radius: 12px;
}
.search__field--location {
width: 100%;
}
.search__field--query {
width: 100%;
}
.venue-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.card--big {
height: 280px;
}
.card--small {
height: 240px;
}
}
/* ===== Helpers for these blocks ===== */
.muted {
color: #8b8b8b;
}
.sep {
color: #B6020B;
margin: 0 8px;
}
.link-viewall {
color: var(--brand);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
white-space: nowrap;
transition: 0.2s;
}
.link-viewall__arrow {
font-size: 16px;
transform: translateY(2px);
transition: 0.2s;
}
.link-viewall:hover .link-viewall__arrow {
transform: translateY(0px);
}
/*.link-viewall:hover {
color: #960009;
}*/
.scrollbar {
margin-top: 26px;
height: 8px;
background: #efefef;
border-radius: 999px;
overflow: hidden;
}
.scrollbar__thumb {
display: block;
height: 100%;
background: var(--brand);
border-radius: 999px;
}
/* ========== BLOCK 3: CUISINES ========== */
.cuisines {
padding: 64px 0 70px;
background: #fff;
}
.cuisines__title {
text-align: center;
font-size: 64px;
line-height: 1.05;
margin: 0 0 22px;
font-weight: 800;
letter-spacing: -0.02em;
}
.cuisines__tabs {
width: min(980px, 100%);
margin: 0 auto 26px;
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.chip {
border: 1px solid #e7e7e7;
background: #fff;
color: #8a8a8a;
font-weight: 600;
font-size: 14px;
padding: 10px 20px;
border-radius: 999px;
cursor: pointer;
line-height: 1;
}
.chip--active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.cuisines__subrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 10px;
margin-bottom: 18px;
}
.cuisines__subtitle {
margin: 0;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.01em;
color: #222;
}
/* Cards row (restaurants) */
.cards-row {
display: flex;
gap: 10px;
overflow: hidden;
/* horizontal scroll only in @media (max-width: 1200px) — see below */
}
@media (max-width: 1200px) {
.cards-row {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 8px;
}
.cards-row::-webkit-scrollbar {
height: 6px;
}
.sovl .cards-row {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* Search results: keep wrapped grid, not a horizontal strip */
.sovl__results .cards-row {
overflow-x: visible;
overflow-y: visible;
flex-wrap: wrap;
row-gap: 18px;
align-content: flex-start;
.place-card__nav--left {
display: none;
}
.place-card__nav--right {
display: none;
}
.place-card__dots {
display: flex;
}
}
}
.rating__star svg {
margin-right: -2px;
margin-top: 4px;
}
.place-card {
width: 285px;
border: 1px solid #e8e8e8;
border-radius: 18px;
overflow: hidden;
background: #fff;
flex: 0 0 auto;
height: 509px;
}
.place-card__media {
position: relative;
height: 240px;
overflow: hidden;
display: block;
}
/* Mobile: horizontal pan goes to photo swipe, not the outer cards-row scroller */
@media (max-width: 768px) {
.place-card__media[data-slider],
.place-card__media[data-slider] .place-card__mediaLink {
touch-action: pan-y;
}
}
.place-card__mediaLink {
position: absolute;
inset: 0;
z-index: 1;
/* ниже кнопок */
display: block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* кнопки управления выше */
.place-card__nav,
.place-card__fav,
.place-card__dots {
position: relative;
z-index: 2;
}
.place-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.place-card__media .gimg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.place-card__media .gimg.is-active {
opacity: 1;
}
.place-card__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: 0;
border-radius: 6px;
background: url(img/bg-arr.png);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
opacity: 0.9;
}
.place-card__nav--left {
left: 10px;
}
.place-card__nav--right {
right: 10px;
}
.place-card__nav img {
max-width: 6px;
max-height: 10px;
}
.place-card__fav {
position: absolute;
top: 15px;
right: 15px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
}
.place-card__fav::before {
content: "";
min-width: 26px;
min-height: 26px;
display: block;
background: url(img/heart.svg) center / contain no-repeat;
}
/* активное (красное) */
.place-card__fav.is-active::before {
background-image: url("img/heart-solid.svg");
}
.place-card__dots {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 6px;
}
.place-card__dots .dot {
flex: 0 0 6px;
width: 6px;
height: 6px;
min-width: 6px;
min-height: 6px;
aspect-ratio: 1;
box-sizing: border-box;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
}
.place-card__dots .dot.is-active {
background: rgba(255, 255, 255, .95);
}
/* Great choice badge on place cards */
.place-card__great-choice {
position: absolute;
top: 17px;
left: 17px;
z-index: 2;
width: 108px;
height: 24px;
padding: 0 7px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 999px;
background: #f4e39b;
color: #101616;
font-size: 12px;
font-weight: 500;
line-height: 1;
box-sizing: border-box;
}
.place-card__great-choice img {
width: 12px;
height: 12px;
display: block;
flex: 0 0 12px;
}
.dot {
flex: 0 0 6px;
width: 6px;
height: 6px;
min-width: 6px;
min-height: 6px;
aspect-ratio: 1;
box-sizing: border-box;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
}
.dot--active {
background: rgba(255, 255, 255, .95);
}
.place-card__body {
padding: 14px 14px 14px;
}
.place-card__status {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 600;
padding-bottom: 7px;
border-bottom: 1px solid rgb(147 147 147 / 30%);
margin-bottom: 15px;
}
.status {
}
.status--open {
color: #0a9a22;
}
.status--closed {
color: var(--brand);
}
.rating {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: #111;
font-weight: 700;
}
.rating__star {
color: var(--brand);
font-size: 13px;
}
.rating__val {
font-size: 14px;
}
.place-card__bookings {
font-size: 14px;
font-weight: 500;
}
.place-card__title {
margin: 8px 0 0;
font-size: 20px;
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.01em;
min-height: 70px;
}
.place-card__price {
margin-top: 18px;
font-size: 14px;
font-weight: 500;
}
.place-card__actions {
margin-top: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.btn-outline,
.btn-solid {
height: 46px;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
font-size: 15px;
}
.btn-outline {
border: 1px solid var(--brand);
background: #fff;
color: var(--brand);
}
.btn-solid {
border: 0;
background: var(--brand);
color: #fff;
font-weight: bold;
}
/* ========== COLLECTIONS ========== */
.collections {
padding-top: 100px;
background: #F8F8F8;
}
/* header */
.collections__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.collections__title {
font-size: 30px;
line-height: 1.05;
font-weight: 500;
text-align: left;
margin: 0 0 15px;
}
.collections__arrows {
display: none;
gap: 5px;
}
.navbtn {
width: 40px;
height: 40px;
border: 0;
border-radius: 8px;
background: #B6020B;
cursor: pointer;
position: relative;
}
.navbtn:before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 6px;
height: 6px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(135deg);
}
.navbtn[data-slider-next]:before {
transform: rotate(-45deg);
}
/* full-bleed: слева как container, справа до края экрана */
.full-bleed.collections-row-wrap {
/* симметрия: одинаковые поля с обеих сторон */
padding-left: clamp(16px, calc((100vw - 1120px) / 2), 9999px);
padding-right: 0;
}
/* row */
.collections-row {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 0 0 10px;
scroll-snap-type: x mandatory;
margin-left: 0;
margin-right: 0;
scroll-padding-left: 0;
-webkit-overflow-scrolling: touch;
}
.collections-row::-webkit-scrollbar {
height: 0;
/* прячем нативный */
}
/* card */
.collection-card {
flex: 0 0 336px;
height: 480px;
border-radius: 26px;
overflow: hidden;
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
/* box-shadow: 0 10px 24px rgba(0, 0, 0, .12); */
background: #111;
}
/* image */
.collection-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 1;
}
/* overlay */
.collection-card__overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .55) 100%);
}
/* content */
.collection-card__content {
/* left: 18px; */
/* right: 18px; */
/* bottom: 16px; */
z-index: 3;
/* display: flex; */
/* align-items: flex-end; */
/* justify-content: space-between; */
/* gap: 10px; */
height: 100%;
position: relative;
}
.collection-card__title {
margin: 0;
color: #fff;
font-size: 25px;
line-height: 1.05;
font-weight: 500;
letter-spacing: -0.02em;
text-shadow: 0 8px 18px rgba(0, 0, 0, .35);
position: absolute;
top: 26px;
left: 25px;
padding-right: 80px;
}
.collection-card__cta {
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
opacity: .95;
bottom: 0;
position: absolute;
right: 45px;
bottom: 45px;
}
.collection-card__cta span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
background: rgba(255, 255, 255, .16);
}
/* FIX: full-bleed не должен ломать блок collections */
.collections .full-bleed {
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
position: relative !important;
}
.collections__head {
position: relative;
z-index: 5;
}
.collections-row-wrap {
position: relative;
z-index: 1;
margin-top: 14px;
}
/* custom scrollbar (визуальный) */
.scrollbar {
width: min(1200px, calc(100% - 56px));
margin: 25px auto 0;
height: 10px;
background: rgba(0, 0, 0, .08);
border-radius: 999px;
overflow: hidden;
}
.collections .scrollbar {
width: min(1200px, calc(100% - 56px));
}
.scrollbar__thumb {
display: block;
height: 100%;
width: 42%;
/* потом можно сделать динамически */
background: #B6020B;
border-radius: 999px;
}
/* responsive */
@media (max-width: 640px) {
.collections__title {
font-size: 22px;
}
.collection-card {
flex-basis: 200px;
height: 300px;
}
}
/* ========== BLOCK 5: Section head wrapper ========== */
.section-head {
padding-top: 100px;
}
.section-head__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.section-head__title {
margin: 0;
font-size: 30px;
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: 30px;
}
/* центрируем ряд карточек как на скрине */
.cards-row--center {
justify-content: center;
margin-top: 24px;
}
.cards-row--left {
justify-content: start;
margin-top: 24px;
}
/* ========== BLOCK 6: Special deals ========== */
.deals {
position: relative;
padding: 72px 0 82px;
overflow: hidden;
}
.deals__bg {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 42%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0) 100%),
url("img/deals-bg.jpg") center/cover no-repeat;
transform: translateZ(0);
}
.deals__inner {
position: relative;
z-index: 1;
}
.deals__title {
margin: 0 0 26px;
font-size: 64px;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
text-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.deals-row {
display: flex;
gap: 22px;
align-items: stretch;
}
.deal-card {
width: 360px;
background: #fff;
border-radius: 18px;
box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
overflow: hidden;
display: flex;
min-height: 128px;
}
.deal-card__left {
padding: 18px 18px 16px;
flex: 1;
}
.deal-card__name {
margin: 2px 0 6px;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
}
.deal-card__text {
margin: 0;
color: #8a8a8a;
font-size: 14px;
line-height: 1.35;
}
.deal-card__cta {
width: 110px;
background: var(--brand);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
}
.deal-card__arrow {
position: absolute;
top: 14px;
right: 14px;
font-weight: 900;
}
.deal-card__ctaText {
font-weight: 800;
text-align: center;
line-height: 1.05;
}
.deals__next {
position: absolute;
right: 110px;
top: 50%;
transform: translateY(-8px);
width: 68px;
height: 68px;
border: 0;
border-radius: 18px;
background: rgba(0, 0, 0, .55);
color: #fff;
font-size: 32px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* ========== BLOCK 7: Most booked ========== */
.most {
padding: 60px 0 74px;
background: #fff;
}
.most__title {
margin: 0;
font-size: 64px;
font-weight: 800;
letter-spacing: -0.02em;
}
.most__subtitle {
margin: 10px 0 22px;
color: #2b2b2b;
font-size: 18px;
font-weight: 500;
}
.most-grid {
display: grid;
grid-template-columns: repeat(4, 280px);
gap: 18px;
justify-content: center;
}
/* ========== BLOCK 8: Visit other cities ========== */
.cities {
padding: 64px 0 70px;
background: #fff;
}
.cities__title {
margin: 0 0 22px;
font-size: 64px;
font-weight: 800;
letter-spacing: -0.02em;
}
.cities-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.city-card {
position: relative;
height: 260px;
border-radius: 22px;
overflow: hidden;
display: block;
text-decoration: none;
background: #ddd;
}
.city-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.city-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .10) 55%, rgba(0, 0, 0, 0) 100%);
}
.city-card__name {
position: absolute;
left: 26px;
top: 26px;
color: #fff;
font-weight: 800;
font-size: 44px;
letter-spacing: -0.02em;
text-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.city-card__go {
position: absolute;
right: 18px;
bottom: 18px;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(0, 0, 0, .32);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
/* ===== Responsive ===== */
@media (max-width: 1100px) {
.most-grid {
grid-template-columns: repeat(3, 280px);
}
}
@media (max-width: 920px) {
.section-head__title,
.deals__title,
.most__title,
.cities__title {
font-size: 52px;
}
.most-grid {
grid-template-columns: repeat(2, 280px);
}
.deals__next {
right: 26px;
}
}
@media (max-width: 640px) {
.most-grid {
grid-template-columns: 1fr;
justify-content: stretch;
}
.place-card {
width: 100%;
}
.cities-row {
grid-template-columns: 1fr;
}
.deals-row {
overflow: auto;
padding-bottom: 10px;
}
.deals__next {
display: none;
}
}
/* === FULL BLEED helper: растягивает блок на всю ширину окна === */
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* === Collections slider row full-width but aligned to container left === */
.collections .collections-row-wrap {
/* width: min(1200px, calc(100% - 56px)); */
margin: 14px 0;
padding: 0;
}
.collections-row {
overflow-x: auto;
/* это и есть “слайдер” */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 10px;
}
.collections-row::-webkit-scrollbar {
height: 0;
}
/* чтобы было как в макете */
.collection-card {
scroll-snap-align: start;
}
.place-card__media .gimg {
display: none;
}
.place-card__media .gimg.is-active {
display: block;
border-radius: 18px;
}
.footer {
margin-top: var(--footer-gap, 70px);
border-top: 1px solid #efefef;
background: #fff;
padding: 22px 0;
}
.footer__inner {
width: min(calc(100% - 15px));
padding: 10px 14px;
display: flex;
align-items: center;
gap: 26px;
justify-content: space-between;
}
.footer__left {
display: flex;
align-items: center;
gap: 22px;
min-width: 340px;
}
.footer__logo {
color: var(--brand);
font-weight: 900;
letter-spacing: .06em;
font-size: 24px;
}
.footer__nav {
display: flex;
gap: 22px;
flex-wrap: wrap;
}
.footer__nav a {
color: #2b2b2b;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.footer__nav a:hover {
text-decoration: underline;
}
@media (max-width: 820px) {
.footer__inner {
flex-direction: column;
align-items: flex-start;
}
.footer__left {
min-width: auto;
}
}
/* ========== RESTAURANT HEADER ========== */
.restaurant-header {
padding: 20px;
background: #fff;
}
.restaurant-title {
font-size: 48px;
font-weight: 700;
margin: 0;
letter-spacing: -0.02em;
}
.restaurant-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: 16px;
}
.rating {
display: flex;
align-items: center;
gap: 8px;
}
.stars {
font-size: 22px;
color: #ff9800;
}
.score {
font-size: 18px;
}
.info {
display: flex;
gap: 16px;
font-size: 14px;
color: #333;
}
.hours,
.type,
.price {
display: inline-block;
}
.favorite-btn {
background: none;
border: none;
font-size: 24px;
color: #ff0000;
cursor: pointer;
}
.favorite-btn:focus {
outline: none;
}
.favorite-btn .heart-icon {
font-size: 24px;
}
@media (max-width: 800px) {
.restaurant-meta {
flex-direction: column;
align-items: flex-start;
}
.favorite-btn {
margin-top: 10px;
}
}
/* ========== RESTAURANT PAGE ========== */
.rpage {
padding-top: 30px;
background: #fff;
}
/* Header */
.rhead .rhead__title {
margin: 0;
font-size: 36px;
font-weight: 500;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 14px;
}
.rhead__rating {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
}
.rhead__star {
width: 33px;
height: 33px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FEF0BC;
margin-left: 30px;
margin-right: 10px;
}
.rhead__rateval {
color: #111;
font-size: 45px;
font-weight: 500;
}
.rhead__meta {
margin-top: 10px;
font-size: 12px;
display: flex;
align-items: center;
gap: 10px;
color: #8c8c8c;
}
.rhead__open {
color: #14a63a;
font-weight: 700;
}
.rhead__dot {
color: #c9c9c9;
}
.rhead__muted {
color: #8c8c8c;
font-weight: 600;
font-size: 13px;
}
.rhead__fav {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid #efefef;
background: #fafafa;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #8e8e8e;
}
/* ===== Buttons states (Share + Favorite) ===== */
.rhead__actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
}
/* base */
.rbtn {
border: 1px solid transparent;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-family: Onest, system-ui, sans-serif;
font-size: 12px;
line-height: 16px;
font-weight: 600;
color: #111;
user-select: none;
transition: background .15s ease, border-color .15s ease, transform .05s ease, opacity .15s ease;
}
.rbtn--ghost {
border-color: #efefef;
background: #fff;
}
.rbtn--ghost:hover {
background: #f6f6f6;
}
.rbtn:active {
transform: translateY(1px);
}
.rbtn:focus-visible {
outline: 2px solid rgba(180, 0, 10, .25);
outline-offset: 2px;
}
.rbtn[disabled] {
opacity: .55;
cursor: not-allowed;
transform: none;
}
/* icon */
.rbtn__ico {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
opacity: .85;
}
.rbtn__ico--heart {
width: 16px;
height: 16px;
display: inline-block;
background: url("img/heart.svg") center / contain no-repeat;
opacity: .9;
transition: transform .15s ease, opacity .15s ease;
}
.rbtn__txt {
white-space: nowrap;
}
/* favorite active */
.rbtn.js-fav.is-active {
border-color: rgba(180, 0, 10, .18);
background: rgba(180, 0, 10, .06);
color: var(--brand);
}
.rbtn.js-fav.is-active .rbtn__ico--heart {
background-image: url("img/heart-solid.svg");
opacity: 1;
transform: scale(1.06);
}
/* loading spinner inside button */
.rbtn.is-loading {
pointer-events: none;
}
.rbtn__spinner {
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid rgba(17, 17, 17, .18);
border-top-color: rgba(17, 17, 17, .65);
animation: rspin .75s linear infinite;
display: none;
}
.rbtn.is-loading .rbtn__spinner {
display: inline-block;
}
.rbtn.is-loading .rbtn__ico {
display: none;
}
@keyframes rspin {
to {
transform: rotate(360deg);
}
}
/* ===== Toasts ===== */
.rtoast-wrap {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.rtoast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
min-width: 220px;
max-width: min(440px, calc(100vw - 24px));
padding: 12px 14px;
border-radius: 12px;
background: rgba(17, 17, 17, .92);
color: #fff;
font-size: 12px;
line-height: 16px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
opacity: 0;
transform: translateY(10px);
transition: opacity .18s ease, transform .18s ease;
}
.rtoast.is-show {
opacity: 1;
transform: translateY(0);
}
.rtoast__icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rtoast__btn {
margin-left: auto;
border: 0;
background: rgba(255, 255, 255, .10);
color: #fff;
font-weight: 700;
border-radius: 10px;
padding: 8px 10px;
cursor: pointer;
font-size: 12px;
}
/* ===== Share popover (fallback) ===== */
.rshare {
position: relative;
}
.rshare__panel {
position: absolute;
right: 0;
top: calc(100% + 10px);
width: 260px;
border: 1px solid #ededed;
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
padding: 12px;
display: none;
z-index: 50;
}
.rshare.is-open .rshare__panel {
display: block;
}
.rshare__title {
font-size: 12px;
font-weight: 800;
color: #111;
margin: 2px 0 10px;
}
.rshare__row {
display: flex;
gap: 10px;
align-items: center;
}
.rshare__input {
flex: 1;
height: 38px;
border-radius: 10px;
border: 1px solid #e9e9e9;
padding: 0 10px;
font-size: 12px;
color: #111;
background: #fff;
}
.rshare__copy {
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 0;
background: var(--brand);
color: #fff;
font-weight: 800;
cursor: pointer;
font-size: 12px;
}
@media (max-width: 800px) {
/*.rhead {
flex-direction: column;
align-items: flex-start;
}*/
.rhead__actions {
margin-top: 6px;
}
}
/* Share buttons list */
.rshare__list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.rshare__link {
height: 38px;
border-radius: 10px;
border: 1px solid #ededed;
background: #fff;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
font-size: 12px;
font-weight: 700;
color: #111;
cursor: pointer;
text-decoration: none;
}
.rshare__link:hover {
background: #f6f6f6;
}
.rshare__badge {
margin-left: auto;
color: #8b8b8b;
font-weight: 600;
font-size: 11px;
}
.rbtn__ico {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
opacity: .85;
}
.rbtn__ico--heart {
width: 16px;
height: 16px;
display: inline-block;
background: url("img/heart.svg") center / contain no-repeat;
opacity: .9;
}
/* active favorite */
.rbtn.js-fav.is-active .rbtn__ico--heart {
background-image: url("img/heart-solid.svg");
opacity: 1;
}
.rbtn.js-fav.is-active {
color: var(--brand);
}
@media (max-width: 800px) {
/* .rhead {
flex-direction: column;
align-items: flex-start;
}*/
.rhead__actions {
margin-top: 6px;
}
}
/* =========================================
Gallery v2 (макет)
Big: 326x380
Small: 192x186 (x2 with 8px gap => 380)
========================================= */
.rgallery2 a {
cursor: zoom-in;
}
.rgallery2 a:hover img {
transform: scale(1.02);
transition: transform .25s ease;
}
.rgallery2 img {
transition: transform .25s ease;
}
.rgallery2 {
display: grid;
grid-template-columns: 326px 326px 192px 326px;
gap: 10px;
align-items: stretch;
margin-bottom: 45px;
}
.rgallery2 a {
display: block;
border-radius: 16px;
overflow: hidden;
background: #e9e9e9;
position: relative;
}
.rgallery2 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Big tiles */
.rgallery2__big {
width: 326px;
height: 380px;
}
/* Small stack column */
.rgallery2__stack {
width: 192px;
height: 380px;
display: grid;
grid-template-rows: 186px 186px;
gap: 8px;
/* ключ, чтобы 186+186+8=380 */
}
.rgallery2__small {
width: 192px;
height: 186px;
}
/* More overlay */
.rgallery2__small.is-more::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .35);
}
.rgallery2__moreOverlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
font-weight: 800;
font-size: 12px;
line-height: 1.2;
background: rgba(0, 0, 0, .40);
backdrop-filter: blur(1px);
z-index: 2;
}
/* ===== Responsive ===== */
@media (max-width: 1180px) {
.rgallery2 {
grid-template-columns: 1fr 1fr;
}
.rgallery2__big,
.rgallery2__stack,
.rgallery2__small {
width: 100%;
}
.rgallery2__big {
height: 340px;
}
.rgallery2__stack {
height: 340px;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
.rgallery2__small {
height: 160px;
}
}
@media (max-width: 640px) {
.rgallery2 {
grid-template-columns: 1fr;
}
.rgallery2__big {
height: 260px;
}
.rgallery2__stack {
height: auto;
grid-template-rows: 1fr 1fr;
}
.rgallery2__small {
height: 170px;
}
}
/* Tabs: как на макете */
.rtabs {
display: flex;
gap: 56px;
/* расстояние между вкладками */
align-items: flex-end;
margin: 6px 0 22px;
padding: 0;
}
.rtab {
appearance: none;
border: 0;
background: transparent;
cursor: pointer;
padding: 12px 0 14px;
/* важны для вертикального ритма */
font-size: 13px;
font-weight: 600;
color: #8b8b8b;
position: relative;
}
.rtab--active {
color: var(--brand);
font-weight: 700;
}
/* Красная линия активной вкладки */
.rtab--active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
/* длина линии как на макете */
height: 2px;
/* толщина */
background: var(--brand);
border-radius: 2px;
}
/* Панели */
.rtabpanes {
/* это контейнер контента вкладок */
}
.rtabpane__stub {
padding: 20px 0;
color: #8b8b8b;
font-size: 14px;
}
/* Content layout */
.rcontent {
display: grid;
grid-template-columns: 1fr 500px;
gap: 36px;
align-items: start;
}
.rcontent--no-booking {
grid-template-columns: 1fr;
}
.rbook--noresv {
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
}
.rbook__empty {
text-align: center;
max-width: 260px;
}
.rbook__emptyTitle {
font-weight: 500;
font-size: 30px;
line-height: 1.25;
letter-spacing: -0.02em;
color: #101616;
}
.rbook__emptyText {
margin-top: 14px;
font-size: 15px;
font-weight: 500;
line-height: 1.25;
color: #222;
}
.rblock {
padding-top: 6px;
}
.rblock__title {
margin: 0px;
font-size: 30px;
font-weight: 500;
letter-spacing: -0.02em;
}
.rblock__text {
margin: 0 0 14px;
color: #101616;
font-size: 15px;
line-height: 28px;
max-width: 520px;
}
.rblock__more {
font-size: 13px;
color: #939393;
text-decoration: none;
font-weight: 600;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.rblock__titleRow {
display: flex;
align-items: center;
gap: 10px;
}
.rblock--hours {
margin-top: var(--home-section-top, 70px);
}
.rblock--hours .rblock__title {
font-size: 30px;
font-weight: 500;
}
@media(max-width: 767px) {
.rblock--hours .rblock__title {
font-size: 21px !important;
}
.rhead .rblock__title {
font-size: 21px !important;
}
.rhead__title--solo {
font-size: 21px !important;
}
.reco__title {
font-size: 21px !important;
}
}
.rblock--hours .rblock__titleRow {
margin-bottom: var(--home-gap-title-to-carousel, 20px);
}
.rblock__info {
width: 14px;
height: 14px;
border-radius: 99px;
border: 1px solid #efb1b1;
color: var(--brand);
font-weight: 900;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-2px);
}
/* Hours rows */
.rhours {
}
.rhours__row {
display: grid;
grid-template-columns: 170px 1fr;
gap: 18px;
padding: 6px 0;
font-size: 15px;
}
.rhours__day {
color: #8b8b8b;
}
.rhours__time {
color: #101616;
font-weight: 400;
}
/* Booking card */
.rbook {
background: #f7f7f7;
border-radius: 12px;
padding: 40px;
max-width: 500px;
width: 100%;
height: auto;
position: sticky;
top: 70px;
margin-top: 20px;
}
.rbook__title {
font-size: 30px;
line-height: 52px;
font-weight: 500;
color: var(--brand);
text-align: center;
letter-spacing: -0.02em;
margin: 0;
}
.rbook h5 {
font-weight: 400;
font-style: Regular;
font-size: 20px;
leading-trim: NONE;
line-height: 50px;
letter-spacing: 0%;
text-align: center;
margin: 0;
}
.rbook__addr {
display: flex;
align-items: center;
gap: 10px;
color: #2a2a2a;
font-size: 15px;
font-weight: 600;
justify-content: center;
margin-bottom: 20px;
margin-top: 25px;
}
.rbook__pin {
opacity: .8;
}
.rbook__range {
height: 14px;
background: #fff;
border-radius: 99px;
overflow: hidden;
margin: 10px 0 18px;
}
.rbook__rangeFill {
display: block;
height: 100%;
width: 30%;
/* как на макете */
background: var(--brand);
border-radius: 99px;
}
.rbook__label {
text-align: center;
font-size: 20px;
color: #2a2a2a;
font-weight: 400;
margin-bottom: 12px;
}
.rbook__grid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
}
.pbtn {
width: 60px;
height: 60px;
border-radius: 999px;
border: 1px solid #e1e1e1;
background: transparent;
cursor: pointer;
font-size: 18px;
font-weight: 500;
color: #2a2a2a;
}
.pbtn--active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
@media (max-width: 1180px) {
.rcontent {
gap: 20px;
grid-template-columns: 1fr minmax(0, 420px);
}
.rbook__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Responsive */
@media (max-width: 980px) {
.rcontent {
grid-template-columns: 1fr;
display: block;
}
.rbook {
max-width: 420px;
}
.rgallery {
grid-template-columns: 1fr;
}
.rgallery__big,
.rgallery__mid,
.rgallery__right {
height: auto;
}
.rgallery__mid,
.rgallery__right {
grid-template-rows: auto;
}
}
/* Anchor menu: как на макете */
.rnav {
display: flex;
gap: 56px;
align-items: flex-end;
margin: 6px 0 22px;
padding: 0;
margin-inline: 0px !important;
}
.rnav__link {
text-decoration: none;
color: #8b8b8b;
font-size: 16px;
font-weight: 600;
padding: 12px 0 14px;
position: relative;
display: inline-block;
}
.rnav__link--active {
color: var(--brand);
font-weight: 700;
}
/* Красная линия активного пункта */
.rnav__link--active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--brand);
border-radius: 2px;
}
/* Секции: чтобы при скролле якорь попадал красиво */
.rsection {
scroll-margin-top: 90px;
/* если будет sticky header — подгони */
}
/* ===== Common heads inside rmain (АКТУАЛЬНЫЕ РАЗМЕРЫ ПО МАКЕТУ) ===== */
.rsection {
margin-top: var(--home-section-top, 70px);
}
#overview {
margin-top: 0px !important;
}
.rhead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin: 0 0 28px;
}
.rhead .rblock__title {
margin-bottom: 0 !important;
}
.rhead__title {
margin: 0;
font-weight: 500;
/* Medium */
font-size: 36px;
letter-spacing: 0;
color: #111;
}
.rhead__title--solo {
margin-bottom: 28px;
line-height: 1.25;
}
#location .rhead__title--solo {
font-size: 30px;
}
.rhead__link {
font-family: Onest, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 20px;
color: var(--brand);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 0;
white-space: nowrap;
}
.rsection__menu .rhead {
align-items: center;
}
.rhead__arr {
transform: translateY(-1px);
}
.rmain {
max-width: 660px;
}
/* ===== Our menu (карточки 194x288) ===== */
.rmenu {
position: relative;
display: flex;
gap: 18px;
}
.rmenu__track {
position: relative;
display: flex;
gap: 9px;
align-items: stretch;
}
.mcard {
width: 194px;
height: 288px;
border-radius: 16px;
overflow: hidden;
position: relative;
flex: 0 0 auto;
background: #ddd;
}
.mcard__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mcard__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, .72) 100%);
}
.mcard__name {
position: absolute;
left: 16px;
right: 16px;
bottom: 20px;
font-family: Onest, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: 0;
color: #fff;
}
.mcard__price {
position: absolute;
left: 16px;
bottom: 16px;
font-family: Onest, sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
color: rgba(255, 255, 255, .95);
padding: 6px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(6px);
}
.rnext {
width: 40px;
height: 40px;
border: 0;
border-radius: 10px;
background: var(--brand);
color: #fff;
font-weight: 900;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
flex: 0 0 auto;
transform: translateY(1px);
}
.rsection__menu {
}
/* ===== Special deals mini (ТЕКСТ 22/30, Onest 500) ===== */
.deals-mini {
display: flex;
gap: 18px;
align-items: stretch;
}
.dmini {
width: 320px;
/* подгони по макету, если надо */
height: 88px;
/* подгони по макету, если надо */
border-radius: 14px;
background: #f3f3f3;
display: flex;
overflow: hidden;
flex: 0 0 auto;
}
.dmini__text {
padding: 16px 18px;
font-family: Onest, sans-serif;
font-weight: 500;
/* Medium */
font-size: 22px;
line-height: 30px;
letter-spacing: 0;
color: #111;
flex: 1;
}
.dmini__cta {
width: 86px;
background: var(--brand);
color: #fff;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
gap: 6px;
}
.dmini__arr {
position: absolute;
top: 12px;
right: 12px;
font-weight: 900;
font-size: 14px;
}
.dmini__ctaText {
font-family: Onest, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
}
.dmini--plain {
background: #f3f3f3;
}
.dmini__next {
width: 32px;
height: 32px;
border: 0;
border-radius: 10px;
background: var(--brand);
color: #fff;
font-weight: 900;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
flex: 0 0 auto;
}
/* ===== Reviews (увеличено до адекватных размеров под десктоп-колонку) ===== */
.reviews-row {
display: flex;
gap: 18px;
align-items: stretch;
margin-top: 10px;
}
.review {
width: 360px;
/* подгони по макету */
border: 1px solid #ededed;
background: #fff;
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow: 0 10px 26px rgba(0, 0, 0, .04);
}
.review__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.stars {
font-size: 14px;
letter-spacing: 1px;
color: #f1b400;
line-height: 1;
}
.review__date {
font-family: Onest, sans-serif;
font-size: 12px;
line-height: 16px;
color: #b0b0b0;
font-weight: 500;
}
.review__text {
margin: 0 0 10px;
font-family: Onest, sans-serif;
font-size: 14px;
line-height: 20px;
color: #1d1d1d;
font-weight: 400;
overflow: hidden;
}
.review__more {
font-family: Onest, sans-serif;
font-size: 12px;
line-height: 16px;
color: #b0b0b0;
text-decoration: none;
font-weight: 500;
}
.review__bot {
margin-top: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.review__avatar {
width: 28px;
height: 28px;
border-radius: 999px;
background: #f0f0f0;
display: inline-block;
}
.review__name {
font-family: Onest, sans-serif;
font-size: 12px;
line-height: 16px;
color: #7a7a7a;
font-weight: 600;
}
.leave {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-family: Onest, sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
width: 100%;
text-align: center;
justify-content: center;
margin-top: 20px;
height: 54px;
border: 1px solid #B6020B;
border-radius: 8px;
}
.leave__arr {
transform: translateY(-1px);
}
/* =========================
Photos by guests (layout like макет)
========================= */
.pgrid {
display: grid;
grid-template-columns: 229px 182px 182px;
grid-template-rows: 163px 163px;
gap: 10px;
align-items: stretch;
}
/* Общие правила для всех ссылок */
.pgrid a {
display: block;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.pgrid img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Левый большой блок: 229x336 */
.pgrid .pbig {
grid-column: 1;
grid-row: 1 / span 2;
/* занимает 2 ряда = 336 */
width: 229px;
height: 336px;
}
/* Центральный высокий: 182x336 */
.pgrid .pwide {
grid-column: 2;
grid-row: 1 / span 2;
width: 182px;
height: 336px;
}
/* Правый верх: 182x163 */
.pgrid .psmall {
grid-column: 3;
grid-row: 1;
width: 182px;
height: 163px;
}
/* Правый низ (плашка): 182x163 */
.pgrid .psmall--more {
grid-column: 3;
grid-row: 2;
width: 182px;
height: 163px;
}
/* Твои обёртки больше не должны ломать grid */
.pgrid .pside,
.pgrid .psmallrow {
display: contents;
}
/* Плашка "See other" */
.pgrid .psmall__moreText {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 1.15;
color: #fff;
background: rgba(0, 0, 0, .45);
}
/* адаптив: на узких экранах перестроим, чтобы не ломалось */
@media (max-width: 680px) {
.pgrid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.pgrid .pbig {
grid-column: 1 / span 2;
grid-row: auto;
width: auto;
height: 336px;
}
.pgrid .pwide,
.pgrid .psmall,
.pgrid .psmall--more {
grid-column: auto;
grid-row: auto;
width: auto;
height: 163px;
}
}
/* ===== Tastes & vibes (крупнее под макет) ===== */
.tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.tag {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid #e9e9e9;
background: #fff;
font-family: Onest, sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #9a9a9a;
}
.pillbtn {
height: 32px;
padding: 0 14px;
border-radius: 999px;
background: var(--brand);
color: #fff;
font-family: Onest, sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(1px);
}
/* ===== Location (заглушка, размеры подгони под макет/ACF) ===== */
.mapbox {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid #ededed;
width: 560px;
height: auto;
min-height: 260px;
margin-top: 12px;
background: #f6f6f6;
}
.mapbox__stub {
position: absolute;
inset: 0;
background:
linear-gradient(0deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%),
url("img/map-placeholder.jpg") center/cover no-repeat;
filter: saturate(1.05);
}
.mapbox__btn {
position: absolute;
right: 16px;
bottom: 16px;
height: 32px;
padding: 0 14px;
border-radius: 999px;
background: var(--brand);
color: #fff;
text-decoration: none;
font-family: Onest, sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.mapbox__btn span {
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
color: var(--accent);
border: 1px solid #e6c2c6;
}
.hero {
position: relative;
overflow: hidden;
min-height: 700px;
box-shadow: var(--shadow);
/* background: only .hero__bg (see .hero__bg) */
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.52) 0%,
rgba(0, 0, 0, 0.2) 55%,
rgba(0, 0, 0, 0) 100%);
}
.hero-content {
position: relative;
z-index: 1;
padding: 72px 60px 66px;
color: #fff;
max-width: 560px;
}
.hero-title {
font-family: "Playfair Display", serif;
font-size: 40px;
line-height: 1.15;
margin-bottom: 20px;
}
.search-bar {
display: grid;
grid-template-columns: 1fr 1.8fr auto;
gap: 0;
background: #fff;
padding: 6px;
border-radius: 14px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
align-items: center;
}
.search-field {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
background: #fff;
}
.search-divider {
width: 1px;
height: 26px;
background: #e3e3e3;
}
.search-field select,
.search-field input {
border: 0;
outline: none;
width: 100%;
font-size: 13px;
color: #2c2c2c;
background: transparent;
}
.search-icon {
width: 18px;
height: 18px;
border-radius: 50%;
background: #f3f3f3;
display: grid;
place-items: center;
font-size: 12px;
color: var(--accent);
}
.filter-icon {
margin-left: auto;
color: var(--accent);
font-size: 16px;
}
.section {
padding: 40px 0 6px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
}
.section h2 {
font-size: 22px;
}
.view-all {
color: var(--accent);
font-weight: 600;
font-size: 13px;
}
.venue-card {
background: #f2f2f2;
border-radius: var(--radius-md);
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.venue-card.large {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.venue-card.large .venue-text {
display: grid;
gap: 10px;
}
.venue-card.large img {
width: 62%;
height: 170px;
}
.venue-card.small {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.venue-card.small .venue-text {
display: grid;
gap: 10px;
}
.venue-card.small img {
width: 55%;
height: 135px;
}
.venue-card img {
border-radius: 18px;
object-fit: cover;
}
.tag {
font-size: 12px;
color: var(--muted);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.chip {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid #e4e4e4;
font-size: 12px;
color: var(--muted);
background: #fff;
}
.chip.active {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.restaurant-card {
background: var(--card);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
}
.restaurant-card img {
height: 150px;
width: 100%;
object-fit: cover;
}
.restaurant-content {
padding: 14px;
display: grid;
gap: 10px;
}
.meta {
font-size: 11px;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
}
.status {
color: #1a7f37;
font-weight: 600;
}
.rating {
margin-left: auto;
color: var(--accent);
font-weight: 600;
}
.actions {
display: flex;
gap: 8px;
}
.divider {
height: 3px;
width: 120px;
background: var(--accent);
border-radius: 999px;
margin: 18px 0;
}
.deals {
background: url("https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
border-radius: var(--radius-lg);
padding: 40px;
color: #fff;
position: relative;
overflow: hidden;
}
.deals::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
.deal-cards {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 20px;
}
.deal-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 18px;
border-radius: 16px;
display: grid;
gap: 10px;
backdrop-filter: blur(6px);
}
.deal-card .btn {
width: fit-content;
padding: 8px 12px;
font-size: 12px;
}
.cities {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.city-card {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
height: 160px;
box-shadow: var(--shadow);
}
.city-card img {
height: 100%;
width: 100%;
object-fit: cover;
}
.city-card span {
position: absolute;
top: 18px;
left: 18px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
}
footer {
margin-top: 60px;
padding: 30px 0;
font-size: 12px;
color: var(--muted);
border-top: 1px solid #e6e6e6;
background: #fff;
}
footer .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 980px) {
.nav-links {
display: none;
}
.venue-grid {
grid-template-columns: 1fr;
}
.collections {
grid-template-columns: repeat(2, 1fr);
}
.deal-cards {
grid-template-columns: 1fr;
}
.cities {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.hero-content {
padding: 50px 30px;
}
.search-bar {
grid-template-columns: 1fr;
}
.search-divider {
display: none;
}
.collections {
grid-template-columns: 1fr;
}
}
.breadcrumbs {
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
margin-bottom: 40px;
display: flex;
align-items: center;
position: relative;
z-index: 60;
pointer-events: auto;
}
.breadcrumbs a {
color: #101616;
text-decoration: none;
pointer-events: auto;
cursor: pointer;
}
.breadcrumbs .kama_breadcrumbs,
.breadcrumbs .kb_title {
pointer-events: auto;
}
.kb_sep {
color: #D2D3D3;
margin: 0 10px;
}
/* ========== AUTH MODAL (Pixel UI) ========== */
:root {
--auth-accent: #b4000a;
--auth-text: #101010;
--auth-muted: #6f6f6f;
--auth-border: #e9e9e9;
--auth-soft: #f3f4f6;
}
/* =========================
AUTH MODAL (RIGHT DRAWER)
========================= */
.authm {
position: fixed;
inset: 0;
z-index: 9999;
overflow-x: hidden;
display: none;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
/* открыто */
.authm.is-open {
display: block;
opacity: 1;
pointer-events: auto;
}
/* если ты используешь aria-hidden — тоже ок */
.authm[aria-hidden="true"] {
opacity: 0;
pointer-events: none;
}
.authm[aria-hidden="false"] {
display: block;
opacity: 1;
pointer-events: auto;
}
.authm__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
}
/* DRAWER справа */
.authm__dialog {
position: absolute;
top: 0;
right: 0;
left: auto;
height: 100%;
width: 100%;
max-width: 400px;
box-sizing: border-box;
background: #fff;
box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
padding: 25px 40px 16px;
transform: translateX(100%);
transition: transform .28s ease;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media(max-width: 767px) {
.authm__dialog {
max-width: 100%;
}
}
/* когда открыто — выезжает */
.authm.is-open .authm__dialog {
transform: translateX(0);
}
.authm__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.authm__iconbtn {
width: auto;
height: auto;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #111;
padding: 0;
margin: 0;
}
.authm__iconbtn:hover {
background: #f6f6f6;
border-color: #efefef;
}
.authm__chev {
width: 10px;
height: 10px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 3px;
}
.authm__x {
width: 14px;
height: 14px;
position: relative;
}
.authm__x::before,
.authm__x::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
background: currentColor;
transform-origin: center;
}
.authm__x::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.authm__x::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.authm__title {
margin: 2px 0 10px;
font-size: 30px;
line-height: 42px;
font-weight: 500;
color: var(--auth-text);
margin-top: 40px;
}
.authm__text {
margin: 17px 0 35px;
font-size: 15px;
line-height: 26px;
color: #101616;
}
.authm__form {
display: block;
}
.authm__label {
display: none;
}
.authm__input {
width: 100%;
height: 55px;
border-radius: 6px;
border: 1px solid #e9e9e9;
background: #f5f5f5;
padding: 0 20px;
font-size: 15px;
outline: none;
color: #111;
font-family: 'Onest';
}
.authm__input::placeholder {
color: #9a9a9a;
}
.authm__input:focus {
background: #fff;
border-color: rgba(180, 0, 10, .35);
box-shadow: 0 0 0 3px rgba(180, 0, 10, .10);
}
.authm__btn {
width: 100%;
height: 55px;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
font-weight: 700;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 10px;
text-decoration: none;
position: relative;
}
.authm__btn .authm__btnIco {
position: absolute;
left: 20px;
width: 30px;
height: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: #fff;
}
/* Social auth button layout */
.auth__soc.authm__btn {
justify-content: center;
padding: 0 16px;
}
.auth__socIco {
position: static !important;
left: auto !important;
width: 20px !important;
height: 20px !important;
border-radius: 0 !important;
background: transparent !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.auth__socIco img {
width: 18px;
height: 18px;
display: block;
}
.authm__googleText {
position: static !important;
left: auto !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border-radius: 0 !important;
display: inline !important;
}
.authm__btn--primary {
background: var(--auth-accent);
color: #fff;
}
.authm__btn--primary:hover {
filter: brightness(.97);
}
.authm__terms {
margin: 20px 0 20px;
font-size: 14px;
line-height: 1.35;
color: #6f6f6f;
}
.authm__link {
font-size: 14px;
color: #111;
text-decoration: underline;
text-underline-offset: 2px;
}
.authm__link--accent {
color: var(--auth-accent);
font-weight: 700;
text-decoration: none;
}
.authm__or {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 20px;
justify-content: center;
}
.authm__orLine {
height: 1px;
background: #e7e7e7;
flex: 1;
}
.authm__orTxt {
font-size: 15px;
color: #101616;
}
.authm__btn--fb {
background: #355089;
color: #fff;
border-color: transparent;
}
.authm__btn--google {
background: #f2f2f2;
color: #111;
border-color: #e7e7e7;
}
.authm__btn--apple {
background: #111;
color: #fff;
border-color: transparent;
}
.authm__btnIco {
width: 16px;
height: 16px;
display: inline-block;
flex: 0 0 auto;
background: #fff;
border-radius: 4px;
}
.authm__btnIco--fb {
background: #fff;
position: relative;
}
.authm__btnIco--fb::after {
content: "f";
display: block;
width: 100%;
height: 100%;
font-weight: 900;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #355089;
}
.authm__btnIco--google {
background: #fff;
position: relative;
}
.authm__btnIco--google::after {
content: "G";
display: block;
width: 100%;
height: 100%;
font-weight: 900;
font-size: 13px;
line-height: 16px;
text-align: center;
color: #111;
}
.authm__btnIco--apple {
background: transparent;
position: relative;
}
.authm__btnIco--apple::after {
content: "";
display: block;
width: 100%;
height: 100%;
font-size: 16px;
line-height: 16px;
text-align: center;
color: #fff;
}
.authm__bottom {
margin: 12px 0 0;
font-size: 14px;
color: #6f6f6f;
text-align: center;
}
/* small phones */
@media (max-width:360px) {
.authm__dialog {
width: 300px;
}
}
/* ===== Booking wizard (step switch) ===== */
.rbook__step {
display: none;
}
.rbook__step.is-active {
display: block;
}
.rbook__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.rbook__topTitle {
flex: 1;
text-align: center;
}
.rbook__back,
.rbook__close {
border: none;
background: transparent;
cursor: pointer;
}
/* ===== Calendar (Step 2) ===== */
.rcal {
margin-top: 20px;
}
.rcal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 0 10px;
}
.rcal__month {
font-size: 16px;
font-weight: 500;
color: var(--brand);
letter-spacing: .02em;
}
.rcal__nav {
width: 30px;
height: 30px;
border-radius: 10px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #111;
}
.rcal__week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
padding: 6px 0 10px;
}
.rcal__wd {
font-size: 16px;
font-weight: 500;
color: rgb(16 22 22 / 30%);
text-align: center;
}
.rcal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.rcal__day {
height: 40px;
width: 40px;
border-radius: 999px;
border: 0;
background: transparent;
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: #111;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 100%;
}
/* hover как у today/brand */
.rcal__day:not(:disabled):hover {
background: #B6020B;
color: #fff;
}
/* выбранный день */
.rcal__day.is-selected {
background: #B6020B;
color: #fff;
}
/* сегодняшний */
.rcal__day.is-today {
background: #B6020B;
color: #fff;
}
/* прошедшие/недоступные */
.rcal__day:disabled {
opacity: .35;
cursor: not-allowed;
color: #777;
}
/* чтобы hover не срабатывал на disabled */
.rcal__day:disabled:hover {
background: transparent;
color: #777;
}
.rcal__day.is-out {
color: #cfcfcf;
cursor: default;
}
.rcal__day.is-disabled {
color: #cfcfcf;
cursor: not-allowed;
}
.rcal__day.is-active {
background: var(--brand);
color: #fff;
}
.rcal__day:focus {
outline: 2px solid rgba(180, 0, 10, .25);
outline-offset: 2px;
}
.rbook__back {
position: absolute;
top: 25px;
left: 25px;
display: none;
}
/* ===== Step 3: Time slots ===== */
.rtime {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 14px;
}
.tbtn {
height: 44px;
border-radius: 999px;
border: 1px solid #e6e6e6;
background: #fff;
color: #111;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.tbtn:not(:disabled):hover {
background: #B6020B;
border-color: #B6020B;
color: #fff;
}
.tbtn.is-active {
background: #B6020B;
border-color: #B6020B;
color: #fff;
}
.tbtn:disabled {
opacity: .35;
cursor: not-allowed;
}
.rbook__note {
margin: 14px 0 0;
font-size: 13px;
line-height: 1.35;
color: #9b9b9b;
text-align: center;
}
/* мобилка */
@media (max-width: 420px) {
.rtime {
grid-template-columns: repeat(3, 1fr);
}
}
/* ===== Step 4: Contact form ===== */
.rbook__label--title {
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
text-align: center;
}
.rform {
display: grid;
gap: 12px;
}
.rfield {
display: grid;
gap: 6px;
}
.rfield__lbl {
font-size: 16px;
color: #101616;
font-weight: 400;
}
.rfield__inp {
height: 55px;
border-radius: 10px;
border: 1px solid #ededed;
background: #fff;
padding: 0 12px;
font-size: 13px;
outline: none;
}
.rfield__inp::placeholder {
color: #b8b8b8;
}
.rfield__inp:focus {
border-color: #f0b1b5;
box-shadow: 0 0 0 3px rgba(182, 2, 11, .10);
}
/* Phone row */
.rphone {
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px;
align-items: center;
}
.rphone__code {
height: 55px;
border-radius: 10px;
border: 1px solid #ededed;
background: #fff;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
color: #111;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.rphone__chev {
width: 10px;
height: 10px;
position: relative;
opacity: .6;
}
.rphone__chev::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 6px;
height: 6px;
transform: rotate(45deg);
}
.rphone__inp {
height: 55px;
border-radius: 10px;
border: 1px solid #ededed;
background: #fff;
padding: 0 12px;
font-size: 13px;
outline: none;
}
/* Submit */
.rsubmit {
height: 55px;
border-radius: 10px;
border: 0;
background: var(--brand);
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 4px;
}
.rsubmit:disabled {
opacity: .6;
cursor: not-allowed;
}
.rsubmit__ok {
font-weight: 900;
transform: translateY(-1px);
}
.rbook__notice {
margin: 0 0 10px;
padding: 10px 12px;
border-radius: 10px;
background: #fff3f3;
color: #b6020b;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
text-align: left;
}
/* Terms */
.rterms {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
font-size: 13px;
color: #9b9b9b;
margin-top: 2px;
user-select: none;
}
.rterms__chk {
transform: translateY(1px);
}
.rterms__link {
color: var(--brand);
text-decoration: underline;
}
/* mobile */
@media (max-width: 420px) {
.rphone {
grid-template-columns: 1fr;
}
}
.rlogin {
margin-top: 10px;
text-align: center;
padding: 10px 6px 0;
}
.rlogin__title {
font-weight: 500;
font-size: 30px;
line-height: 1.25;
color: #111;
margin-bottom: 8px;
}
.rlogin__text {
font-size: 15px;
font-weight: 500;
line-height: 1.25;
color: #222;
max-width: 260px;
margin: 0 auto 14px;
}
.rlogin__actions {
display: grid;
gap: 10px;
margin: 0 14px 12px;
}
.rlogin__btn {
height: 46px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 700;
font-size: 15px;
}
.rlogin__btn--solid {
background: var(--brand);
color: #fff;
}
.rlogin__btn--outline {
background: #fff;
color: var(--brand);
border: 1px solid var(--brand);
}
.rlogin__hint {
font-size: 11px;
color: #b0b0b0;
}
/* ===== Booking DONE state ===== */
.rbook.is-done {
padding-top: 18px;
}
.rbook.is-done .rbook__back,
.rbook.is-done .rbook__title,
.rbook.is-done h5,
.rbook.is-done .rbook__addr,
.rbook.is-done .rbook__range,
.rbook.is-done .rbook__label,
.rbook.is-done .rbook__grid {
display: none !important;
}
/* на всякий: если есть ещё верхние элементы — скрываем всё кроме активного шага */
.rbook.is-done .rbook__step {
display: none;
}
.rbook.is-done .rbook__step.is-active {
display: block;
}
/* чуть красивее сам done-блок */
.rbook__done {
text-align: center;
padding: 26px 10px 10px;
}
.rbook__doneIcon {
width: 42px;
height: 42px;
border-radius: 999px;
background: var(--brand);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
font-weight: 900;
}
.rbook__doneTitle {
font-weight: 500;
font-size: 30px;
line-height: 1.25;
margin-bottom: 6px;
}
.rbook__doneText {
color: #222;
font-size: 15px;
font-weight: 500;
line-height: 1.25;
margin-bottom: 16px;
}
.rbook__doneBtn {
width: 100px;
height: 46px;
padding: 0 18px;
border-radius: 10px;
border: 0;
background: var(--brand);
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
/* кнопка-аватар в шапке */
.userbtn {
width: 38px;
height: 38px;
border-radius: 999px;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.userbtn__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.userbtn__initials {
width: 100%;
height: 100%;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: 14px;
}
/* drawer */
.udrawer {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.udrawer.is-open {
display: block;
}
.udrawer__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
}
.udrawer__panel {
position: absolute;
top: 0;
right: 0;
width: min(420px, 88vw);
height: 100%;
background: #fff;
padding: 70px 50px 18px;
box-shadow: -12px 0 30px rgba(0, 0, 0, .18);
overflow: auto;
}
.udrawer__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
cursor: pointer;
font-size: 26px;
line-height: 1;
}
.udrawer__top {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 16px;
}
.udrawer__ava {
width: 68px;
height: 68px;
border-radius: 999px;
overflow: hidden;
background: #f1f1f1;
}
.udrawer__ava img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.udrawer__hello {
margin-top: 14px;
font-size: 26px;
font-weight: 500;
text-align: center;
}
.udrawer__sep {
margin: 30px auto;
border: 0;
border-top: 1px solid #eee;
max-width: 220px;
}
.udrawer__nav {
display: flex;
flex-direction: column;
gap: 20px;
}
.udrawer__link {
color: #111;
text-decoration: none;
font-weight: 500;
font-size: 20px;
}
.udrawer__link:hover {
text-decoration: underline;
}
.udrawer__bottom {
margin-top: 50px;
}
.udrawer__logout {
color: #B6020B;
font-weight: 500;
text-decoration: none;
font-size: 16px;
}
.udrawer__logout:hover {
text-decoration: underline;
}
.udrawer__logout span {
display: inline-block;
margin-left: 10px;
}
.btn.js-auth-open {
color: #fff;
width: 120px;
height: 46px;
opacity: 1;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
line-height: 24px;
text-align: center;
background: #B6020B;
}
.status {
font-weight: 600;
font-size: 13px;
line-height: 1;
}
/* OPEN */
.status--open {
color: #1f9d55;
/* зелёный */
}
/* CLOSED */
.status--closed {
color: #b6020b;
/* твой красный */
}
/* =========================
REVIEW MODAL (rmodal)
========================= */
.rmodal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
padding: 18px;
}
.rmodal.is-open {
display: flex;
align-items: center;
justify-content: center;
}
.rmodal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, .55);
backdrop-filter: blur(2px);
}
.rmodal__dialog {
position: relative;
width: min(428px, 100%);
background: #F8F8F8;
border-radius: 18px;
padding: 40px 30px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
z-index: 1;
transform: translateY(8px);
opacity: 0;
transition: .18s ease;
}
.rmodal.is-open .rmodal__dialog {
transform: translateY(0);
opacity: 1;
}
/* Top */
.rmodal__top {
gap: 14px;
margin-bottom: 12px;
}
.rmodal__title {
font-size: 36px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.02em;
text-align: center;
}
.rmodal__top button[data-review-close],
.close {
border: none;
background: transparent;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
height: auto;
width: auto;
}
.rmodal__top button[data-review-close]:hover {
background: #f6f6f6;
}
.rmodal__top button[data-review-close]:active {
transform: scale(.98);
}
/* Form spacing */
#reviewForm {
display: grid;
gap: 12px;
}
/* Stars */
.rmodal__stars {
display: inline-flex;
gap: 6px;
align-items: center;
justify-content: center;
margin: 8px 0 50px;
width: 100%;
}
.rmodal__stars .star {
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
font-size: 22px;
line-height: 1;
transition: .12s ease;
background-image: url(img/star-uncolor.svg);
font-size: 0;
width: 20.68px;
height: 18.83px;
}
.rmodal__stars .star.is-active {
background-image: url(img/star-color.svg);
}
.rmodal__stars .star:hover {
transform: translateY(-1px);
}
/* Textarea */
#reviewContent {
width: 100%;
min-height: 116px;
resize: vertical;
border: 1px solid #e9e9e9;
border-radius: 12px;
padding: 20px 21px;
font-size: 16px;
line-height: 1.35;
outline: none;
transition: .15s ease;
}
#reviewContent::placeholder {
color: #a9a9a9;
}
#reviewContent:focus {
border-color: rgba(182, 2, 11, .35);
box-shadow: 0 0 0 4px rgba(182, 2, 11, .08);
}
/* Upload */
.upload {
width: 100%;
border: 1px solid #e9e9e9;
border-radius: 12px;
padding: 12px 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
color: #6a6a6a;
background: #fff;
transition: .15s ease;
user-select: none;
text-align: center;
font-size: 14px;
}
.upload:hover {
background: #f8f8f8;
}
.upload:active {
transform: scale(.995);
}
.upload input {
display: none;
}
.rmodal__hint {
font-size: 12px;
color: #8b8b8b;
margin-top: -6px;
}
/* Buttons (под твои existing .btn-solid/.btn-outline, но подстрахуем) */
#reviewForm .btn-solid,
#reviewForm .btn-outline {
width: 100%;
height: 55px;
border-radius: 12px;
font-weight: 700;
font-size: 16px;
}
#reviewForm .btn-solid {
background: #B6020B;
color: #fff;
border: 1px solid #B6020B;
cursor: pointer;
transition: .15s ease;
}
#reviewForm .btn-solid:hover {
filter: brightness(.98);
}
#reviewForm .btn-solid:active {
transform: scale(.995);
}
#reviewForm .btn-outline {
background: #fff;
border: 1px solid rgba(182, 2, 11, .55);
color: #B6020B;
cursor: pointer;
transition: .15s ease;
}
#reviewForm .btn-outline:hover {
background: rgba(182, 2, 11, .06);
}
/* Mobile tweaks */
@media (max-width: 420px) {
.rmodal {
padding: 12px;
}
.rmodal__title {
font-size: 22px;
}
}
.rmodal__stars img,
[data-read-stars] img {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 4px;
}
.review__photos {
display: flex;
gap: 10px;
margin: 10px 0 6px;
flex-wrap: wrap;
}
.review__photo {
display: block;
width: 72px;
height: 72px;
border-radius: 12px;
overflow: hidden;
background: #f2f2f2;
}
.review__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#reviews.rsection {
margin-top: 80px;
}
#reviews .rhead {
align-items: center;
}
.photos__block {
margin-top: 80px;
}
/* ===== Restaurant Reviews page (separate) ===== */
.revpage {
background: #fff;
}
.revpage__top {
margin-top: 10px;
margin-bottom: 14px;
display: flex;
align-items: center;
}
.revpage__title {
margin: 0;
font-size: 64px;
line-height: 1.06;
font-weight: 500;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 14px;
}
.revpage__rating {
display: inline-flex;
align-items: center;
gap: 8px;
}
.revpage__star {
width: 33px;
height: 33px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #FEF0BC;
margin-left: 8px;
}
.revpage__rateval {
font-size: 45px;
font-weight: 500;
color: #111;
}
.revpage__meta {
margin-top: 0;
color: #b0b0b0;
font-size: 12px;
font-weight: 500;
margin-left: 30px;
}
/* tabs like макет */
.revtabs {
display: flex;
gap: 28px;
margin: 18px 0 22px;
}
.revtab {
text-decoration: none;
color: #8b8b8b;
font-size: 13px;
font-weight: 600;
padding: 12px 16px 14px;
position: relative;
}
.revtab.is-active {
color: var(--brand);
font-weight: 700;
}
.revtab.is-active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--brand);
border-radius: 2px;
}
/* grid of reviews */
.revgrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
justify-content: center;
}
.revmore {
margin-top: 26px;
display: flex;
justify-content: center;
}
/* responsive */
@media (max-width: 980px) {
.revgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.revpage__title {
font-size: 52px;
}
}
@media (max-width: 640px) {
.revgrid {
grid-template-columns: 1fr;
}
.revpage__title {
font-size: 42px;
}
.revtabs {
gap: 16px;
flex-wrap: wrap;
}
}
.mapbox {
position: relative;
border-radius: 22px;
overflow: visible;
height: auto;
}
.mapbox__map {
height: 420px;
/* как на макете */
width: 100%;
background: #eee;
}
/* Copy button */
.mapbox__copy {
position: absolute;
right: 18px;
bottom: 18px;
border: 0;
cursor: pointer;
padding: 12px 16px;
border-radius: 14px;
background: var(--brand);
color: #fff;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.mapbox__copyIco {
width: 18px;
height: 18px;
border-radius: 4px;
background: rgba(255, 255, 255, .28);
position: relative;
}
.mapbox__copyIco::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
left: 4px;
top: 4px;
border: 2px solid rgba(255, 255, 255, .9);
border-left: 0;
border-top: 0;
transform: rotate(-45deg);
opacity: .0;
/* чисто декоративно */
}
/* ===== Custom marker ===== */
.gmark {
transform: translateY(-8px);
user-select: none;
}
.gmark__star {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 6px;
background: rgba(255, 255, 255, .18);
line-height: 18px;
text-align: center;
font-size: 12px;
}
.gmark__pin {
width: 0;
height: 0;
margin: 0 auto;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--brand);
filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18));
}
/* ===== You might also like ===== */
.reco {
background: #fff;
margin-top: 100px;
}
.reco__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
@media (max-width: 768px) {
.reco__head {
margin-bottom: var(--home-gap-title-to-carousel, 20px) !important;
}
}
.reco__title {
margin: 0;
font-size: 30px;
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.02em;
}
.reco__nav {
display: none;
gap: 10px;
}
.reco__navBtn {
width: 34px;
height: 34px;
border: 0;
border-radius: 8px;
background: var(--brand);
color: #fff;
font-size: 18px;
font-weight: 900;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.reco__viewport {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 10px;
scroll-padding-inline: 28px;
margin-inline: -28px;
padding-inline: 28px;
}
.reco__viewport::-webkit-scrollbar {
display: none;
}
.reco__track {
display: flex;
gap: 10px;
min-width: max-content;
}
/* чтобы карточки были как в макете (4 в ряд примерно) */
.reco__track .place-card {
width: 285px;
flex: 0 0 auto;
}
/* ===== Footer (макет) ===== */
.tfooter {
border-top: 1px solid #eee;
background: #fff;
padding: 22px 0;
}
.tfooter__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.tfooter__logo {
font-weight: 900;
letter-spacing: .06em;
text-decoration: none;
color: var(--brand);
font-size: 34px;
white-space: nowrap;
}
.tfooter__copy {
color: #6f6f6f;
font-size: 12px;
white-space: nowrap;
}
.tfooter__links {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
justify-content: flex-end;
}
.tfooter__link {
color: #1b1b1b;
font-size: 12px;
text-decoration: none;
}
.tfooter__link:hover {
text-decoration: underline;
}
/* адаптив */
@media (max-width: 900px) {
.tfooter__inner {
flex-direction: column;
align-items: flex-start;
}
.tfooter__links {
justify-content: flex-start;
gap: 14px;
}
}
/* ===== Profile page ===== */
.uprofile {
padding: 48px 0 30px;
background: #fff;
}
.uprofile__container {
width: min(1120px, calc(100% - 56px));
}
.uprofile__card {
max-width: 820px;
}
.uprofile__top {
display: flex;
align-items: center;
gap: 18px;
}
.uprofile__avatar {
width: 88px;
height: 88px;
border-radius: 999px;
overflow: hidden;
flex: 0 0 auto;
background: #f3f3f3;
}
.uprofile__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.uprofile__hi {
font-size: 30px;
font-weight: 500;
letter-spacing: -0.02em;
}
.uprofile__since {
margin-top: 2px;
color: #b0b0b0;
font-size: 15px;
font-weight: 600;
}
.uprofile__divider {
height: 1px;
background: #eee;
margin: 16px 0 22px;
}
.uprofile__title {
margin: 0 0 16px;
font-size: 20px;
font-weight: 800;
}
.uprofile__notice {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
}
.uprofile__notice.is-success {
background: #ecfff2;
color: #147a2e;
border: 1px solid #bff0cc;
}
.uprofile__notice.is-error {
background: #fff1f1;
color: #a31212;
border: 1px solid #f1c1c1;
}
.uprofile__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 821px;
}
.ufield__lbl {
display: block;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
.ufield__inp {
width: 100%;
height: 44px;
border: 1px solid #e9e9e9;
border-radius: 8px;
padding: 0 12px;
outline: none;
font-size: 15px;
}
.ufield__inp:focus {
border-color: rgba(191, 0, 0, .35);
box-shadow: 0 0 0 3px rgba(191, 0, 0, .10);
}
.ufield--wide {
grid-column: 1 / -1;
}
.uprofile__save {
margin-top: 26px;
height: 46px;
padding: 0 28px;
border: 0;
border-radius: 8px;
background: var(--brand);
color: #fff;
font-weight: 700;
cursor: pointer;
min-width: 220px;
font-size: 15px;
}
/* mobile */
@media (max-width: 640px) {
.uprofile__grid {
grid-template-columns: 1fr;
}
.uprofile__container {
width: min(1120px, calc(100% - 28px));
}
}
/* avatar upload */
.uava {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 18px;
}
.uava__img {
width: 88px;
height: 88px;
border-radius: 999px;
overflow: hidden;
background: #f3f3f3;
flex: 0 0 auto;
}
.uava__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.uava__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid #eee;
background: #fff;
font-weight: 800;
font-size: 12px;
cursor: pointer;
}
.rphone--profile {
max-width: 560px;
}
.rphone__drop {
position: absolute;
z-index: 50;
}
/* ===== Phone select (profile) ===== */
.rphone {
position: relative;
display: flex;
align-items: stretch;
gap: 10px;
}
.rphone__code {
height: 44px;
padding: 0 12px;
border: 1px solid #e9e9e9;
border-radius: 10px;
background: #fff;
font-weight: 800;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
white-space: nowrap;
}
.rphone__flag {
font-size: 16px;
line-height: 1;
}
.rphone__chev {
width: 10px;
height: 10px;
margin-left: 4px;
border-right: 2px solid #111;
border-bottom: 2px solid #111;
transform: rotate(45deg);
opacity: .6;
}
.rphone__inp {
flex: 1 1 auto;
height: 44px;
border: 1px solid #e9e9e9;
border-radius: 10px;
padding: 0 12px;
outline: none;
font-size: 13px;
}
.rphone__code:focus,
.rphone__inp:focus {
border-color: rgba(191, 0, 0, .35);
box-shadow: 0 0 0 3px rgba(191, 0, 0, .10);
}
/* dropdown */
.rphone__drop {
position: absolute;
top: 48px;
left: 0;
width: 260px;
background: #fff;
border: 1px solid #eee;
border-radius: 14px;
padding: 8px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
z-index: 100;
}
.rphone__opt {
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 10px 10px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
gap: 10px;
}
.rphone__opt:hover {
background: rgba(0, 0, 0, .04);
}
/* mobile */
@media (max-width: 640px) {
.rphone {
flex-direction: column;
gap: 10px;
}
.rphone__drop {
width: 100%;
top: 96px;
}
}
/* ===== Avatar with camera (profile) ===== */
.uprofile__avatarWrap {
position: relative;
width: 88px;
height: 88px;
flex: 0 0 auto;
}
.uprofile__avatar {
width: 88px;
height: 88px;
border-radius: 999px;
overflow: hidden;
background: #f3f3f3;
}
.uprofile__avatarImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.uprofile__cam {
position: absolute;
left: 50%;
bottom: -12px;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 999px;
background: #d9d9d9;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: url(img/bg-arr.png);
}
/* ===== My bookings ===== */
.m-0 {
margin-bottom: 0;
}
.mypage {
padding: 54px 0 80px;
background: #fff;
}
.mypage__container {
width: min(1120px, calc(100% - 56px));
}
.myhead {
display: flex;
align-items: baseline;
gap: 16px;
margin: 12px 0 28px;
align-items: center;
}
.myhead__title {
margin: 0;
font-size: 44px;
line-height: 1.06;
font-weight: 800;
letter-spacing: -0.02em;
}
.myhead__count {
font-size: 14px;
color: #9b9b9b;
font-weight: 600;
}
.mygrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@media (max-width: 1100px) {
.mygrid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 820px) {
.mygrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.mygrid {
grid-template-columns: 1fr;
}
}
.myinfo {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
color: #8f8f8f;
font-size: 14px;
font-weight: 500;
}
.myinfo__row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.mydot {
color: #c0c0c0;
}
.myico {
width: 14px;
height: 14px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
opacity: .8;
}
.myico--users {
background-image: url('data:image/svg+xml;utf8,');
}
.myico--time {
background-image: url('data:image/svg+xml;utf8,');
}
.myico--cal {
background-image: url('data:image/svg+xml;utf8,');
}
.mycancel {
width: 100%;
margin-top: 14px;
font-weight: 700;
font-size: 15px;
color: #B6020B;
}
.myempty {
padding: 18px 0;
color: #777;
}
/* ===== Modals / overlay dialogs: button labels font-weight 700 ===== */
.authm .authm__btn,
.authm a.authm__btn,
.needauth .needauth__btn,
.rmodal button,
.rmodal .btn-solid,
.rmodal .btn-outline,
.bmodal .bmodal__btn,
.bmodal a.bmodal__btn,
.rbookmodal button,
.rbookmodal a.rlogin__btn,
.noresv__modal .noresv__ok,
.udrawer__panel button,
.mdrawer__panel button,
.recfilters__panel button {
font-weight: 700 !important;
}
/* ===== Booking modals ===== */
.is-modal {
overflow: hidden;
}
.bmodal {
position: fixed;
inset: 0;
z-index: 9999;
}
.bmodal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
}
.bmodal__card {
position: relative;
width: min(420px, calc(100% - 32px));
margin: 10vh auto 0;
background: #fff;
border-radius: 16px;
padding: 22px 22px 18px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
text-align: center;
}
.bmodal__title {
font-size: 30px;
font-weight: 500;
line-height: 1.25;
margin: 0 0 8px;
}
.bmodal__text {
font-size: 15px;
font-weight: 500;
line-height: 1.25;
color: #222;
margin: 0 0 16px;
}
.bmodal__actions {
display: flex;
gap: 10px;
justify-content: center;
}
.bmodal__btn {
min-width: 120px;
height: 46px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
}
.bmodal__btn--ghost {
background: #fff;
border-color: #e5e5e5;
color: #111;
}
.bmodal__btn--danger {
background: #B6020B;
border-color: #B6020B;
color: #fff;
padding: 0 15px;
}
.bmodal__x {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
border: 0;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.bmodal__x img {
width: 14px;
height: 14px;
display: block;
filter: brightness(0) saturate(100%);
}
.place-card.mycard.is-cancelled,
.place-card.mycard.is-past {
opacity: .75;
}
.place-card.mycard.is-cancelled .mycancel {
opacity: .7;
cursor: not-allowed;
}
.mycancel:disabled,
.mycancel[disabled],
.mycancel[aria-disabled="true"] {
opacity: .7;
cursor: not-allowed;
}
/* =========================
BOOKING MODAL (CENTER)
markup:
.rbookmodal[hidden] + .rbookmodal__backdrop + .rbookmodal__panel + .rbookmodal__inner
========================= */
.rbookmodal {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 24px;
}
.rbookmodal[hidden] {
display: none !important;
}
.rbookmodal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
}
.rbookmodal__panel {
position: relative;
z-index: 1;
width: min(500px, 100%);
max-height: calc(100vh - 48px);
background: #fff;
border-radius: 18px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* внутренний контейнер (куда монтируется aside.rbook) */
.rbookmodal__inner {
/* padding: 18px 18px 22px; */
}
/* In booking modal, rbook should not have external top gap */
.rbookmodal .rbook {
margin-top: 0 !important;
}
/* чтобы модалка не прилипала к краям на мобиле */
@media (max-width: 520px) {
.rbookmodal {
padding: 12px;
}
.rbookmodal__panel {
width: 100%;
max-height: calc(100vh - 24px);
border-radius: 16px;
}
.rbookmodal__inner {
padding: 0;
}
}
/* блокируем скролл страницы когда модалка открыта */
html.is-modal {
overflow: hidden;
height: 100%;
overscroll-behavior: none;
/* можно оставить только на html */
}
/* lock на #page (контент), не на body — иначе iOS + wpadminbar + модалки вне #page дают «прыжок» и фантомные клики */
#page.is-modal,
body.is-modal {
overflow: hidden;
overscroll-behavior: none;
}
.place-card__actions .btn-outline {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
font-family: Onest;
font-weight: 500;
font-size: 15px;
line-height: 24px;
text-align: center;
color: #B6020B;
}
.rbook__x {
border: none;
background: transparent;
padding: 0;
margin: 0;
position: absolute;
top: 25px;
right: 25px;
cursor: pointer;
}
/* ===== We recommend ===== */
.recpage {
padding-top: 30px;
background: #fff;
}
.recpage__container {
/* padding-top: 50px; */
width: min(1200px, calc(100% - 56px));
}
.rechead {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 20px;
}
.rechead__title {
font-size: 30px;
margin: 0;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
}
@media(max-width: 767px) {
.rechead__title {
font-size: 27px !important;
}
}
.recpage .breadcrumbs {
margin-bottom: 14px;
}
.rechead__count {
text-wrap: nowrap;
color: #777;
font-size: 14px;
font-weight: 600;
}
.recbar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 0 0 18px;
}
.recbar__left {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.recchip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid #eee;
border-radius: 999px;
background: #fff;
font-size: 13px;
color: #111;
text-decoration: none;
cursor: pointer;
}
.recchip.is-active {
border-color: #B6020B;
}
/* color only the chip label, not dropdown contents */
a.recchip.is-active {
color: #B6020B;
}
.recchip.is-active > .recchip__btn {
color: #B6020B;
}
.recchip--ghost {
opacity: .55;
cursor: default;
}
.recchip__btn {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.recchip__chev {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: .7;
}
.recchip--select {
position: relative;
}
.recdrop {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 190px;
background: #fff;
border: 1px solid #eee;
border-radius: 14px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
padding: 6px;
z-index: 50;
}
.recdrop__item {
display: block;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
color: #111;
font-size: 13px;
}
.recdrop__item:hover {
background: #f6f6f6;
}
.recdrop__item.is-active {
background: rgba(182, 2, 11, .08);
color: #B6020B;
font-weight: 700;
}
.recclear {
font-size: 12px;
letter-spacing: .04em;
color: #B6020B;
text-decoration: none;
font-weight: 700;
}
.recgrid {
display: grid;
grid-template-columns: 1fr 285px;
gap: 12px;
align-items: start;
}
.recgrid.recgrid--no-map {
grid-template-columns: 1fr;
}
.recgrid__map {
position: sticky;
top: 18px;
}
.recmap {
position: relative;
border: 1px solid #eee;
border-radius: 18px;
overflow: hidden;
background: #fff;
min-height: 509px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.recmap__stub {
padding: 16px;
}
.recmap__stubTitle {
font-weight: 800;
margin-bottom: 6px;
}
.recmap__stubText {
color: #777;
margin-bottom: 14px;
}
.recpager ul {
list-style: none;
display: flex;
gap: 8px;
padding: 18px 0 0;
margin: 0;
}
.recpager a,
.recpager span {
display: inline-flex;
min-width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border: 1px solid #eee;
border-radius: 10px;
text-decoration: none;
color: #111;
font-size: 13px;
}
.recpager .current {
background: #B6020B;
color: #fff;
border-color: #B6020B;
}
@media (max-width: 980px) {
.recgrid {
grid-template-columns: 1fr;
}
.recgrid__map {
position: relative;
top: auto;
}
}
@media (max-width: 620px) {
.recpage__container {
width: calc(100% - 28px);
}
.rechead__title {
font-size: 30px;
font-weight: 500;
}
.rechead {
align-items: center;
margin: 0px 0 18px;
padding-top: var(--home-section-top) !important;
}
}
/* =========================
LOCATION MAP (single)
========================= */
.mapbox {
position: relative;
border-radius: 22px;
overflow: visible;
background: #f2f2f2;
height: auto;
/* скругление и обрезка тайлов — на .mapbox__clip, иначе после resize WebKit рисует карту с «квадратными» углами */
}
/* внутренняя маска: iframe/канвас Google Maps режется здесь */
.mapbox__clip {
position: relative;
width: 100%;
border-radius: 22px;
overflow: hidden;
isolation: isolate;
contain: paint;
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
background: #f2f2f2;
-webkit-clip-path: inset(0 round 22px);
clip-path: inset(0 round 22px);
}
/* сам холст карты */
.mapbox__map {
width: 100%;
height: 340px;
border-radius: 0 !important;
/* <-- ключевое */
}
/* на мобиле чуть ниже */
@media (max-width: 720px) {
.mapbox__map {
height: 280px;
}
}
/* кнопка "copy" поверх карты */
.mapbox__copy {
position: absolute;
right: 18px;
bottom: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 0;
border-radius: 14px;
background: #B6020B;
color: #fff;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.mapbox__copyIco {
width: 18px;
height: 18px;
border-radius: 6px;
background: rgba(255, 255, 255, .28);
}
.mapbox__copy.is-copied {
opacity: .9;
}
.mapbox__map iframe,
.mapbox__map > div {
border-radius: 0 !important;
}
/* правая колонка */
.recgrid__map {
position: sticky;
top: 40px;
height: calc(100vh - 140px);
max-height: 509px;
}
/* обёртка карты (колонка) */
.recgrid__map .recmap {
width: 100%;
height: 100%;
border-radius: 18px;
overflow: hidden;
background: #f2f2f2;
}
/* обрезка тайлов карты — отдельный слой со скруглением */
.recmap__clip {
flex: 1 1 auto;
min-height: 0;
width: 100%;
border-radius: 17px;
overflow: hidden;
isolation: isolate;
contain: paint;
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
background: #f2f2f2;
position: relative;
-webkit-clip-path: inset(0 round 17px);
clip-path: inset(0 round 17px);
}
@media (max-width: 767px) {
.recmap,
.recgrid__map .recmap {
border-radius: 0;
}
.recmap__clip {
border-radius: 0;
-webkit-clip-path: none;
clip-path: none;
}
}
/* сам контейнер для google map */
.recmap__canvas,
[data-recommend-map] {
width: 100%;
height: 100%;
min-height: 640px;
border-radius: 0 !important;
/* можно меньше/больше */
background: transparent;
/* важно */
}
.recmap__canvas iframe,
.recmap__canvas > div {
border-radius: 0 !important;
}
.recmap__show {
position: absolute;
left: auto;
transform: translateX(0);
bottom: 18px;
z-index: 5;
background: #b30012;
color: #fff;
border: 0;
padding: 0;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
font-size: 12px;
height: 36px;
width: 141px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.recmap__show img {
width: 14px;
height: 14px;
display: block;
}
.recmap-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, .35);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.recmap-overlay.is-open {
display: flex;
}
.recmap-overlay__panel {
width: min(1500px, calc(100vw - 48px));
height: min(700px, calc(100vh - 48px));
background: #fff;
border-radius: 18px;
overflow: hidden;
position: relative;
}
.recmap-overlay__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 5;
width: 44px;
height: 44px;
border-radius: 12px;
border: 0;
background: rgba(255, 255, 255, .9);
cursor: pointer;
font-weight: 900;
}
.recmap-overlay__clip {
position: absolute;
inset: 0;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
contain: paint;
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-clip-path: inset(0 round 18px);
clip-path: inset(0 round 18px);
}
.recmap-overlay__canvas {
width: 100%;
height: 100%;
border-radius: 0 !important;
}
.recmap-overlay__canvas iframe,
.recmap-overlay__canvas > div {
border-radius: 0 !important;
}
/* ===== Filter sheet (Cuisine / Average price) ===== */
.recdrop--sheet {
padding: 0;
border: 0;
background: transparent;
}
/* Match sheet text size to chip text */
.recdrop--sheet .recsheet__title,
.recdrop--sheet .recchk__label {
font-size: 13px;
font-weight: 400;
}
.recsheet {
width: min(280px, calc(100vw - 24px));
box-sizing: border-box;
max-width: 90vw;
background: #fff;
border-radius: 18px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .06);
}
.recsheet__head {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 12px 16px 8px;
box-sizing: border-box;
}
.recsheet__title {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
}
.recsheet__close {
width: 36px;
height: 36px;
border-radius: 10px;
border: 0;
background: transparent;
font-size: 26px;
line-height: 1;
cursor: pointer;
opacity: .65;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.recsheet__close:hover {
opacity: 1;
}
.recsheet__body {
padding: 4px 16px 14px;
max-height: 320px;
overflow: auto;
}
/* Cuisine checkboxes */
.recchk {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
user-select: none;
cursor: pointer;
}
.recchk input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.recchk__box {
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid rgba(0, 0, 0, .12);
background: #fff;
display: inline-block;
flex: 0 0 auto;
}
.recchk input:checked+.recchk__box {
border-color: #b40000;
background: #b40000;
box-shadow: inset 0 0 0 3px #fff;
}
.recchk__label {
font-size: 18px;
font-weight: 500;
}
/* Footer actions */
.recsheet__foot {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
padding: 14px 16px 16px;
border-top: 1px solid rgba(0, 0, 0, .06);
}
.recsheet__clear {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
font-weight: 700;
font-size: 14px;
letter-spacing: .06em;
color: #b40000;
text-decoration: none;
}
.recsheet__apply {
width: 125px;
height: 46px;
border: 0;
border-radius: 12px;
background: #b40000;
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
/* ===== Price slider ===== */
.recsheet__body--price {
max-height: none;
}
.recslider {
position: relative;
height: 36px;
margin-top: 6px;
}
.recslider__track {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 4px;
transform: translateY(-50%);
background: rgba(0, 0, 0, .08);
border-radius: 999px;
}
.recslider__range {
position: absolute;
top: 50%;
height: 4px;
transform: translateY(-50%);
background: #b40000;
border-radius: 999px;
left: 0;
right: 0;
}
.recslider__inp {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 36px;
background: transparent;
margin: 0;
pointer-events: none;
/* включаем только на thumb */
-webkit-appearance: none;
appearance: none;
}
.recslider__inp::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #b40000;
box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
pointer-events: auto;
cursor: pointer;
}
.recslider__inp::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #b40000;
box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
pointer-events: auto;
cursor: pointer;
}
.recslider__vals {
display: flex;
justify-content: space-between;
font-size: 14px;
color: rgba(0, 0, 0, .6);
padding-top: 8px;
}
/* (необязательно) чуть аккуратнее внутри дропдауна */
.recsheet__empty {
padding: 10px 0 14px;
color: rgba(0, 0, 0, .6);
font-size: 14px;
}
.recslider {
position: relative;
padding-bottom: 26px;
}
.recslider__bubble {
position: absolute;
top: 28px;
/* под кружком */
transform: translateX(-50%);
font-size: 12px;
font-weight: 600;
color: #111;
pointer-events: none;
white-space: nowrap;
}
/* ===== MAP MODE: карта вместо плитки ===== */
.recgrid.is-map .recgrid__list {
display: none;
}
.recgrid.is-map .recgrid__map {
width: 100%;
}
.recgrid.is-map .recmap {
width: min(1500px, 100%);
margin: 0 auto;
position: relative;
}
.recgrid.is-map .recmap__clip {
width: min(1500px, 100%);
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
-webkit-clip-path: inset(0 round 16px);
clip-path: inset(0 round 16px);
}
.recgrid.is-map .recmap__canvas {
width: 100%;
height: 700px;
margin: 0 auto;
border-radius: 0 !important;
overflow: visible;
}
/* кнопки на карте */
.recmap__show,
.recmap__popup,
.recmap__back {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 5;
}
.recmap__popup {
right: 170px;
/* чтобы не налезала на Show */
}
.recmap__back {
right: 16px;
}
/* ===== Category top links (3 big cards) ===== */
.cat-links {
margin: 22px 0 34px;
}
.cat-links__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cat-link {
position: relative;
display: block;
border-radius: 18px;
overflow: hidden;
height: 553px;
background: #111;
}
.cat-link__media,
.cat-link__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cat-link__title {
position: absolute;
left: 18px;
top: 18px;
color: #fff;
font-size: 28px;
line-height: 1.05;
font-weight: 700;
text-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
/* adaptive */
@media (max-width: 980px) {
.cat-links__grid {
grid-template-columns: 1fr;
}
.cat-link {
height: 220px;
}
.cat-link__title {
font-size: 26px;
}
}
/* =========================
SEARCH OVERLAY (sovl)
========================= */
/* блокировка скролла, когда оверлей открыт */
html.is-locked {
overflow: hidden;
}
/* сам оверлей должен быть поверх ВСЕГО и на весь экран */
.sovl {
position: fixed;
inset: 0;
z-index: 3000;
background: #fff;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 103px 0 60px;
}
/* контейнер как на макете (центровка и ширина) */
.sovl__panel {
width: min(1200px, calc(100% - 56px));
margin: 0 auto;
display: flex;
flex-direction: column;
}
/* верхняя строка поиска */
.sovl__bar {
display: flex;
align-items: center;
gap: 12px;
position: sticky;
top: 0;
z-index: 2;
background: #fff;
padding: 10px 0 16px;
}
/* инпут */
.sovl__input {
flex: 1;
height: 44px;
border: 1px solid #e7e7e7;
border-radius: 999px;
padding: 0 16px;
font-size: 14px;
outline: none;
}
/* кнопки справа */
.sovl__filters,
.sovl__close {
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid #e7e7e7;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.sovl__filters img {
width: 20px;
height: 20px;
}
/* дроп фильтров */
.sovl__filters-drop {
position: absolute;
right: 0;
margin-top: 6px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 14px;
padding: 10px 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
/* плитки (See all / Favorites / Most popular) */
.sovl__tiles {
margin-top: 80px;
}
.cat-links__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* карточка плитки */
.cat-link {
position: relative;
display: block;
border-radius: 22px;
overflow: hidden;
min-height: 170px;
}
.cat-link__media {
position: absolute;
inset: 0;
}
.cat-link__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(.78);
transform: scale(1.01);
}
.cat-link__title {
position: absolute;
left: 40px;
top: 40px;
color: #fff;
font-size: 42px;
font-weight: 500;
line-height: 1.05;
text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
/* блоки ниже */
.sovl__block {
margin-top: 26px;
}
.section-head__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
}
.section-head__title {
margin: 0;
font-size: 30px;
font-weight: 500;
letter-spacing: -0.02em;
}
.sovl .cards-row {
display: flex;
gap: 10px;
align-items: stretch;
flex-wrap: nowrap;
overflow: scroll;
}
/* чтобы карточки были ровные и не растягивались на весь экран */
.sovl .cards-row>* {
flex: 0 0 285px;
}
@media (max-width: 767px) {
.sovl__results {
.cards-row>* {
flex: auto !important;
}
}
}
.sovl__results {
margin-top: 60px;
}
/* Live search results: allow multiple rows (5th card wraps); base .cards-row overflow is desktop-only hidden */
.sovl__results .cards-row {
flex-wrap: wrap;
overflow: visible;
row-gap: 18px;
align-content: flex-start;
}
/* адаптив */
@media (max-width: 900px) {
.cat-links__grid {
grid-template-columns: 1fr;
}
.sovl {
padding: 16px 0 40px;
}
.sovl__panel {
width: min(1120px, calc(100% - 44px));
}
.section-head__title {
font-size: 26px;
}
}
/* === Make overlay input look like main search === */
.sovl__bar {
gap: 12px;
}
.sovl__input {
height: 48px;
border-radius: 999px;
border: 1px solid #e5e5e5;
padding: 0 18px;
font-size: 14px;
background: #fff;
}
.sovl__input::placeholder {
color: #9a9a9a;
}
/* search bar inside overlay */
.search.search--overlay {
border-radius: 8px;
position: sticky;
top: 0;
z-index: 10;
background: #fff;
margin: 0;
padding: 0px;
border-bottom: 1px solid #eee;
/* base .search { overflow: hidden } обрезал кнопку закрытия справа в grid */
overflow: visible;
}
/* крестик справа */
.search--overlay .search__cell--close {
width: 44px;
height: 44px;
border-radius: 999px;
border: none;
background: #fff;
display: grid;
place-items: center;
padding: 0;
margin-left: 12px;
cursor: pointer;
font-size: 22px;
font-weight: bold;
margin-top: -3px;
margin-right: 21px;
}
.hcuis {
padding-top: 100px;
}
.hcuis__title {
font-size: 30px;
line-height: 1.05;
font-weight: 500;
text-align: left;
margin: 0 0 30px;
}
.hcuis__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 26px;
}
.hcuis__chip {
border: 1px solid #e7e7e7;
background: #fff;
border-radius: 999px;
padding: 10px 16px;
font-weight: 600;
cursor: pointer;
}
.hcuis__chip.is-active {
border-color: #111;
}
.hcrow__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.hcrow__title {
font-size: 28px;
margin: 0;
}
.hcrow__viewall {
color: #b6020b;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
/* Unified "View all" style across the project */
.view-all,
.link-viewall,
.collection-card__cta,
.rhead__link,
.hcrow__viewall {
font-size: 15px !important;
font-weight: 500 !important;
}
.hcrow__scroller {
position: relative;
}
.hcrow__track {
display: flex;
gap: 16px;
overflow: auto;
padding-bottom: 16px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Firefox hide */
}
.hcrow__track::-webkit-scrollbar {
display: none;
}
/* Chrome hide */
.hcrow__item {
flex: 0 0 auto;
width: 310px;
}
/* нижняя полоса */
.hcrow__bar {
height: 6px;
background: #e9e9e9;
border-radius: 999px;
position: relative;
user-select: none;
}
.hcrow__thumb {
height: 100%;
width: 120px;
background: #b6020b;
border-radius: 999px;
transform: translateX(0);
cursor: grab;
}
body.is-dragging .hcrow__thumb {
cursor: grabbing;
}
.recpage .mygrid {
grid-template-columns: repeat(3, 1fr);
}
/* ===== Home cuisines ===== */
.hcuis {
padding: 26px 0 10px;
}
.hcuis__tabs {
display: inline-grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
gap: 8px;
width: max-content;
justify-content: center;
margin: 0 0 16px;
}
.hcuis__tab {
appearance: none;
border: 1px solid #E6E6E6;
background: #fff;
padding: 9px 14px;
border-radius: 999px;
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: .15s ease;
width: 160px;
height: 46px;
color: #939393;
}
.hcuis__tab:hover {
border-color: #cfcfcf;
}
.hcuis__tab.is-active {
border-color: #B6020B;
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
background: #B6020B;
color: #fff;
font-weight: 700;
}
.hcuis__head {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
margin: 10px 0 12px;
}
.hcuis__subtitle {
font-size: 28px;
font-weight: 800;
margin: 0;
}
.hcuis__row {
position: relative;
padding-bottom: 12px;
}
/* нижний “ползунок” */
.hcuis__scroll {
height: 8px;
background: #EDEDED;
border-radius: 999px;
overflow: hidden;
margin-top: 10px;
}
.hcuis__thumb {
height: 100%;
width: 120px;
background: #B6020B;
/* твой красный */
border-radius: 999px;
transform: translateX(0);
}
.home-rec {
padding-top: 100px;
}
.home-rec__title {
font-size: 30px;
line-height: 1.05;
font-weight: 500;
text-align: left;
margin: 0 0 15px;
}
/* ===== Visit other cities (pixel-perfect) ===== */
.citiespp {
padding-top: 100px;
background: #fff;
}
.citiespp .citiespp__title {
font-size: 30px;
line-height: 1.05;
font-weight: 500;
text-align: left;
margin: 0 0 15px;
}
.citiespp__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 30px;
}
.citypp {
position: relative;
display: block;
height: 340px;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
background: #111;
transform: translateZ(0);
width: 100%;
max-width: 595px;
}
.citypp__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.02) contrast(1.02);
}
/* лёгкий градиент, чтобы белый текст всегда читался */
.citypp::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, 0) 70%);
}
.citypp__name {
position: absolute;
top: 45px;
left: 45px;
z-index: 2;
color: #fff;
font-size: 28px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.01em;
text-shadow: 0 10px 22px rgba(0, 0, 0, .35);
}
/* стрелка в правом нижнем углу */
.citypp__arrow {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
width: 60px;
height: 60px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
color: #fff;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(6px);
}
.citypp__arrow img {
width: 30px;
}
/* hover — чуть “дороже”, но без резких эффектов */
/*.citypp:hover .citypp__img {
transform: scale(1.02);
}*/
.citypp__img {
transition: transform .25s ease;
}
/* адаптив */
@media (max-width: 840px) {
.citiespp__grid {
grid-template-columns: 1fr;
}
.citypp {
height: 190px;
}
}
/* === Google marker bubble (AdvancedMarkerElement content) === */
.gmark {
position: relative;
transform: translateY(-10px);
/* чуть приподнять над точкой */
user-select: none;
}
.gmark__bubble {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
padding-bottom: 5px;
width: 67px;
height: 40px;
/* border-radius: 12px; */
color: #fff;
font-weight: 700;
font-size: 16px;
line-height: 1;
/* box-shadow: 0 12px 24px rgba(0, 0, 0, .18); */
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.gmark__ico {
display: inline-flex;
width: 20px;
height: 20px;
opacity: .95;
}
.gmark__ico svg {
width: 20px;
height: 20px;
display: block;
color: #fff;
}
/* Fallback for cached old marker template: never show rating text */
.gmark__val,
.gmark__star {
display: none !important;
}
/* Градиенты по типу */
.gmark--restaurant .gmark__bubble {
/* background: linear-gradient(135deg, #ff6a3d 0%, #e0002a 100%); */
background-image: url(img/map-dif.svg);
}
.gmark--coffee .gmark__bubble,
.gmark--bar .gmark__bubble {
background-image: url(img/map-dif.svg);
}
/* чуть “поп” при наведении */
.gmark__bubble:hover {
transform: translateY(-1px);
}
.recpage .mygrid {
margin-top: 0;
}
.review__avatar img {
border-radius: 100%;
}
.noresv {
position: fixed;
inset: 0;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
z-index: 9999;
}
.noresv__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .6);
}
.noresv__modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 420px;
max-width: calc(100vw - 32px);
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
padding: 28px 28px 24px;
text-align: center;
}
.noresv__x {
position: absolute;
right: 14px;
top: 12px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
font-size: 26px;
line-height: 36px;
cursor: pointer;
}
.noresv__title {
font-weight: 500;
font-size: 30px;
line-height: 1.25;
letter-spacing: -0.02em;
margin-top: 6px;
}
.noresv__text {
margin-top: 14px;
font-size: 15px;
font-weight: 500;
line-height: 1.25;
color: #222;
}
.noresv__ok {
margin-top: 20px;
width: 100px;
height: 46px;
border: 0;
border-radius: 10px;
background: #B6020B;
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
/* Скролл страницы выключен, пока открыта noresv / «Thank you» после брони */
/* height:100% на html давал прыжок; позицию скролла держит JS (fixed body + scrollTo) */
html.noresv-lock {
overflow: hidden !important;
overscroll-behavior: none;
}
html.noresv-lock body,
body.noresv-lock {
overflow: hidden !important;
overscroll-behavior: none;
}
html.noresv-lock #page {
overflow: hidden !important;
overscroll-behavior: none;
}
/* When #page is fixed during lock, avoid layout shift */
html.noresv-lock #page {
width: 100%;
}
/* =========================
NEED AUTH MODAL
========================= */
.needauth {
position: fixed;
inset: 0;
z-index: 9999;
display: block;
/* чтобы анимация работала */
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.needauth.is-open {
opacity: 1;
pointer-events: auto;
}
.needauth[aria-hidden="true"] {
opacity: 0;
pointer-events: none;
}
.needauth[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.needauth__overlay {
position: absolute;
inset: 0;
z-index: 0;
background: rgba(0, 0, 0, .45);
}
.needauth__dialog {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
width: min(380px, calc(100% - 28px));
background: #fff;
border-radius: 16px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
padding: 44px 40px 26px;
text-align: center;
overflow: visible;
}
.needauth__x {
position: absolute;
top: 12px;
right: 14px;
z-index: 2;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: #111;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.needauth__title {
margin: 0 0 10px;
font-size: 30px;
font-weight: 500;
color: #111;
}
.needauth__text {
margin: 0 0 22px;
color: rgba(0, 0, 0, .6);
font-size: 15px;
line-height: 22px;
font-weight: 400;
}
.needauth__btn {
width: 100%;
height: 46px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
cursor: pointer;
}
.needauth__btn+.needauth__btn {
margin-top: 12px;
}
.needauth__btn--primary {
border: 0;
background: var(--brand);
color: #fff;
}
.needauth__btn--outline {
background: #fff;
border: 1px solid #E5E5E5;
color: var(--brand);
}
.place-card__actions .btn-outline:hover {
border: 1px solid;
transition: 0.2s;
}
.hcuis__tab:hover {
border-color: #B6020B;
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
background: #B6020B;
color: #fff;
font-weight: 700;
transition: 0.2s;
}
.btn-solid:hover,
.navbtn:hover,
.search__submit:hover {
background: #960009;
transition: 0.2s;
}
.js-topbar-search,
.js-topbar-menu {
display: none;
}
.recviewbar {
display: none;
}
/* Mobile slider hidden by default */
.rgalleryMob {
display: none;
}
/* Desktop gallery visible by default */
/* .rgallery2 {
display: block;
} */
.pscroll {
display: none;
}
.rgalleryMob__track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.rgalleryMob__track::-webkit-scrollbar {
display: none;
}
.rgalleryMob__slide {
flex: 0 0 100%;
scroll-snap-align: start;
border-radius: 22px;
overflow: hidden;
display: block;
}
.rgalleryMob__slide img {
width: 100%;
height: auto;
display: block;
}
/* dots */
.rgalleryMob__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 10px;
}
.rgalleryMob__dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(0, 0, 0, .25);
}
.rgalleryMob__dot.is-active {
background: #B6020B;
}
.rgalleryMob {
position: relative;
}
.rgalleryMob__ui {
position: absolute;
left: 28px;
right: 28px;
top: 14px;
z-index: 20;
display: none;
align-items: center;
justify-content: space-between;
}
.rgalleryMob__uiRight {
display: flex;
gap: 12px;
}
.rmobbtn {
width: 38px;
height: 38px;
border-radius: 999px;
border: 0;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.rmobbtn:active {
transform: translateY(1px);
}
.rmobbtn svg {
display: block;
}
/* heart icon (for mobile button) */
.rmobbtn__heart {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: url("img/heart-white.svg") center/contain no-repeat;
opacity: .95;
}
/* active favorite */
.rmobbtn.js-fav.is-active {
}
.rmobbtn.js-fav.is-active .rmobbtn__heart {
background-image: url("img/heart-solid.svg");
opacity: 1;
}
.hcuis__tabs-wrap {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-top: 20px;
}
@media(max-width: 767px) {
.hcuis__tabs-wrap {
padding-left: 16px;
padding-right: 16px;
margin-left: -42px;
margin-right: -42px;
}
}
@media (max-width: 1280px) {}
/* show drawer only on mobile */
@media (min-width: 992px) {
#mDrawer {
display: none !important;
}
}
@media (max-width: 768px) {
.rshare--mob .rshare__panel {
position: absolute;
top: 52px;
/* ниже кружка */
right: 0;
left: auto;
width: min(320px, calc(100vw - 28px));
z-index: 9999;
}
.rgalleryMob__ui {
display: flex;
}
/* чтобы на мобиле не дублировать кнопки в заголовке */
.rhead__actions {
display: none;
}
.rgalleryMob__slide img {
width: fit-content;
height: 100%;
display: block;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.rgalleryMob {
display: block;
margin: 0px -30px;
max-height: 470px;
}
.rgalleryMob__slide {
max-height: 470px;
overflow: hidden;
}
.rgallery2 {
display: none;
}
.rgalleryMob__dot {
width: 12px;
height: 12px;
border-radius: 100%;
background: #E2E2E2;
border: none ! IMPORTANT;
}
.rgalleryMob__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: -35px;
margin-bottom: 45px;
position: relative;
z-index: 30;
pointer-events: auto;
}
/* OUR MENU: горизонтальный скролл */
.rsection__menu .rmenu {
position: relative;
}
.rsection__menu .rmenu__track {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 2px 10px;
padding-bottom: 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin-inline: -28px;
scroll-padding-inline: 28px;
padding-inline: 28px !important;
}
.rsection__menu .rmenu__track .mcard {
flex: 0 0 auto;
width: 46vw;
/* ~2 карточки в экран */
max-width: 220px;
/* чтобы не раздувало на больших мобилках */
min-width: 160px;
/* чтобы не было слишком узко */
aspect-ratio: 1 / 1.15;
/* как на макете (чуть выше чем шире) */
border-radius: 18px;
overflow: hidden;
scroll-snap-align: start;
}
.rsection__menu .mcard__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* OUR MENU: горизонтальный скролл */
.rsection__menu .rmenu {
position: relative;
}
.rsection__menu .rmenu__track {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 2px 10px;
padding-bottom: 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.rsection__menu .rmenu__track .mcard {
flex: 0 0 auto;
width: 46vw;
/* ~2 карточки в экран */
max-width: 220px;
/* чтобы не раздувало на больших мобилках */
min-width: 160px;
/* чтобы не было слишком узко */
aspect-ratio: 1 / 1.15;
/* как на макете (чуть выше чем шире) */
border-radius: 18px;
overflow: hidden;
scroll-snap-align: start;
}
.rsection__menu .mcard__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rsection__menu .rmenu__track .mcard {
flex: 0 0 auto;
width: 46vw;
/* 2 карточки в экран */
max-width: 220px;
min-width: 160px;
scroll-snap-align: start;
}
.rsection__menu .mcard__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rnav.mob-hscroll {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Firefox */
padding: 6px 2px 10px;
white-space: nowrap;
.place-card__nav--left {
display: none;
}
.place-card__nav--right {
display: none;
}
.place-card__dots {
display: none;
}
}
.cards-row {
.place-card__nav--left {
display: none;
}
.place-card__nav--right {
display: none;
}
.place-card__dots {
display: none;
}
}
.rnav.mob-hscroll::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
.rnav.mob-hscroll .rnav__link {
flex: 0 0 auto;
scroll-snap-align: start;
padding: 12px 20px 14px;
}
/* по желанию: чуть “пружинит” на табы */
.rnav.mob-hscroll {
scroll-snap-type: x proximity;
}
/* если твой слайдер/JS прячет часть карточек inline-стилем */
.rsection__menu .rmenu__track .mcard[style*="display: none"] {
display: block !important;
/* <-- ВКЛЮЧИ, если нужно показать все */
}
/* кнопку next на мобилке обычно убираем */
.rsection__menu .rnext {
display: none;
}
/* (опционально) спрятать скроллбар */
.rsection__menu .rmenu__track::-webkit-scrollbar {
height: 0;
}
.rsection__menu .rmenu__track {
scrollbar-width: none;
}
/* если твой слайдер/JS прячет часть карточек inline-стилем */
.rsection__menu .rmenu__track .mcard[style*="display: none"] {
display: block !important;
/* <-- ВКЛЮЧИ, если нужно показать все */
}
/* кнопку next на мобилке обычно убираем */
.rsection__menu .rnext {
display: none;
}
/* (опционально) спрятать скроллбар */
.rsection__menu .rmenu__track::-webkit-scrollbar {
height: 0;
}
.rsection__menu .rmenu__track {
scrollbar-width: none;
}
/* REVIEWS: horizontal scroll */
.reviews-row {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding: 6px 2px 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.reviews-row .review {
flex: 0 0 auto;
width: 300px;
/* подгони: 260–320 */
scroll-snap-align: start;
}
/* (опционально) спрятать скроллбар */
.reviews-row::-webkit-scrollbar {
height: 0;
}
.reviews-row {
scrollbar-width: none;
}
/* чтобы кнопка Leave a review не “уезжала” и была как в макете */
.leave {
display: flex;
width: 100%;
margin-top: 12px;
}
.pbtn {
width: 50px;
height: 50px;
}
.rpage .breadcrumbs {
display: none;
}
.rbook {
margin-top: 20px;
padding: 35px 15px;
}
.rgalleryMob__slide {
border-radius: 0;
display: block;
width: 100%;
height: 470px;
/* height: min(420px, 55vh); */
overflow: hidden;
border-radius: 0;
}
main.content-container {
padding-top: 72px;
}
body.single.single-post .rpage {
padding: 0;
}
.recpage .mygrid {
.place-card__nav--left {
display: none;
}
.place-card__nav--right {
display: none;
}
grid-template-columns: repeat(1, 1fr);
}
/* ===== We recommend: mobile List/Map switch ===== */
.recviewbar {
display: grid;
grid-template-columns: auto 1fr 44px;
align-items: center;
gap: 10px;
position: sticky;
top: 72px;
z-index: 2100;
padding: 0;
background: #fff;
width: calc(100% + 42px);
margin-left: -21px;
padding-inline: 21px;
}
.is-view-map .recviewbar__seg {
position: fixed;
transform: translateX(-68px);
top: 79px;
}
.recviewbar__back {
width: 44px;
height: 44px;
border: 0;
background: transparent;
border-radius: 12px;
font-size: 26px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
padding: 0;
margin-bottom: 5px;
}
.recviewbar__seg {
justify-self: center;
background: #f2f2f2;
border-radius: 999px;
padding: 3px;
display: inline-flex;
gap: 3px;
}
.recviewbar__btn {
border: 0;
background: transparent;
color: #111;
font-size: 12px;
line-height: 1;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
}
.recviewbar__btn.is-active {
background: #111;
color: #fff;
}
.recviewbar__filters {
width: 44px;
height: 44px;
border: 0;
background: transparent;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.recviewbar__filters img {
width: 20px;
height: 20px;
display: block;
}
.recpage {
padding: 0 0 70px;
background: #fff;
}
.recviewbar__seg {
display: flex;
height: 35px;
opacity: 1;
border-radius: 50px;
background: #F4F4F4;
/* position: fixed; */
top: 85px;
left: 50%;
z-index: 3001;
border-bottom: 0;
margin: 0;
padding: 3px;
align-items: center;
justify-content: center;
}
.is-view-map .recviewbar__back,
.is-view-map .recviewbar__filters {
display: none;
}
/* Чтоб кнопки выглядели как на макете поверх карты */
.recpage.is-view-map .recviewbar__filters {
box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
background: #fff;
}
/* кнопку "Show the map" больше не используем */
.recmap__show {
display: none !important;
}
/* ===== Filters sheet ===== */
.recfilters__desktop {
display: block;
}
.recfilters__backdrop,
.recfilters__panel {
display: none;
}
/* desktop-версию скрываем */
.recfilters__desktop {
display: none;
}
/* sheet активируем */
.recfilters__backdrop,
.recfilters__panel {
display: block;
}
.recfilters__backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .45);
z-index: 4000;
}
.recfilters__panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: min(78vh, 680px);
background: #fff;
z-index: 4001;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
overflow: hidden;
display: flex;
flex-direction: column;
}
.recfilters__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
}
.recfilters__title {
font-weight: 500;
font-size: 30px;
}
.recfilters__x {
width: 34px;
height: 34px;
border: 0;
background: transparent;
font-size: 22px;
cursor: pointer;
}
.recfilters__body {
padding: 12px 14px 18px;
overflow: auto;
flex: 1;
}
/* состояния открытия */
body.recfilters-open .recfilters__backdrop,
body.recfilters-open .recfilters__panel {
display: block;
}
body:not(.recfilters-open) .recfilters__backdrop,
body:not(.recfilters-open) .recfilters__panel {
display: none;
}
/* чтобы при открытом sheet не скроллился фон */
body.recfilters-open {
overflow: hidden;
touch-action: none;
}
.recpage .breadcrumbs {
display: none;
}
.recpage.is-view-map .recgrid__map {
display: block;
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 71px !important;
bottom: 0 !important;
width: 100vw !important;
height: calc(100vh - 60px) !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 2000;
background: #fff;
max-height: 100%;
}
.recpage.is-view-list .recgrid__map {
display: none;
}
/* если где-то есть ограничения у aside/recgrid */
.recpage.is-view-map .recgrid,
.recpage.is-view-map .recpage__container,
.recpage.is-view-map .container {
max-width: none !important;
}
.recviewbar__btn {
font-weight: 500;
font-size: 16px;
line-height: 30px;
border: none;
background: no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin: 0 4px;
}
.recviewbar__btn.is-active {
background: #101616;
color: #fff;
border-radius: 50px;
height: 25px;
width: 57px;
}
/* карта должна тянуться на 100% высоты контейнера */
.recpage.is-view-map .recmap,
.recpage.is-view-map .recmap__canvas,
.recpage.is-view-map #recMap {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
}
.recpage.is-view-map .recmap__clip {
border-radius: 0;
-webkit-clip-path: none;
clip-path: none;
}
.uprofile {
padding: 20px 0 30px;
background: #fff;
}
.rhead .rhead__title {
font-size: 27px;
}
.rsection {
margin-top: 0;
}
.rsection__menu {
margin-top: 35px;
}
.rblock--hours {
margin-top: var(--home-section-top, 70px);
}
.rhead__meta {
font-size: 16px;
}
.uprofile__container {
padding: 0 16px;
}
.place-card {
height: auto;
}
.rhead__rateval {
color: #111;
font-size: 26px;
font-weight: 500;
}
.pscroll {
gap: 12px;
overflow-x: auto;
padding: 10px 0 4px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.pscroll::-webkit-scrollbar {
height: 0;
}
.pscroll {
scrollbar-width: none;
}
.pscroll__item {
flex: 0 0 72%;
/* ширина карточки (можешь 80% сделать) */
aspect-ratio: 4 / 3;
/* под макет можно 1/1 или 3/2 */
border-radius: 18px;
overflow: hidden;
position: relative;
scroll-snap-align: start;
background: #eee;
}
.pscroll__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pscroll__item.is-more::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
}
.pscroll__moreText {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
color: #fff;
font-weight: 600;
line-height: 1.2;
z-index: 2;
padding: 14px;
}
.rhead__star {
width: 23px;
height: 23px;
margin-right: 5px;
}
.rhead__star img {
width: 11px;
}
.pgrid {
display: none;
}
.pscroll {
display: flex;
}
.rmain {
max-width: 100%;
max-width: 100%;
}
.mapbox {
width: 100%;
}
.mypage {
padding: 25px 0 80px;
background: #fff;
}
.section-head {
padding: 25px 0 40px;
}
.hero__bg {
position: absolute;
position: absolute;
inset: 0;
background: url(img/mob-bg.jpg) center / cover no-repeat;
transform: translateZ(0);
height: 100%;
top: 0;
}
.hero::after {
display: none;
}
:root {
--topbar-offset-mobile: 85px;
}
html {
scroll-padding-top: var(--topbar-offset-mobile);
}
.topbar {
position: fixed;
top: 0;
z-index: 120;
background: #fff;
width: 100%;
}
/* Static WP pages (Privacy Policy, Terms, Cookie Policy, etc.) */
.site-main {
padding-top: var(--topbar-offset-mobile);
padding-bottom: 32px;
}
.site-main .entry-header {
scroll-margin-top: var(--topbar-offset-mobile);
}
.topbar__inner {
padding: 10px 14px;
}
/* прячем “взрослые” штуки */
.topbar .nav {
display: none;
}
.topbar .mini-select,
.topbar .userbtn,
.topbar .btn.js-auth-open {
display: none;
}
/* железобетонно прячем всё hidden */
/* [hidden] {
display: none !important;
}*/
/* на всякий именно для блока юзера */
.mdrawer__user[hidden] {
display: none !important;
}
/* иконки справа */
.topbar__right {
display: flex;
align-items: center;
gap: 12px;
}
.topbar__icon {
width: 36px;
height: 36px;
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
color: #111;
padding: 0;
}
.logo {
font-size: 29px;
letter-spacing: .5px;
}
.hero {
position: relative;
padding-top: 85px;
z-index: 3;
}
.hero__content {
padding: 22px 14px 26px;
}
.hero__title {
font-size: 40px;
line-height: 1.05;
margin: 14px 0 18px;
}
/* форма становится “вертикальной” */
.hero .search {
display: flex;
flex-direction: column;
gap: 0px;
background: transparent;
padding: 0;
}
/* скрываем локацию и разделители */
.hero .search__cell--location,
.hero .search__divider {
display: none;
}
/* поле поиска: белая пилюля */
.hero .search__cell--query {
width: 100%;
background: #fff;
border-radius: 12px;
padding: 14px 14px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
.hero .search__input {
font-size: 15px;
}
/* кнопка Search — большая красная */
.hero .search__submit {
width: 100%;
border-radius: 12px;
height: 52px;
font-size: 16px;
}
.cat-link {
position: relative;
display: block;
border-radius: 22px;
overflow: hidden;
min-height: 170px;
height: 486px;
width: 100%;
}
.search.search--overlay {
/* background: transparent; */
box-shadow: none;
border: none;
padding-top: 16px;
margin-left: 0;
width: calc(100% + 14px) !important;
}
.search--overlay .search__cell--close {
position: static;
right: auto;
top: auto;
}
.sovl__tiles {
margin-top: 45px;
}
.mob-hscroll {
width: stretch;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
/* можно убрать, если не надо */
gap: 12px;
/* full-bleed within .container (container padding-inline is 14px) */
margin-left: -14px;
margin-right: -14px;
padding-right: 14px;
padding-left: 14px;
scroll-padding-left: 14px;
scroll-padding-right: 14px;
/* скрываем нативный скроллбар */
scrollbar-width: none;
.place-card__nav--left {
display: none;
}
.place-card__nav--right {
display: none;
}
.place-card__dots {
display: none;
}
}
.mob-hscroll::-webkit-scrollbar {
height: 0;
}
/* каждая карточка не ужимается и красиво снапается */
.mob-hscroll>* {
flex: 0 0 auto;
scroll-snap-align: start;
/* можно убрать */
}
.mob-hscroll .place-card {
width: min(320px, 78vw);
max-width: 285px;
}
.venue {
padding: 20px 0 10px;
background: #fff;
}
.navbtn {
display: none;
}
.collections .collections-row-wrap {
/* width: calc(100% - 32px); */
margin: 14px 0;
padding: 0;
}
/* prevent tiny horizontal overflow from .full-bleed (100vw) */
.full-bleed.collections-row-wrap {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 14px;
padding-right: 0;
}
.collection-card__title {
top: 26px;
left: 25px;
}
.card__body {
padding: 20px;
}
.venue-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 181px 181px;
gap: 10px;
margin-top: 20px;
}
.card--small {
height: 181px;
}
.hcuis__tabs-wrap {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-left: 16px;
padding-right: 16px;
margin-left: -18px;
margin-right: -18px;
margin-top: 20px;
}
.collection-card__cta {
right: 28px;
bottom: 28px;
}
.scrollbar {
display: none;
}
.home-rec {
padding-top: 45px;
}
.citypp__name {
font-size: 32px;
top: 22px;
font-weight: 500;
left: 22px;
}
footer {
margin-top: 0;
}
.collections {
padding: 30px 0 30px;
background: #F8F8F8;
}
.hcuis__tabs-wrap::-webkit-scrollbar {
height: 0;
}
.hcuis__tabs {
display: inline-grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
gap: 8px;
width: max-content;
/* контент становится шире экрана */
padding-bottom: 2px;
/* чтобы не “резало” тени/бордеры */
}
.hcuis__tab {
white-space: nowrap;
}
/* заголовок + стрелки */
.collections__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.photos__block {
margin-top: 40px;
}
/* full-bleed зона уже есть — главное: дать правильные отступы ряду */
.collections-row {
display: flex;
gap: 14px;
/* как в макете: плотнее */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
scroll-padding-left: 0;
}
.collections-row::-webkit-scrollbar {
height: 0;
}
.collections-row {
scrollbar-width: none;
}
/* карточка меньше, чем сейчас */
.collection-card {
flex: 0 0 auto;
width: 100%;
max-width: 95%;
height: 425px;
border-radius: 18px;
overflow: hidden;
scroll-snap-align: start;
}
.hcuis__head {
justify-content: flex-end;
}
.hcuis__subtitle {
display: none;
}
/* текст вверху, как у тебя, но не гигантский */
.collection-card__title {
font-size: 25px;
line-height: 1.05;
font-weight: 500;
letter-spacing: -0.02em;
}
.collection-card__cta {
font-size: 15px;
}
/* полоса скролла — поуже как в макете */
.collections .scrollbar {
margin: 12px 16px 0;
height: 6px;
}
.collections .scrollbar__thumb {
height: 6px;
border-radius: 999px;
}
/* =========================================
Mobile Drawer (Menu)
========================================= */
/* container */
.mdrawer {
display: none;
}
.mdrawer.is-open {
display: block;
}
/* backdrop */
.mdrawer__backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .55);
z-index: 9998;
}
/* big sheet like Figma */
.mdrawer__panel {
position: fixed;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 101%;
height: 100%;
background: #fff;
border-radius: 0;
box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
z-index: 9999;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* top */
.mdrawer__top {
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 33px 10px;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.mdrawer__mini {
display: flex;
align-items: center;
gap: 10px;
}
.mdrawer__x {
width: 34px;
height: 34px;
background: transparent;
border-radius: 6px;
font-size: 18px;
line-height: 1;
border: none !important;
cursor: pointer;
}
/* screens wrapper */
.mdrawer__screens {
position: relative;
flex: 1;
overflow: hidden;
}
/* each screen */
.mdrawer__screen {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: transform .22s ease;
will-change: transform;
display: flex;
flex-direction: column;
}
/* root visible, sub off-right */
.mdrawer__screen[data-md-screen="root"] {
transform: translateX(0);
}
.mdrawer__screen[data-md-screen="sub"] {
transform: translateX(100%);
}
/* when sub open */
.mdrawer.is-sub .mdrawer__screen[data-md-screen="root"] {
transform: translateX(-100%);
}
.mdrawer.is-sub .mdrawer__screen[data-md-screen="sub"] {
transform: translateX(0);
}
/* body scroll, footer pinned */
.mdrawer__body {
padding: 14px 40px 14px;
overflow: auto;
flex: 1;
}
.mdrawer__title {
font-size: 28px;
font-weight: 700;
margin: 8px 0 14px;
}
/* nav list */
.mdrawer__nav {
display: flex;
flex-direction: column;
}
.mdrawer__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
color: #111;
text-decoration: none;
font-size: 16px;
border-top: 1px solid rgba(0, 0, 0, .06);
}
.mdrawer__link:first-child {
border-top: 0;
}
.mdrawer__chev {
opacity: .55;
font-size: 22px;
line-height: 1;
}
/* sub head */
.mdrawer__subhead {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 40px 0;
}
.mdrawer__back {
border: 0;
background: transparent;
font-size: 14px;
padding: 8px 0;
cursor: pointer;
color: #111;
}
.mdrawer__subtitle {
font-size: 14px;
color: #111;
font-weight: 600;
}
/* footer */
.mdrawer__footer {
padding: 16px 40px 50px;
border-top: none;
background: #fff;
}
.mdrawer__hint {
font-size: 14px;
color: #666;
text-align: center;
margin-bottom: 12px;
}
.mdrawer__login {
color: #b6020b;
text-decoration: none;
}
.mdrawer__cta {
font-size: 15px;
display: block;
width: 100%;
height: 48px;
line-height: 48px;
text-align: center;
border-radius: 12px;
background: #b6020b;
color: #fff;
text-decoration: none;
font-weight: 700;
}
/* user block in drawer */
.mdrawer__user {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0 14px;
border-bottom: 1px solid rgba(0, 0, 0, .06);
margin-bottom: 6px;
}
.mdrawer__avatar {
width: 44px;
height: 44px;
border-radius: 999px;
object-fit: cover;
flex: 0 0 auto;
}
.mdrawer__hello {
font-size: 18px;
font-weight: 600;
color: #111;
}
/* account nav spacing */
[data-md-account] {
margin: 6px 0 10px;
}
/* logout */
.mdrawer__logout {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
color: #b6020b;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.mdrawer__logoutIco {
opacity: .8;
margin-top: 5px;
}
.recbar {
display: flex;
}
body.recfilters-open .recbar {
display: flex;
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
z-index: auto;
background: transparent;
overflow: visible;
padding: 0;
}
body.recfilters-open {
overflow: hidden;
}
.mfilters__foot {
position: sticky;
bottom: 0;
}
.recfilters__desktop {
display: block;
}
/* Mobile tabs under title: only 3 chips */
.recchip--venue {
display: none !important;
}
.recbar__right {
display: none !important;
}
.recbar,
.recbar__left {
flex-wrap: wrap;
}
.recbar__left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
overflow: visible;
}
/* Cuisine sheet: default left:0 + fixed 280px width overflowed off the right on small screens */
.recdrop.recdrop--sheet {
z-index: 4002;
min-width: 0;
max-width: min(280px, calc(100vw - 24px));
}
.recbar__left::-webkit-scrollbar {
height: 0;
}
.recfilters__panel {
position: fixed;
left: 12px;
right: 12px;
top: 12px;
bottom: 12px;
background: #fff;
border-radius: 18px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
overflow: hidden;
height: 100%;
}
.recfilters__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 30px;
border-bottom: none;
}
.recfilters__title {
font-size: 22px;
font-weight: 700;
}
.recfilters__x {
width: 36px;
height: 36px;
border: 0;
background: transparent;
border-radius: 10px;
font-size: 40px;
line-height: 36px;
}
.recfilters__body {
padding: 14px 30px;
overflow: auto;
height: calc(100% - 64px);
}
.mfilters {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 74px;
/* под нижнюю панель */
}
.mfilters__card {
border: 1px solid rgba(0, 0, 0, .10);
border-radius: 14px;
background: #fff;
overflow: hidden;
padding: 12px;
}
.mfilters__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: 20px;
font-weight: 500;
}
.recslider__bubble {
display: none;
}
.mfilters__head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 0px;
background: #fff;
border: 0;
font-weight: 400 !important;
font-size: 20px;
font-family: Onest, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
color: var(--text);
}
.mfilters__card {
button {
font-weight: 400 !important;
}
}
.mfilters__chev {
width: 22px;
height: 22px;
display: inline-block;
border-radius: 8px;
/* background: #f3f3f3; */
position: relative;
}
.mfilters__chev:before {
content: "";
position: absolute;
left: 7px;
top: 8px;
width: 8px;
height: 8px;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
transform: rotate(45deg);
}
.mfilters__body {
padding: 0 0px 14px;
}
.mfilters__pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mpill {
border: 1px solid rgba(0, 0, 0, .14);
background: #fff;
color: #111;
border-radius: 999px;
padding: 8px 12px;
font-size: 15px;
font-weight: 500;
line-height: 1;
}
.mpill.is-active {
background: #b40000;
/* под твой красный */
border-color: #b40000;
color: #fff;
}
.mfilters__card--row .mfilters__row {
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.mfilters__rowtitle {
font-weight: 400;
}
.mswitch {
position: relative;
width: 44px;
height: 26px;
display: inline-block;
}
.mswitch input {
display: none;
}
.mswitch__ui {
position: absolute;
inset: 0;
background: #e7e7e7;
border-radius: 999px;
}
.mswitch__ui:after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
transition: transform .2s ease;
}
.mswitch input:checked+.mswitch__ui {
background: #b40000;
}
.mswitch input:checked+.mswitch__ui:after {
transform: translateX(18px);
}
.mfilters__checks {
display: grid;
gap: 10px;
}
#reviews.rsection {
margin-top: 31px;
}
.mchk {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
}
.mchk input {
width: 18px;
height: 18px;
}
.mfilters__foot {
position: fixed;
left: 12px;
right: 12px;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid rgba(0, 0, 0, .10);
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
}
.mfilters__clear {
display: flex;
align-items: center;
justify-content: center;
color: #b40000;
font-weight: 700;
text-decoration: none;
border-radius: 12px;
}
.mfilters__apply {
font-family: Onest, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
color: var(--text);
border: 0;
/* background: #d9d9d9; */
color: #fff;
font-weight: 700;
border-radius: 12px;
font-size: 15px;
height: 44px;
background: var(--brand);
}
/* accordion collapsed */
[data-acc-body] {
display: none;
}
[data-acc].is-open [data-acc-body] {
display: block;
}
[data-acc].is-open .mfilters__chev:before {
transform: rotate(-135deg);
top: 10px;
}
}
/* Place-card slider controls: hide on mobile only */
@media (max-width: 768px) {
.reco__track .place-card__nav,
.reco__track .place-card__dots {
display: none !important;
}
}
@media (max-width: 480px) {
.container-fluid {
width: min(calc(100% - 7px));
margin-inline: auto;
}
.topbar__inner {
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.hero {
min-height: 500px;
border-radius: 0;
}
.search {
gap: 0;
}
.search__cell--location {
margin-bottom: 10px;
}
.search__cell--query {
margin-bottom: 10px;
}
.search__submit {
margin: 0;
}
.pill,
.card__cta {
display: none;
}
.venue-grid .card--big {
max-height: 181px;
}
.venue-grid .card--big .card__media img {
width: 90%;
}
.container {
width: calc(100% - 7px);
}
.logo {
font-size: 28px;
}
.hero__title {
font-size: 42px;
}
.title-head,
.citiespp .citiespp__title {
font-size: 27px;
font-weight: 500;
margin-bottom: 0;
}
.card__title {
font-size: 21px !important;
}
.uprofile__container {
padding: 0 16px;
}
}
.btn-overflow {
display: none;
}
@media(max-width: 767px){
.btn-overflow {
border-top: 1px solid rgba(0, 0, 0, .10);
display: flex;
position: fixed;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
/* выше хлебных крошек/оверлеев (60+), но ниже модалок брони/меню (9998+) */
z-index: 9900;
width: 100%;
padding: 20px;
background: white;
justify-content: center;
}
.btn-sticky {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
font-size: 15px;
font-weight: 700;
span {
font-weight: 500;
}
}
/* No-reservation sticky state */
.btn-sticky.btn-sticky--disabled,
.btn-sticky:disabled {
background: #e6e6e6 !important;
border-color: #e6e6e6 !important;
color: #7a7a7a !important;
cursor: not-allowed;
}
/* Hide the right-side no-reservations block on mobile */
.rbook.rbook--noresv {
display: none !important;
}
}
/* ===== Collections: final container-based geometry ===== */
.collections .full-bleed.collections-row-wrap,
.collections .collections-row-wrap {
/* width: min(1200px, calc(100% - 56px)) !important; */
margin: 14px - 0 !important;
padding: 0 !important;
overflow: hidden;
}
@media (max-width: 767px) {
.collections .full-bleed.collections-row-wrap,
.collections .collections-row-wrap {
/* width: min(1200px, calc(100% - 56px)) !important; */
margin: 14px -22px 0 -22px !important;
}
}
.collections .collections-row {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 0 0 10px !important;
margin: 0 !important;
scroll-padding-left: 0 !important;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.collections .collections-row::-webkit-scrollbar {
height: 0;
}
.collections .collection-card {
/* 4 карточки на десктопе, без обреза по краям */
max-width: 285px;
height: auto !important;
aspect-ratio: 7 / 10;
scroll-snap-align: start;
scroll-snap-stop: always;
}
@media (max-width: 1200px) {
.collections .collection-card {
flex-basis: calc((100% - 40px) / 3) !important;
}
}
@media (max-width: 900px) {
.collections .collection-card {
flex-basis: calc((100% - 20px) / 2) !important;
}
}
@media (max-width: 768px) {
.collections .full-bleed.collections-row-wrap,
.collections .collections-row-wrap {
width: auto !important;
}
.collections .collections-row {
gap: 14px;
padding: 0 0 10px !important;
width: 100% !important;
scroll-padding-inline: 22px !important;
padding-inline: 22px !important;
}
.collections .collection-card {
flex: 0 0 min(82vw, 320px) !important;
max-width: none;
aspect-ratio: 7 / 10;
}
}
/* ===== Unified vertical rhythm for section title/carousels ===== */
:root {
--home-section-top: 70px;
--home-gap-before-title: 44px;
--home-gap-title-to-carousel: 20px;
}
/* Home sections: one identical top spacing */
.venue,
.section-head,
.hcuis,
.collections,
.home-rec,
.citiespp {
padding-top: var(--home-section-top) !important;
}
/* Recently viewed / similar section-head blocks */
.section-head {
padding-bottom: 0 !important;
}
.section-head__row {
margin-bottom: 0 !important;
}
.section-head__title {
margin-bottom: 0 !important;
}
.section-head .cards-row,
.section-head .cards-row--start,
.section-head .cards-row--left,
.section-head .cards-row--center {
margin-top: 0 !important;
}
/* Collections */
.collections {
padding-top: var(--home-section-top) !important;
}
.collections__head {
margin-bottom: var(--home-gap-title-to-carousel) !important;
}
.collections__title {
margin: 0 !important;
}
.collections .collections-row-wrap {
margin-top: 0 !important;
}
/* We recommend block with horizontal row */
.home-rec {
padding-top: var(--home-section-top) !important;
}
.home-rec__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: var(--home-gap-title-to-carousel) !important;
}
.home-rec__head .link-viewall {
margin-left: auto;
}
.home-rec__title {
margin: 0 !important;
}
/* One global title-to-content gap (section titles only) */
.venue__title,
.hcuis__title,
.citiespp .citiespp__title,
.section-head__title,
.rblock__title {
margin-bottom: var(--home-gap-title-to-carousel) !important;
line-height: 1.25;
}
.home-rec__title {
margin: 0 !important;
line-height: 1.25;
}
.collections__title {
margin-bottom: 0 !important;
line-height: 1.25;
}
/* Single venue page: same title-to-content gap for section heads */
.single-post .rhead {
margin-bottom: var(--home-gap-title-to-carousel, 20px) !important;
}
.single-post .rhead__title--solo {
margin-bottom: var(--home-gap-title-to-carousel, 20px) !important;
}
/* Single venue page (desktop): unified vertical spacing between blocks/sections */
@media (min-width: 769px) {
/* "Working hours" block inside #overview should match section spacing */
body.single.single-post .rblock.rblock--hours {
margin-top: var(--home-section-top, 70px) !important;
}
/* "You might also like" is outside .rsection, so align it too */
body.single.single-post .reco {
margin-top: var(--home-section-top, 70px) !important;
}
}
.hcuis__tabs-wrap {
margin-top: 0 !important;
}
.citiespp__grid {
margin-top: var(--home-gap-title-to-carousel) !important;
}
@media (max-width: 768px) {
:root {
--home-section-top: 40px;
--home-gap-before-title: 28px;
--home-gap-title-to-carousel: 20px;
}
}
/* Favorites/Bookings pages: unified header geometry */
.section-head.page-favorites {
padding-top: 30px !important;
}
.section-head.page-favorites .breadcrumbs {
font-size: 14px;
font-weight: 500;
margin-bottom: 14px;
}
@media (max-width: 767px) {
.section-head.page-favorites .breadcrumbs {
display: none;
}
}
.section-head.page-favorites .myhead {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 22px;
}
.section-head.page-favorites .section-head__title {
font-size: 30px;
font-weight: 500;
margin: 0;
}
@media (max-width: 767px) {
.section-head.page-favorites .section-head__title {
font-size: 27px;
}
.section-head.page-favorites .myhead {
margin-top: 50px;
}
}
.myhead .section-head__title {
margin-bottom: 0 !important;
}
.section-head.page-favorites .myhead__count {
font-size: 14px;
font-weight: 600;
color: #9b9b9b;
}
@media (max-width: 768px) {
.section-head.page-favorites {
padding-top: 20px !important;
}
.section-head.page-favorites .myhead {
margin-bottom: 16px;
}
}
/* Search overlay tiles (See all / Favorites / Most popular): -20% */
.sovl .cat-links__grid {
gap: 13px;
}
.sovl .cat-link {
height: 442px;
min-height: 136px;
border-radius: 18px;
}
.sovl .cat-link__title {
left: 32px;
top: 32px;
font-size: 25px;
font-weight: 500;
}
@media (max-width: 768px) {
.sovl .cat-link {
height: 389px;
}
}
/* Search overlay: unified vertical spacing rhythm */
/* Use :not([hidden]) so display:block does not override the hidden attribute (otherwise tiles stay visible while typing). */
.sovl [data-search-menu]:not([hidden]) {
display: block;
padding-top: var(--home-section-top, 70px);
}
.sovl [data-search-menu]>.sovl__tiles {
padding-top: var(--home-section-top, 70px) !important;
margin-top: 0 !important;
}
.sovl [data-search-menu]>.sovl__block {
padding-top: var(--home-section-top, 70px) !important;
margin-top: 0 !important;
}
.sovl .cat-links.sovl__tiles {
margin: 0 !important;
}
.sovl [data-search-menu]>.sovl__tiles:first-child {
padding-top: 0 !important;
}
.sovl .section-head__row {
margin-bottom: var(--home-gap-title-to-carousel, 20px) !important;
}
.sovl .section-head__title,
.sovl .cards-row {
margin: 0 !important;
}
@media (max-width: 768px) {
html,
body {
overflow-x: hidden;
}
.sovl [data-search-menu]>.sovl__tiles {
padding-top: var(--home-section-top, 70px) !important;
}
.sovl [data-search-menu]>.sovl__block {
padding-top: var(--home-section-top, 70px) !important;
}
.sovl [data-search-menu]>.sovl__tiles:first-child {
padding-top: 0 !important;
margin-inline: -21px !important;
}
}
@media (max-width: 900px) {
.search.search--overlay {
padding-bottom: 20px !important;
padding-top: 80px !important;
margin-inline: -22px !important;
padding-inline: 22px;
width: calc(100% + 44px) !important;
}
.search--overlay .search__cell--close {
position: static !important;
top: auto !important;
right: auto !important;
margin-top: 0 !important;
margin-left: 12px !important;
}
}
@media (max-width: 767px) {
.search.search--overlay {
border-radius: 0px;
}
}
/* Single page mobile: keep equal section spacing */
@media (max-width: 900px) {
body.single.single-post {
overflow-x: hidden;
}
body.single.single-post .rsection {
margin-top: var(--home-gap-before-title, 28px) !important;
}
body.single.single-post #overview {
margin-top: 0 !important;
}
body.single.single-post .reco {
margin-top: var(--home-gap-before-title, 28px) !important;
}
/* body.single.single-post .reco__viewport {
width: 100% !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
scroll-padding-inline: 0 !important;
} */
}
/* Unified close icon size: 14x14 everywhere */
.udrawer__close,
.needauth__x,
.noresv__x,
.recsheet__close,
.mdrawer__x,
.recmap-overlay__close,
.search--overlay .search__cell--close,
.recfilters__x,
.sovl__close,
.authm__x {
font-size: 14px !important;
line-height: 14px !important;
color: #111 !important;
}
.recmap-overlay__close {
display: inline-flex;
align-items: center;
justify-content: center;
}
.rbook__x img,
.rmodal__top button[data-review-close] img,
.close img,
.udrawer__close img,
.needauth__x img,
.noresv__x img,
.recsheet__close img,
.mdrawer__x img,
.sovl__close img,
.recfilters__x img,
.search--overlay .search__cell--close img {
width: 14px !important;
height: 14px !important;
display: block;
/* close.svg уже чёрный; brightness(0) даёт пустоту в части WebKit */
filter: none !important;
}
.recmap-overlay__close img {
width: 14px !important;
height: 14px !important;
display: block;
filter: brightness(0) saturate(100%);
}
.authm__x::before,
.authm__x::after {
background: #111 !important;
}
@media (max-width: 900px) {
.udrawer__close,
.needauth__x,
.noresv__x,
.recsheet__close,
.mdrawer__x,
.recmap-overlay__close,
.search--overlay .search__cell--close,
.recfilters__x,
.sovl__close,
.authm__x,
.rbook__x {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
line-height: 14px !important;
font-weight: 700 !important;
color: #111 !important;
opacity: 1 !important;
}
.udrawer__close img,
.needauth__x img,
.noresv__x img,
.recsheet__close img,
.mdrawer__x img,
.recmap-overlay__close img,
.search--overlay .search__cell--close img,
.recfilters__x img,
.sovl__close img,
.authm__x img,
.udrawer__close svg,
.needauth__x svg,
.noresv__x svg,
.recsheet__close svg,
.mdrawer__x svg,
.recmap-overlay__close svg,
.search--overlay .search__cell--close svg,
.recfilters__x svg,
.sovl__close svg,
.authm__x svg,
.rbook__x img,
.rbook__x svg {
width: 14px !important;
height: 14px !important;
display: block !important;
filter: brightness(0) saturate(100%) !important;
}
/* Оверлей поиска: тот же filter перекрывает глобальное filter:none и скрывает крестик в WebKit */
.search--overlay .search__cell--close img,
.search--overlay .search__cell--close svg {
filter: none !important;
-webkit-filter: none !important;
opacity: 1 !important;
}
.authm__x::before,
.authm__x::after {
width: 14px !important;
background: #111 !important;
}
}
.search__cell--query {
margin-bottom: 0 !important;
}
/* Keep topbar visible above search overlay */
html.is-search-overlay-open .topbar,
body.is-search-overlay-open .topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 3201;
}
/* Sticky “Book a table” (z-index 9900) must not sit above the search overlay (3000) */
html.is-search-overlay-open .btn-overflow,
body.is-search-overlay-open .btn-overflow {
display: none !important;
pointer-events: none;
}
/* Search overlay category cards: match collections-row geometry */
.sovl .cat-links__grid.mob-hscroll {
display: flex;
flex-wrap: nowrap;
gap: 20px;
width: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
scrollbar-width: none;
}
.sovl .cat-links__grid.mob-hscroll::-webkit-scrollbar {
height: 0;
}
.sovl .cat-links__grid.mob-hscroll>* {
scroll-snap-align: start;
scroll-snap-stop: always;
}
.sovl .cat-links__grid.mob-hscroll>.cat-link {
position: relative;
display: block;
flex: 0 0 calc((100% - 60px) / 4);
max-width: 336px;
height: auto !important;
min-height: 0;
aspect-ratio: 7 / 10;
border-radius: 26px;
overflow: hidden;
background: #111;
}
.sovl .cat-link__media {
position: absolute;
inset: 0;
}
.sovl .cat-link__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: none;
transform: none;
}
.sovl .cat-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .55) 100%);
}
.sovl .cat-link__title {
position: absolute;
left: 25px;
top: 26px;
margin: 0;
padding-right: 80px;
z-index: 2;
color: #fff;
font-size: 25px;
line-height: 1.05;
font-weight: 500;
text-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 1200px) {
.sovl .cat-links__grid.mob-hscroll>.cat-link {
flex-basis: calc((100% - 40px) / 3);
max-width: none;
height: auto;
aspect-ratio: 7 / 10;
}
}
@media (max-width: 900px) {
.sovl .cat-links__grid.mob-hscroll>.cat-link {
flex-basis: calc((100% - 20px) / 2);
height: auto;
aspect-ratio: 7 / 10;
}
}
@media (max-width: 768px) {
.sovl .cat-links__grid.mob-hscroll {
gap: 14px;
padding: 0;
padding-inline: 22px;
scroll-padding-inline: 22px;
}
/* Headings in overlay blocks should align with tiles/cards padding */
.sovl .section-head__row {
padding-inline: 0;
}
.sovl .cat-links__grid.mob-hscroll>.cat-link {
flex: 0 0 min(82vw, 320px);
max-width: none;
aspect-ratio: 7 / 10;
}
.recfilters__title {
font-size: 22px;
font-weight: 700;
}
}
@media(max-width: 767px) {
.page-favorites {
.place-card {
max-width: 100% !important;
width: 100% !important;
}
}
.page-favorites {
.mob-hscroll {
flex-direction: column;
margin-top: 70px;
}
}
}
.page-favorites {
.cards-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
}
/* Favorites: show photo nav dots (see @media (max-width: 768px) .cards-row … .place-card__dots { display: none }) */
@media (max-width: 768px) {
.page-favorites .cards-row .place-card__dots {
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767px) {
.sovl .cards-row {
margin: 0 -21px !important;
padding-inline: 21px;
scroll-padding-inline: 21px;
}
.rbook-overflow {
display: none;
}
.page-favorites {
.place-card__nav--right {
display: none;
}
.place-card__nav--left {
display: none;
}
}
}
@media(max-width: 1200px) {
.page-favorites {
.cards-row {
display: flex;
}
}
}
/* Cookie consent banner */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10000001;
background: #fff;
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
font-family: Onest, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.cookie-banner__inner {
width: min(calc(100% - 28px), 1200px);
margin: 0 auto;
padding: 16px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.cookie-banner__text {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #333;
}
.cookie-banner__text a {
color: var(--brand, #b4000a);
text-decoration: underline;
}
.cookie-banner__accept {
flex: 0 0 auto;
border: 0;
border-radius: 999px;
background: var(--brand, #b4000a);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1;
padding: 12px 22px;
cursor: pointer;
}
.cookie-banner__accept:hover {
filter: brightness(0.95);
}
@media (max-width: 640px) {
.cookie-banner__inner {
flex-direction: column;
align-items: stretch;
}
.cookie-banner__accept {
width: 100%;
}
}