/* ии-туризм.рф: общие стили. Правила: portal/DESIGN.md Палитра «Туман и коралл»: интерфейс тихий, цвет дают фото, коралл только у действий. Скругления: 4 ступени и таблетка (таблетка только у .btn, .modes, .status и круглых кнопок со значком). Тени: только у слоёв поверх содержимого. У карточек рамка 1 px. */ :root { --bg: #F4F6F7; --surface: #FFFFFF; --sunk: #E9EEF0; --line: #DCE3E6; --control: #7A8791; --ink: #13202A; --ink-2: #44525C; --muted: #5F6C75; --coral: #C9402F; --coral-h: #B33626; --on-coral: #FFFFFF; --sea: #2E6577; --sea-soft: #E1ECEF; --ok: #276B4D; --ok-soft: #E2F1EA; --warn: #8F5300; --warn-soft: #FFF3DC; --coral-soft: #FCEFEC; --coral-line: #E3A79E; --focus: #1F4A57; --photo: #22313B; --shade: 8, 14, 19; --display: "Manrope", "Segoe UI", system-ui, sans-serif; --text: "Onest", "Segoe UI", system-ui, sans-serif; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(19, 32, 42, .14); --sh-2: 0 24px 56px -28px rgba(5, 10, 14, .75); --sh-3: 0 32px 80px -32px rgba(5, 10, 14, .6); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --sec: clamp(64px, 8vw, 112px); --gutter: 20px; --wrap: 1280px; --hdr-h: 76px; --ease: cubic-bezier(.2, 0, 0, 1); /* полоса «Как туристы относятся к ИИ»: один оттенок моря от тёмного к светлому */ --dv-1: #2E6577; --dv-2: #9DC3CF; --dv-3: #D9E0E4; --ease-emph: cubic-bezier(.05, .7, .1, 1); color-scheme: light; } @media (min-width: 900px) { :root { --gutter: 40px; } } /* «Путешествия»: палитра «Море» (решение Лукиана 03.11). Белый фон, море синее, светло-голубые полосы у части блоков. «Бизнес» остаётся в «Тумане и коралле». Белый на коралле 4,7:1, море на белом 5,7:1 */ :root[data-mode="trip"] { --bg: #FFFFFF; --sunk: #F1F4F6; --line: #E3E8EB; --coral: #D63A24; --coral-h: #BA2F1B; --coral-soft: #FDEDEA; --coral-line: #EFA799; --sea: #0069B4; --sea-soft: #E2EFFA; --tint: #EAF4FB; --tint-2: #D9ECF9; --focus: #00508A; --dv-1: #0069B4; --dv-2: #7DB8E6; --dv-3: #D7E7F4; } /* «Бизнес»: палитра B «Глубокий синий» (решение Лукиана 05.11.2026) вместо «Тумана и коралла»: белый фон, синий «Моря» у ссылок и отметок, тёмно-синий #0B2340 у полосы обложки и плашек, коралл только у главного действия. Белый на #0B2340 16:1, море на белом 5,7:1, белый на коралле 4,7:1 */ :root[data-mode="biz"] { --bg: #FFFFFF; --sunk: #F1F4F6; --line: #E3E8EB; --coral: #D63A24; --coral-h: #BA2F1B; --coral-soft: #FDEDEA; --coral-line: #EFA799; --sea: #0069B4; --sea-soft: #E2EFFA; --tint: #EAF4FB; --tint-2: #D9ECF9; --focus: #00508A; --dv-1: #0069B4; --dv-2: #7DB8E6; --dv-3: #D7E7F4; --navy: #0B2340; --navy-2: #143259; --on-navy-2: #C3D0DE; } [data-theme="night"] { --bg: #101B23; --surface: #17252F; --sunk: #1E2F3A; --line: #2B3D49; --control: #6F808C; --ink: #E8EDF0; --ink-2: #B9C5CD; --muted: #93A1AB; --sea: #7FB7C6; --ok: #6FCB9C; --ok-soft: #173327; --focus: #A9DCE8; color-scheme: dark; } /* ---------- Основа ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); } /* место под полосу прокрутки всегда занято: шапка и переключатель не сдвигаются при открытии диалогов (Windows, мышь на Mac) */ html:has(#hdr) { scrollbar-gutter: stable; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } @view-transition { navigation: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; } body.lock { overflow: hidden; } img, svg, video, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } p, ul, ol, dl, dd, figure, blockquote { margin: 0; } p { text-wrap: pretty; } ul, ol { padding: 0; list-style: none; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .num, table { font-variant-numeric: tabular-nums lining-nums; } .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 16px; top: -200px; z-index: 300; padding: 12px 18px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-weight: 600; } .skip:focus { top: 12px; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); } .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .i--s { width: 16px; height: 16px; } /* Текстовые ссылки внутри содержимого */ .lnk, .prose a, .asof a { color: var(--sea); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .lnk:hover, .prose a:hover, .asof a:hover { text-decoration-thickness: 2px; } .more { font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s, color .2s; white-space: nowrap; } .more:hover { color: var(--ink); text-decoration-color: currentColor; } @media (max-width: 560px) { .more { white-space: normal; } } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r-pill); font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s; } .btn--coral { background: var(--coral); color: var(--on-coral); } .btn--coral:hover { background: var(--coral-h); } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--control); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } /* обычная кнопка на фото: коралл только у «Спросить ИИ-гида» и главных действий (решение Лукиана 02.11) */ .btn--white { background: #fff; color: var(--ink); } .btn--white:hover { background: var(--sunk); } .btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; } .btn--block { width: 100%; } .ib { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; transition: background-color .2s; } .ib:hover { background: var(--sunk); color: var(--ink); } /* ---------- Шапка ---------- */ .hdr { position: sticky; top: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s; view-transition-name: hdr; } .hdr--over { position: fixed; left: 0; right: 0; background: transparent; color: #fff; border-color: transparent; } .hdr--over.is-solid { background: var(--bg); color: var(--ink); border-color: var(--line); } .hdr--still, .hdr--still *:not(.modes__on) { transition: none !important; } /* «Бизнес»: сплошная шапка тёмно-синяя, как в макетах палитры B (04.11): белый текст, белый ползунок на полупрозрачной дорожке. Тёмная шапка (над фото и сплошная в «Бизнесе») дальше выбирается парой селекторов .hdr--over:not(.is-solid) и [data-mode="biz"] .hdr */ :root[data-mode="biz"] { --hdr-solid: var(--navy, #0B2340); } [data-mode="biz"] .hdr:not(.hdr--over), [data-mode="biz"] .hdr--over.is-solid { background: var(--hdr-solid); color: #fff; border-color: var(--hdr-solid); } .hdr--over:not(.is-solid) :focus-visible, [data-mode="biz"] .hdr :focus-visible { outline-color: #fff; } .hdr__in { height: var(--hdr-h); display: flex; align-items: center; gap: 24px; } .logo { display: block; padding-block: 3px; font: 800 21px/1 var(--display); letter-spacing: -.035em; white-space: nowrap; } .logo span { opacity: .62; } .wg { display: block; padding-block: 4px 2px; font-size: 13px; line-height: 1.2; opacity: .8; white-space: nowrap; } .wg:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; } /* В шапке только логотип (решение Лукиана 04.11): переключатель сразу за ним, в одном месте на всех страницах обоих разделов. Ширина логотипа задана, а не взята у текста: пока грузится шрифт, переключатель не сдвигается. */ .hdr .logo { flex: none; width: 6.77em; } /* Переключатель разделов, v2 (04.11, после «весь дёргается, не стоит на месте»). Ширины ячеек заданы в em от размера шрифта (по ширине подписей Onest), поэтому место и размер ползунка известны CSS с первого кадра и не зависят от загрузки шрифта. Снизу ссылки с подписями цвета шапки, сверху их копия: белая таблетка с тёмными подписями (.modes__on), обрезанная clip-path по выбранной ячейке. По нажатию меняется data-at, обрезка едет за 0,24 с, и подписи меняют цвет ровно под краем ползунка. Переход на другую страницу начинается, когда ползунок доехал. Пункты на всю высоту дорожки: касание 44 px на телефоне. */ .modes { --m-pad: 20px; --m1: calc(6.55em + 2 * var(--m-pad)); --m2: calc(3.53em + 2 * var(--m-pad)); position: relative; display: inline-grid; grid-template-columns: var(--m1) var(--m2); flex: none; font-size: 14px; border-radius: var(--r-pill); background: var(--sunk); } .hdr--over:not(.is-solid) .modes, [data-mode="biz"] .hdr .modes { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } .modes a, .modes__on > span { grid-row: 1; display: grid; place-items: center; min-width: 0; min-height: 46px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .modes a { position: relative; border-radius: var(--r-pill); -webkit-tap-highlight-color: transparent; } .modes a[data-m="trip"] { grid-column: 1; } .modes a[data-m="biz"] { grid-column: 2; } /* наведение: тихая подложка того же размера, что ползунок; под выбранным пунктом её закрывает ползунок */ .modes a::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; transition: background-color .2s; } @media (hover: hover) { .modes a:hover::before { background: rgba(127, 140, 150, .16); } } .modes a:focus-visible { outline-offset: -2px; } /* ползунок: тень рисует обёртка (drop-shadow идёт по обрезанной форме), сам слой не ловит нажатия */ .modes__thumb { position: absolute; inset: 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(19, 32, 42, .16)); } .modes__on { display: grid; grid-template-columns: var(--m1) var(--m2); height: 100%; background: #fff; color: var(--ink); clip-path: inset(4px calc(var(--m2) + 4px) 4px 4px round var(--r-pill)); transition: clip-path .24s var(--ease-emph) var(--m-delay, 0s); } .modes[data-at="biz"] .modes__on { clip-path: inset(4px 4px 4px calc(var(--m1) + 4px) round var(--r-pill)); } .modes--still .modes__on { transition: none; } /* Переходы между страницами (View Transitions, включены выше через @view-transition). Внутри раздела: шапка (фон, логотип, меню справа) и страница коротко растворяются, ничего не сдвигается. Переключатель и ползунок всегда живые (ниже): ползунок продолжает на новой странице движение, начатое на старой. Смена раздела при «мягком зуме» (по умолчанию) идёт вообще без снимков, см. «Смена разделов» ниже. */ .hdr { view-transition-name: hdr; } .modes { view-transition-name: modes; } .modes__thumb { view-transition-name: modes-thumb; } .mmenu[open] { view-transition-name: mmenu; } /* переход из мобильного меню: страница под меню прячется заранее (её не видно за меню), чтобы не просвечивала, пока меню растворяется */ .is-leaving body > :not(#hdr):not(.mmenu) { visibility: hidden; } /* перед снимком старой страницы site.js закрывает место под сплошной шапкой её цветом: при перетекании в прозрачную шапку над фото не просвечивает то, что было под шапкой (заголовки карточек и т. п.) */ .vt-mask { position: fixed; top: 0; left: 0; right: 0; z-index: 59; pointer-events: none; } ::view-transition-group(hdr), ::view-transition-group(modes), ::view-transition-group(modes-thumb) { animation: none; } /* v3 (05.11): переключатель и ползунок в переходе всегда живые: старый снимок не показывается, новый сразу на месте. Ползунок продолжает на новой странице то же движение (скрипт после переключателя), поэтому снимки ему не нужны. При смене раздела так же ведёт себя вся шапка: новая сразу на месте, без перетекания. */ ::view-transition-old(modes), ::view-transition-old(modes-thumb) { display: none; } ::view-transition-new(modes), ::view-transition-new(modes-thumb) { animation: none; } :root:active-view-transition-type(to-biz, to-trip)::view-transition-old(hdr) { display: none; } :root:active-view-transition-type(to-biz, to-trip)::view-transition-new(hdr) { animation: none; } ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(hdr), ::view-transition-new(hdr), ::view-transition-old(mmenu) { animation-duration: .18s; } /* у групп hdr и modes анимация выключена, и их снимки наследовали бы fill-mode: none: старая шапка возвращалась бы после конца своего перетекания, пока идут другие анимации (три кадра старой шапки, замер 04.11) */ ::view-transition-image-pair(hdr), ::view-transition-old(hdr), ::view-transition-new(hdr), ::view-transition-image-pair(modes), ::view-transition-image-pair(modes-thumb) { animation-fill-mode: both; } ::view-transition-group(root) { animation-duration: .18s; } @keyframes vt-show { from { opacity: 0; } } /* порядок слоёв задаём сами: страница и обложка внизу, шапка над ними, переключатель над шапкой, растворяющееся меню над всем (группа, которой нет на старой странице, иначе встала бы поверх всех) */ ::view-transition-group(hdr) { z-index: 1; } ::view-transition-group(modes) { z-index: 2; } ::view-transition-group(modes-thumb) { z-index: 3; } ::view-transition-group(mmenu) { z-index: 4; } /* ---------- Смена разделов: три варианта эффекта (04.11, Лукиан выбирает вживую) ---------- Включаются ?vt=sdvig|foto|zum, выбор живёт до закрытия вкладки (скрипт в base.html.j2), по умолчанию «мягкий зум» (выбор Лукиана, 05.11). Работают только когда сменился раздел (тип to-biz или to-trip); внутри раздела остаётся короткое растворение. Шапка и переключатель во всех вариантах как выше. Анимируются только transform и opacity. Все длительности и кривые здесь, подкручиваются одной строкой. */ :root { --vt-ease: cubic-bezier(.2, .8, .2, 1); --vt-shift: .48s; --vt-shift-x: 10vw; --vt-photo: .65s; --vt-photo-out: .15s; --vt-photo-in: .3s; --vt-photo-delay: .22s; --vt-zoom-ease: cubic-bezier(.16, 1, .3, 1); --vt-enter: .22s; --vt-enter-scale: 1.012; --vt-enter-op: .75; --ph-in: .3s; } @keyframes vt-hide { to { opacity: 0; } } @keyframes vt-keep { 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes vt-x-to-l { to { transform: translateX(calc(-1 * var(--vt-shift-x))); } } @keyframes vt-x-to-r { to { transform: translateX(var(--vt-shift-x)); } } @keyframes vt-x-from-r { from { transform: translateX(var(--vt-shift-x)); } } @keyframes vt-x-from-l { from { transform: translateX(calc(-1 * var(--vt-shift-x))); } } /* Старая страница стоит непрозрачной, новая проявляется поверх неё, и только в конце старая исчезает: между ними не просвечивает белый холст (иначе на тёмных обложках в середине перехода белая дымка, замер 04.11). Где старая уже уехала (край при сдвиге и зуме), виден фон перехода: основной цвет новой страницы, тёмный у обложек, белый у остальных. */ :root:active-view-transition-type(to-biz, to-trip)::view-transition-old(root), :root:active-view-transition-type(to-biz, to-trip)::view-transition-new(root) { mix-blend-mode: normal; } :root::view-transition { background: var(--bg); } :root:has(.hdr--over)::view-transition { background: var(--photo); } :root[data-mode="biz"]:has(.hdr--over)::view-transition { background: var(--navy, #0B2340); } /* 1. «Сдвиг»: «Путешествия» слева, «Бизнес» справа. В «Бизнес» старая страница уходит влево, новая приходит справа */ :root[data-vt="sdvig"]:active-view-transition-type(to-biz)::view-transition-old(root) { animation: vt-x-to-l var(--vt-shift) var(--vt-ease) both, vt-keep var(--vt-shift) linear both; } :root[data-vt="sdvig"]:active-view-transition-type(to-biz)::view-transition-new(root) { animation: vt-x-from-r var(--vt-shift) var(--vt-ease) both, vt-show calc(var(--vt-shift) * .6) var(--ease) calc(var(--vt-shift) * .12) both; } :root[data-vt="sdvig"]:active-view-transition-type(to-trip)::view-transition-old(root) { animation: vt-x-to-r var(--vt-shift) var(--vt-ease) both, vt-keep var(--vt-shift) linear both; } :root[data-vt="sdvig"]:active-view-transition-type(to-trip)::view-transition-new(root) { animation: vt-x-from-l var(--vt-shift) var(--vt-ease) both, vt-show calc(var(--vt-shift) * .6) var(--ease) calc(var(--vt-shift) * .12) both; } /* 2. «Растворение фото»: фото обложки перетекает в фото новой обложки (имена ставит скрипт в base.html.j2, только если обложка наверху), текст старой обложки и страница быстро гаснут, новые проявляются с задержкой. Старое фото стоит, пока новое проявляется поверх: без провала в середине */ ::view-transition-group(cover-photo) { animation: none; } ::view-transition-old(cover-photo), ::view-transition-new(cover-photo) { height: 100%; object-fit: cover; mix-blend-mode: normal; } ::view-transition-image-pair(cover-photo) { animation-fill-mode: both; } ::view-transition-old(cover-photo) { animation: vt-keep var(--vt-photo) linear both; } ::view-transition-new(cover-photo) { animation: vt-show var(--vt-photo) var(--ease) both; } ::view-transition-old(cv-trip-0), ::view-transition-old(cv-trip-1), ::view-transition-old(cv-trip-2), ::view-transition-old(cv-biz-0), ::view-transition-old(cv-biz-1), ::view-transition-old(cv-biz-2) { animation: vt-hide var(--vt-photo-out) linear both; } ::view-transition-new(cv-trip-0), ::view-transition-new(cv-trip-1), ::view-transition-new(cv-trip-2), ::view-transition-new(cv-biz-0), ::view-transition-new(cv-biz-1), ::view-transition-new(cv-biz-2) { animation: vt-show var(--vt-photo-in) var(--ease) var(--vt-photo-delay) both; } :root[data-vt="foto"]:active-view-transition-type(to-biz, to-trip)::view-transition-old(root) { animation: vt-hide var(--vt-photo-out) linear both; } :root[data-vt="foto"]:active-view-transition-type(to-biz, to-trip)::view-transition-new(root) { animation: vt-show var(--vt-photo-in) var(--ease) var(--vt-photo-delay) both; } /* 3. «Мягкий зум» v3 (05.11, «как швейцарские часы»): при смене раздела снимков нет, заготовленная страница показывается сразу (ползунок продолжает движение), её содержимое под шапкой коротко «садится»: 1,012 → 1 и прозрачность 0,75 → 1. Под содержимым на это время основной цвет обложки, поэтому проявление идёт из тёмного, без светлой вспышки. */ html.vt-enter main { animation: vt-enter var(--vt-enter) var(--vt-zoom-ease) backwards; } html.vt-enter body { overflow-x: clip; } html.vt-enter:has(.hdr--over) body { background: var(--photo); } html.vt-enter[data-mode="biz"]:has(.hdr--over) body { background: var(--navy, #0B2340); } @keyframes vt-enter { from { transform: scale(var(--vt-enter-scale)); opacity: var(--vt-enter-op); } } /* Картинка обложки не «выскакивает»: если она готова только после первого кадра (страница не была заготовлена заранее), она проявляется за 0,3 с после decode(). Без JavaScript видна сразу (класс ph-js ставит скрипт в base.html.j2) */ html.ph-js [data-cover] img.ph-wait { opacity: 0; } html.ph-js [data-cover] img.ph-fade { animation: vt-show var(--ph-in) var(--ease) both; } .nav { margin-left: auto; display: flex; gap: 4px; } .nav a { padding: 10px; border-radius: var(--r-sm); font-weight: 500; font-size: 15px; white-space: nowrap; transition: background-color .2s; } .nav a:hover { background: var(--sunk); } .hdr--over:not(.is-solid) .nav a:hover, [data-mode="biz"] .hdr .nav a:hover { background: rgba(255, 255, 255, .14); } .nav a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } /* кнопка справа (site.nav_cta): с ней пункты меню чуть плотнее, чтобы всё влезло в 1200 px рядом с переключателем */ .hdr__cta { flex: none; white-space: nowrap; } .hdr--cta .nav { gap: 2px; } .hdr--cta .nav { gap: 2px; } /* логотип «Шаг» шире текстового (226 px): меню «Бизнеса» с кнопкой ужимаем только справа, чтобы логотип и переключатель стояли на месте */ .hdr--cta .nav a { padding: 10px 6px; font-size: 14px; } .hdr--cta .hdr__cta { padding-inline: 18px; } .mmenu__cta { justify-self: stretch; } /* Вход в кабинет (флаг modules.kabinet, 07.11), только «Бизнес». В 1200 px рядом с логотипом и переключателем места нет: круглая кнопка со значком, место берём у меню и у «Подключиться», логотип и переключатель стоят как без неё. На узких экранах вход в мобильном меню, кнопкой с текстом */ .hdr--login .nav { gap: 0; } .hdr--login .nav a { padding: 10px 5px; font-size: 13.5px; } .hdr--login .hdr__cta { padding-inline: 14px; } .hdr__login { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-inline: -12px -14px; border-radius: 50%; color: inherit; background: var(--sunk); transition: background-color .2s; } .hdr__login .i { width: 18px; height: 18px; } [data-mode="biz"] .hdr .hdr__login { background: rgba(255, 255, 255, .14); } [data-mode="biz"] .hdr .hdr__login:hover { background: rgba(255, 255, 255, .26); } .mmenu__login { justify-self: stretch; gap: 8px; } .mmenu__login .i { width: 18px; height: 18px; } .burger { display: none; margin-left: auto; color: inherit; background: var(--sunk); } .hdr--over:not(.is-solid) .burger, [data-mode="biz"] .hdr .burger { background: rgba(255, 255, 255, .14); } /* Мобильное меню: нативный */ .mmenu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); border: 0; background: var(--bg); color: var(--ink); overflow-y: auto; } .mmenu::backdrop { background: transparent; } .mmenu[open] { display: grid; align-content: start; gap: 28px; } .mmenu__top { display: flex; align-items: center; justify-content: space-between; min-height: 54px; } .mmenu__group { display: grid; } .mmenu__label { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 4px; } .mmenu__group a { padding: 6px 0; font: 800 30px/1.15 var(--display); letter-spacing: -.035em; } .mmenu__group a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } .mmenu__group--alt a { padding: 4px 0; font-size: 21px; letter-spacing: -.02em; } .mmenu__small { display: grid; gap: 2px; padding-top: 20px; border-top: 1px solid var(--line); } .mmenu__small a { padding: 8px 0; font-size: 16px; font-weight: 500; color: var(--ink-2); } /* ---------- Обложка «Путешествия»: сезонные фото, овальное поле, окно разговора (итерации 1 и 1б, 02.11) ---------- */ .cover { position: relative; min-height: max(640px, min(100svh, 940px)); display: grid; align-items: center; color: #fff; overflow: hidden; isolation: isolate; background: var(--photo); } .cover__slides { position: absolute; inset: 0; z-index: -2; } .cover__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); } .cover__slide.on { opacity: 1; } /* следующие фото грузятся только перед показом (home.js ставит .pre): на телефоне обложка не тянет все четыре фото сразу */ html.js .cover__slide:not(.on):not(.pre) picture { display: none; } .cover__slide picture, .cover__ph { display: block; width: 100%; height: 100%; object-fit: cover; } .cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--shade), .66) 0%, rgba(var(--shade), .24) 52%, rgba(var(--shade), .08) 100%), linear-gradient(180deg, rgba(var(--shade), .5) 0%, rgba(var(--shade), 0) 24%, rgba(var(--shade), 0) 70%, rgba(var(--shade), .55) 100%); } .cover__in { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: calc(var(--hdr-h) + 32px) 88px; } /* Размеры от ширины колонки и высоты экрана: на компьютере заголовок всегда в одну строку (замечание Лукиана 02.11: MacBook и монитор при масштабе 110%) */ .cover__t { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } .cover h1 { color: #fff; font-size: clamp(48px, 7.2vw, 104px); font-size: clamp(48px, min(14.4cqi, 12.6svh), 112px); line-height: .92; letter-spacing: -.05em; white-space: nowrap; } .cover__sub { margin-top: clamp(16px, 2.8svh, 26px); max-width: 31em; font-size: clamp(16px, min(1.3vw, 2.25svh), 19px); line-height: 1.5; color: rgba(255, 255, 255, .94); } .cover__foot { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cover__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; color: rgba(255, 255, 255, .78); } .cover__cap a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; } .cover__cap a:hover { text-decoration-color: #fff; } .cover__cap .nw { white-space: nowrap; } /* Полоски слайдов: заполнение показывает, сколько осталось до смены фото */ .dots { display: flex; align-items: center; gap: 6px; } .dot { width: 40px; height: 32px; padding: 0; border: 0; background: none; display: grid; align-items: center; cursor: pointer; } .dot i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .38); overflow: hidden; } .dot i::after { content: ""; display: block; width: 0; height: 100%; background: #fff; } .dot.done i::after { width: 100%; } .dot.on i::after { animation: slide-fill var(--slide, 7s) linear forwards; } .dots.paused .dot.on i::after { animation-play-state: paused; } .dots.still .dot.on i::after { animation: none; width: 100%; } @keyframes slide-fill { to { width: 100%; } } .pause { width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; } .pause:hover { background: rgba(255, 255, 255, .28); } .send { flex: none; width: 52px; height: 52px; border: 0; border-radius: var(--r-sm); background: var(--coral); color: var(--on-coral); display: grid; place-items: center; transition: background-color .2s; } .send:hover { background: var(--coral-h); } /* Овальное поле гида (решение Лукиана 03.11: «как в первых версиях») */ .pill { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: 580px; min-height: 60px; margin-top: clamp(22px, 4svh, 36px); padding: 6px 6px 6px 24px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); } .pill textarea { width: 100%; height: 28px; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; font: 400 17px/28px var(--text); color: var(--ink); } .pill textarea::placeholder { color: var(--muted); opacity: 1; } .pill:focus-within { outline: 2px solid #fff; outline-offset: 3px; } .pill__go { width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: var(--on-coral); transition: background-color .2s; } .pill__go:hover { background: var(--coral-h); } /* Примеры вопросов проявляются в пустом поле: мягкий край идёт слева направо, затем пример гаснет (решение Лукиана 02.11) */ .ghost { position: absolute; left: 24px; right: 64px; top: 50%; height: 28px; margin-top: -14px; pointer-events: none; color: var(--muted); font: 400 17px/28px var(--text); white-space: nowrap; overflow: hidden; } .ghost__t { display: inline-block; transform: translate(calc(var(--s, 0px) * -1), 0); -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p, 0px) - 28px), transparent var(--p, 0px)); mask-image: linear-gradient(90deg, #000 calc(var(--p, 0px) - 28px), transparent var(--p, 0px)); } .ghost__c { position: absolute; left: 0; top: 4px; width: 2px; height: 20px; border-radius: 1px; background: var(--ink-2); transform: translateX(calc(var(--c, 0px) - var(--s, 0px))); } .ghost.hold .ghost__c { animation: caret 1.06s steps(1) infinite; } .ghost.shifted { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px); mask-image: linear-gradient(90deg, transparent 0, #000 18px); } .ghost.out .ghost__t { opacity: 0; transform: translate(calc(var(--s, 0px) * -1), -5px); transition: opacity .26s var(--ease), transform .26s var(--ease); } .ghost.out .ghost__c { opacity: 0; } @keyframes caret { 50% { opacity: 0; } } .hchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .hchip { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .2s, color .2s; } .hchip:hover { background: #fff; color: var(--ink); } .promise { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .9); } .promise li { display: inline-flex; align-items: center; gap: 6px; } .promise .i { width: 16px; height: 16px; stroke-width: 2.25; } /* Вернувшийся человек видит «Продолжить» вместо обещаний (вариант Б, 02.11) */ .cover__t.is-back .promise { display: none; } .hcont { justify-self: start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; margin-top: 18px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); color: #fff; font-size: 13px; font-weight: 600; transition: background-color .2s, color .2s; } .hcont:hover { background: #fff; color: var(--ink); } .hcont span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Отметки в «Путешествиях»: цветной текст без плашки (решение Лукиана 02.11, переносим по страницам раздела) */ .flag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .flag .i { width: 15px; height: 15px; stroke-width: 2.4; } .flag--ok { color: var(--ok); } .flag--member { color: var(--sea); } /* Окно разговора: без JavaScript виден весь разговор; с ним реплики появляются по меткам времени один раз */ .story { display: grid; min-width: 0; } .chatwin { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: clamp(380px, calc(100svh - var(--hdr-h) - 180px), 560px); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--sh-3); overflow: hidden; } .chatwin__bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); font-size: 14px; } .chatwin__bar > span:last-of-type { margin-left: auto; font-size: 13px; color: var(--muted); } .ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 11px/1 var(--display); } .cbtn { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); transition: background-color .2s; } .cbtn:hover { background: var(--line); color: var(--ink); } .chatwin__feed { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%); } .chatwin__feed::-webkit-scrollbar { display: none; } .chatwin__feed:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .chatwin__foot { padding: 9px 16px 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; color: var(--muted); } .st { display: block; } .story.anim .st:not(.on) { display: none; } .story.anim .st.on { animation: st-in .4s var(--ease) both; } .story.paused .st.on { animation-play-state: paused; } @keyframes st-in { from { opacity: 0; transform: translateY(6px); } } .st-u { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--sunk); font-weight: 500; } .st-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .st-status .i { color: var(--sea); } .st-g { display: grid; gap: 10px; max-width: 96%; } .st-p { display: block; } .st-hotel { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); } .st-hotel b { font-size: 15px; } .st-hotel small { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .st-hotel .row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; } /* фото гостиницы из реестра Росаккредитации (решение Лукиана 02.11) */ .st-hotel--ph { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px; } .st-hotel--ph picture, .st-hotel__ph { display: block; width: 88px; height: 66px; border-radius: 8px; object-fit: cover; background: var(--photo); } .st-hotel__t { display: grid; gap: 3px; min-width: 0; } .st-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .st-place { display: grid; gap: 6px; font-size: 13px; font-weight: 600; } .st-place img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--photo); } .cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 2px; padding: 0 4px; border-radius: var(--r-xs); background: var(--sea-soft); color: var(--sea); font: 700 11px/1 var(--text); vertical-align: 2px; } .st-src { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .st-src span { display: flex; align-items: center; gap: 6px; } .st-src span:last-child { padding-left: 24px; } .sbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm); background: rgba(var(--shade), .34); color: #fff; font-size: 13px; font-weight: 600; } .sbtn:hover { background: rgba(255, 255, 255, .18); } .sbtn--light { border-color: var(--line); background: var(--surface); color: var(--ink-2); } .sbtn--light:hover { background: var(--sunk); } /* ---------- Секции ---------- */ .sx { padding-top: var(--sec); } .head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); } .head h2, .h-big { font-size: clamp(36px, 4.6vw, 64px); line-height: 1; letter-spacing: -.045em; } .head p { margin-top: 12px; max-width: 56ch; color: var(--ink-2); font-size: 17px; } .lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 46ch; } .asof { font-size: 13px; line-height: 1.5; color: var(--muted); } /* ---------- Направления ---------- */ .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(300px, 29vw, 400px); gap: 16px; } .tile { grid-column: span 5; position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; background: var(--photo); } .tile:nth-child(4n + 1), .tile:nth-child(4n + 4) { grid-column: span 7; } .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), 0) 36%, rgba(var(--shade), .74) 100%); transition: background-color .3s var(--ease); } .tile:hover::after { background-color: rgba(var(--shade), .14); } .tile__b { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 8px; } .tile h3 { font-size: clamp(28px, 2.7vw, 42px); line-height: 1; color: #fff; } .tile:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .tile__d { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .92); max-width: 42ch; } .tile__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: rgba(255, 255, 255, .88); } .tile__meta b { color: #fff; font-weight: 600; } /* ---------- «Направления»: регионы с комитетами по туризму при палатах (решение Лукиана 03.11) ---------- Одна сетка по алфавиту, округ на карточке (вариант 2). Карточка ведёт на страницу комитета в «Бизнесе» с приглашением. */ .rg-sec { padding-block: var(--sec); } .rg-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(24px, 3vw, 36px); } .rg-h h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.04em; } .rg-lead { max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); } .rg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .rg { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; color: #fff; isolation: isolate; background: var(--photo); } .rg picture, .rg img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; } .rg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), 0) 38%, rgba(var(--shade), .8) 100%); transition: background-color .3s var(--ease); } .rg__b { position: absolute; left: 16px; right: 14px; bottom: 14px; display: grid; gap: 3px; } .rg__b b { font: 800 20px/1.12 var(--display); letter-spacing: -.02em; hyphens: auto; } .rg__b small { overflow: hidden; font-size: 13px; color: rgba(255, 255, 255, .86); white-space: nowrap; text-overflow: ellipsis; } .rg__go { position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease); } .rg:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } @media (hover: hover) { .rg:hover::after, .rg:focus-visible::after { background-color: rgba(var(--shade), .22); } .rg:hover .rg__go, .rg:focus-visible .rg__go { opacity: 1; transform: none; } } .rg-all { margin-top: clamp(28px, 3vw, 40px); } /* П3 (план 03.11): поиск по направлениям. Поле как в «Проверке», под ним округа; найденное — той же сеткой карточек */ .nsr { display: grid; gap: 14px; max-width: 760px; margin-top: clamp(24px, 3vw, 32px); } .nsr__f { display: grid; gap: 8px; } .nsr__l { font-size: 15px; font-weight: 600; color: var(--ink-2); } .pc-f .nsr__x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); } .pc-f .nsr__x:hover { background: var(--sunk); color: var(--ink); } .nsr__in input::-webkit-search-cancel-button { appearance: none; display: none; } .nsr__fo button { min-height: 36px; padding: 0 12px; font-size: 13.5px; } .nres { padding-top: 0; } .nres__count { margin-bottom: 16px; font-weight: 600; color: var(--ink-2); } .rg__b .nres__why { color: #fff; font-weight: 600; white-space: normal; } .nres__empty { max-width: 640px; } .nres__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; } .nres__acts .more { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; } @media (max-width: 760px) { .fchips.nsr__fo { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; } .nsr__fo::-webkit-scrollbar { display: none; } .nsr__fo button { flex: none; } } /* ---------- Страница региона с комитетом по туризму (пример: Республика Коми, 03.11, на согласование) ---------- Фото на весь экран под прозрачной шапкой, коротко о регионе, что посмотреть, события, компании из реестров и комитета, комитет и приглашение, перед поездкой, источники. */ .rgh { position: relative; min-height: clamp(520px, 78svh, 760px); display: grid; align-items: end; padding-top: var(--hdr-h); color: #fff; isolation: isolate; overflow: hidden; background: var(--photo); } .rgh picture, .rgh__ph { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; } .rgh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), .5) 0%, rgba(var(--shade), 0) 26%); } /* затемнение снизу только под текстом (07.11): начинается чуть выше заголовка и идёт до низа фото, поэтому заголовок, подзаголовок и подпись проходят AA на любом кадре и ширине, а верх фото остаётся чистым */ .rgh__in { position: relative; } .rgh__in::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -72px; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--shade), 0) 0, rgba(var(--shade), .52) 72px, rgba(var(--shade), .64) 55%, rgba(var(--shade), .76) 100%); } .rgh__in { display: grid; gap: 14px; width: 100%; padding-bottom: clamp(64px, 8vw, 96px); } /* ссылка возврата вверху фото, под прозрачной шапкой (07.11) */ .rgh__top { position: absolute; top: var(--hdr-h); left: 0; right: 0; } /* фото бывает светлым (небо, снег): под ссылкой тёмная подложка, белый текст по правилу AA на любом кадре */ .rgh__top .crumbs__back { margin-left: 0; padding-left: 8px; background: rgba(var(--shade), .66); } .rgh__top .crumbs__back:hover { background: rgba(var(--shade), .8); } .rgh h1 { max-width: 12ch; font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: -.045em; color: #fff; } .rgh__line { max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .92); } .rgh__cap { position: absolute; left: 0; right: 0; bottom: 16px; font-size: 12px; color: rgba(255, 255, 255, .9); } /* предупреждение о безопасности под обложкой (Белгородская область) */ .rgn { display: flex; gap: 12px; align-items: flex-start; margin-top: clamp(24px, 3vw, 36px); padding: 16px 20px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--ink); font-size: 15.5px; line-height: 1.5; } .rgn .i { margin-top: 2px; color: var(--warn); } .rgn + .rgk { padding-top: clamp(28px, 3vw, 40px); } .rgk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(48px, 6vw, 80px); } .rgk__lead { max-width: 42ch; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; } .rgk__f { margin: 0; padding: 6px 24px; border-radius: var(--r-lg); background: var(--tint, var(--sunk)); } .rgk__f div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; padding: 14px 0; } .rgk__f div + div { border-top: 1px solid var(--line); } .rgk__f dt { font-size: 14px; color: var(--muted); } .rgk__f dd { margin: 0; font-size: 15px; font-weight: 600; } .rgk__p { margin-top: 12px; padding-inline: 4px; font-size: 14px; color: var(--ink-2); } .rgs { padding-top: var(--sec); } .rgs__h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(24px, 3vw, 36px); } .rgs__h h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.04em; } .rgs__h p { max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .rgp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; margin: 0; padding: 0; list-style: none; } .rgp__i { display: grid; align-content: start; gap: 6px; } .rgp__i picture, .rgp__i img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--photo); } .rgp__i picture { margin-bottom: 10px; } /* место без свободного фото: плитка того же размера, чтобы ряд не съезжал */ .rgp__np { display: grid; place-content: center; justify-items: center; gap: 8px; aspect-ratio: 4 / 3; margin-bottom: 10px; padding: 16px; border-radius: var(--r-md); background: var(--tint, var(--sunk)); color: var(--sea); font-size: 14px; text-align: center; } .rgp__np .i { width: 28px; height: 28px; } .rgp__i h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; } .rgp__w { font-size: 14px; color: var(--muted); } .rgp__i p { font-size: 15.5px; line-height: 1.5; } .rgp__i .rgp__n { display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); } .rgp__n .i { margin-top: 3px; color: var(--sea); } .rgp__s, .rge__s a { justify-self: start; font-size: 13.5px; color: var(--sea); text-decoration: underline; text-decoration-color: var(--sea-soft); text-decoration-thickness: 2px; text-underline-offset: 4px; } .rgp__s:hover, .rge__s a:hover { text-decoration-color: currentColor; } .rge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; } .rge__i { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); } .rge__d { display: grid; place-content: center; width: 76px; height: 76px; border-radius: var(--r-md); background: var(--sea-soft); color: var(--sea); text-align: center; } .rge__d b { font: 800 28px/1 var(--display); letter-spacing: -.03em; } .rge__d--w b { font-size: 16px; letter-spacing: -.01em; } .rge__d small { margin-top: 4px; font-size: 12.5px; font-weight: 600; } .rge__i h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; } .rge__w { margin-top: 2px; font-size: 14px; color: var(--muted); } .rge__i p { font-size: 15px; line-height: 1.5; } .rge__i .rge__s { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13.5px; } .rge__u { color: var(--muted); } .rgc-h { margin: 0 0 14px; font-size: 20px; letter-spacing: -.02em; } * + .rgc-h { margin-top: clamp(32px, 4vw, 48px); } .rgc__n { justify-self: start; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 4px; } .rgc__n:hover { text-decoration-color: currentColor; } .rgc__m { font-size: 14px; line-height: 1.45; color: var(--ink-2); } .rgc__f { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; } /* туроператоры: логотип с сайта компании (решение Лукиана 04.11), если логотипа нет, первая буква названия */ .rco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .rco__i { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); } .rco__logo { display: grid; place-items: center; width: 96px; height: 72px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; } .rco__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .rco__logo b { font: 800 28px/1 var(--display); color: var(--sea); } .rco__b { display: grid; gap: 3px; min-width: 0; } /* гостиницы: фото из реестра, название, категория и номер */ .rho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; margin: 0; padding: 0; list-style: none; } .rho__i { display: grid; align-content: start; gap: 4px; } .rho__i picture, .rho__i img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--photo); } .rho__i picture { margin-bottom: 8px; } .rho__cr { margin-top: 12px; font-size: 13px; color: var(--muted); } .rgo { margin-top: clamp(32px, 4vw, 48px); padding-top: 4px; } .rgo .rgc-h { margin-top: 0; } .rgo__l { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 14.5px; color: var(--muted); } .rgo__l span { padding: 6px 12px; border-radius: var(--r-sm); background: var(--sunk); } .rgo__l b { font-weight: 600; color: var(--ink); } .rgo__a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 16px; font-size: 15px; } .rgi { margin-top: var(--sec); padding-block: clamp(48px, 6vw, 80px); background: var(--tint-2, var(--sunk)); } .rgi__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .rgi h2 { margin-bottom: 14px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; } .rgi__k > p { font-size: 17px; line-height: 1.5; } .rgi__l { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); } .rgi__a { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 15px; } .rgi__c { padding: 28px; border-radius: var(--r-lg); background: #fff; } .rgi__c h3 { font-size: 22px; letter-spacing: -.02em; } .rgi__c p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .rgi__c .btn { margin-top: 20px; } .rgt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .rgt__i { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); transition: border-color .2s; } .rgt__i .i { grid-row: 1 / 3; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--sea-soft); color: var(--sea); } .rgt__i--gid .i { background: var(--coral-soft); color: var(--coral); } .rgt__i b { font-size: 16px; } .rgt__i span { font-size: 14px; color: var(--muted); } .rgt__i:hover { border-color: var(--ink); } .rgsrc { margin-top: clamp(48px, 6vw, 72px); } .rgsrc h2 { margin-bottom: 14px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; } .rgsrc .asof { margin-top: 14px; } @media (max-width: 1080px) { .rgp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rco { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rho { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rgt { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .rgh { min-height: 86svh; } .rgk, .rgi__in, .rge, .rco { grid-template-columns: minmax(0, 1fr); } .rco__i { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 14px; } .rco__logo { width: 80px; height: 60px; } /* гостиницы на телефоне лентой, как места */ .rho { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .rho::-webkit-scrollbar { display: none; } .rho__i { scroll-snap-align: start; } /* на телефоне места лентой, чтобы страница не была бесконечной */ .rgp { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .rgp::-webkit-scrollbar { display: none; } .rgp__i { scroll-snap-align: start; } .rge__i { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; } .rge__d { width: 64px; height: 64px; } .rge__d b { font-size: 24px; } .rge__d--w b { font-size: 14px; } .rgi__c { padding: 22px; } } @media (max-width: 1080px) { .rg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .rg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rg { aspect-ratio: 3 / 4; } .rg__b { left: 12px; right: 10px; bottom: 12px; } .rg__b b { font-size: 16px; } .rg__b small { font-size: 12px; white-space: normal; } } /* ---------- Ответы гида: гид и страницы регионов ---------- */ .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; } .bub { max-width: 86%; padding: 12px 16px; font-size: 15px; line-height: 1.5; } .bub--u { justify-self: end; background: var(--ink); color: #fff; border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md); } .ans { justify-self: start; max-width: 94%; display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); background: var(--sunk); font-size: 15px; line-height: 1.55; } .ans h3 { font: 600 15px/1.4 var(--text); letter-spacing: 0; } .ans ul.dash { display: grid; gap: 6px; } .ans ul.dash li { position: relative; padding-left: 18px; } .ans ul.dash li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 2px; background: var(--control); } .ans ol.steps { display: grid; gap: 6px; padding-left: 22px; list-style: decimal; } .ans ol.steps li::marker { font-weight: 600; color: var(--ink-2); } .ans a { color: var(--sea); text-decoration: underline; text-underline-offset: 2px; } .ans-places { display: grid; gap: 8px; } .ans-places b { font-weight: 600; } .ans-reg { display: grid; gap: 6px; } .ans-reg li, .ans-co { display: grid; justify-items: start; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); } .ans-reg li b, .ans-co b { font-weight: 600; } .ans-reg li span, .ans-co > span:not(.status) { font-size: 14px; line-height: 1.45; color: var(--ink-2); } .srcs { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); } .srcs b { font-weight: 600; color: var(--ink-2); } .srcs a { color: var(--sea); text-decoration: underline; text-underline-offset: 2px; } .srcs ol { padding-left: 18px; list-style: decimal; } .nextq { display: flex; flex-wrap: wrap; gap: 6px; } .nextq a, .nextq button { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink); } .nextq a:hover, .nextq button:hover { border-color: var(--control); } .mini { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); } .mini input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--control); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; } .mini input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .mini .send { width: 44px; height: 44px; } /* ---------- Главная: «раньше / теперь», как работает, маршруты, правила, вопросы, поле ещё раз ---------- */ /* Как туристы относятся к ИИ: одна полоса из трёх частей, подписи прямо на полосе и в легенде (итерация 2, 02.11). Порядок от «пользуются» к «не готовы»: один оттенок моря от тёмного к светлому. Движение «Линия» и выделение части — ниже (П1, 03.11). */ /* Ритм главной «Путешествий»: белые блоки и светло-голубые полосы у «Как работает» и «Куда поехать» (палитра «Море», 03.11) */ .ais { padding-block: var(--sec); } .ais__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: end; } .ais h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; } .ais__lead { max-width: 34ch; margin-top: 18px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-2); } .bar { display: grid; gap: 14px; margin: 0; } /* П1 (план 03.11): строка над полосой — название графика; при наведении, фокусе или касании — число и короткое название части */ .bar__cap { position: relative; height: 28px; font-size: 15px; line-height: 28px; color: var(--muted); } .bar__cap-def, .bar__cap-on { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .2s var(--ease), transform .2s var(--ease); } .bar__cap-on { opacity: 0; transform: translateY(6px); color: var(--ink); } .bar__cap-on b { font: 800 19px/28px var(--display); letter-spacing: -.02em; } .bar.is-sel .bar__cap-def { opacity: 0; transform: translateY(-6px); } .bar.is-sel .bar__cap-on { opacity: 1; transform: none; } .bar__track { position: relative; display: flex; gap: 2px; height: 72px; } .bar__s { appearance: none; margin: 0; border: 0; cursor: pointer; display: flex; align-items: flex-end; min-width: 0; padding: 0 0 10px 12px; border-radius: 4px; font: 800 clamp(22px, 2.2vw, 30px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: left; transition: opacity .2s var(--ease); } .bar__s:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .bar__line { position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 1px; background: var(--control); transform-origin: left; } /* Выделение части: остальные части и пункты легенды гаснут. Без JavaScript то же делает наведение мыши */ .bar__track:hover .bar__s:not(:hover), .bar.is-sel .bar__s:not(.on) { opacity: .4; } .bar__leg li { transition: opacity .2s var(--ease); } .bar.is-sel .bar__leg li:not(.on) { opacity: .5; } .bar__s--1 { background: var(--dv-1); color: #fff; } .bar__s--2 { background: var(--dv-2); color: var(--ink); } .bar__s--3 { background: var(--dv-3); color: var(--ink); } .bar__s--rest { background: transparent; box-shadow: inset 0 0 0 1px var(--line); } .bar__leg { display: grid; gap: 10px; font-size: 15px; line-height: 1.4; } .bar__leg li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; } .bar__k { width: 14px; height: 14px; margin-top: 3px; padding: 0; border-radius: 3px; } .bar__src { font-size: 13px; line-height: 1.45; color: var(--muted); } .bar__src a { color: var(--sea); text-decoration: underline; text-underline-offset: 2px; } /* Цель проекта и кнопка гида прямо в блоке; плавающая кнопка внизу экрана на главной убрана (решение Лукиана 02.11) */ .ais__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; border-top: 1px solid var(--line); } .ais__goal { max-width: 60ch; font-size: 17px; line-height: 1.5; } .ais__goal b { font-weight: 700; } .ais__cta .btn { flex: none; } /* Движение «Линия» (DESIGN.md §2 п. 1): один раз, около 1,5 с. Прочерчивается линия, части по очереди поднимаются от неё, проценты досчитываются, затем пояснения. .pre ставит home.js до появления блока, .go — в момент появления. Без JavaScript и при «уменьшить движение» сразу готовый вид. */ .bar.pre .bar__line { transform: scaleX(0); } .bar.pre .bar__s { clip-path: inset(100% 0 0 0); } .bar.pre .bar__leg li, .bar.pre .bar__src, .bar.pre .bar__cap { opacity: 0; } .bar.go .bar__line { transition: transform .5s var(--ease); } .bar.go .bar__s { transition: clip-path .45s var(--ease-emph) var(--d, 0s), opacity .2s var(--ease); } .bar.go .bar__s:nth-child(1) { --d: .4s; } .bar.go .bar__s:nth-child(2) { --d: .55s; } .bar.go .bar__s:nth-child(3) { --d: .7s; } .bar.go .bar__s:nth-child(4) { --d: .85s; } .bar.go .bar__leg li, .bar.go .bar__src, .bar.go .bar__cap { transition: opacity .35s var(--ease) 1.15s; } /* ---------- Как работает ИИ-гид: ролик «одна поездка, четыре умения» (итерация 3, вариант A, решение Лукиана 02.11) ---------- Шаги слева заполняются по ходу ролика, справа окно гида: разговор и ответ. Узкое окно (телефон): ответ нижней шторкой. Без JavaScript (нет html.js) виден последний кадр: все реплики и последняя панель. */ .hw { padding-block: var(--sec); background: var(--tint, var(--bg)); } .hw__h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; } .hw h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.045em; } .hw__lead { max-width: 44ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); } .hw__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(28px, 3.5vw, 44px); } .hw__src { display: flex; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--ink-2); } .hw__src .i { flex: none; width: 18px; height: 18px; color: var(--ok); } .hw__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; } .hw__cta--m { display: none; } /* шаги-умения: рельс с номерами; на шаг можно нажать, ролик перейдёт к нему */ .hs { display: grid; gap: 2px; } .hs__i { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .hs__i:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } .hs__n { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sea); color: #fff; font: 800 13px/1 var(--display); transition: background-color .3s, color .3s, box-shadow .3s; } .hs__t { display: grid; gap: 3px; padding-top: 5px; } .hs__t b { font: 800 18px/1.2 var(--display); letter-spacing: -.02em; transition: color .3s; } .hs__t small { font-size: 14px; line-height: 1.45; color: var(--ink-2); transition: color .3s; } .hs__bar { position: absolute; left: 16px; top: 48px; bottom: -4px; width: 2px; background: var(--sea); } .hs__i:last-child .hs__bar { display: none; } .hs__bar i { display: block; width: 100%; height: var(--f, 0%); background: var(--sea); } html.js .hs__bar { background: var(--line); } html.js .hs__i:not(.on):not(.done) .hs__n { background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); } html.js .hs__i:not(.on):not(.done) .hs__t b, html.js .hs__i:not(.on):not(.done) .hs__t small { color: var(--muted); } html.js .hs__i.on .hs__n { background: var(--surface); color: var(--sea); box-shadow: inset 0 0 0 2px var(--sea); } .hs__i.done .hs__bar i { height: 100%; } .hm { display: none; } /* окно гида */ .sc { container-type: inline-size; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .sc-bar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); font-size: 14px; } .sc-tag { padding: 2px 8px; border-radius: var(--r-xs); background: var(--sunk); color: var(--muted); font-size: 12px; } .sc-sp { flex: 1; } .sc-ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 10px/1 var(--display); } .sc-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); cursor: pointer; } .sc-btn:hover { background: var(--line); color: var(--ink); } .sc-body { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); height: 500px; } .sc-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; border-right: 1px solid var(--line); background: #FAFBFC; } .sc-feed { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 8px; overflow-y: auto; scrollbar-width: none; font-size: 13.5px; line-height: 1.5; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px); mask-image: linear-gradient(180deg, transparent 0, #000 16px); } .sc-feed::-webkit-scrollbar { display: none; } .sc-msg { margin: 0; } .sc-msg--u { align-self: flex-end; max-width: 88%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--sunk); font-weight: 500; } .sc-msg--s { display: none; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; } .sc-msg--s .i { width: 14px; height: 14px; color: var(--sea); } .sc-msg--a { max-width: 96%; } html.js .sc-msg:not(.on) { display: none; } html.js .sc-msg.on { animation: sc-in .38s var(--ease) both; } html.js .sc-msg--s.on { display: flex; } @keyframes sc-in { from { opacity: 0; transform: translateY(6px); } } .sc .nw { white-space: nowrap; } .sc .cite { min-width: 17px; height: 17px; font-size: 10.5px; transition: box-shadow .3s; } .sc-hl { box-shadow: 0 0 0 2px var(--sea); } .sc-in { position: relative; display: flex; align-items: center; height: 46px; margin: 6px 12px 12px; padding: 0 5px 0 16px; border: 1px solid var(--control); border-radius: var(--r-pill); background: var(--surface); } .sc-in__w { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; font-size: 13.5px; line-height: 22px; white-space: nowrap; } .sc-in__w.shifted { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px); mask-image: linear-gradient(90deg, transparent 0, #000 16px); } .sc-in__ph { position: absolute; inset: 0; color: var(--muted); } .sc-in__t { position: absolute; left: 0; top: 0; color: var(--ink); transform: translateX(calc(var(--s, 0px) * -1)); -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p, 0px) - 24px), transparent var(--p, 0px)); mask-image: linear-gradient(90deg, #000 calc(var(--p, 0px) - 24px), transparent var(--p, 0px)); } .sc-go { flex: none; width: 36px; height: 36px; margin-left: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: var(--on-coral); transition: transform .15s; } .sc-go .i { width: 17px; height: 17px; } .sc-go.press { transform: scale(.88); } /* ответ справа: панели умений сменяют друг друга */ .sc-cv { position: relative; min-height: 0; background: var(--surface); } .sc-wait { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 8px; padding: 24px; color: var(--muted); font-size: 13px; text-align: center; transition: opacity .3s; } .sc-wait .i { width: 18px; height: 18px; color: var(--sea); } html.js .sc-wait { display: grid; } .sc-wait.off { opacity: 0; } .sc-pn { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 18px 20px 14px; overflow-y: auto; scrollbar-width: none; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); } .sc-pn--last, .sc-pn.on { opacity: 1; transform: none; pointer-events: auto; } html.js .sc-pn--last:not(.on) { opacity: 0; transform: translateY(10px); pointer-events: none; } .sc-h small { display: block; font-size: 12px; color: var(--muted); } .sc-h b { display: block; font: 800 18px/1.2 var(--display); letter-spacing: -.02em; } .sc-h--ring { display: flex; align-items: center; gap: 12px; } .sc-it { transition: opacity .32s var(--ease), transform .32s var(--ease); } html.js .sc-it:not(.on) { opacity: 0; transform: translateY(6px); } .sc-src { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sunk); font-size: 11.5px; line-height: 1.45; color: var(--muted); } .sc-day { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; } .sc-day img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--photo); } .sc-day b { display: block; font-size: 14px; } .sc-day span span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); } .sc-stops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); } .sc-stops i { width: 7px; height: 7px; border-radius: 50%; background: var(--sea); } .sc-stops em { flex: 1 1 10px; min-width: 10px; height: 1px; background: var(--line); } .sc-htl { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); } .sc-htl--ph { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px; } .sc-htl--ph picture, .sc-htl--ph img { display: block; width: 92px; height: 66px; border-radius: 8px; object-fit: cover; background: var(--photo); } .sc-htl > span { display: grid; gap: 2px; min-width: 0; } .sc-htl b { font-size: 14px; } .sc-htl small { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sc-flags { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; } .sc-flags .flag { font-size: 12px; } .sc-flags .flag .i { width: 14px; height: 14px; } .sc-ring { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ok) var(--r, 0%), var(--sunk) 0); } .sc-ring span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font: 800 12px/1 var(--display); font-variant-numeric: tabular-nums; } .sc-row { display: grid; grid-template-columns: 18px minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--sunk); font-size: 12.5px; } .sc-row .i { width: 16px; height: 16px; align-self: start; margin-top: 1px; } .sc-row--ok .i { color: var(--ok); } .sc-row--nt .i { color: var(--muted); } .sc-row span { color: var(--ink-2); } .sc-row b { font-weight: 600; } .sc-verdict { display: flex; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 600; line-height: 1.4; } .sc-verdict .i { flex: none; width: 17px; height: 17px; } .sc-big { display: flex; align-items: baseline; gap: 10px; } .sc-big b { flex: none; font: 800 34px/1 var(--display); letter-spacing: -.03em; white-space: nowrap; } .sc-big span { font-size: 13px; line-height: 1.4; color: var(--ink-2); } .sc-stp { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.45; } .sc-stp i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea); font: 800 11px/1 var(--display); font-style: normal; } .sc-ins { padding: 9px 12px; border-radius: var(--r-sm); background: var(--sunk); font-size: 12.5px; line-height: 1.45; } .sc-prog { height: 3px; background: var(--sunk); } .sc-prog i { display: block; width: var(--w, 100%); height: 100%; background: var(--sea); } /* узкое окно (телефон): разговор во весь экран, ответ выезжает нижней шторкой, как в гиде на телефоне */ @container (max-width: 560px) { .sc-body { display: block; height: 540px; } .sc-chat { height: 100%; border-right: 0; } .sc-cv { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: var(--sh-3); } html.js .sc-cv { transform: translateY(102%); transition: transform .45s var(--ease-emph); } html.js .sc-cv.open { transform: none; } .sc-cv::after { content: ""; position: absolute; left: 50%; top: 7px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--line); } html.js .sc-wait { display: none; } .sc-pn { padding: 20px 14px 12px; gap: 10px; transition-duration: .2s; } .sc-row { grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; } .sc-row b { grid-column: 2; } .sc-day img { width: 60px; height: 44px; } .sc-htl--ph { grid-template-columns: 76px minmax(0, 1fr); } .sc-htl--ph picture, .sc-htl--ph img { width: 76px; height: 58px; } } /* ---------- Куда поехать: карточки регионов (итерация 5б, решение Лукиана 02.11) ---------- Та же манера, что у карточек маршрутов, но ниже и сеткой: одно действие — страница региона. Наведение: кнопка «Открыть страницу региона». Телефон: сетка 2×2, вся карточка нажимается. */ .kuda, .rr { padding-bottom: var(--sec); } .kuda { padding-top: var(--sec); background: var(--tint, var(--bg)); } .rr__h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; } .kuda h2, .rr h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.045em; } .rr__lead { max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); } .kd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3.5vw, 40px); } /* П2 (план 03.11): все регионы лентой. Вариант Б — две строки, на экране 8 карточек; вариант А — одна строка */ .kd-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; margin-top: clamp(28px, 3.5vw, 40px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .kd-rail::-webkit-scrollbar { display: none; } .kd-rail > li { scroll-snap-align: start; } .kd-rail--2 { grid-template-rows: repeat(2, auto); } .kd-rail--2 .kd { height: 260px; } .kuda .rr__f { margin-top: 18px; } .kd { position: relative; display: block; height: 340px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; } .kd:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .kd__ph, .kd picture { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .kd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), 0) 25%, rgba(var(--shade), .5) 58%, rgba(var(--shade), .88) 100%); transition: background-color .35s var(--ease); } .kd__b { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 18px; } .kd__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; align-content: end; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; } .kd__line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .86); } .kd__meta { overflow: hidden; font-size: 13px; color: rgba(255, 255, 255, .9); white-space: nowrap; text-overflow: ellipsis; } .kd__more { display: grid; grid-template-rows: 0fr; margin-top: -6px; transition: grid-template-rows .4s var(--ease), margin-top .4s var(--ease); } .kd__in { display: grid; min-height: 0; overflow: hidden; padding-top: 6px; opacity: 0; transition: opacity .3s var(--ease); } .kd__in .btn { justify-self: start; margin-bottom: 2px; pointer-events: none; } @media (hover: hover) { .kd:hover::before, .kd:focus-visible::before { background-color: rgba(var(--shade), .2); } .kd:hover .kd__more, .kd:focus-visible .kd__more { grid-template-rows: 1fr; margin-top: 0; } .kd:hover .kd__in, .kd:focus-visible .kd__in { opacity: 1; } .kd:hover .btn { background: var(--sunk); } } .kd-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .kd-f p { font-size: 16px; color: var(--ink); } .kd-f > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } @media (max-width: 1200px) { .kd__ops { display: none; } } @media (max-width: 1080px) and (min-width: 761px) { .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kd-rail { grid-auto-columns: calc((100% - 2 * 16px) / 2.6); } } /* ---------- Готовые маршруты: лента карточек (итерация 5, вариант 3, решение Лукиана 02.11) ---------- Все карточки одной высоты, фото во всю карточку, текст прижат к низу и в одних местах у всех. Наведение или фокус: дни маршрута и кнопка. Телефон: кнопка видна всегда, лента листается сама до первого касания. */ .rr-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 3.3); gap: 16px; margin-top: clamp(28px, 3.5vw, 40px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .rr-rail::-webkit-scrollbar { display: none; } /* Карточка маршрута (03.11): две кнопки. Вся карточка ведёт на маршрут на странице региона (ссылка в заголовке растянута на карточку), коралловая «Спросить ИИ-гида» лежит поверх и открывает гида с готовым вопросом об этом маршруте */ .rc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 440px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; scroll-snap-align: start; } .rc:has(.rc__a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; } .rc__ph, .rc picture { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .rc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), .08) 0%, rgba(var(--shade), 0) 30%, rgba(var(--shade), .82) 100%); transition: background-color .35s var(--ease); } .rc__top { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; } .rc__top span { padding: 3px 10px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 12px; font-weight: 600; } .rc__b { display: grid; gap: 8px; padding: 18px; } .rc__b small { font-size: 13px; color: rgba(255, 255, 255, .82); } .rc__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.2em; margin: 0; font: 800 26px/1.1 var(--display); letter-spacing: -.03em; color: inherit; } .rc__a { color: inherit; text-decoration: none; outline: none; } .rc__a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .rc__meta { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 13px; color: rgba(255, 255, 255, .9); white-space: nowrap; text-overflow: ellipsis; } .rc__meta .i { flex: none; width: 15px; height: 15px; } /* дни и кнопки раскрываются вместе; в покое текст карточки стоит у самого низа */ .rc__more { display: grid; grid-template-rows: 0fr; margin-top: -8px; transition: grid-template-rows .4s var(--ease), margin-top .4s var(--ease); } .rc__in { display: grid; gap: 14px; min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s var(--ease); } .rc__days { display: grid; gap: 4px; padding-top: 4px; font-size: 13.5px; line-height: 1.4; } .rc__days > span { display: grid; grid-template-columns: 58px minmax(0, 1fr); } .rc__days em { font-style: normal; color: rgba(255, 255, 255, .7); } /* две кнопки поровну в одну строку; на узкой карточке (телефон) белая короче: «Открыть» */ .rc { container-type: inline-size; } .rc__acts { display: flex; gap: 8px; padding-bottom: 2px; } .rc__acts .btn { flex: 1 1 0; min-width: max-content; min-height: 40px; padding-inline: 12px; font-size: 14px; } .rc__s { display: none; } @container (max-width: 330px) { .rc__l { display: none; } .rc__s { display: inline; } .rc__btn { flex-grow: .7; } } .rc__btn { pointer-events: none; transition: background-color .2s; } .rc__ask { position: relative; z-index: 2; } .rc__ask:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (hover: hover) { .rc:hover::before, .rc:focus-within::before { background-color: rgba(var(--shade), .25); } .rc:hover .rc__more, .rc:focus-within .rc__more { grid-template-rows: 1fr; margin-top: 0; } .rc:hover .rc__in, .rc:focus-within .rc__in { opacity: 1; } .rc:has(.rc__a:hover) .rc__btn { background: var(--sunk); } } /* касание: дней нет, обе кнопки видны всегда */ @media (hover: none) { .rc__more { grid-template-rows: 1fr; margin-top: 0; } .rc__in { opacity: 1; } .rc__days { display: none; } } .rr__f { display: flex; align-items: center; gap: 16px; margin-top: 18px; } .rr-prog { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; } .rr-prog i { display: block; width: var(--w, 30%); height: 100%; margin-left: var(--x, 0%); border-radius: 2px; background: var(--ink); } .rr-nav { display: flex; gap: 8px; } .rr-nav button, .rr-pause { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s, opacity .2s; } .rr-nav button:hover { border-color: var(--ink); } .rr-nav button:disabled { opacity: .35; cursor: default; } .faqs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); padding-block: var(--sec); } .faqs h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.04em; } .again { padding-block: clamp(56px, 7vw, 96px); background: var(--tint-2, var(--sunk)); } .again__in { display: grid; justify-items: center; gap: 24px; text-align: center; } .again h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.04em; } /* поле внизу главной: тот же овал, что на обложке, на светлом фоне без тени (итерация 7, 02.11) */ .pill--line { width: min(100%, 640px); max-width: none; margin-top: 0; box-shadow: inset 0 0 0 1.5px var(--control); text-align: left; } .pill--line:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; } .pill__btn { height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--coral); color: var(--on-coral); font: 600 15px var(--text); white-space: nowrap; cursor: pointer; transition: background-color .2s; } .pill__btn:hover { background: var(--coral-h); } /* ---------- Проверка ---------- */ /* ---------- Проверить перед оплатой: рабочая проверка с подсказками (итерация 4, решение Лукиана 02.11) ---------- Сверху отступа нет: его даёт блок «Как работает» над ним. */ .pc { padding-block: var(--sec); } .pc__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .pc h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.045em; } .pc__lead { max-width: 40ch; margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--ink-2); } .pc__note { display: flex; gap: 8px; max-width: 44ch; margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .pc__note .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--sea); } .pc__more { display: inline-block; margin-top: 18px; color: var(--sea); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .pc-tool { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .pc-f { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 5px 5px 5px 18px; border: 1.5px solid var(--control); border-radius: var(--r-pill); background: var(--surface); } .pc-f:focus-within { border-color: var(--sea); outline: 3px solid var(--sea-soft); } .pc-f > .i { width: 18px; height: 18px; color: var(--muted); } .pc-f input { min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 400 16px var(--text); color: var(--ink); } .pc-f input::placeholder { color: var(--muted); opacity: 1; } .pc-f button { height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--coral); color: var(--on-coral); font: 600 15px var(--text); cursor: pointer; transition: background-color .2s; } .pc-f button:hover { background: var(--coral-h); } /* подсказки при вводе */ .pc-sug { display: grid; gap: 2px; margin-top: 8px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .pc-sug[hidden] { display: none; } .pc-sug [role="option"] { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; } .pc-sug [role="option"][aria-selected="true"], .pc-sug [role="option"]:hover { background: var(--sunk); } .pc-th { width: 44px; height: 33px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: var(--sunk); color: var(--muted); } .pc-th .i { width: 16px; height: 16px; } .pc-sug b { display: block; font-size: 14px; } .pc-sug small { display: block; overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; } .pc-sug mark { background: none; color: var(--sea); font-weight: 700; } /* результат */ .pc-res { margin-top: 14px; } .pc-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); animation: pc-in .32s var(--ease) both; } .pc-card--np { grid-template-columns: minmax(0, 1fr); } @keyframes pc-in { from { opacity: 0; transform: translateY(6px); } } .pc-card > img { width: 120px; height: 90px; border-radius: 10px; object-fit: cover; } .pc-card h3 { font: 800 18px/1.2 var(--display); letter-spacing: -.02em; } .pc-card .flags { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; } .pc-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin-top: 10px; font-size: 13.5px; } .pc-card dt { color: var(--muted); } .pc-card dd { margin: 0; } .pc-card a { color: var(--sea); text-decoration: underline; text-underline-offset: 2px; } .pc-card .asof { margin-top: 8px; } .pc-card__acts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13.5px; font-weight: 600; } .pc-empty { padding: 14px; border-radius: var(--r-md); background: var(--warn-soft); font-size: 14px; line-height: 1.5; animation: pc-in .32s var(--ease) both; } .pc-empty b { display: block; margin-bottom: 4px; } .pc-empty ul { display: grid; gap: 4px; margin-top: 8px; } .pc-empty a { color: var(--sea); text-decoration: underline; } .pc-msg { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-size: 14px; color: var(--ink-2); } /* до ввода: три исхода, первые два — примеры по нажатию */ .pc-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .pc-out { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 400 13px/1.45 var(--text); text-align: left; } button.pc-out { cursor: pointer; transition: border-color .2s; } button.pc-out:hover { border-color: var(--sea); } button.pc-out:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .pc-out picture, .pc-out img { display: block; width: 100%; height: 96px; border-radius: 8px; object-fit: cover; } /* исходы с картинкой у всех: фасад гостиницы из реестра, город туроператора с подписью, у «нет в реестре» пустая пунктирная рамка — отсутствие фото само сообщает (решение Лукиана 02.11) */ .pc-out__ph { position: relative; display: block; } .pc-out__ph > span { position: absolute; left: 8px; bottom: 6px; padding: 2px 6px; border-radius: var(--r-xs); background: rgba(var(--shade), .55); color: #fff; font-size: 11px; } .pc-out__miss { height: 96px; border-radius: 8px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 0 10px; border: 1.5px dashed var(--coral-line); background: var(--coral-soft); color: var(--coral); font: 600 12px/1.3 var(--text); text-align: center; } .pc-out__miss .i { width: 22px; height: 22px; } .pc-out__lab { font: 800 15px/1.2 var(--display); } .pc-out__lab--ok { color: var(--ok); } .pc-out__lab--no { color: var(--coral); } .pc-out small { color: var(--muted); } .label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); } .fieldrow { display: flex; gap: 8px; } .input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--control); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; } .input::placeholder { color: var(--muted); opacity: 1; } .input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .hint { margin-top: 8px; font-size: 13px; color: var(--muted); } .result { margin-top: 16px; display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .result__name { font-weight: 600; font-size: 16px; } .result__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--ink-2); } .result__warn { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--warn); overflow-wrap: anywhere; } .result__warn .i { flex: none; width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.2; } .result a { color: var(--sea); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Метки ---------- */ .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .status .i { width: 14px; height: 14px; stroke-width: 2.25; margin-left: -2px; } .status--ok { background: var(--ok-soft); color: var(--ok); } .status--warn, .status--demo { background: var(--warn-soft); color: var(--warn); } .status--member { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sea); color: var(--sea); } .status--pilot { background: var(--sea); color: #fff; } .mark { display: inline-block; padding: 1px 6px; border-radius: var(--r-xs); background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; vertical-align: 1px; white-space: nowrap; } /* ---------- Подвал ---------- */ .ftr { padding-block: 64px calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--bg); color: var(--ink); } .ftr__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; } .ftr__about p { margin-top: 12px; max-width: 34ch; font-size: 14px; color: var(--muted); } .ftr__about .wg { margin-top: 12px; opacity: 1; color: var(--ink-2); white-space: normal; } .ftr__h { margin-bottom: 12px; font: 600 14px/1.3 var(--text); letter-spacing: 0; color: var(--muted); } .ftr li + li { margin-top: 4px; } .ftr li a { display: inline-block; padding-block: 3px; font-size: 15px; color: var(--ink-2); } .ftr li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ftr__bot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); } .ftr__bot a { text-decoration: underline; text-underline-offset: 2px; } .ftr__bot a:hover { color: var(--ink); } .ftr .status { justify-self: start; } /* подвал раздела «Бизнес» (перенос главной 06.11.2026): логотип, ссылки в строку, оператор и политика */ .ftr--biz { padding-block: 40px calc(28px + env(safe-area-inset-bottom, 0px)); } .ftr__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; } .ftr__nav { display: flex; flex-wrap: wrap; gap: 2px 28px; } .ftr__nav a { padding-block: 8px; font-size: 15px; color: var(--ink-2); } .ftr__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ftr__bot--row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 24px; padding-top: 20px; } .ftr__bot--row .status { margin-left: auto; } @media (max-width: 760px) { .ftr__row { display: grid; gap: 14px; } .ftr__nav { gap: 0 22px; } .ftr__bot--row .status { margin-left: 0; } } /* ---------- Нижняя кнопка на телефоне ---------- */ .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); transform: translateY(120%); transition: transform .35s var(--ease-emph); pointer-events: none; } .mbar.show { transform: none; pointer-events: auto; } .mbar a { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), var(--sh-2); } .mbar a span { flex: 1; } .mbar .send { width: 44px; height: 44px; border-radius: 50%; } /* ---------- Внутренние страницы ---------- */ /* ссылка возврата к родителю (значок и название) и крошки строкой после неё; на телефоне только ссылка возврата, область нажатия 44 px (07.11) */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; padding-top: 14px; font-size: 14px; color: var(--muted); } .crumbs__back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: -8px; padding: 4px 12px 4px 6px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); transition: background-color .2s; } .crumbs__back .i { flex: none; width: 20px; height: 20px; color: var(--sea); transform: none; } .crumbs__back:hover { background: var(--sunk); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; } .crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--control); } .crumbs ol a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .crumbs ol a:hover { color: var(--ink); text-decoration-color: currentColor; } /* на тёмной обложке: белым */ .crumbs--dark { color: rgba(255, 255, 255, .86); } .crumbs--dark .crumbs__back, .crumbs--dark .crumbs__back .i { color: #FFFFFF; } .crumbs--dark .crumbs__back:hover { background: rgba(255, 255, 255, .14); } .crumbs--dark li + li::before { color: rgba(255, 255, 255, .6); } .crumbs--dark ol a { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .5); } .crumbs--dark ol a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; } .crumbs--dark :focus-visible { outline-color: #FFFFFF; } @media (prefers-reduced-motion: reduce) { .crumbs__back { transition: none; } } @media (max-width: 760px) { .crumbs { padding-top: 8px; } .crumbs__back { min-height: 44px; } .crumbs ol { display: none; } } .phead { padding-block: 24px clamp(32px, 4vw, 56px); } .phead h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -.045em; } .phead .lead { margin-top: 20px; max-width: 60ch; } .phead .asof { margin-top: 16px; } .sec { padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); } .sec h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.04em; } .sec h2 + p, .sec h2 + .asof { margin-top: 12px; } .prose { max-width: 68ch; font-size: 17px; line-height: 1.65; } .prose > * + * { margin-top: 16px; } .prose h2 { margin-top: 48px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; } .prose h3 { margin-top: 32px; font-size: 21px; letter-spacing: -.02em; } .prose ul > li { position: relative; padding-left: 20px; } .prose ul > li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; height: 2px; background: var(--control); } .prose ol { padding-left: 24px; list-style: decimal; } .prose li + li { margin-top: 6px; } .note { padding: 16px 18px; border-radius: var(--r-md); background: var(--sea-soft); color: var(--ink); font-size: 15px; line-height: 1.55; } .note--warn { background: var(--warn-soft); } .empty { padding: 24px; border: 1.5px dashed var(--control); border-radius: var(--r-md); color: var(--ink-2); } .empty b { display: block; margin-bottom: 4px; color: var(--ink); } .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .tbl { width: 100%; border-collapse: collapse; font-size: 15px; } .tbl caption { padding: 14px 16px 0; text-align: left; font-size: 13px; color: var(--muted); } .tbl th, .tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .tbl thead th { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; } .tbl tbody tr:last-child > * { border-bottom: 0; } .tbl td.r, .tbl th.r { text-align: right; } .facts-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; font-size: 15px; } .facts-dl dt { color: var(--muted); } .sec > .cta-row, .sec > .lead + p { margin-top: 20px; } .srcs--page { max-width: 68ch; margin-top: 28px; } .jump { padding-bottom: clamp(32px, 4vw, 56px); } .jump ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .jump a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-weight: 600; line-height: 1.3; transition: border-color .2s; } .jump a:hover { border-color: var(--control); } .jump .i { color: var(--sea); } /* ---------- Страница проверки ---------- */ .pv { padding-bottom: clamp(40px, 5vw, 72px); } .pv__form { max-width: 720px; } .pv__count { margin-top: 24px; font-weight: 600; } .pv__count:empty { display: none; } .pv__list { display: grid; gap: 10px; max-width: 880px; margin-top: 12px; } .pv__list .result { margin-top: 0; } .pv .empty { max-width: 880px; margin-top: 12px; } .pv > .asof { margin-top: 20px; } .regs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .reg { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .reg h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; } .reg p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .reg__look b { color: var(--ink); font-weight: 600; } .reg .lnk { justify-self: start; font-weight: 600; } /* ---------- Карточки и этапы ---------- */ .sec > h2 + .cards, .sec > .lead + .cards, .sec > h2 + .tbl-wrap, .sec > h2 + .road { margin-top: 24px; } .cards { display: grid; gap: 12px; } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .card h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; } .card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .wg-status { margin-top: 24px; max-width: 72ch; display: grid; gap: 6px; } .road { display: grid; gap: 0; max-width: 820px; counter-reset: road; } .road > li { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--line); } .road > li:last-child { border-bottom: 1px solid var(--line); } .road > li > b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; } .road > li > p { color: var(--ink-2); } .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; align-items: start; } .two h2 { margin-bottom: 20px; } .plain { display: grid; gap: 10px; max-width: 60ch; } .plain li { position: relative; padding-left: 22px; } .plain li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 10px; height: 2px; background: var(--control); } .sec > .lead + .plain { margin-top: 12px; } .steps-l { display: grid; counter-reset: st; border-top: 1px solid var(--line); } .steps-l li { counter-increment: st; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "n t" "n d"; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .steps-l li::before { content: counter(st); grid-area: n; width: 32px; height: 32px; border-radius: 50%; background: var(--sea-soft); color: var(--sea); font: 800 15px/32px var(--display); text-align: center; } .steps-l b { grid-area: t; font-weight: 600; } .steps-l span { grid-area: d; font-size: 15px; color: var(--ink-2); } .sec > h2 + .note, .sec > h2 + .lead, .sec > h2 + .empty { margin-top: 16px; } .sec > .note + .asof, .sec > .lead + .asof { margin-top: 12px; } .phead h1 { max-width: 22ch; } /* ---------- Бизнес ---------- */ .bcover { padding-block: clamp(24px, 4vw, 56px) 0; } .bcover__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .bcover__t { display: grid; gap: 22px; align-content: start; padding-top: clamp(0px, 2vw, 24px); } .bcover h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: .98; letter-spacing: -.05em; } .bcover .phead__pre { margin: 0; } .bcover .lead { max-width: 54ch; } .finder { max-width: 620px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .finder__out:empty { display: none; } .finder__out { margin-top: 14px; } .finder__msg { font-weight: 600; } .finder__list { display: grid; gap: 8px; } .finder__list li, .finder__none { display: grid; justify-items: start; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sunk); } .finder__list span, .finder__none p { font-size: 14px; color: var(--ink-2); } .finder .lnk { font-weight: 600; } .bcover__ph { position: relative; margin: 0; } .bcover__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); background: var(--photo); } .excard { position: absolute; left: -40px; right: 32px; bottom: 56px; display: grid; gap: 10px; padding: 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-3); font-size: 14px; line-height: 1.5; } .excard__h { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); } .excard__q { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md); background: var(--ink); color: #fff; } .excard__a { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); background: var(--sunk); } .excard__co { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .excard .asof a { color: var(--sea); } .bcover__cap { margin-top: 10px; font-size: 13px; color: var(--muted); } .agenda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .agenda .ev { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .agenda .ev__d { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; } .agenda .ev__d span { margin: 0; font-size: 16px; color: var(--ink-2); } .agenda .ev h3 { font-size: 18px; } .band { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--sec); } .band__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; } .band__in > div { display: grid; gap: 18px; align-content: start; } .band__in > div > h3, .band__side h3 { margin-top: 8px; font-size: 21px; letter-spacing: -.02em; } .band__side { display: grid; gap: 16px; padding: 24px; border-radius: var(--r-md); background: var(--bg); } .band__fact { font-size: 17px; color: var(--ink-2); } .band__fact b { color: var(--ink); font-weight: 700; } .tbl--mini { font-size: 14px; } .tbl--mini th, .tbl--mini td { padding: 10px 12px; } .pil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; margin-top: 32px; align-items: start; } .pil__side { display: grid; gap: 16px; justify-items: start; } .pil__side h3 { font-size: 21px; letter-spacing: -.02em; } .marks { display: grid; gap: 12px; } .marks li { display: grid; justify-items: start; gap: 4px; font-size: 15px; color: var(--ink-2); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stat { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .stat b { font: 800 clamp(40px, 4.4vw, 56px)/1 var(--display); letter-spacing: -.04em; } .stat span { font-size: 15px; color: var(--ink-2); } #nejroseti .asof { margin-top: 14px; max-width: 80ch; } .svc { padding-bottom: var(--sec); } .svc .note { display: grid; gap: 10px; padding: 24px; max-width: 880px; } .svc h2 { font-size: 24px; letter-spacing: -.03em; } .phead__note { margin-top: 20px; max-width: 72ch; } .toc { padding-bottom: 24px; } .toc ul { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; } .toc a { color: var(--sea); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; } .toc a:hover { text-decoration-color: currentColor; } .prose-tbl { max-width: 880px; margin-top: 24px; } .sub-h { margin: 40px 0 16px; font-size: 22px; letter-spacing: -.02em; } .sec .stats { margin-top: 20px; } .tbl__total > * { font-weight: 700; border-top: 2px solid var(--line); } /* ---------- Регион ---------- */ .rhero { padding-top: 20px; } .rhero__ph { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--photo); isolation: isolate; color: #fff; } .rhero__ph img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; } .rhero__t { position: absolute; left: clamp(20px, 3vw, 40px); right: 20px; bottom: clamp(20px, 3vw, 36px); z-index: 1; } /* затемнение снизу только под текстом (07.11), как у .rgh: от чуть выше строки над заголовком до низа фото */ .rhero__t::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -64px; bottom: -40px; pointer-events: none; background: linear-gradient(180deg, rgba(var(--shade), 0) 0, rgba(var(--shade), .52) 64px, rgba(var(--shade), .66) 55%, rgba(var(--shade), .76) 100%); } .rhero__t p { font-weight: 600; color: rgba(255, 255, 255, .92); } .rhero__t h1 { margin-top: 6px; font-size: clamp(40px, 6.4vw, 92px); line-height: .95; letter-spacing: -.05em; color: #fff; } .rhero__cap { margin-top: 10px; font-size: 13px; color: var(--muted); } .rintro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 56px; padding-block: clamp(28px, 4vw, 48px); align-items: start; } .rintro .lead { max-width: 62ch; } .quick { display: grid; gap: 10px; max-width: 64ch; } .quick li { position: relative; padding-left: 22px; color: var(--ink-2); } .quick li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 10px; height: 2px; background: var(--control); } .pl__facts { display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .pl__facts li { position: relative; padding-left: 16px; } .pl__facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--line); } .road--days > li { grid-template-columns: 120px minmax(0, 1fr); } .road--days .plain { gap: 6px; } .road ~ .asof { margin-top: 14px; max-width: 80ch; } .rask { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .pl { display: grid; align-content: start; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); scroll-margin-top: calc(var(--hdr-h) + 16px); } .pl:target { border-color: var(--sea); box-shadow: 0 0 0 1px var(--sea); } .pl img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--photo); } .pl__b { display: grid; gap: 8px; padding: 18px 20px 20px; } .pl__area { font-size: 13px; font-weight: 600; color: var(--muted); } .pl h3 { font-size: 21px; line-height: 1.15; letter-spacing: -.02em; } .pl__b > p:not([class]) { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .rkom h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } .tile__h { font-size: clamp(28px, 2.7vw, 42px); line-height: 1; color: #fff; } .tile:hover .tile__h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* ---------- Журнал ---------- */ .zh { display: grid; gap: 16px; padding-bottom: clamp(32px, 4vw, 56px); } .zh__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s; } .zh__card:hover { border-color: var(--control); } .zh__card img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; background: var(--photo); } .zh__b { display: grid; gap: 12px; align-content: center; padding: clamp(24px, 3vw, 40px); } .zh__b .phead__pre { margin: 0; } .zh__b b { font: 800 clamp(26px, 2.6vw, 36px)/1.08 var(--display); letter-spacing: -.035em; } .zh__card:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .zh__b > span:last-child { color: var(--ink-2); } .art { padding-bottom: var(--sec); } .art__head { padding-block: 24px clamp(28px, 4vw, 48px); max-width: 880px; } .art__head h1 { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -.045em; } .art__head .lead { margin-top: 18px; } .art__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; } /* фото в статьях (04.11): обложка во всю ширину колонки, снимки между разделами в ширину текста; подпись и автор под фото */ .art__cover { margin: 0 0 clamp(32px, 4vw, 56px); } .art__cover picture, .art__cover img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-lg); } .art__cover figcaption, .art__fig figcaption { max-width: 68ch; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .art__cover figcaption span, .art__fig figcaption span { color: var(--muted); } .art__fig { margin: 32px 0 8px; } .art__fig picture, .art__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); } @media (max-width: 760px) { .art__cover { margin-inline: calc(-1 * var(--gutter)); } .art__cover picture, .art__cover img { aspect-ratio: 4 / 3; border-radius: 0; } .art__cover figcaption { padding-inline: var(--gutter); } } .art__toc { position: sticky; top: calc(var(--hdr-h) + 24px); font-size: 15px; } .art__toc-h { margin-bottom: 10px; font-weight: 600; color: var(--muted); } .art__toc ol { display: grid; gap: 8px; padding-left: 20px; list-style: decimal; } .art__toc a { color: var(--ink-2); } .art__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .art__body section { scroll-margin-top: calc(var(--hdr-h) + 16px); } /* внутри раздела статьи те же отступы, что в .prose: абзацы и списки не слипаются (замечено 04.11) */ .art__body section > * + * { margin-top: 16px; } .art__body section > h2 { margin-top: 0; } .art__body section + section { margin-top: 48px; } .art__body .asof { margin-top: 10px; } .faq { border-top: 1px solid var(--line); } .faq:last-of-type { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-right: 2px solid var(--control); border-bottom: 2px solid var(--control); transform: rotate(45deg); transition: transform .2s var(--ease); } .faq[open] summary::after { transform: rotate(-135deg); margin-top: 10px; } .faq p { margin: 0 0 12px; } /* ---------- Источники фото ---------- */ .fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; } .foto { display: grid; gap: 12px; align-content: start; } .foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); background: var(--photo); } .foto div { display: grid; gap: 2px; font-size: 14px; color: var(--ink-2); } .foto b { font-size: 15px; color: var(--ink); } /* ---------- Календарь ---------- */ .fchips { display: flex; flex-wrap: wrap; gap: 6px; } .fchips button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background-color .15s, color .15s, border-color .15s; } .fchips button:hover { border-color: var(--control); color: var(--ink); } .fchips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .cal { padding-bottom: var(--sec); } .cal__m { margin-top: clamp(32px, 4vw, 48px); } .cal__m h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; margin-bottom: 8px; } .evs { display: grid; border-top: 1px solid var(--line); } .ev { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); } .ev__d { display: grid; align-content: start; } .ev__d b { font: 800 34px/1 var(--display); letter-spacing: -.04em; } .ev__d span { margin-top: 4px; font-size: 14px; color: var(--muted); } .ev__b { display: grid; gap: 6px; max-width: 70ch; } .ev__m { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; font-weight: 600; color: var(--muted); } .ev--soon .ev__st, .ev--now .ev__st { color: var(--ok); } .ev h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; } .ev__place { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-2); } .ev__place .i { color: var(--muted); } .ev__b > p:not([class]) { color: var(--ink-2); } .ev__note { font-size: 14px; color: var(--warn); } .ev--past .ev__d b, .ev--past h3 { color: var(--ink-2); } /* ---------- Комитеты ---------- */ .muted { color: var(--muted); } .phead__pre { margin-bottom: 12px; font-weight: 600; color: var(--ink-2); } .phead__marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .act { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; } .act::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--control); } .act--ok { color: var(--ok); } .act--ok::before { background: var(--ok); } .act--neutral { color: var(--ink-2); } .act--neutral::before { background: var(--sea); } .act--muted { color: var(--muted); font-weight: 500; } .fed { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .2s; } .fed:hover { border-color: var(--control); } .fed__t { display: grid; justify-items: start; gap: 8px; } .fed__t b { font: 800 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -.03em; } .fed:hover .fed__t b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .fed__t > span:last-child { color: var(--ink-2); } .fed__n { font-size: 14px; line-height: 1.6; color: var(--muted); text-align: right; } .fed__n b { font: 800 22px/1 var(--display); color: var(--ink); } .kt > h2 { margin-bottom: 24px; } .filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; } .filters .input { width: 100%; } select.input { appearance: none; padding-right: 40px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2344525C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 14px center no-repeat; } .check { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; font-size: 15px; font-weight: 500; cursor: pointer; } .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); } .check--top { align-items: flex-start; min-height: 44px; padding: 10px 0; line-height: 1.45; } .check--top input { flex: none; margin-top: 1px; } /* Форма заявки на участие (контракт API, раздел 2.3) */ .apply { max-width: 880px; } .apply__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 24px 0; } .apply__wide { grid-column: 1 / -1; } .apply textarea.input { min-height: 120px; padding: 12px 16px; line-height: 1.5; resize: vertical; } .apply .input { width: 100%; } .apply .input[aria-invalid="true"] { border-color: var(--coral); } .apply__consents { display: grid; gap: 4px; margin-bottom: 8px; } .apply__out:empty { display: none; } .apply__mail { margin-top: 16px; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Новости группы, письмо председателя, QR, отметки профиля */ .news { display: grid; gap: 0; max-width: 760px; padding: 0; list-style: none; } .news__item { padding: 24px 0; border-top: 1px solid var(--line); } .news__item:last-child { border-bottom: 1px solid var(--line); } .news__item h2 { margin: 4px 0 12px; font-size: 22px; line-height: 1.3; } .letter { max-width: 720px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .letter p { margin: 0 0 12px; } .letter p:last-child { margin-bottom: 0; } .qr { margin: 0 0 12px; } .qr svg { display: block; width: 200px; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); } .qr figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); } .marks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .kt__bar { display: flex; align-items: center; gap: 16px; margin: 20px 0 12px; font-weight: 600; } .tbl thead button { padding: 0; border: 0; background: none; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px; } .tbl thead button::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--control); margin-top: 4px; } .tbl th[aria-sort="ascending"] button::after { border-top-color: transparent; border-bottom-color: var(--ink); margin: 0 0 4px; } .tbl th[aria-sort="descending"] button::after { border-top-color: var(--ink); } .tbl th[aria-sort="ascending"] button, .tbl th[aria-sort="descending"] button { color: var(--ink); } .tbl tbody th { font-weight: 600; } .kp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; } .kp .note + .note { margin-top: 12px; } .kp2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 32px 56px; align-items: start; margin-top: 24px; } .sostav h3 { margin: 28px 0 10px; font-size: 19px; letter-spacing: -.02em; } .sostav h3:first-child { margin-top: 0; } .sostav h3 .muted { font: 500 15px/1 var(--text); letter-spacing: 0; margin-left: 4px; } .sostav ul { border-top: 1px solid var(--line); } .sostav li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .sostav__n { font-weight: 500; } .sostav__n a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .sostav__n a:hover { text-decoration-color: currentColor; } .sostav__r { font-size: 14px; font-weight: 600; color: var(--sea); } .sostav__x { font-size: 14px; color: var(--muted); } .segs { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .segs h3 { font-size: 19px; letter-spacing: -.02em; } .segbars { display: grid; gap: 10px; } .segbars li { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "l v" "b b"; gap: 4px 8px; font-size: 14px; } .segbars__l { grid-area: l; color: var(--ink-2); } .segbars__v { grid-area: v; text-align: right; font-weight: 600; } .segbars__b { grid-area: b; height: 10px; width: var(--w); min-width: 4px; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--sea); } .srclist { display: grid; gap: 6px; margin-top: 16px; padding-left: 22px; list-style: decimal; font-size: 15px; overflow-wrap: anywhere; } /* ---------- Узкие экраны ---------- */ /* Меню «Бизнеса» длиннее (7 пунктов): уходит в бургер раньше */ @media (max-width: 1320px) { .hdr--long .nav, .hdr--long .hdr__cta, .hdr--long .hdr__login { display: none; } .hdr--long .burger { display: grid; } } @media (max-width: 1080px) { .nav, .hdr__cta { display: none; } .burger { display: grid; } .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .regs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-rail { grid-auto-columns: calc((100% - 16px) / 2.2); } /* окно разговора только на компьютере (решение Лукиана 02.11), демонстрация ниже, в «Как работает» */ .story { display: none; } .cover__in { grid-template-columns: minmax(0, 1fr); } .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bcover__in, .band__in, .pil, .art__grid, .rintro { grid-template-columns: minmax(0, 1fr); } .art__toc { position: static; } .bcover__ph img { aspect-ratio: 16 / 10; } .excard { position: relative; left: auto; right: auto; bottom: auto; margin: -64px 16px 0; } .agenda, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kp2 { grid-template-columns: minmax(0, 1fr); } .segs { position: static; } } @media (max-width: 760px) { :root { --hdr-h: 64px; } .hdr__in { gap: 12px; } .logo { font-size: 18px; } .wg { display: none; } .modes { --m-pad: 12px; font-size: 13px; } .modes a, .modes__on > span { min-height: 44px; } .send { width: 48px; height: 48px; } /* телефон: заголовок с описанием чуть выше середины, поле с подсказками внизу, в привычном месте под большим пальцем (замечания Лукиана 02.11). Свободное место делится поровну: над заголовком и между описанием и полем. */ .cover { min-height: max(520px, 100svh); align-items: stretch; } .cover::before { background: linear-gradient(180deg, rgba(var(--shade), .5) 0%, rgba(var(--shade), .3) 26%, rgba(var(--shade), .34) 50%, rgba(var(--shade), .78) 100%); } .cover__in { align-items: stretch; padding-block: calc(var(--hdr-h) + 16px) 72px; } .cover__t { display: flex; flex-direction: column; align-items: stretch; } .cover h1 { margin-top: auto; white-space: normal; font-size: clamp(48px, 15vw, 64px); } .cover__sub { margin-bottom: 28px; font-size: 16px; } .pill { margin-top: auto; min-height: 58px; padding: 5px 5px 5px 20px; } .hcont { align-self: flex-start; } .ghost { left: 20px; right: 58px; } /* подсказки в одну строку без прокрутки, подпись к фото и полоски компактнее (решения Лукиана 02.11) */ .hchips { gap: 6px; margin-top: 12px; } .hchip { min-height: 32px; padding: 0 12px; font-size: 13px; } .promise { gap: 4px 16px; margin-top: 14px; font-size: 12px; } .promise .i { width: 14px; height: 14px; } .cover__foot { bottom: 12px; align-items: flex-end; } .cover__cap { flex-direction: column; gap: 1px; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, .72); } .cover__cap a { font-size: 12px; } .dots { gap: 4px; } .dot { width: 18px; height: 28px; } .pause { width: 28px; height: 28px; margin-left: 2px; } .hw__grid { grid-template-columns: minmax(0, 1fr); } .hs, .hw__cta--d { display: none; } .hw__cta--m { display: flex; } .hm { display: grid; gap: 10px; margin-bottom: 14px; } .hm__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .hm__bars button { height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; } .hm__bars i { display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; } .hm__bars i b { display: block; width: var(--f, 0%); height: 100%; background: var(--sea); } .hm__t { font: 800 18px/1.2 var(--display); } .hm__t small { display: block; min-height: 2.9em; margin-top: 2px; font: 400 14px/1.45 var(--text); color: var(--ink-2); } .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kd-rail { grid-auto-columns: calc((100% - 12px) / 1.7); gap: 12px; } .kd-rail--2 .kd { height: 200px; } .kd { height: 230px; } .kd__b { gap: 4px; padding: 14px; } .kd__t { font-size: 18px; line-height: 1.22; } .kd__line, .kd__ops, .kd__more { display: none; } .kd-f { padding: 16px; } .rr-rail { grid-auto-columns: 84%; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .rc { height: 420px; } .rc__t { font-size: 24px; } .rr-nav { display: none; } .faqs { grid-template-columns: minmax(0, 1fr); } .pill__btn { padding: 0 16px; font-size: 14px; } .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; } .tile, .tile:nth-child(4n + 1), .tile:nth-child(4n + 4) { grid-column: auto; } .bub, .ans { max-width: 100%; } .pc__in { grid-template-columns: minmax(0, 1fr); } .pc-tool { padding: 14px; } .pc-f button { padding: 0 14px; } .pc-card { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; } .pc-card > img { width: 88px; height: 66px; } .pc-outs { grid-template-columns: minmax(0, 1fr); } .pc-out { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; } .pc-out > picture, .pc-out__ph, .pc-out__miss { grid-row: span 4; width: 96px; height: 72px; } .pc-out picture, .pc-out img { height: 72px; } .pc-out__miss { font-size: 10.5px; gap: 3px; padding: 0 6px; } .pc-out__miss .i { width: 18px; height: 18px; } .ais__in { grid-template-columns: minmax(0, 1fr); } .ais__cta { padding-top: 24px; } .ais__goal { font-size: 16px; } .bar__track { height: 60px; } .regs { grid-template-columns: minmax(0, 1fr); } .filters, .kp, .cards--3, .cards--2, .apply__grid { grid-template-columns: minmax(0, 1fr); } .road > li, .road--days > li { grid-template-columns: minmax(0, 1fr); } .two { grid-template-columns: minmax(0, 1fr); } .ev { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; } .agenda, .stats { grid-template-columns: minmax(0, 1fr); } .zh__card { grid-template-columns: minmax(0, 1fr); } .places { grid-template-columns: minmax(0, 1fr); } .rhero__ph img { aspect-ratio: 4 / 3; } .zh__card img { min-height: 0; aspect-ratio: 16 / 9; } .excard { margin: -48px 8px 0; } .ev__d b { font-size: 26px; } .fed { grid-template-columns: minmax(0, 1fr); } .fed__n { text-align: left; } .tbl--cards thead { display: none; } .tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards th, .tbl--cards td { display: block; } .tbl--cards tr { padding: 14px 16px; border-bottom: 1px solid var(--line); } .tbl--cards tr:last-child { border-bottom: 0; } .tbl--cards tbody th, .tbl--cards td { padding: 2px 0; border: 0; text-align: left; } .tbl--cards td.r { text-align: left; } .tbl--cards td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13px; } .tbl--cards tbody th { font-size: 17px; margin-bottom: 4px; } .fieldrow { flex-direction: column; } .ftr__top { grid-template-columns: minmax(0, 1fr); } .mbar { display: block; } .facts-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts-dl dd + dt { margin-top: 10px; } } @media (max-width: 760px) and (max-height: 620px) { /* низкий экран (iPhone SE): заголовок, описание и поле помещаются вместе с подписью к фото */ .cover__in { padding-block: calc(var(--hdr-h) + 8px) 76px; } .cover h1 { font-size: 44px; } .cover__sub { margin-top: 12px; margin-bottom: 20px; font-size: 15px; line-height: 1.45; } .pill { min-height: 54px; } .pill__go { width: 44px; height: 44px; } .hchips { margin-top: 10px; } .promise { margin-top: 12px; } } @media (max-width: 420px) { .hdr__in { gap: 10px; } .logo { font-size: 16px; } } @media (max-width: 389px) { .hdr__in { gap: 8px; } .logo span { display: none; } .modes { font-size: 12px; } .hdr .logo { width: 5.16em; } .burger { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- «Если поездка сорвалась» (в меню «Помощь», П4 плана 03.11) ---------- Ситуация и кто поможет сверху, телефоны на светло-голубой полосе, у каждой ситуации сроки крупно и что подготовить. */ .hp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: 16px clamp(36px, 4.5vw, 64px); } .hp-hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -.045em; } .hp-hero .lead { max-width: 44ch; margin-top: 20px; } .hp-hero .asof { margin-top: 14px; max-width: 56ch; } .hp-hero__a { margin-top: 24px; } .hp-hero__ph { margin: 0; } .hp-hero__ph img { display: block; width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; border-radius: var(--r-lg); } .hp-sit { padding-bottom: clamp(44px, 5vw, 72px); } .hp-sit h2, .hp-call h2, .hp-s h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.035em; } .hp-sit__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .hp-sit__g { margin-top: 28px; font-size: 18px; font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; } .hp-sit__g + .hp-sit__l { margin-top: 12px; } .hp-card { display: grid; align-content: start; gap: 10px; height: 100%; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); transition: border-color .2s var(--ease); } .hp-card:hover { border-color: var(--ink); } .hp-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .hp-card .i { width: 28px; height: 28px; color: var(--sea); } .hp-card b { font: 800 21px/1.2 var(--display); letter-spacing: -.02em; } .hp-card span { font-size: 15px; line-height: 1.45; color: var(--ink-2); } .hp-call { padding-block: clamp(44px, 5vw, 72px); background: var(--tint, var(--sunk)); } .hp-call__g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 24px; } .hp-tp { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); } .hp-tp__ph { margin: 0; } .hp-tp__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); } .hp-tp__ph figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); } .hp-tp__b { display: grid; align-content: start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .hp-tp h3 { display: flex; align-items: center; gap: 10px; font: 800 24px/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); } .hp-tp__logo { width: auto; height: 32px; } .hp-tp__full { margin-top: -6px; font-size: 13.5px; color: var(--muted); } .hp-tp__m { font-size: 14px; } .hp-tp__m .i { display: inline-block; margin-right: 4px; vertical-align: -2px; color: var(--muted); } .hp-tp__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .hp-tp__links .btn { border: 1px solid var(--control); } .hp-tel { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 800 26px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .hp-tel .i { width: 22px; height: 22px; color: var(--sea); } .hp-tel:hover { color: var(--sea); } .hp-tel--s { font-size: 21px; } .hp-ph { display: grid; gap: 12px; } .hp-ph li { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); } .hp-ph b { font-size: 16px; color: var(--ink); } .hp-ph__src { justify-self: start; font-size: 13.5px; } .hp-call__src { margin-top: 16px; font-size: 13px; color: var(--muted); } .hp-s { padding-block: clamp(44px, 5vw, 72px); border-top: 1px solid var(--line); } .hp-s__h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; } .hp-s__h h2 { max-width: 20ch; } .hp-dl { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } .hp-dl div { min-width: 150px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sea-soft); } .hp-dl dt { font: 800 28px/1 var(--display); letter-spacing: -.02em; color: var(--sea); } .hp-dl dd { max-width: 24ch; margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); } .hp-s__g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 28px; } .hp-docs { position: sticky; top: 96px; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .hp-docs h3 { font-size: 17px; font-weight: 700; } .hp-docs ul { display: grid; gap: 10px; } .hp-docs li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; } .hp-docs li .i { margin-top: 3px; color: var(--ok); } .hp-docs .btn { justify-self: start; } .hp-next .lead { margin-top: 14px; max-width: 60ch; } .hp-next .cta-row { margin-top: 22px; } @media (max-width: 1080px) { .hp-call__g, .hp-s__g { grid-template-columns: minmax(0, 1fr); } .hp-docs { position: static; } } @media (max-width: 760px) { .hp-hero { grid-template-columns: minmax(0, 1fr); } .hp-hero__ph img { aspect-ratio: 16 / 10; } .hp-sit__l { grid-template-columns: minmax(0, 1fr); gap: 10px; } .hp-card { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 16px; } .hp-card .i { grid-row: span 2; } .hp-card b { font-size: 18px; } .hp-tp { grid-template-columns: minmax(0, 1fr); padding: 16px; } .hp-tel { font-size: 23px; } .hp-dl div { min-width: 0; flex: 1 1 140px; } } /* ---------- Страница региона: путешественник первым (П5 плана 03.11) ---------- */ .rgk__ask { margin-top: 20px; padding-inline: 4px; } /* «События»: пока сверенных нет, приглушённая заготовка без текста (Л11), над ней одна строка */ .rgev-ph { position: relative; } .rgev-ph__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; opacity: .6; } .rgev-ph__l li { display: grid; gap: 10px; } .rgev-ph__l i { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--sunk); } .rgev-ph__l b { display: block; height: 12px; border-radius: 6px; background: var(--sunk); } .rgev-ph__l b:nth-of-type(1) { width: 80%; height: 15px; } .rgev-ph__l b:nth-of-type(2) { width: 45%; } .rgev-ph__t { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); font-size: 15px; font-weight: 600; color: var(--ink-2); text-align: center; } /* «Полезно знать»: факт, значение, источник — списком, его хорошо разбирают и люди, и нейросети */ .rgu__l { margin: 0; border-top: 1px solid var(--line); } .rgu__l div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 32px; padding: 16px 0; border-bottom: 1px solid var(--line); } .rgu__l dt { font-weight: 700; } .rgu__l dd { margin: 0; max-width: 72ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); } .rgu__s { margin-left: 4px; font-size: 13px; color: var(--sea); text-decoration: underline; text-underline-offset: 2px; } /* «Соседние направления» */ .rgn2__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .rgn2__c { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); transition: border-color .2s var(--ease); } .rgn2__c:hover { border-color: var(--ink); } .rgn2__c img { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-md); } .rgn2__c span { display: grid; gap: 2px; min-width: 0; } .rgn2__c b { font-weight: 700; line-height: 1.25; } .rgn2__c small { font-size: 13px; color: var(--muted); } /* «Компаниям региона»: узкая полоса внизу (Л10), без коралла */ .rgb { margin-top: var(--sec); padding-block: 28px; background: var(--sunk); } .rgb__in { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 32px; align-items: start; } .rgb h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; } .rgb p { max-width: 80ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .rgb__a { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; } @media (max-width: 1080px) { .rgn2__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .rgev-ph__l { grid-template-columns: minmax(0, 1fr); } .rgev-ph__l li:nth-child(n+2) { display: none; } .rgu__l div { grid-template-columns: minmax(0, 1fr); } .rgn2__l { grid-template-columns: minmax(0, 1fr); gap: 10px; } .rgb__in { grid-template-columns: minmax(0, 1fr); } .rgb__a { grid-column: 1; } } /* ---------- Готовые маршруты (П9 плана 03.11) ---------- */ .mr-f { margin-top: 24px; } .mr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mr-c { position: relative; display: block; height: 420px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; } .mr-c:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .mr-c picture, .mr-c__ph { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .mr-c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), .15) 0%, rgba(var(--shade), 0) 30%, rgba(var(--shade), .85) 100%); } .mr-c .rc__top { position: absolute; left: 16px; top: 16px; } .mr-c__b { position: absolute; left: 20px; right: 18px; bottom: 18px; display: grid; gap: 6px; } .mr-c__b small { font-size: 13px; color: rgba(255, 255, 255, .88); } .mr-c__b b { font: 800 26px/1.1 var(--display); letter-spacing: -.02em; } .mr-c__b span { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .9); } .mr-ask { margin-top: 20px; } .mrk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(48px, 6vw, 80px); } .mrk__lead { max-width: 42ch; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; } .mrk__who { display: flex; gap: 8px; margin-top: 18px; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .mrk__who .i { flex: none; margin-top: 4px; color: var(--ok); } .mrg__t { max-width: 72ch; font-size: 17px; line-height: 1.6; } .mrd__d { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); padding-block: 28px; border-top: 1px solid var(--line); } .mrd__h { display: grid; align-content: start; gap: 14px; } .mrd__h img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); } .mrd__h h3 { display: grid; gap: 4px; font: 800 22px/1.2 var(--display); letter-spacing: -.02em; } .mrd__h h3 span { font: 600 14px/1.3 var(--text); letter-spacing: 0; color: var(--sea); } .mrd__l { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: st; } .mrd__l li { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.55; } .mrd__l li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea); font: 700 13px/1 var(--text); } .mrd__l b { display: block; margin-bottom: 2px; font-size: 17px; } .mrd__l p { color: var(--ink-2); } .mrd__hrs { display: flex; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--ink) !important; } .mrd__hrs .i { flex: none; margin-top: 3px; color: var(--muted); } .mrd__tr { grid-column: 2; display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); font-size: 15px; line-height: 1.5; color: var(--ink-2); } .mrd__tr .i { flex: none; margin-top: 3px; color: var(--sea); } .mrd__note { margin-top: 12px; max-width: 80ch; } .mrh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } .mrh li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); } @media (max-width: 1080px) { .mr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .mr-grid, .mrh { grid-template-columns: minmax(0, 1fr); } .mr-c { height: 340px; } .mrk { grid-template-columns: minmax(0, 1fr); } .mrd__d { grid-template-columns: minmax(0, 1fr); } .mrd__h { grid-template-columns: 96px minmax(0, 1fr); align-items: center; } .mrd__h img { aspect-ratio: 1; } .mrd__tr { grid-column: 1; } } /* Маршрут на странице региона (П9) */ .rgr { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); transition: border-color .2s var(--ease); } .rgr:hover { border-color: var(--ink); } .rgr picture, .rgr img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; } .rgr__b { display: grid; align-content: center; gap: 16px; padding: clamp(20px, 3vw, 36px); } .rgr__t { display: grid; gap: 6px; } .rgr__t small { font-size: 14px; color: var(--sea); font-weight: 600; } .rgr__t b { font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.02em; } .rgr__d { display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); } .rgr__d em { margin-right: 8px; font-style: normal; font-weight: 700; color: var(--ink); } .rgr .btn { justify-self: start; border: 1px solid var(--control); } @media (max-width: 760px) { .rgr { grid-template-columns: minmax(0, 1fr); } .rgr picture, .rgr img { min-height: 0; aspect-ratio: 16 / 10; } } /* ---------- События (П10 плана 03.11; вторая версия 03.11 по замечанию Лукиана) ---------- Карточка: фото места или города 4:3, белая плашка даты в левом верхнем углу, вид события внизу на фото, под фото название и город. Образцы: Культура.РФ (дата на фото, табы месяцев), RUSSPASS (подпись под фото). Наведение только цветом названия (DESIGN.md §2 п. 7). Подробности в окне .evd. */ .evp-h { padding-bottom: 4px; } .evf { position: sticky; top: var(--hdr-h); z-index: 20; margin-top: 20px; background: var(--bg); border-bottom: 1px solid var(--line); } .evf__in { display: grid; gap: 14px; padding-block: 6px 16px; } .evf__tabs { display: flex; gap: 4px 30px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); } .evf__tabs::-webkit-scrollbar, .evf__c::-webkit-scrollbar, .evk-g--rail::-webkit-scrollbar { display: none; } .evf__tabs button { position: relative; flex: none; padding: 10px 0 12px; border: 0; background: none; font: 700 clamp(18px, 1.6vw, 21px)/1.2 var(--display); letter-spacing: -.012em; color: var(--muted); cursor: pointer; transition: color .15s; } .evf__tabs button:hover { color: var(--ink); } .evf__tabs button[aria-pressed="true"] { color: var(--ink); } .evf__tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--sea); } .evf__row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; } .evf__in > *, .evf__row { min-width: 0; } .evf__c { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; } .evf__c button { flex: none; } .evf__r { flex: none; } .evf__r select { min-height: 40px; padding: 0 36px 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: 600 14px var(--text); color: var(--ink); } .evp { padding-bottom: var(--sec); } .evp-s { padding-top: clamp(28px, 3.6vw, 44px); } .evd h2:focus { outline: none; } .evp-s__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; } .evp-s__h h2 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.03em; } .evp-s__h p { font-size: 15.5px; color: var(--muted); } .evp-nav { display: flex; gap: 8px; margin-left: auto; align-self: center; } .evp-nav .ib { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); } .evp-nav .ib:hover:not(:disabled) { background: var(--sunk); } .evp-nav .ib:disabled { opacity: .35; cursor: default; } .ev-note { margin-top: 40px; max-width: 80ch; } .evk-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; } .evk-g--rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .evk-g--rail > .evk { scroll-snap-align: start; } .evk-g--reg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .evk { position: relative; display: grid; align-content: start; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--hdr-h) + 150px); } .evk__ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--sunk); } .evk__ph picture, .evk__ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .evk__ph::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(to top, rgba(var(--shade), .42), rgba(var(--shade), 0)); pointer-events: none; } /* плашка даты: всегда один размер (замечание Лукиана 04.11); «с», «до» мелко в строке с числом; цвета постоянные — плашка лежит на фото в любой теме */ .evk__d { --dw: 64px; --dh: 58px; --db: 24px; position: absolute; z-index: 1; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: var(--dw); height: var(--dh); border-radius: var(--r-sm); background: #fff; color: #13202A; box-shadow: 0 4px 14px -4px rgba(var(--shade), .45); line-height: 1; text-align: center; white-space: nowrap; } .evk__dn { display: flex; align-items: baseline; gap: 2px; } .evk__dn small { font: 600 12px/1 var(--text); color: #5F6C75; } .evk__dn b { font: 800 var(--db)/1 var(--display); letter-spacing: -.035em; } .evk__d--r .evk__dn b { font-size: calc(var(--db) * .78); letter-spacing: -.05em; } .evk__dm { font: 700 12.5px/1 var(--text); color: #0069B4; } .evk__k { position: absolute; z-index: 1; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: var(--r-xs); background: rgba(var(--shade), .66); font: 600 12.5px/1.1 var(--text); color: #fff; } .evk__t { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 700 18px/1.28 var(--display); letter-spacing: -.012em; } .evk__t a { color: var(--ink); transition: color .15s; } .evk__t a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .evk:hover .evk__t a { color: var(--sea); } .evk__t a:focus-visible { outline: none; } .evk:has(.evk__t a:focus-visible) .evk__ph { outline: 3px solid var(--focus); outline-offset: 3px; } .evk__w { margin-top: -6px; font-size: 14.5px; line-height: 1.4; color: var(--muted); } /* окно события */ html.is-modal { overflow: hidden; } .evd { width: min(980px, calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--sh-3); overflow: hidden; } .evd::backdrop { background: rgba(var(--shade), .62); } .evd[open] { animation: evd-in .26s var(--ease-emph); } @keyframes evd-in { from { opacity: 0; transform: translateY(16px); } } /* на широком экране фото слева во всю высоту, текст справа прокручивается сам; на телефоне фото сверху */ .evd__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); height: min(690px, calc(100dvh - 48px)); } .evd__x { position: absolute; top: 12px; right: 12px; z-index: 3; background: #fff; color: var(--ink); box-shadow: var(--sh-1); } .evd__x:hover { background: var(--sunk); } .evd__ph { position: relative; min-height: 0; background: var(--sunk); } .evd__ph picture, .evd__ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .evd__ph .evk__d, .evpg__ph .evk__d { --dw: 76px; --dh: 68px; --db: 29px; top: 16px; left: 16px; } .evd__ph .evk__dm, .evpg__ph .evk__dm { font-size: 14px; } .evd__b { display: grid; align-content: start; gap: 14px; padding: 36px 40px 32px; overflow-y: auto; overscroll-behavior: contain; } .evd__st:has(.evst[hidden]) { display: none; } .evd h2 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.15; letter-spacing: -.025em; } .evd__body { display: grid; gap: 18px; } .evd__f { display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); } .evd__f li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; } .evd__f .i { margin-top: 3px; color: var(--muted); } .evd__t { max-width: 62ch; font-size: 17px; line-height: 1.55; } .evd__a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .evd__a .btn .i { margin-left: 8px; } .evd__l { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; font-weight: 600; } .evd__l a { display: inline-flex; align-items: center; gap: 6px; } .evd__m { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); } .evd__share { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; } .evd__share button, .empty button.lnk { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; } .evd__share [role=status] { color: var(--ok); font-weight: 600; } /* фильтры: вариант, при котором ничего не найдётся, недоступен (04.11) */ .evf__tabs button:disabled, .evf__c button:disabled { color: var(--control); opacity: .55; cursor: default; } .evf__c button:disabled:hover { border-color: var(--line); } /* страница события (П10, 04.11): фото слева, сведения справа, как в окне; ниже «что посмотреть рядом» и другие события */ .evpg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: 8px var(--s-8); } .evpg__ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--sunk); } .evpg__ph picture, .evpg__ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .evpg__b { display: grid; gap: 16px; } .evpg__b h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.03em; } .evpg__b .evd__t { font-size: 18px; } .evpg-s { padding-bottom: var(--s-8); } .evpg-near { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .evpg-near__c { display: grid; gap: 8px; color: var(--ink); } .evpg-near__c picture, .evpg-near__c img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--r-md); } .evpg-near__c b { font: 700 17px/1.3 var(--display); } .evpg-near__c small { font-size: 14px; color: var(--muted); } .evpg-near__c:hover b { color: var(--sea); } @media (max-width: 1080px) { .evpg-near { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .evpg { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 0; } .evpg__ph { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; aspect-ratio: 16 / 11; } .evpg__b .evd__a .btn { flex: 1 1 100%; } .evpg-near { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .evpg-near > li { scroll-snap-align: start; } } /* заготовка «Афиша региона появится позже» (Л11): серые фото и строки без текста */ .rgev-all { margin-top: 20px; } @media (max-width: 1080px) { .evk-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } .evk-g--rail { grid-template-columns: none; grid-auto-columns: calc((100% - 2 * 20px) / 3); } } @media (max-width: 760px) { .evf { position: static; margin-top: 16px; border-bottom: 0; } .evf__in { gap: 12px; padding-bottom: 0; } .evf__tabs, .evf__c { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .evf__tabs { gap: 22px; } .evf__row { flex-direction: column; align-items: stretch; } .evf__r select { width: 100%; } .evp-nav { display: none; } .evk-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } .evk-g--rail, .evk-g--reg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .evk-g--reg > .evk { scroll-snap-align: start; } .evk { gap: 10px; } .evk__t { font-size: 15.5px; } .evk-g--rail .evk__t, .evk-g--reg .evk__t { font-size: 17px; } .evk__w { margin-top: -4px; font-size: 13px; } .evk__d { --dw: 54px; --dh: 50px; --db: 20px; top: 8px; left: 8px; gap: 4px; } .evk__dm { font-size: 11.5px; } .evk__k { left: 8px; bottom: 8px; padding: 4px 7px; font-size: 11.5px; } .evd { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; } .evd__in { display: block; height: auto; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; } .evd__ph { aspect-ratio: 16 / 10; } .evd__b { overflow: visible; } .evd__b { padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); } .evd__a .btn { flex: 1 1 100%; } @keyframes evd-in { from { transform: translateY(40px); } } } @media (prefers-reduced-motion: reduce) { .evd[open] { animation: none; } } /* ---------- Главная: «Журнал и события» (П13 плана 03.11) ---------- */ .jev { padding-block: var(--sec); } .jev__g { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3.5vw, 40px); } .jev__g--one { grid-template-columns: minmax(0, 1fr); } /* левая колонка (05.11): главная статья крупно, три карточки с фото, три строки; высота сравнима с колонкой событий и новостей */ .jev__m { display: grid; align-content: start; gap: 28px; min-width: 0; } .jev__lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; color: var(--ink); } .jev__lead img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); } .jev__lb { display: grid; gap: 10px; } .jev__lead b { font: 800 clamp(24px, 2.2vw, 30px)/1.12 var(--display); letter-spacing: -.02em; transition: color .15s; } .jev__ld { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .jev__lead:hover b { color: var(--sea); } .jev__a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .jev__more { display: grid; border-top: 1px solid var(--line); } .jev__more li { border-bottom: 1px solid var(--line); } .jev__more a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; color: var(--ink); } .jev__more b { font-size: 16px; font-weight: 700; line-height: 1.35; transition: color .15s; } .jev__more a:hover b { color: var(--sea); } .jev__c { display: grid; align-content: start; gap: 8px; color: var(--ink); } .jev__c img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); } .jev__k { font-size: 13px; font-weight: 600; color: var(--sea); } .jev__c b { font: 800 17px/1.25 var(--display); letter-spacing: -.01em; transition: color .15s; } .jev__c:hover b { color: var(--sea); } .jev__side { display: grid; align-content: start; gap: 28px; } .jev__side h3 { margin-bottom: 12px; font-size: 18px; font-weight: 700; } .jev__l { display: grid; gap: 14px; margin-bottom: 14px; } .jev__l a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); } .jev__l picture, .jev__l img { display: block; width: 104px; height: 78px; object-fit: cover; border-radius: var(--r-sm); } .jev__l span { display: grid; gap: 2px; min-width: 0; } .jev__l b { font-size: 15px; line-height: 1.3; } .jev__l a:hover b { color: var(--sea); } .jev__l small { font-size: 13px; color: var(--muted); } .jev__l .jev__dt { font-weight: 700; color: var(--sea); } .jev__n { display: grid; gap: 10px; margin-bottom: 12px; } .jev__n li { display: grid; gap: 2px; font-size: 15px; line-height: 1.35; } .jev__n small { font-size: 12.5px; color: var(--muted); } .jev__n a { color: var(--ink); } .jev__all { margin-top: 0; } .jev__all .btn { border: 1px solid var(--control); } @media (max-width: 1080px) { .jev__g { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .jev__lead { grid-template-columns: minmax(0, 1fr); gap: 14px; } .jev__a { grid-template-columns: minmax(0, 1fr); gap: 14px; } .jev__c { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: center; } .jev__c picture { grid-row: span 2; } .jev__c img { aspect-ratio: 4 / 3; } .jev__more a { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ---------- «Журнал» (П12 плана 03.11) ---------- */ .zh2__lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); transition: border-color .2s var(--ease); } .zh2__lead:hover { border-color: var(--ink); } .zh2__lead img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; } .zh2__b { display: grid; align-content: center; gap: 12px; padding: clamp(24px, 4vw, 56px); } .zh2__b b { font: 800 clamp(28px, 3vw, 40px)/1.08 var(--display); letter-spacing: -.03em; } .zh2__b > span:last-child { font-size: 17px; line-height: 1.5; color: var(--ink-2); } .zh2__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } .zh2__l { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); } .zh2__nb { border: 1px solid var(--control); } @media (max-width: 1080px) { .zh2__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .zh2__lead { grid-template-columns: minmax(0, 1fr); } .zh2__lead img { min-height: 0; aspect-ratio: 16 / 10; } .zh2__g { grid-template-columns: minmax(0, 1fr); } } .art__rel { display: grid; gap: 10px; padding: 0; list-style: none; } .art__rel a { font-weight: 600; } .art__draft { display: inline-block; margin-bottom: 14px; max-width: 100%; white-space: normal; line-height: 1.4; } /* ---------- «Новости» (П11 плана 03.11) ---------- */ .nw-f { margin-top: 24px; } .nw { display: grid; gap: 0; max-width: 820px; padding: 0; list-style: none; } .nw__i { padding-block: 24px; border-top: 1px solid var(--line); scroll-margin-top: 96px; } .nw__i:target { background: linear-gradient(90deg, var(--sea-soft), transparent); } .nw__m { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--muted); } .nw__m span { font-weight: 600; color: var(--sea); } .nw__i h2 { margin-top: 6px; font-size: clamp(21px, 2vw, 25px); line-height: 1.2; letter-spacing: -.02em; } .nw__i > p:not(.nw__m):not(.asof) { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); } .nw__i .asof { margin-top: 10px; } .jev h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.045em; } .jev__a { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .jev__a li:only-child .jev__c { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 24px; align-items: start; } .jev__a li:only-child .jev__c picture { grid-row: span 3; } .jev__a li:only-child .jev__c b { font-size: 26px; line-height: 1.15; } @media (max-width: 760px) { .jev__a li:only-child .jev__c { grid-template-columns: minmax(0, 1fr); } .jev__a li:only-child .jev__c picture { grid-row: auto; } } /* «Проверка» на индексе реестров (П7, часть 2, 05.11): выбор региона рядом с полем, группы результатов, пояснения */ .pv__row { flex-wrap: wrap; } .pv__reg { min-height: 52px; padding: 0 36px 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: 600 15px var(--text); color: var(--ink); max-width: 260px; } .pv__notes { display: grid; gap: 10px; margin-top: 12px; } .pv__note { max-width: 80ch; } .pv__list { display: grid; gap: 28px; } .pv__gt { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.02em; margin-bottom: 4px; } .pv__gh { margin-bottom: 8px; } .pv__gl { display: grid; gap: 12px; margin-top: 10px; } .result__hint { color: var(--muted); font-size: 14px; } @media (max-width: 760px) { .pv__row .input { flex: 1 1 100%; width: 100%; min-width: 0; } .pv__reg { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; } } .result .status { white-space: normal; text-align: left; } .result__row { min-width: 0; overflow-wrap: anywhere; }