/* styles.css — вид Loca. Всё из токенов.
Порядок: сигнатура → первый экран → секции → мобильная композиция. */
::selection { background: var(--accent); color: var(--on-accent); }
html { color-scheme: dark; scrollbar-color: var(--plane) var(--surface); }
body { font-weight: 400; overflow-x: clip; }
a { text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent-ink); }
small { color: var(--ink-muted); font-size: var(--step--1); }
.utility {
font-family: var(--font-body); font-weight: 500; font-size: var(--step--1);
text-transform: uppercase; letter-spacing: var(--track-utility); color: var(--ink-muted);
}
.title {
font-size: var(--step-3); text-transform: uppercase; color: var(--accent-ink);
line-height: 1; letter-spacing: 0.005em; font-weight: 400;
}
/* ───────── Сигнатура: шкала ночи ───────── */
.rail { --progress: 0; width: min(100%, 30rem); }
.rail__track { position: relative; height: var(--signature-weight); background: var(--signature-track); }
.rail__fill {
position: absolute; inset: 0; background: var(--signature-line);
transform-origin: left center; transform: scaleX(0);
transition: transform var(--signature-draw) var(--ease-out);
}
.night-ready .rail__fill { transform: scaleX(var(--progress)); }
.rail__now {
display: none; position: absolute; top: 50%; left: calc(var(--progress) * 100%);
width: var(--signature-dot); height: var(--signature-dot); border-radius: 50%;
background: var(--accent-ink); transform: translate(-50%, -50%);
}
.rail.is-open .rail__now, .rail.is-closed .rail__now { display: block; animation: night-pulse 2.4s var(--ease-out) infinite; }
.rail__ticks { position: relative; height: 1.6em; margin-top: var(--space-3); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rail__ticks li { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); }
.rail__ticks li::before {
content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-3) - 4px);
width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
background: var(--surface); box-shadow: inset 0 0 0 2px var(--signature-track);
}
.rail__ticks li.is-passed::before { box-shadow: inset 0 0 0 2px var(--signature-line); background: var(--signature-line); }
.rail__ticks li:first-child { transform: none; }
.rail__ticks li:first-child::before { left: 4px; }
.rail__ticks li:last-child { transform: translateX(-100%); }
.rail__ticks li:last-child::before { left: calc(100% - 4px); }
@keyframes night-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-ink) 55%, transparent); }
70%, 100% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent-ink) 0%, transparent); }
}
/* Полная шкала — секция «Ночь» */
.timeline { --progress: 0; position: relative; height: 26rem; margin: var(--space-8) 0 6rem; padding-left: 2.5rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: var(--signature-weight); background: var(--signature-track); }
.timeline__fill { position: absolute; left: 7px; top: 0; bottom: 0; width: var(--signature-weight); }
.timeline__fill span {
position: absolute; inset: 0; background: var(--signature-line);
transform-origin: top center; transform: scaleY(0);
transition: transform calc(var(--signature-draw) * 1.6) var(--ease-out);
}
.night-ready .timeline__fill span { transform: scaleY(var(--progress)); }
.timeline.is-open .timeline__fill::after {
content: ""; position: absolute; left: 50%; top: calc(var(--progress) * 100%);
width: var(--signature-dot); height: var(--signature-dot); border-radius: 50%;
background: var(--accent-ink); transform: translate(-50%, -50%);
animation: night-pulse 2.4s var(--ease-out) infinite;
}
.timeline__stop {
position: absolute; left: 2.5rem; right: 0; top: calc(var(--at) * 100%);
transform: translateY(-1.05rem);
display: grid; grid-template-columns: 6.5rem 1fr; column-gap: var(--space-4);
}
.timeline__stop::before {
content: ""; position: absolute; left: calc(-2.5rem + 8px - 7px); top: calc(1.05rem - 7px);
width: 14px; height: 14px; border-radius: 50%;
background: var(--surface); box-shadow: inset 0 0 0 2px var(--signature-track);
}
.timeline__stop.is-passed::before { background: var(--signature-line); box-shadow: inset 0 0 0 2px var(--signature-line); }
.timeline__stop time { grid-row: span 2; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; font-variant-numeric: tabular-nums; }
.timeline__stop b { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.35rem; }
.timeline__stop span { color: var(--ink-muted); }
/* ───────── Шапка, кнопки ───────── */
.header { border-bottom: 1px solid var(--line); }
.logo img { width: 52px; height: auto; }
.nav__list a, .mobile-menu__social a { text-decoration: none; }
.nav__list a {
font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
padding-block: var(--space-2); background: linear-gradient(var(--accent-ink), var(--accent-ink)) no-repeat left bottom / 0 2px;
transition: background-size var(--dur-micro) var(--ease-out);
}
.nav__list a:hover { background-size: 100% 2px; }
.header__social { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink-muted); transition: color var(--dur-micro) var(--ease-out); }
.header__social:hover { color: var(--ink); }
.btn {
border-radius: var(--radius-control); font-weight: 500; text-transform: uppercase;
letter-spacing: 0.08em; font-size: var(--step--1);
}
.btn--primary:hover { background: var(--accent-ink); }
.btn--lg { min-height: 56px; padding-inline: var(--space-6); gap: var(--space-4); font-size: var(--step-0); }
.btn--ghost { border-color: color-mix(in oklab, var(--ink) 35%, transparent); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent-ink); }
.link-more { font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: color var(--dur-micro) var(--ease-out), text-decoration-thickness var(--dur-micro) var(--ease-out); }
.link-more:hover { color: var(--accent-ink); text-decoration-thickness: 4px; }
/* ───────── Первый экран ───────── */
.hero { position: relative; min-height: min(calc(100svh - var(--header-h)), 60rem); display: grid; grid-template-rows: 1fr auto; isolation: isolate; }
.hero__photo { position: absolute; inset: 0 0 0 auto; width: 64%; aspect-ratio: auto; z-index: -1; }
.hero__photo {
background: var(--surface);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.45) 22%, #000 55%), linear-gradient(0deg, transparent 0%, #000 30%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.45) 22%, #000 55%), linear-gradient(0deg, transparent 0%, #000 30%);
mask-composite: intersect;
}
.hero__body { align-self: center; padding-block: var(--space-8) var(--space-7); }
.hero__title {
font-size: clamp(3rem, 1rem + 7.6vw, 8rem); line-height: 0.94; text-transform: uppercase; color: var(--accent-ink);
font-weight: 400; letter-spacing: 0; text-shadow: 0 2px 24px var(--surface);
}
.hero__lead { margin-top: var(--space-5); font-size: var(--step-1); max-width: 22ch; line-height: 1.3; }
.hero .rail { margin-top: var(--space-7); }
.hero__status { margin-top: var(--space-2); color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-6); }
.hero__facts { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; padding-bottom: var(--space-7); }
.hero__facts li { display: grid; align-content: start; gap: var(--space-1); padding-inline: var(--space-5); border-left: 1px solid var(--line); font-size: var(--step--1); line-height: 1.5; }
.hero__facts li:first-child { padding-left: 0; border-left: 0; }
.hero__facts .utility { margin-bottom: var(--space-1); }
.hero__facts a { text-decoration: none; font-variant-numeric: tabular-nums; }
/* ───────── Ночь ───────── */
.night { padding-block: var(--section-y) calc(var(--section-y) * 0.6); }
.night__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); }
.night__text { grid-column: 1 / 7; }
.night__lead { margin-top: var(--space-5); font-size: var(--step-1); line-height: 1.35; max-width: 26ch; }
.night__photo { grid-column: 7 / 13; aspect-ratio: auto; min-height: 100%; }
.night__photo img { object-position: 50% 35%; }
/* ───────── Бар ───────── */
.bar { padding-bottom: var(--section-y); }
.bar__photo { aspect-ratio: auto; height: clamp(26rem, 78vh, 50rem); background: var(--surface); }
.bar__photo img { object-position: 60% 50%; -webkit-mask-image: linear-gradient(0deg, transparent 10%, #000 60%); mask-image: linear-gradient(0deg, transparent 10%, #000 60%); }
.bar__body { position: relative; margin-top: -14rem; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); align-items: end; }
.bar__text { grid-column: 1 / 8; }
.bar__glass { grid-column: 9 / 13; }
.bar__body .title { font-size: var(--step-4); line-height: 0.96; }
.bar__lead { margin-top: var(--space-5); max-width: 34ch; font-size: var(--step-1); line-height: 1.35; }
.quote { margin: var(--space-7) 0 0; max-width: 40rem; padding-left: var(--space-5); border-left: var(--signature-weight) solid var(--accent); }
.quote p { color: var(--ink); }
.quote footer { margin-top: var(--space-2); font-size: var(--step--1); color: var(--ink-muted); }
/* ───────── Меню ───────── */
.menu { background: var(--plane); padding-block: var(--section-y); }
.menu__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); }
.menu__head { grid-column: 1 / 5; }
.menu__note { margin-top: var(--space-4); color: var(--ink-muted); max-width: 26ch; }
.menu__photo { margin-top: var(--space-7); }
.menu__photo img { object-position: 50% 85%; }
.menu__card { grid-column: 6 / 13; }
.tabs { display: flex; gap: var(--space-1) var(--space-5); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] {
min-height: 44px; padding: var(--space-2) 0; background: none; border: 0; margin-bottom: -1px;
border-bottom: var(--signature-weight) solid transparent; color: var(--ink-muted);
font-weight: 500; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em;
transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-ink); }
html:not(.has-tabs) .tabs { display: none; }
.has-tabs .dishes__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dishes { padding-top: var(--space-5); }
.dishes ul { list-style: none; padding: 0; }
.dishes + .dishes { margin-top: var(--space-6); }
.has-tabs .dishes + .dishes { margin-top: 0; }
.dishes__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent-ink); text-transform: uppercase; margin-bottom: var(--space-3); }
.dishes li { display: flex; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); }
.dishes li::before { content: ""; order: 2; flex: 1; min-width: var(--space-5); border-bottom: 2px dotted color-mix(in oklab, var(--accent-ink) 70%, transparent); transform: translateY(-0.25em); }
.menu__grid > *, .night__grid > * { min-width: 0; }
.dishes li span { order: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.dishes li b { order: 3; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__service { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-muted); max-width: 60ch; }
.menu__service b { color: var(--ink); font-weight: 500; }
/* ───────── Правила ───────── */
.rules { padding-block: var(--section-y); counter-reset: rule; }
.rules__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); }
.rules .title { grid-column: 1 / 6; font-size: var(--step-2); line-height: 1.1; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.rules__list { grid-column: 7 / 13; }
.rules__list li { counter-increment: rule; display: grid; grid-template-columns: 4rem 1fr; align-items: baseline; padding-block: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-muted); }
.rules__list li:last-child { border-bottom: 1px solid var(--line); }
.rules__list li::before { content: counter(rule, decimal-leading-zero); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; color: var(--accent-ink); }
.rules__list b { color: var(--ink); font-weight: 500; }
/* ───────── Бронь: номер как главный экран ───────── */
.booking { padding-block: var(--section-y); border-top: var(--signature-weight) solid var(--accent); background: color-mix(in oklab, var(--plane) 45%, var(--surface)); overflow: hidden; }
.booking .title { font-size: var(--step-3); }
.booking__lead { margin-top: var(--space-4); max-width: 44ch; color: var(--ink-muted); font-size: var(--step-1); line-height: 1.35; }
.booking__phone {
display: flex; flex-wrap: wrap; column-gap: 0.3em; margin-top: var(--space-7);
font-family: var(--font-display); font-size: clamp(2.6rem, 9.4vw, 8.5rem); line-height: 0.95;
color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
background: linear-gradient(var(--accent-ink), var(--accent-ink)) no-repeat left bottom / 0 6px;
padding-bottom: var(--space-3); width: fit-content;
transition: color var(--dur-micro) var(--ease-out), background-size 420ms var(--ease-out);
}
.booking__phone:hover { color: var(--accent-ink); background-size: 100% 6px; }
.booking__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-7); }
.booking__alt { color: var(--ink-muted); }
.booking__alt a { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
/* ───────── Улики ───────── */
.nights { padding-block: var(--section-y) var(--space-7); }
.nights__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-5); align-items: end; }
.nights__head .title { grid-column: 1 / 7; }
.nights__head p { grid-column: 8 / 13; color: var(--ink-muted); }
.nights__head .link-more { display: inline-block; margin-top: var(--space-2); color: var(--ink); }
.nights__strip {
display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--space-4); align-items: start;
width: min(100% - 2 * var(--gutter), var(--container)); margin: var(--space-7) auto 0;
}
.nights__strip .slot:nth-child(2) { margin-top: var(--space-9); }
.nights__strip .slot:nth-child(3) { margin-top: var(--space-6); }
.nights__rating { margin-top: var(--space-6); color: var(--ink-muted); }
.nights__rating b { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); font-weight: 400; margin-right: var(--space-2); }
/* ───────── Подвал ───────── */
.footer { border-top: 1px solid var(--line); padding-block: var(--space-7); }
.footer__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-7); }
.footer__logo { width: 64px; }
.footer__night { display: grid; gap: var(--space-4); }
.footer__copy { justify-self: end; }
/* ───────── Мобильное меню ───────── */
.mobile-menu { position: fixed; inset: var(--header-h) 0 0; overflow-y: auto; background: var(--surface); }
.mobile-menu ul { gap: var(--space-2); }
.mobile-menu ul a { display: block; padding-block: var(--space-2); font-family: var(--font-display); font-size: var(--step-3); text-transform: uppercase; line-height: 1.1; }
.mobile-menu ul a:hover { color: var(--accent-ink); }
.mobile-menu__foot { display: grid; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.mobile-menu__phone { font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; }
.mobile-menu__social { color: var(--ink-muted); }
/* ───────── Мобильная композиция ───────── */
@media (max-width: 1100px) {
.header__social { display: none; }
.nav__list { gap: var(--space-4); }
}
@media (max-width: 900px) {
:root { --header-h: 64px; }
.logo img { width: 40px; }
/* Герой: фото сверху, заголовок наплывает на затемнённый низ кадра */
.hero { min-height: 0; grid-template-rows: auto; }
.hero__photo { position: relative; inset: auto; width: 100%; aspect-ratio: 1 / 1; z-index: 0; }
.hero__photo { -webkit-mask-image: linear-gradient(0deg, transparent 4%, #000 55%); mask-image: linear-gradient(0deg, transparent 4%, #000 55%); }
.hero__body { position: relative; margin-top: -7.5rem; padding-block: 0 var(--space-7); }
.hero__lead { font-size: var(--step-0); }
.hero .rail { margin-top: var(--space-6); }
.hero__actions { margin-top: var(--space-5); }
.hero__actions .btn { width: 100%; }
.hero__facts { grid-template-columns: 1fr; gap: var(--space-4); }
.hero__facts li { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--line); }
.night__grid, .menu__grid, .rules__grid, .nights__head { grid-template-columns: 1fr; }
.night__text, .night__photo, .bar__text, .menu__head, .menu__card, .rules .title, .rules__list,
.nights__head .title, .nights__head p { grid-column: 1 / -1; }
.timeline { height: 22rem; margin-top: var(--space-7); }
.timeline__stop { grid-template-columns: 5rem 1fr; }
.night__photo { aspect-ratio: 1 / 1; min-height: 0; margin-top: var(--space-2); }
.bar__photo { height: auto; aspect-ratio: 4 / 5; }
.bar__body { margin-top: -7rem; }
.bar__body { grid-template-columns: 1fr; row-gap: var(--space-7); }
.bar__glass { grid-column: 1; width: 62%; justify-self: end; }
.menu__photo { display: none; }
.menu__card { margin-top: var(--space-6); }
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.tabs [role="tab"] { flex: none; }
.dishes li { font-size: var(--step--1); }
.rules .title { position: static; margin-bottom: var(--space-6); }
.rules__list li { grid-template-columns: 3rem 1fr; }
.nights__head p { margin-top: var(--space-4); }
.nights__strip {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
width: 100%; padding-inline: var(--gutter); gap: var(--space-3);
}
.nights__strip .slot { flex: 0 0 68%; scroll-snap-align: start; margin-top: 0 !important; }
.footer__inner { grid-template-columns: auto 1fr; gap: var(--space-5); }
.footer__copy { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
.rail.is-open .rail__now, .timeline.is-open .timeline__fill::after { animation: none; }
}
/* Фокус: красный светлее акцента — контраст ≥ 3:1 на чёрном */
:focus-visible { outline-color: var(--accent-ink); }
/* Шкала ночи днём: отметка ждёт на 21:00, путь до открытия — пунктиром */
.rail.is-closed .rail__track { background: none; height: 0; border-top: var(--signature-weight) dashed color-mix(in oklab, var(--signature-line) 75%, transparent); }
.rail.is-closed .rail__now { top: 0; }
.timeline.is-closed::before { background: none; border-left: var(--signature-weight) dashed color-mix(in oklab, var(--signature-line) 75%, transparent); width: 0; }
.timeline.is-closed .timeline__fill::after {
content: ""; position: absolute; left: 50%; top: 0;
width: var(--signature-dot); height: var(--signature-dot); border-radius: 50%;
background: var(--accent-ink); transform: translate(-50%, -50%);
animation: night-pulse 2.4s var(--ease-out) infinite;
}
/* Липкая кнопка прячется, пока на экране форма брони */
@media (max-width: 900px) {
.sticky-cta.is-on.is-away { transform: translateY(calc(100% + 2 * var(--gutter))); }
}
@media (prefers-reduced-motion: reduce) {
.rail.is-closed .rail__now, .timeline.is-closed .timeline__fill::after { animation: none; }
}
/* ═════════ Круг 2: ночь целиком ═════════ */
/* Первый экран — появление в два такта: кадр, затем строки */
.hero { overflow: clip; }
.hero__body, .hero > .container { position: relative; z-index: 1; }
.hero__photo { animation: hero-in 1.8s var(--ease-out) both; }
.hero__photo img { will-change: transform; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.05em; margin-bottom: -0.05em; }
.hero__title .line > span { display: inline-block; animation: line-rise 1s var(--ease-out) both; }
.hero__title .line:nth-child(1) > span { animation-delay: 250ms; }
.hero__title .line:nth-child(2) > span { animation-delay: 360ms; }
.hero__title .line:nth-child(3) > span { animation-delay: 470ms; }
.hero__lead, .hero .rail, .hero__status, .hero__actions, .hero__facts { animation: fade-up 800ms var(--ease-out) both; }
.hero__lead { animation-delay: 700ms; }
.hero .rail, .hero__status { animation-delay: 820ms; }
.hero__actions { animation-delay: 940ms; }
.hero__facts { animation-delay: 1060ms; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.12); } }
@keyframes line-rise { from { transform: translateY(108%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
/* Бегущая строка — разгоняется от прокрутки */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--space-5); }
.ticker__track {
display: flex; align-items: center; width: max-content;
font-family: var(--font-display); font-size: clamp(2.25rem, 1rem + 4.4vw, 5rem); line-height: 1; text-transform: uppercase;
animation: ticker 48s linear infinite;
}
.ticker__track > * { margin-right: var(--space-6); flex: none; }
.ticker__track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--accent-ink); }
.ticker__track i { width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--accent-ink); }
.ticker__track .ticker__time { color: var(--accent-ink); -webkit-text-stroke: 0; font-variant-numeric: tabular-nums; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* Время секции */
.eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-family: var(--font-display); font-size: var(--step-0); color: var(--accent-ink); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.eyebrow time { padding: var(--space-1) var(--space-2); background: var(--surface); border-radius: var(--radius-control); }
.eyebrow::after { content: ""; width: 3rem; height: var(--signature-weight); background: var(--signature-line); }
.rules__grid .eyebrow, .nights__head .eyebrow { grid-column: 1 / -1; }
/* Огонь раскрывается на всю ширину */
.bar__photo { clip-path: inset(calc((1 - var(--reveal, 1)) * 12%) calc((1 - var(--reveal, 1)) * 18%)); }
.bar__photo img { transform: scale(calc(1.18 - var(--reveal, 1) * 0.18)); }
/* Мелкие живые состояния */
.dishes li span { transition: color var(--dur-micro) var(--ease-out); }
.dishes li:hover span { color: var(--accent-ink); }
.nights__strip img { transition: transform 700ms var(--ease-out); }
.nights__strip .slot:hover img { transform: scale(1.04); }
/* Плёночное зерно поверх всего — ночная съёмка, а не пластик */
body::after {
content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.09;
background-image: url("data:image/svg+xml;utf8,");
}
@media (max-width: 900px) {
.hero__sparkle { inset: 0 auto auto 0; width: 100%; aspect-ratio: 1 / 1; }
.booking__actions .btn { width: 100%; }
.ticker { padding-block: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
.hero__sparkle i, .ticker__track { animation: none; }
.hero__sparkle i { opacity: 0.8; transform: none; }
.hero__photo img { will-change: auto; }
}
/* ═════════ Круг 3: правки critique-3 ═════════ */
/* Блики на диско-шарах: точки света вспыхивают и гаснут, слой едет вместе с фото */
.hero__sparkle { position: absolute; inset: 0 0 0 auto; width: 64%; z-index: 0; pointer-events: none; animation: hero-in 1.8s var(--ease-out) both; }
.hero__sparkle i {
position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
border-radius: 50%; background: radial-gradient(circle, oklch(0.99 0.01 80) 0 22%, oklch(0.9 0.09 70 / 0.7) 40%, transparent 72%);
opacity: 0; transform: scale(0.2); animation: glint 3.2s var(--ease-out) var(--d) infinite;
}
.hero__sparkle i::before, .hero__sparkle i::after {
content: ""; position: absolute; left: 50%; top: 50%; background: oklch(0.98 0.03 75 / 0.85);
}
.hero__sparkle i::before { width: 360%; height: 1px; transform: translate(-50%, -50%); }
.hero__sparkle i::after { width: 1px; height: 360%; transform: translate(-50%, -50%); }
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(20deg); } 70% { opacity: 0; transform: scale(0.4) rotate(35deg); } }
/* Часы ночи: красная плашка с часом едет по шкале; появляются после первого экрана */
.clock { --p: 0; position: fixed; z-index: 45; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease-out); }
.clock.is-on { opacity: 1; }
.clock__track { position: relative; background: var(--signature-track); }
.clock__fill { position: absolute; inset: 0; background: var(--signature-line); }
.clock__now {
position: absolute; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control);
background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: var(--step--1);
font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 4px var(--surface);
}
@media (min-width: 1400px) {
:root { --container: min(1320px, 100vw - 224px); }
.clock { right: 16px; top: calc(var(--header-h) + var(--space-6)); bottom: var(--space-6); width: 80px; display: flex; flex-direction: column; align-items: center; }
.clock__end { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-muted); }
.clock__track { flex: 1; width: var(--signature-weight); margin-block: var(--space-3); }
.clock__fill { transform-origin: top; transform: scaleY(var(--p)); }
.clock__now { left: 50%; top: calc(14px + var(--p) * (100% - 28px)); transform: translate(-50%, -50%); }
}
@media (max-width: 1399.98px) {
.clock { left: 0; right: 0; top: var(--header-h); height: var(--signature-weight); }
.clock__end { display: none; }
.clock__track { height: 100%; background: none; }
.clock__fill { transform-origin: left; transform: scaleX(var(--p)); }
.clock__now { right: var(--gutter); top: var(--space-2); box-shadow: none; }
}
/* Шкала «Ночи» идёт за прокруткой */
.timeline__fill span { transition-duration: 160ms; }
/* Номер: код страны подписью, сам номер — одной строкой */
.booking__phone small { display: block; width: 100%; margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--step-1); font-weight: 500; letter-spacing: 0.12em; color: var(--ink-muted); }
/* Коктейль ниже края фото — раскрытие огня ничем не закрыто */
.bar__glass { align-self: start; margin-top: 14rem; }
.bar__text { align-self: end; }
@media (max-width: 900px) {
.booking__phone { font-size: 14.4vw; }
.bar__glass { margin-top: 0; }
}
/* Левый край фото и бликов — на целый пиксель: дробный край давал светлый шов */
@media (min-width: 901px) {
.hero__photo, .hero__sparkle { width: auto; left: round(down, 36%, 1px); }
}
/* ═════════ Финал: контакты ═════════ */
.contacts { padding-top: var(--section-y); border-top: 1px solid var(--line); }
.contacts__live { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; font-size: var(--step-1); line-height: 1.3; }
.contacts__pulse { flex: none; width: var(--signature-dot); height: var(--signature-dot); border-radius: 50%; background: var(--ink-muted); }
.loca-open .contacts__pulse { background: var(--accent-ink); animation: night-pulse 2.4s var(--ease-out) infinite; }
.contacts__title {
margin-top: var(--space-7); font-size: clamp(2.6rem, 0.6rem + 7.2vw, 7.5rem); line-height: 0.94;
text-transform: uppercase; color: var(--accent-ink); font-weight: 400;
}
.contacts__title .utility { display: block; margin-bottom: var(--space-4); font-family: var(--font-body); line-height: 1.5; }
.contacts__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); color: var(--ink-muted); font-size: var(--step-1); line-height: 1.35; }
.contacts__where i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); }
.contact-rows { margin-top: var(--space-8); border-top: 1px solid var(--line); }
.contact-rows a {
position: relative; display: grid; grid-template-columns: 14rem 1fr auto; align-items: center; gap: var(--space-5);
padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--line); text-decoration: none; isolation: isolate;
}
.contact-rows a::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out);
}
.contact-rows b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.05; font-variant-numeric: tabular-nums; transition: transform 420ms var(--ease-out); }
.contact-rows svg { width: 40px; height: 40px; color: var(--accent-ink); transition: transform 420ms var(--ease-out), color var(--dur-micro) var(--ease-out); }
.contact-rows a:hover::before, .contact-rows a:focus-visible::before { transform: scaleX(1); }
.contact-rows a:hover b, .contact-rows a:focus-visible b { transform: translateX(var(--space-4)); }
.contact-rows a:hover svg, .contact-rows a:focus-visible svg { color: var(--on-accent); transform: rotate(45deg); }
.contact-rows a:hover .utility, .contact-rows a:focus-visible .utility { color: var(--on-accent); }
.contact-rows a:focus-visible { outline-offset: -2px; }
/* Карта в цвете ночи: тёмная, с красным тоном; управление картой сохраняется */
.contacts__map { position: relative; margin-top: var(--space-9); height: clamp(26rem, 62vh, 40rem); background: var(--plane); overflow: hidden; }
.contacts__static, .contacts__frame { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; filter: invert(0.92) hue-rotate(180deg) grayscale(1) contrast(1.15) brightness(0.85); }
.contacts__frame { position: absolute; inset: 0; z-index: 1; }
.contacts__map.is-live .contacts__static { visibility: hidden; }
.contacts__map.is-live .contacts__tint { z-index: 2; }
.contacts__map .contacts__card-wrap, .contacts__live-map, .contacts__copy { z-index: 2; }
.contacts__map.is-live .contacts__pin { display: none; }
.contacts__live-map {
position: absolute; right: var(--gutter); top: var(--space-5); min-height: 44px; padding: var(--space-2) var(--space-4);
background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control);
font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
transition: border-color var(--dur-micro) var(--ease-out);
}
.contacts__live-map:hover { border-color: var(--accent-ink); }
.contacts__copy { position: absolute; right: var(--space-2); bottom: var(--space-1); font-size: 0.6875rem; color: var(--ink-muted); }
.contacts__copy a { color: inherit; }
.contacts__map.is-live .contacts__copy { display: none; }
.contacts__tint { position: absolute; inset: 0; pointer-events: none; background: var(--accent); mix-blend-mode: color; opacity: 0.55; }
.contacts__card-wrap { position: absolute; left: 0; right: 0; bottom: var(--space-7); pointer-events: none; }
.contacts__card {
pointer-events: auto; width: min(100%, 24rem); padding: var(--space-6); background: var(--surface);
border-top: var(--signature-weight) solid var(--accent); display: grid; gap: var(--space-3);
}
.contacts__hours { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: var(--space-3); }
.contacts__card .btn { width: 100%; }
.contacts__alt { color: var(--ink-muted); font-size: var(--step--1); }
@media (max-width: 900px) {
.contacts__live { font-size: var(--step-0); align-items: flex-start; }
.contacts__pulse { margin-top: 0.35em; }
.contacts__where { font-size: var(--step-0); }
.contact-rows { margin-top: var(--space-7); }
.contact-rows a { grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding-inline: 0; }
.contact-rows .utility { grid-column: 1 / -1; }
.contact-rows b { font-size: clamp(1.5rem, 7.4vw, 2.25rem); }
.contact-rows svg { width: 28px; height: 28px; }
.contacts__map { margin-top: var(--space-7); height: auto; background: none; }
.contacts__static, .contacts__frame { height: 22rem; }
.contacts__copy { top: var(--space-2); left: var(--space-2); right: auto; bottom: auto; }
.contacts__map.is-live .contacts__copy { display: none; }
.contacts__where { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.contacts__where i { display: none; }
.contacts__tint { bottom: auto; height: 22rem; }
.contacts__card-wrap { position: static; padding-block: 0 var(--space-7); }
.contacts__card { width: 100%; margin-top: calc(-1 * var(--space-8)); position: relative; padding: var(--space-5); }
.contacts__card .btn--lg { font-size: var(--step--1); padding-inline: var(--space-4); }
.contacts__map { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .loca-open .contacts__pulse { animation: none; } }
.contacts__pin { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.contacts__pin::before {
content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
background: var(--accent-ink); box-shadow: 0 0 0 4px var(--surface); animation: night-pulse 2.4s var(--ease-out) infinite;
}
.contacts__pin span {
position: absolute; left: 0; bottom: 20px; transform: translateX(-50%); white-space: nowrap;
padding: var(--space-1) var(--space-3); background: var(--surface); color: var(--ink); border-radius: var(--radius-control);
font-family: var(--font-display); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em;
}
@media (max-width: 900px) { .contacts__pin { top: 11rem; } }
@media (prefers-reduced-motion: reduce) { .contacts__pin::before { animation: none; } }
/* Обёртки — блочные, чтобы держать размер слота */
.slot > picture, .contacts__map > picture { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .contacts__map > picture { height: 22rem; } }
.is-paused .hero__sparkle i, .ticker.is-paused .ticker__track, .hero.is-paused .rail__now { animation-play-state: paused; }
/* ═════════ Плашка PowerUP — фирменный элемент студии, как есть ═════════ */
/* Плашка PowerUP — копия «Powered by Netlify» (пилюля, отступ 18px от угла, системный шрифт 13px)
в фирменных цветах powerup-go.uz. Самодостаточна: не зависит от токенов проекта. Одна и та же во всех проектах —
текст, цвета и размеры не менять без явной просьбы. */
.pu-badge {
position: fixed; right: 18px; bottom: 18px; z-index: 60;
display: flex; align-items: center; gap: 9px; white-space: nowrap;
padding: 8px 12px 8px 16px;
border: 1px solid rgba(212, 175, 55, 0.22); border-radius: 999px;
background: linear-gradient(180deg, #151515, #050505);
color: #F0F0F0; text-decoration: none;
font: 600 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
letter-spacing: .01em; -webkit-font-smoothing: antialiased;
transition: border-color .2s ease, bottom .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pu-badge:hover { border-color: rgba(212, 175, 55, 0.55); }
.pu-badge:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.pu-badge__label { color: #D5D5D5; font-weight: 500; }
.pu-badge img { display: block; width: auto; height: 26px; max-width: none; flex: none; }
@media (prefers-reduced-motion: reduce) { .pu-badge { transition: none; } }
/* Липкая «Позвонить» на телефоне — плашка поднимается над ней, пока кнопка видна */
/* На телефоне плашка не висит над липкой кнопкой поверх текста: пока кнопка на экране, плашка уходит
(видна на первом экране, в брони и в финале — там липкой кнопки нет) */
@media (max-width: 900px) {
.pu-badge { transition: opacity .3s ease, visibility .3s; }
.sticky-cta.is-on:not(.is-away) ~ .pu-badge { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Часы ночи на ПК заканчиваются над плашкой, а не под ней */
@media (min-width: 1400px) { .clock { bottom: 86px; } }
/* ═════════ Языки RU / UZ / EN ═════════ */
.lang { gap: 0; }
.lang button {
min-width: 40px; min-height: 44px; padding: 0 var(--space-2); opacity: 1; color: var(--ink-muted);
font-size: var(--step--1); font-weight: 500; letter-spacing: 0.12em; text-decoration: none;
transition: color var(--dur-micro) var(--ease-out);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mobile-menu .lang { margin-top: var(--space-6); gap: var(--space-2); }
.mobile-menu .lang button { min-width: 56px; font-size: var(--step-0); border: 1px solid var(--line); border-radius: var(--radius-control); }
.mobile-menu .lang button[aria-pressed="true"] { border-color: var(--accent-ink); text-decoration: none; }
/* Телефоны в фактах героя — зона касания ≥ 24px и зазор между ними (Lighthouse target-size) */
.hero__facts a { display: block; width: fit-content; min-height: 24px; line-height: 24px; }
.hero__facts a + a { margin-top: var(--space-1); }
/* Вкладки меню — всегда одна строка; на длинном языке строка прокручивается, а не переносит последнюю вкладку */
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { flex: none; }