/* ============================================================ Sibeeria — бар с сибирским характером Жанр: winter-cabin (тепло окна в снегах), палитра — индиго и приглушённый янтарь на светлом тёплом фоне. Без декора: чистота, крупная лёгкая типографика, цветные плашки. ============================================================ */ /* ---------- Токены темы ---------- */ :root{ color-scheme: light; /* светлый тёплый фон — НЕ кремово-бежевый: лёгкий розово-сизый оттенок сумерек над снегом */ --bg: oklch(96.5% 0.012 30); --bg-alt: oklch(92.5% 0.02 30); --surface: oklch(99% 0.006 30); --surface-2: oklch(94.5% 0.016 30); --ink: oklch(24% 0.035 275); --ink-soft: oklch(42% 0.03 275); --ink-mute: oklch(55% 0.02 275); --indigo: oklch(46% 0.13 275); --indigo-strong: oklch(34% 0.14 275); --indigo-soft: oklch(90% 0.03 275); --amber: oklch(72% 0.11 55); --amber-strong: oklch(60% 0.13 50); --amber-soft: oklch(93% 0.04 60); --line: oklch(84% 0.02 30); --on-indigo: oklch(97% 0.01 275); --shadow-sm: 0 1px 3px oklch(20% 0.03 275 / 0.08); --shadow-md: 0 10px 30px oklch(20% 0.03 275 / 0.12); --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; --font-display: "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif; --font-text: "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --space-section: clamp(3.5rem, 2.4rem + 5vw, 7.5rem); --content-w: min(1180px, 92vw); --map-tile: 256px; } [data-theme="dark"]{ color-scheme: dark; --bg: oklch(19% 0.03 275); --bg-alt: oklch(15% 0.03 275); --surface: oklch(23% 0.035 275); --surface-2: oklch(27% 0.035 275); --ink: oklch(95% 0.012 60); --ink-soft: oklch(80% 0.015 60); --ink-mute: oklch(66% 0.015 60); --indigo: oklch(76% 0.09 275); --indigo-strong: oklch(86% 0.06 275); --indigo-soft: oklch(32% 0.05 275); --amber: oklch(78% 0.12 55); --amber-strong: oklch(85% 0.11 60); --amber-soft: oklch(30% 0.06 55); --line: oklch(33% 0.03 275); --on-indigo: oklch(14% 0.02 275); --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4); --shadow-md: 0 16px 40px oklch(0% 0 0 / 0.45); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg: oklch(19% 0.03 275); --bg-alt: oklch(15% 0.03 275); --surface: oklch(23% 0.035 275); --surface-2: oklch(27% 0.035 275); --ink: oklch(95% 0.012 60); --ink-soft: oklch(80% 0.015 60); --ink-mute: oklch(66% 0.015 60); --indigo: oklch(76% 0.09 275); --indigo-strong: oklch(86% 0.06 275); --indigo-soft: oklch(32% 0.05 275); --amber: oklch(78% 0.12 55); --amber-strong: oklch(85% 0.11 60); --amber-soft: oklch(30% 0.06 55); --line: oklch(33% 0.03 275); --on-indigo: oklch(14% 0.02 275); --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4); --shadow-md: 0 16px 40px oklch(0% 0 0 / 0.45); } } /* ---------- Сброс ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.55; transition: background-color .25s ease, color .25s ease; overflow-x: hidden; } img{ max-width: 100%; display: block; -webkit-user-drag: none; user-drag: none; } a{ color: inherit; } h1,h2,h3,p,dl,dd,figure{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } table{ border-collapse: collapse; } ::selection{ background: var(--amber); color: var(--indigo-strong); } .nowrap{ white-space: nowrap; } /* JS-скрытие для появления при прокрутке: без класса .js на ничего не прячем — предохранитель от белого полотна. */ .reveal{ opacity: 1; transform: none; } html.js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } html.js .reveal.reveal--delay{ transition-delay: .12s; } html.js .reveal.is-visible{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ html.js .reveal{ transition: none; opacity: 1; transform: none; } } .skip-link{ position: absolute; left: 1rem; top: -3rem; background: var(--indigo); color: var(--on-indigo); padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 200; transition: top .2s ease; } .skip-link:focus{ top: 1rem; } :focus-visible{ outline: 2.5px solid var(--amber-strong); outline-offset: 3px; border-radius: 4px; } .plate{ background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .overline{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); margin: 0 0 .9rem; } .overline--light{ color: var(--amber); } .overline--onindigo{ color: var(--on-indigo); } /* ---------- Кнопки ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: .98rem; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; min-height: 44px; } .btn--primary{ background: var(--indigo); color: var(--on-indigo); box-shadow: var(--shadow-sm); } .btn--primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--ghost{ background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn--ghost:hover{ border-color: var(--indigo); color: var(--indigo); } .btn--wide{ width: 100%; } .btn--call{ background: var(--amber-soft); color: var(--indigo-strong); padding: .6rem 1.1rem; font-size: .92rem; min-height: 44px; } .btn--call:hover{ background: var(--amber); } .icon{ width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon--sm{ width: 1em; height: 1em; } /* ---------- Шапка ---------- */ .site-header{ position: sticky; top: 0; z-index: 100; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner{ max-width: var(--content-w); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; } .brand{ display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-right: auto; } .brand__word{ font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; letter-spacing: .01em; } .nav{ display: flex; gap: 1.6rem; font-size: .95rem; } .nav a{ text-decoration: none; color: var(--ink-soft); } .nav a:hover{ color: var(--indigo); } .site-header__actions{ display: flex; align-items: center; gap: .7rem; } .theme-toggle{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); } .theme-toggle .icon{ width: 20px; height: 20px; } .theme-toggle .icon--moon{ display: none; } [data-theme="dark"] .theme-toggle .icon--sun{ display: none; } [data-theme="dark"] .theme-toggle .icon--moon{ display: block; } .nav-toggle{ display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle span{ width: 18px; height: 2px; background: currentColor; border-radius: 2px; } @media (max-width: 860px){ .nav{ position: fixed; inset: 62px 0 auto 0; background: var(--bg); flex-direction: column; padding: 1rem 1.4rem 1.5rem; border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .nav.is-open{ opacity: 1; transform: none; pointer-events: auto; } .nav a{ padding: .6rem 0; border-bottom: 1px solid var(--line); } .nav-toggle{ display: flex; } .btn--call span{ display: none; } } /* ---------- HERO ---------- */ .hero{ max-width: var(--content-w); margin-inline: auto; padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--space-section); display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; column-gap: 1.2rem; row-gap: 1.2rem; position: relative; } .hero__photo-frame{ grid-column: 6 / 13; grid-row: 1 / 3; overflow: hidden; aspect-ratio: 4 / 5; position: relative; } .hero__photo{ width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; } @keyframes kenburns{ from{ transform: scale(1) translate(0, 0); } to{ transform: scale(1.09) translate(-1.5%, -1%); } } @media (prefers-reduced-motion: reduce){ .hero__photo{ animation: none; } } .hero__photo-frame::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(20% 0.05 275 / 0) 55%, oklch(20% 0.05 275 / .55)); } .hero__title-card{ grid-column: 1 / 9; grid-row: 1; align-self: end; z-index: 2; background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); margin-right: -14%; box-shadow: var(--shadow-md); } .hero__title{ font-family: var(--font-display); font-weight: 200; font-size: clamp(2.4rem, 1.6rem + 4.2vw, 5.6rem); line-height: 1.02; letter-spacing: -.01em; margin: 0; color: var(--ink); } .hero__title-accent{ display: block; font-weight: 600; color: var(--indigo); } .hero__body{ grid-column: 1 / 7; grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: 1.4rem; padding-top: .6rem; } .hero__lead{ font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; } .hero__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; font-size: .92rem; color: var(--ink-mute); } .badge{ display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; } .badge--status{ background: var(--amber-soft); color: var(--indigo-strong); } .badge--status.is-open::before{ content: "●"; color: #3f9d4c; } .badge--status.is-closed::before{ content: "●"; color: var(--ink-mute); } .hero__address{ display: inline-flex; align-items: center; gap: .4rem; } .hero__actions{ display: flex; flex-wrap: wrap; gap: .8rem; } @media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } .hero__photo-frame{ grid-column: 1; grid-row: 1; aspect-ratio: 16/11; } .hero__title-card{ grid-column: 1; grid-row: 2; margin-right: 0; margin-top: -18%; width: 92%; } .hero__title{ font-size: clamp(2rem, 1.3rem + 5.5vw, 3.2rem); } .hero__body{ grid-column: 1; grid-row: 3; padding-top: 1rem; } } /* ---------- Секции общее ---------- */ .section{ max-width: var(--content-w); margin-inline: auto; padding-block: var(--space-section); } .section__head{ max-width: 62ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.2rem); } .section__head h2{ font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; margin-bottom: .8rem; } .section__lead{ color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; } /* ---------- Меню ---------- */ .menu__showcase{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-bottom: 1.6rem; } .menu-feature{ padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); } .menu-feature--indigo{ background: var(--indigo); color: var(--on-indigo); } .menu-feature--indigo .menu-feature__note{ color: color-mix(in oklab, var(--on-indigo) 78%, transparent); } .menu-feature--amber{ background: var(--amber-soft); } .menu-feature--surface{ background: var(--surface-2); } .menu-feature__title{ font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); margin: 0 0 .5rem; } .menu-feature__note{ color: var(--ink-mute); font-size: .92rem; } .menu__chips{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; } .menu-chips__title{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: .8rem; } .chip-list{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; } .chip{ background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; font-size: .88rem; color: var(--ink-soft); } .menu-chips__note{ color: var(--ink-mute); font-size: .88rem; } .menu__actions{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } /* ---------- Proof (плашка индиго во всю ширину) ---------- */ .proof{ max-width: none; background: var(--indigo); color: var(--on-indigo); padding-block: var(--space-section); } .proof .overline--light{ color: var(--amber-strong); } .proof__inner{ max-width: var(--content-w); margin-inline: auto; padding-inline: 0; } .proof h2{ font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 1.5rem + 2.2vw, 3.1rem); color: var(--on-indigo); } .proof__grid{ display: grid; grid-template-columns: max-content 1fr; gap: clamp(2rem, 1.5rem + 2vw, 4rem); align-items: center; margin-top: 2rem; } .proof__rating{ display: flex; flex-direction: column; gap: .4rem; } .proof__rating-num{ font-family: var(--font-display); font-weight: 300; font-size: clamp(5rem, 3.2rem + 9vw, 11rem); line-height: .9; color: var(--amber-strong); font-variant-numeric: tabular-nums; } .proof__rating-caption{ font-size: 1rem; color: color-mix(in oklab, var(--on-indigo) 78%, transparent); } .proof__facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6rem; } .proof__fact{ display: flex; flex-direction: column; gap: .3rem; } .proof__num{ font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); font-variant-numeric: tabular-nums; color: var(--amber-strong); line-height: 1; } .proof__label{ color: color-mix(in oklab, var(--on-indigo) 82%, transparent); font-size: .95rem; } @media (max-width: 700px){ .proof__grid{ grid-template-columns: 1fr; } .proof__rating{ align-items: center; text-align: center; margin-bottom: 1rem; } } /* ---------- Галерея ---------- */ .gallery{ padding-inline: 0; max-width: none; } .gallery__inner{ max-width: var(--content-w); margin-inline: auto; padding-inline: max(1.2rem, (100% - var(--content-w)) / 2); } .gallery__bleed{ display: block; position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; padding: 0; } .gallery__bleed img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .gallery__bleed:hover img{ transform: scale(1.03); } .gallery__bleed-caption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem clamp(1.2rem, 4vw, 3rem); background: linear-gradient(0deg, oklch(15% 0.04 275 / .72), transparent); color: #fff; font-size: .95rem; text-align: left; } @media (max-width: 700px){ .gallery__bleed{ aspect-ratio: 4/3; } } /* ---------- Врезка-цитата ---------- */ .pull-quote{ max-width: none; background: var(--bg-alt); padding-block: clamp(3rem, 2.2rem + 4vw, 6rem); } .pull-quote__inner{ max-width: 46ch; margin-inline: auto; padding-inline: 1.2rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.25; color: var(--indigo-strong); text-align: center; } /* ---------- Отзывы ---------- */ .reviews__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; } .review{ padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); display: flex; flex-direction: column; gap: .9rem; } .review__stars{ color: var(--amber-strong); letter-spacing: .12em; font-size: .95rem; } .review__text{ font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); line-height: 1.6; } /* ---------- Локация ---------- */ .location__grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem; align-items: start; } .location__map-wrap{ display: flex; flex-direction: column; gap: .6rem; } .map__credit{ font-size: .78rem; color: var(--ink-mute); text-align: right; } .map__credit a{ color: inherit; } .map{ position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); touch-action: pan-y; user-select: none; } .map__tiles{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; cursor: grab; } .map__tiles.is-grabbing{ cursor: grabbing; } .map__tiles img{ position: absolute; width: var(--map-tile); height: var(--map-tile); max-width: none; pointer-events: none; } [data-theme="dark"] .map__tiles img{ filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.92); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .map__tiles img{ filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.92); } } .map__pin{ position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -100%); color: var(--indigo); filter: drop-shadow(0 3px 4px oklch(20% 0.05 275 / .35)); pointer-events: none; z-index: 3; } .map__pin svg{ width: 100%; height: 100%; fill: currentColor; stroke: var(--surface); stroke-width: 1; } .map__controls{ position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 4; } .map__controls button{ width: 44px; height: 44px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.1rem; display: grid; place-items: center; } .map__controls button:hover{ background: var(--amber-soft); } .info-list{ padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.2rem; } .info-list__row{ display: grid; grid-template-columns: 110px 1fr; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .info-list__row:last-child{ border-bottom: 0; padding-bottom: 0; } .info-list__row dt{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); } .info-list__row dd{ margin: 0; overflow-wrap: anywhere; } .info-list__row a{ text-decoration: none; display: inline-block; padding: .1rem 0; } .info-list__row a:hover{ color: var(--indigo); } .socials{ display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; } .socials a{ text-decoration: underline; text-underline-offset: 3px; padding: .3rem 0; } .hours-today{ font-weight: 600; font-variant-numeric: tabular-nums; } .hours-full summary{ cursor: pointer; color: var(--indigo); font-size: .9rem; margin-top: .4rem; padding: .3rem 0; } .hours-table{ margin-top: .7rem; font-size: .92rem; width: 100%; } .hours-table th{ text-align: left; font-weight: 500; color: var(--ink-mute); padding: .25rem 0; width: 2.4em; } .hours-table td{ text-align: right; font-variant-numeric: tabular-nums; padding: .25rem 0; } .hours-table tr.is-today th, .hours-table tr.is-today td{ color: var(--indigo); font-weight: 700; } @media (max-width: 860px){ .location__grid{ grid-template-columns: 1fr; } } /* ---------- CTA полоса ---------- */ .cta-strip{ max-width: none; background: var(--amber-soft); } .cta-strip__inner{ max-width: var(--content-w); margin-inline: auto; padding-block: clamp(2.4rem, 1.8rem + 3vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; } .cta-strip__title{ font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem); color: var(--indigo-strong); max-width: 26ch; } /* ---------- Подвал ---------- */ .site-footer{ background: var(--bg-alt); border-top: 1px solid var(--line); } .site-footer__inner{ max-width: var(--content-w); margin-inline: auto; padding-block: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; } .site-footer__brand{ display: flex; gap: .7rem; align-items: flex-start; } .site-footer__name{ font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .site-footer__tag{ color: var(--ink-mute); font-size: .88rem; margin-top: .3rem; max-width: 32ch; } .site-footer__nav{ display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; } .site-footer__nav a{ text-decoration: none; color: var(--ink-soft); display: inline-block; padding: .2rem 0; } .site-footer__nav a:hover{ color: var(--indigo); } .site-footer__contacts{ display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; } .site-footer__contacts a{ text-decoration: none; display: inline-block; padding: .2rem 0; } .site-footer__contacts a:hover{ color: var(--indigo); } .site-footer__contacts address{ font-style: normal; color: var(--ink-mute); overflow-wrap: anywhere; } .site-footer__bottom{ border-top: 1px solid var(--line); padding: 1.1rem 0; } .site-footer__bottom{ max-width: var(--content-w); margin-inline: auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-mute); } .site-footer__signature a{ color: var(--ink-mute); text-decoration: none; } .site-footer__signature a:hover{ color: var(--indigo); } @media (max-width: 700px){ .site-footer__inner{ grid-template-columns: 1fr; } } /* ---------- Лайтбокс ---------- */ .lightbox{ position: fixed; inset: 0; background: oklch(10% 0.02 275 / .92); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 2rem; } .lightbox[hidden]{ display: none; } .lightbox__img{ max-width: min(90vw, 1100px); max-height: 86vh; border-radius: var(--radius-md); object-fit: contain; } .lightbox__close, .lightbox__nav{ position: absolute; color: #fff; width: 46px; height: 46px; border-radius: 50%; background: oklch(30% 0.02 275 / .5); display: grid; place-items: center; font-size: 1.3rem; } .lightbox__close{ top: 1.4rem; right: 1.4rem; } .lightbox__nav--prev{ left: 1.4rem; top: 50%; transform: translateY(-50%); } .lightbox__nav--next{ right: 1.4rem; top: 50%; transform: translateY(-50%); } .lightbox__close:hover, .lightbox__nav:hover{ background: var(--amber); color: var(--indigo-strong); } /* ---------- Печать чисел/времени табличной шириной ---------- */ .badge, .proof__num, .proof__rating-num, .hours-today, .hours-table td{ font-variant-numeric: tabular-nums; }