/* ========================================================================== X-Travel — modernist grid theme Источник правды по значениям: design_handoff_xtravel_redesign/README.md и инлайн-стили в *.dc.html. Прототипные инлайны перенесены в классы. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Токены -------------------------------------------------------------------------- */ :root { --xbg: #f3f2f2; --xtx: #201e1d; --xmut: #75716e; --xln: #201e1d; --xln2: #d8d5d3; --xac: #c8f051; --xai: #1a1c0f; --xat: #7f9c1e; --xph1: #e8e6e5; --xph2: #dedcdb; --xad: #eceaea; --xfield: #fdfef9; --xfield-tx: #8b9070; --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --x-shell: 1440px; --x-pad: 40px; --x-line: 2px; } html[data-theme="dark"] { --xbg: #101214; --xtx: #f2f4f3; --xmut: #8a9096; --xln: #3a3f45; --xln2: #26292d; --xat: #c8f051; --xph1: #1d2024; --xph2: #16181b; --xad: #1b1e21; --xfield: #f2f4f3; --xfield-tx: #5d6570; } /* Пока JS не проставил data-theme, уважаем системную настройку. Инлайновый скрипт в выставляет атрибут до первой отрисовки, так что этот блок срабатывает только при отключённом JS. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --xbg: #101214; --xtx: #f2f4f3; --xmut: #8a9096; --xln: #3a3f45; --xln2: #26292d; --xat: #c8f051; --xph1: #1d2024; --xph2: #16181b; --xad: #1b1e21; --xfield: #f2f4f3; --xfield-tx: #5d6570; } } /* -------------------------------------------------------------------------- 2. База -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--xbg); color: var(--xtx); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; text-wrap: balance; } p { margin: 0; } a { color: inherit; text-decoration: none; } a:hover { opacity: .8; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--xat); outline-offset: 2px; } ::selection { background: var(--xac); color: var(--xai); } .x-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .x-skip-link { position: absolute; top: -100px; left: 0; z-index: 100; background: var(--xac); color: var(--xai); padding: 12px 20px; font: 600 14px var(--font-body); } .x-skip-link:focus { top: 0; } /* Ч/б — фирменный приём системы, включается переключателем в шапке. По умолчанию фото цветные; ч/б применяется только при data-photo="bw" на . Плавный переход задан на самих изображениях. */ html[data-photo="bw"] .x-gray, html[data-photo="bw"] .x-fig img, html[data-photo="bw"] .x-prose figure img { filter: grayscale(1) contrast(1.08); } /* -------------------------------------------------------------------------- 3. Каркас -------------------------------------------------------------------------- */ .x-shell { max-width: var(--x-shell); margin: 0 auto; border-left: var(--x-line) solid var(--xln); border-right: var(--x-line) solid var(--xln); min-height: 100vh; } .x-sec { border-top: var(--x-line) solid var(--xln); } .x-sec--pad { padding: 32px var(--x-pad) 36px; } /* Сетки-полоски: ячейки разделены линиями, последняя без правой границы. */ .x-grid { display: grid; } .x-grid > * { border-right: var(--x-line) solid var(--xln); } .x-grid > *:last-child { border-right: 0; } .x-grid--2 { grid-template-columns: 1fr 1fr; } .x-grid--3 { grid-template-columns: repeat(3, 1fr); } .x-grid--4 { grid-template-columns: repeat(4, 1fr); } .x-grid--aside { grid-template-columns: 1fr 380px; } .x-grid--faq { grid-template-columns: 1.2fr 1fr; } /* Статистика и направления живут по своим правилам: на мобайле они складываются в 2 колонки, а не в одну, как остальные сетки. */ .x-grid--stats { grid-template-columns: repeat(4, 1fr); } .x-grid--dest { grid-template-columns: repeat(6, 1fr); } /* -------------------------------------------------------------------------- 4. Шапка -------------------------------------------------------------------------- */ .x-header { display: grid; grid-template-columns: 190px 1fr 240px 84px 104px 118px; border-bottom: var(--x-line) solid var(--xln); height: 68px; } .x-logo { display: flex; align-items: center; padding: 0 24px; border-right: var(--x-line) solid var(--xln); font: 800 20px var(--font-heading); white-space: nowrap; } .x-logo__dot { color: var(--xat); } .x-nav { display: flex; align-items: center; gap: 28px; padding: 0 24px; font: 500 14px var(--font-body); text-transform: uppercase; letter-spacing: .5px; min-width: 0; } .x-nav a { white-space: nowrap; } .x-nav .current-menu-item > a, .x-nav .current-menu-parent > a, .x-nav .current-menu-ancestor > a, .x-nav a[aria-current="page"] { border-bottom: 2px solid var(--xac); padding-bottom: 2px; } .x-search { display: flex; align-items: center; gap: 8px; padding: 0 24px; border-left: var(--x-line) solid var(--xln); } .x-search__icon { color: var(--xmut); font-size: 15px; line-height: 1; } .x-search__input { width: 100%; border: 0; background: none; color: var(--xtx); font: 400 14px var(--font-body); padding: 0; } .x-search__input::placeholder { color: var(--xmut); opacity: 1; } .x-search__input:focus-visible { outline-offset: 4px; } .x-lang { display: flex; align-items: center; justify-content: center; gap: 10px; border-left: var(--x-line) solid var(--xln); font: 600 13px var(--font-body); } .x-lang__sep, .x-lang a { color: var(--xmut); } .x-lang .is-current { color: var(--xtx); } .x-theme-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; border-left: var(--x-line) solid var(--xln); font: 600 13px var(--font-body); cursor: pointer; width: 100%; } html[data-theme="dark"] .x-theme-toggle__to-dark { display: none; } html:not([data-theme="dark"]) .x-theme-toggle__to-light { display: none; } /* Переключатель фото — по образцу переключателя темы */ .x-photo-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; border-left: var(--x-line) solid var(--xln); font: 600 13px var(--font-body); cursor: pointer; width: 100%; } html[data-photo="bw"] .x-photo-toggle__to-bw { display: none; } html:not([data-photo="bw"]) .x-photo-toggle__to-color { display: none; } .x-burger { display: none; } .x-nav-tools { display: none; } /* только в мобильном бургер-меню */ /* -------------------------------------------------------------------------- 5. Повторяющиеся элементы -------------------------------------------------------------------------- */ /* Лаймовая плашка */ .x-badge { display: inline-block; background: var(--xac); color: var(--xai); font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: 1px; padding: 7px 14px; } /* Кикер-рубрика */ .x-kicker { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: 1px; color: var(--xat); } .x-mut { color: var(--xmut); } .x-meta { font-size: 13px; color: var(--xmut); } /* Точка/слэш акцентом в заголовках */ .x-dot { color: var(--xat); } /* Широкая лаймовая кнопка, текст прижат влево */ .x-btn { display: block; width: 100%; background: var(--xac); color: var(--xai); font: 600 15px var(--font-body); padding: 15px 24px; text-align: left; } .x-btn--auto { width: auto; flex: none; padding: 16px 32px; } .x-btn--ink { background: var(--xai); color: var(--xac); } /* Кнопка-контур */ .x-obtn { display: inline-block; border: 1px solid var(--xln); padding: 8px 16px; font: 600 13px var(--font-body); } /* Тег */ .x-tag { display: inline-block; border: 1px solid var(--xln2); padding: 7px 14px; font: 500 13px var(--font-body); } .x-tags { display: flex; flex-wrap: wrap; gap: 8px; } /* Плейсхолдер фото — используется, только когда у записи нет миниатюры */ .x-ph { background: repeating-linear-gradient(45deg, var(--xph1) 0 14px, var(--xph2) 14px 28px); display: flex; align-items: center; justify-content: center; color: var(--xmut); font: 500 13px var(--font-mono); text-align: center; padding: 8px; } /* Обёртка изображения фиксированной высоты */ .x-fig { position: relative; overflow: hidden; } .x-fig img { width: 100%; height: 100%; object-fit: cover; transition: filter .45s ease; } /* Рекламный слот: высота зарезервирована заранее, без CLS */ .x-ad { display: flex; align-items: center; justify-content: center; color: var(--xmut); font: 500 13px var(--font-mono); background: repeating-linear-gradient(45deg, transparent 0 12px, var(--xad) 12px 24px); overflow: hidden; } .x-ad--boxed { border: 1px dashed var(--xln2); } .x-ad--300x250 { height: 250px; } .x-ad--970x90 { height: 100px; } .x-ad--728x90 { height: 100px; } .x-ad--in-grid { padding: 24px; height: auto; min-height: 250px; } .x-ad--in-article { margin: 28px 0; } .x-ad--in-feed { margin: 24px var(--x-pad); } .x-ad ins { display: block; width: 100%; } /* Нумерованный список «Читають зараз» / «Популярне» / топ-3 */ .x-num { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--xln2); align-items: baseline; } .x-num:last-child { border-bottom: 0; } .x-num__n { font: 800 15px var(--font-heading); color: var(--xat); flex: none; } .x-num__t { font: 500 14px/1.4 var(--font-body); } /* Карточка-бокс с 2px-рамкой (сайдбар) */ .x-box { border: var(--x-line) solid var(--xln); padding: 22px 24px; } .x-box__title { font: 800 16px var(--font-heading); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .5px; } /* Блок подписки */ .x-sub { background: var(--xac); color: var(--xai); padding: 24px; } .x-sub__title { font: 800 18px var(--font-heading); margin: 0 0 8px; } .x-sub__text { font: 400 13px/1.5 var(--font-body); margin: 0 0 14px; } .x-sub__form { display: flex; flex-direction: column; gap: 8px; } .x-sub__input { background: var(--xfield); color: var(--xai); border: 0; padding: 10px 14px; font: 400 13px var(--font-body); width: 100%; } .x-sub__input::placeholder { color: var(--xfield-tx); opacity: 1; } .x-sub__btn { background: var(--xai); color: var(--xac); padding: 10px 14px; font: 600 13px var(--font-body); text-align: left; } /* Широкий лаймовый баннер */ .x-banner { background: var(--xac); color: var(--xai); padding: 48px var(--x-pad); display: flex; align-items: center; justify-content: space-between; gap: 48px; } .x-banner__title { font: 800 40px/1.05 var(--font-heading); letter-spacing: -1px; max-width: 620px; } .x-banner__form { display: flex; flex: none; } .x-banner__input { background: var(--xfield); color: var(--xai); border: 0; padding: 14px 20px; width: 260px; font: 400 15px var(--font-body); } .x-banner__input::placeholder { color: var(--xfield-tx); opacity: 1; } .x-banner__btn { background: var(--xai); color: var(--xac); padding: 14px 26px; font: 600 15px var(--font-body); white-space: nowrap; } /* Нижний CTA как форма заявок */ .x-banner--lead { align-items: center; } .x-banner__text { display: flex; flex-direction: column; gap: 10px; max-width: 480px; } .x-banner__sub { font: 400 15px/1.5 var(--font-body); color: var(--xai); opacity: .85; } .x-lead-form { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 300px; align-items: stretch; } .x-lead-input { background: var(--xfield); color: var(--xai); border: 0; padding: 13px 16px; font: 400 15px var(--font-body); flex: 1 1 160px; min-width: 0; } .x-lead-input::placeholder { color: var(--xfield-tx); opacity: 1; } .x-lead-input--area { resize: vertical; min-height: 46px; flex-basis: 100%; } .x-lead-form .x-banner__btn { flex: 0 0 auto; cursor: pointer; } /* Honeypot — прячем от людей, боты заполняют */ .x-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .x-lead-done { background: var(--xai); color: var(--xac); padding: 16px 20px; font: 600 15px var(--font-body); flex: 1; min-width: 300px; } .x-lead-error { flex-basis: 100%; margin: 0; font: 600 13px var(--font-body); color: #7a1414; } /* Горизонтальный скролл (подборка сезона, фильтры рубрик) — только мобайл */ .x-scroller { display: flex; } .x-scroller::-webkit-scrollbar { display: none; } /* Иконочная кнопка мобильной шапки */ .x-icon-btn { display: none; align-items: center; justify-content: center; border-left: var(--x-line) solid var(--xln); font-size: 17px; line-height: 1; } /* Оглавление-гармошка: на десктопе его нет, там сайдбар */ .x-toc-mobile { display: none; } /* Заголовок секции */ .x-h2 { font: 800 28px var(--font-heading); letter-spacing: -.5px; } .x-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .x-sec__more { font: 600 13px var(--font-body); text-transform: uppercase; color: var(--xmut); } .x-sec__title-pad { margin: 0; padding: 32px var(--x-pad) 22px; } .x-h2--tight { margin-bottom: 18px; } /* Заголовок секции отделён от сетки под ним */ .x-sec__title-pad + .x-grid { border-top: var(--x-line) solid var(--xln); } /* Подборка сезона: на десктопе сетка, на мобайле — горизонтальный скролл */ .x-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* -------------------------------------------------------------------------- 6. Карточки статей -------------------------------------------------------------------------- */ /* Ячейка сетки: кикер, заголовок, время чтения */ .x-cell { padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .x-cell__title { font: 700 18px/1.25 var(--font-heading); } /* В макете время стоит сразу под заголовком. Прижимать его к низу ячейки нельзя: соседняя ячейка — рекламный слот 300×250, он растягивает ряд. */ .x-cell__time { font-size: 13px; color: var(--xmut); } .x-cell__fig { width: 100%; height: 160px; } /* Карточка подборки: фото сверху, заголовок снизу */ .x-pick { display: flex; flex-direction: column; gap: 10px; } .x-pick__fig { height: 150px; } .x-pick__title { font: 700 16px/1.3 var(--font-heading); } /* Ячейка направления */ .x-dest { padding: 20px; display: flex; flex-direction: column; gap: 6px; } .x-dest__name { font: 800 18px var(--font-heading); } .x-dest__count { font-size: 13px; color: var(--xmut); } /* Строка ленты в списке статей */ .x-row { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 28px var(--x-pad); border-bottom: 1px solid var(--xln2); align-items: center; } .x-row__fig { height: 180px; } .x-row__fig > .x-fig, .x-row__fig > .x-ph { height: 100%; } .x-row__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .x-row__title { font: 800 24px/1.15 var(--font-heading); letter-spacing: -.5px; } .x-row__excerpt { font: 400 15px/1.5 var(--font-body); color: var(--xmut); } /* -------------------------------------------------------------------------- 7. Главная -------------------------------------------------------------------------- */ .x-hero__text { padding: 48px var(--x-pad); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; align-items: flex-start; } .x-hero__top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .x-hero__title { font: 800 50px/1.02 var(--font-heading); letter-spacing: -1.5px; } .x-hero__lead { font: 400 16px/1.55 var(--font-body); color: var(--xmut); } .x-hero__fig { min-height: 400px; } .x-stat { padding: 22px 24px; } .x-stat__n { font: 800 34px var(--font-heading); letter-spacing: -1px; } .x-stat__l { font: 500 13px var(--font-body); color: var(--xmut); text-transform: uppercase; letter-spacing: 1px; } .x-choice { padding: 36px var(--x-pad); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .x-choice__title { font: 800 32px/1.1 var(--font-heading); letter-spacing: -.5px; } .x-choice__quote { font: italic 400 17px/1.55 var(--font-body); color: var(--xmut); border-left: 3px solid var(--xac); padding-left: 16px; } .x-choice__fig { min-height: 300px; } .x-faq { padding: 32px var(--x-pad); } .x-faq__item { border-bottom: 1px solid var(--xln2); padding: 14px 0; } .x-faq__item:last-child { border-bottom: 0; } .x-faq__q { font: 600 16px var(--font-body); cursor: pointer; list-style: none; } .x-faq__q::-webkit-details-marker { display: none; } .x-faq__a { font: 400 14px/1.55 var(--font-body); color: var(--xmut); margin: 10px 0 0; } .x-events { padding: 32px var(--x-pad); } .x-event { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--xln2); align-items: baseline; } .x-event__date { font: 800 15px var(--font-heading); color: var(--xat); flex: none; width: 64px; } .x-event__name { font: 500 15px var(--font-body); } .x-queries { margin-top: 24px; } .x-queries__title { font: 600 13px var(--font-body); text-transform: uppercase; letter-spacing: 1px; color: var(--xmut); margin: 0 0 12px; } .x-top { padding: 20px 24px; display: flex; gap: 16px; align-items: baseline; } .x-top__n { font: 800 18px var(--font-heading); color: var(--xat); } .x-top__t { font: 500 15px var(--font-body); } /* -------------------------------------------------------------------------- 8. Статья -------------------------------------------------------------------------- */ .x-crumbs { padding: 28px var(--x-pad) 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--xmut); flex-wrap: wrap; } .x-crumbs__current { color: var(--xtx); } .x-title-block { padding: 20px var(--x-pad) 36px; border-bottom: var(--x-line) solid var(--xln); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 900px; } .x-title-block__h1 { font: 800 52px/1.03 var(--font-heading); letter-spacing: -1.5px; } .x-title-block__meta { display: flex; gap: 20px; font-size: 14px; color: var(--xmut); flex-wrap: wrap; } .x-article { padding: 36px var(--x-pad) 48px; } .x-article__hero { height: 420px; margin-bottom: 12px; } .x-article__caption { font-size: 12px; color: var(--xmut); margin-bottom: 32px; } .x-article__lead { font: 400 19px/1.65 var(--font-body); margin: 0 0 24px; } /* Типографика тела статьи — применяется к core-блокам Gutenberg */ .x-prose > * { margin: 0 0 20px; } .x-prose > *:last-child { margin-bottom: 0; } .x-prose p { font: 400 17px/1.65 var(--font-body); } .x-prose h2 { font: 800 30px var(--font-heading); letter-spacing: -.5px; margin: 36px 0 16px; border-top: var(--x-line) solid var(--xln); padding-top: 28px; scroll-margin-top: 24px; } .x-prose h3 { font: 800 22px var(--font-heading); letter-spacing: -.3px; margin: 28px 0 12px; } .x-prose ul, .x-prose ol { font: 400 17px/1.75 var(--font-body); padding-left: 22px; } .x-prose li { margin-bottom: 4px; } .x-prose a { color: var(--xat); border-bottom: 1px solid var(--xac); } .x-prose figure { margin: 28px 0; } .x-prose figure img { width: 100%; transition: filter .45s ease; } .x-prose figcaption { font-size: 12px; color: var(--xmut); margin-top: 8px; } .x-prose blockquote { margin: 28px 0; padding: 20px 24px; border-left: 3px solid var(--xac); background: var(--xad); font: italic 400 18px/1.55 var(--font-body); } .x-prose blockquote p { font: inherit; } .x-prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .x-prose th, .x-prose td { padding: 10px 12px; border-bottom: 1px solid var(--xln2); text-align: left; } .x-prose th { font-weight: 600; border-bottom-width: 2px; border-bottom-color: var(--xln); } .x-tip { margin: 36px 0 0; border: var(--x-line) solid var(--xln); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; } .x-tip__text { font: 400 16px/1.6 var(--font-body); } .x-article__foot { margin-top: 36px; border-top: var(--x-line) solid var(--xln); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .x-share { display: flex; gap: 10px; font: 600 13px var(--font-body); } .x-aside { padding: 36px 32px; display: flex; flex-direction: column; gap: 28px; align-self: start; position: sticky; top: 0; } .x-toc { display: flex; flex-direction: column; } .x-toc a { padding: 9px 0; border-bottom: 1px solid var(--xln2); font: 500 14px var(--font-body); } .x-toc a:last-child { border-bottom: 0; } .x-toc a.is-active { color: var(--xat); } .x-toc__rest { color: var(--xmut); } /* -------------------------------------------------------------------------- 9. Список статей -------------------------------------------------------------------------- */ .x-archive-head { padding: 40px var(--x-pad) 0; border-bottom: var(--x-line) solid var(--xln); } .x-archive-head__h1 { font: 800 64px/1 var(--font-heading); margin: 0 0 24px; letter-spacing: -2.5px; } .x-filters { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 26px; flex-wrap: wrap; } .x-filters__list { display: flex; gap: 10px; font: 600 13px var(--font-body); text-transform: uppercase; letter-spacing: .5px; flex-wrap: wrap; } .x-filter { border: 1px solid var(--xln2); padding: 9px 18px; } .x-filter.is-active { background: var(--xtx); color: var(--xbg); border-color: var(--xtx); } .x-sort { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font-body); color: var(--xmut); } .x-sort__label { white-space: nowrap; } /* Нативный select, стилизованный под дизайн-систему: своя стрелка ▾ */ .x-sort__value { border: 1px solid var(--xln2); padding: 8px 30px 8px 14px; color: var(--xtx); background: var(--xbg); font: 500 13px var(--font-body); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--xtx) 50%), linear-gradient(135deg, var(--xtx) 50%, transparent 50%); background-position: calc(100% - 15px) center, calc(100% - 10px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .x-sort__value:focus-visible { outline: 2px solid var(--xat); outline-offset: 2px; } /* Мелкие теги-ссылки на карточках ленты */ .x-tag--sm { padding: 4px 10px; font-size: 12px; } .x-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; position: relative; z-index: 1; } .x-row__tags .x-tag { position: relative; z-index: 1; } /* Карточка кликабельна целиком через растянутую ссылку заголовка, а теги остаются отдельными ссылками поверх */ .x-row { position: relative; } .x-row__link::after { content: ""; position: absolute; inset: 0; z-index: 0; } .x-row__link { color: inherit; } .x-pagination { border-top: var(--x-line) solid var(--xln); padding: 24px var(--x-pad); display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-body); flex-wrap: wrap; } .x-pagination .page-numbers { border: 1px solid var(--xln2); padding: 9px 15px; } .x-pagination .page-numbers.current { background: var(--xtx); color: var(--xbg); border-color: var(--xtx); } .x-pagination .page-numbers.dots { border: 0; color: var(--xmut); padding: 0 4px; } .x-pagination .next { margin-left: auto; padding: 9px 18px; } /* -------------------------------------------------------------------------- 10. Про нас -------------------------------------------------------------------------- */ .x-about-hero { padding: 56px var(--x-pad); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; justify-content: center; } .x-about-hero__h1 { font: 800 56px/1.02 var(--font-heading); letter-spacing: -2px; } .x-about-hero__lead { font: 400 18px/1.6 var(--font-body); color: var(--xmut); } .x-about-hero__fig { min-height: 380px; } .x-mission { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; } .x-mission__n { font: 800 22px var(--font-heading); color: var(--xat); } .x-mission__title { font: 800 20px var(--font-heading); } .x-mission__text { font: 400 15px/1.6 var(--font-body); color: var(--xmut); } .x-strip__fig { height: 220px; } /* -------------------------------------------------------------------------- 11. Подвал -------------------------------------------------------------------------- */ /* Блок тем в подвале */ .x-footer-topics { padding: 28px var(--x-pad); } .x-footer-topics__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 16px; } .x-footer-topics__title { font: 800 20px var(--font-heading); letter-spacing: -.5px; } .x-tag__count { color: var(--xmut); margin-left: 6px; font-size: 11px; } /* Облако тем на странице «Всі теми» */ .x-topics-lead { margin: 12px 0 24px; font: 400 16px/1.6 var(--font-body); color: var(--xmut); max-width: 640px; } .x-topics-cloud { display: flex; flex-wrap: wrap; gap: 12px; } .x-topic { display: flex; align-items: baseline; gap: 10px; border: 1px solid var(--xln2); padding: 12px 18px; } .x-topic:hover { border-color: var(--xln); } .x-topic__name { font: 700 16px var(--font-heading); } .x-topic__count { font-size: 12px; color: var(--xmut); } .x-footer { border-top: var(--x-line) solid var(--xln); padding: 22px var(--x-pad); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 14px; color: var(--xmut); flex-wrap: wrap; } .x-footer__logo { font: 800 15px var(--font-heading); color: var(--xtx); } .x-footer__nav { display: flex; gap: 24px; } /* -------------------------------------------------------------------------- 12. Адаптив -------------------------------------------------------------------------- */ @media (max-width: 1200px) { :root { --x-pad: 28px; } .x-grid--aside { grid-template-columns: 1fr 320px; } .x-hero__title { font-size: 42px; } .x-title-block__h1 { font-size: 42px; } .x-archive-head__h1 { font-size: 52px; letter-spacing: -2px; } .x-banner__title { font-size: 32px; } .x-grid--dest { grid-template-columns: repeat(3, 1fr); } .x-grid--dest > *:nth-child(3n) { border-right: 0; } .x-grid--dest > *:nth-child(n+4) { border-top: var(--x-line) solid var(--xln); } } @media (max-width: 960px) { /* Сайдбар уходит под контент */ .x-grid--aside, .x-grid--faq { grid-template-columns: 1fr; } .x-grid--aside > *, .x-grid--faq > * { border-right: 0; } .x-grid--aside > *:not(:last-child), .x-grid--faq > *:not(:last-child) { border-bottom: var(--x-line) solid var(--xln); } .x-aside { position: static; } .x-grid--4, .x-grid--stats { grid-template-columns: repeat(2, 1fr); } .x-grid--4 > *:nth-child(2n), .x-grid--stats > *:nth-child(2n) { border-right: 0; } .x-grid--4 > *:nth-child(n+3), .x-grid--stats > *:nth-child(n+3) { border-top: var(--x-line) solid var(--xln); } .x-grid--3 { grid-template-columns: repeat(2, 1fr); } .x-grid--3 > *:nth-child(2n) { border-right: 0; } .x-grid--3 > *:nth-child(n+3) { border-top: var(--x-line) solid var(--xln); } .x-picks { grid-template-columns: repeat(2, 1fr) !important; } .x-banner { flex-direction: column; align-items: stretch; gap: 24px; padding: 36px var(--x-pad); } .x-banner__form { flex: 1 1 auto; } .x-banner__input { width: 100%; } } /* -------------------------------------------------------------------------- Мобильная версия — по макетам design_handoff_xtravel_mobile (канва 390px). Брейкпоинт 768px, как указано в хендоффе. -------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { --x-pad: 20px; } .x-shell { border-left: 0; border-right: 0; } /* --- Шапка: лого | ⌕ | мова | ☰ --- */ .x-header { grid-template-columns: 1fr 44px auto 44px; height: auto; grid-auto-rows: min-content; align-items: stretch; } .x-logo, .x-icon-btn, .x-lang { min-height: 56px; } .x-logo { border-right: 0; padding: 0 14px; font-size: 16px; order: 1; } .x-search-toggle { order: 2; } .x-lang { order: 3; } .x-burger { order: 4; } /* Переключатели фото/темы уходят в бургер-меню — из шапки убираем */ .x-header > .x-photo-toggle, .x-header > .x-theme-toggle { display: none; } .x-icon-btn { display: flex; } /* Язык виден в шапке компактно */ .x-lang { display: flex; padding: 0 14px; border-left: var(--x-line) solid var(--xln); font-size: 13px; } /* Поиск прячется за иконкой и раскрывается строкой под шапкой */ .x-search { display: none; order: 5; grid-column: 1 / -1; border-left: 0; border-top: var(--x-line) solid var(--xln); padding: 0 20px; min-height: 52px; } .x-search.is-open { display: flex; } /* Меню и инструменты разворачиваются панелью под шапкой */ .x-nav { order: 6; grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-top: var(--x-line) solid var(--xln); background: var(--xbg); } .x-header.is-menu-open .x-nav { display: flex; } .x-nav a { display: flex; align-items: center; min-height: 48px; padding: 12px 20px; border-bottom: 1px solid var(--xln2); } /* Инструменты в меню: тема и фото с подписями */ .x-nav-tools { order: 7; grid-column: 1 / -1; display: none; background: var(--xbg); } .x-header.is-menu-open .x-nav-tools { display: flex; } .x-nav-tools__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 16px; font: 600 14px var(--font-body); border-bottom: var(--x-line) solid var(--xln); } .x-nav-tools__btn:first-child { border-right: var(--x-line) solid var(--xln); } .x-nav-tools__label { color: var(--xmut); font-weight: 500; } /* --- Сетки складываются в один столбик... --- */ .x-grid--2, .x-grid--3, .x-grid--4, .x-grid--aside, .x-grid--faq { grid-template-columns: 1fr; } /* Сбрасываем планшетные линии, иначе они удваиваются с мобильными */ .x-grid > * { border-right: 0; } .x-grid--3 > *, .x-grid--4 > *, .x-grid--stats > *, .x-grid--dest > * { border-top: 0; } .x-grid--2 > *:not(:last-child), .x-grid--3 > *:not(:last-child), .x-grid--4 > *:not(:last-child), .x-grid--aside > *:not(:last-child), .x-grid--faq > *:not(:last-child) { border-bottom: var(--x-line) solid var(--xln); } /* Карточки статей отделяются друг от друга тонкой линией, а от рекламного слота — основной 2px, как в макете */ .x-grid--4 > .x-cell:has(+ .x-cell) { border-bottom-width: 1px; border-bottom-color: var(--xln2); } /* ...кроме статистики и направлений — они остаются 2×2 */ .x-grid--stats, .x-grid--dest { grid-template-columns: 1fr 1fr; } .x-grid--stats > *:nth-child(odd), .x-grid--dest > *:nth-child(odd) { border-right: var(--x-line) solid var(--xln); } .x-grid--stats > *:not(:nth-last-child(-n+2)), .x-grid--dest > *:not(:nth-last-child(-n+2)) { border-bottom: var(--x-line) solid var(--xln); } /* --- Главная --- */ /* Фото героя уходит наверх, текст под ним */ .x-hero__fig { order: -1; min-height: 220px; } .x-hero__text { padding: 24px var(--x-pad); border-top: var(--x-line) solid var(--xln); gap: 14px; } .x-hero__title { font: 800 30px/1.05 var(--font-heading); letter-spacing: -1px; } .x-hero__lead { display: none; } .x-btn { padding: 15px 20px; } .x-badge { font-size: 11px; padding: 6px 12px; } .x-stat { padding: 16px 20px; } .x-stat__n { font-size: 26px; letter-spacing: 0; } .x-stat__l { font-size: 11px; letter-spacing: 0; } /* Карточки актуальных статей — в столбик, без фото */ .x-cell { padding: 20px; } .x-cell__fig { display: none; } .x-cell__title { font: 700 19px/1.25 var(--font-heading); } .x-kicker { font-size: 11px; } /* Подборка сезона — горизонтальный скролл */ .x-sec--picks { padding: 20px 0 24px; } .x-sec--picks .x-sec__head { margin: 0 var(--x-pad) 16px; } .x-sec--picks .x-h2 { font-size: 22px; } .x-sec--picks .x-sec__more { display: none; } .x-picks { display: flex !important; grid-template-columns: none !important; gap: 14px; overflow-x: auto; padding: 0 var(--x-pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .x-picks::-webkit-scrollbar { display: none; } .x-pick { flex: none; width: 220px; } .x-pick__fig { height: 130px; } .x-pick__title { font: 700 15px/1.3 var(--font-heading); } .x-dest { padding: 16px 20px; gap: 4px; } .x-dest__name { font-size: 16px; } .x-dest__count { font-size: 12px; } .x-choice { padding: 24px var(--x-pad); } .x-choice__title { font-size: 24px; } .x-choice__fig { min-height: 200px; order: -1; } .x-faq, .x-events { padding: 24px var(--x-pad); } .x-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 28px var(--x-pad); } .x-banner__title { font: 800 24px/1.1 var(--font-heading); letter-spacing: -.5px; } .x-banner__form { flex-direction: column; gap: 8px; } .x-banner__input { width: 100%; padding: 13px 16px; font-size: 14px; } .x-banner__btn { padding: 13px 16px; font-size: 14px; text-align: left; } .x-top { padding: 16px 20px; } /* --- Статья --- */ .x-crumbs { padding: 16px var(--x-pad) 0; font-size: 12px; gap: 8px; } .x-crumbs__current { display: none; } /* на узком экране путь обрезаем до рубрики */ .x-title-block { padding: 12px var(--x-pad) 22px; gap: 12px; max-width: none; } .x-title-block__h1 { font: 800 28px/1.08 var(--font-heading); letter-spacing: -.5px; } .x-title-block__meta { font-size: 12px; gap: 8px; } /* Главное фото — во всю ширину, без внутренних отступов статьи */ .x-article { padding: 20px var(--x-pad); } .x-article__hero { height: 220px; margin: 0 calc(var(--x-pad) * -1) 12px; } .x-article__lead { font: 400 16px/1.6 var(--font-body); margin-bottom: 18px; } .x-prose p { font: 400 15px/1.6 var(--font-body); } .x-prose > * { margin-bottom: 16px; } .x-prose h2 { font-size: 22px; margin: 24px 0 12px; padding-top: 20px; } .x-prose h3 { font-size: 19px; } .x-prose ul, .x-prose ol { font-size: 15px; } .x-prose blockquote { margin: 20px 0; padding: 14px 16px; font-size: 15px; line-height: 1.5; } .x-prose figure { margin: 20px 0; } /* Оглавление: вместо липкого сайдбара — гармошка под фото */ .x-toc-mobile { display: block; border: var(--x-line) solid var(--xln); padding: 12px 16px; margin-bottom: 20px; } .x-toc-mobile > summary { font: 800 14px var(--font-heading); text-transform: uppercase; cursor: pointer; list-style: none; } .x-toc-mobile > summary::-webkit-details-marker { display: none; } .x-toc-mobile .x-toc { margin-top: 8px; } .x-toc-mobile .x-toc a { padding: 8px 0; font-size: 13px; } .x-aside .x-box--toc { display: none; } .x-tip { padding: 18px 20px; margin-top: 28px; } .x-article__foot { flex-direction: row; align-items: center; gap: 8px; margin-top: 20px; } .x-tag { padding: 8px 14px; font-size: 12px; } .x-share { margin-left: auto; } .x-obtn { padding: 8px 14px; font-size: 12px; } .x-aside { padding: 20px var(--x-pad); gap: 20px; position: static; } /* --- Список статей --- */ .x-archive-head { padding: 24px 0 0; } .x-archive-head__h1 { font: 800 38px/1 var(--font-heading); letter-spacing: -1.5px; margin: 0 var(--x-pad) 16px; } .x-filters { display: block; padding-bottom: 0; } .x-filters__list { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 0 var(--x-pad) 18px; font-size: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .x-filters__list::-webkit-scrollbar { display: none; } .x-filter { flex: none; padding: 9px 15px; } .x-sort { display: none; } /* Карточка ленты: фото сверху, текст под ним */ .x-row { grid-template-columns: 1fr; gap: 12px; padding: 20px; } .x-row__fig { height: 170px; } .x-row__title { font: 800 19px/1.2 var(--font-heading); letter-spacing: 0; } .x-row__excerpt { display: none; } .x-row .x-meta { font-size: 12px; } .x-pagination { padding: 18px var(--x-pad); font-size: 13px; } .x-pagination .page-numbers { padding: 9px 14px; } /* --- Про нас --- */ .x-about-hero { padding: 24px var(--x-pad); gap: 14px; } .x-about-hero__h1 { font: 800 30px/1.05 var(--font-heading); letter-spacing: -1px; } .x-about-hero__lead { font: 400 15px/1.6 var(--font-body); } .x-about-hero__fig { min-height: 200px; } .x-mission { padding: 20px; gap: 10px; } .x-mission__n { font-size: 18px; } .x-mission__title { font-size: 18px; } .x-mission__text { font-size: 14px; } .x-strip__fig { height: 180px; } /* --- Подвал --- */ .x-footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px var(--x-pad); font-size: 13px; } /* --- Тап-таргеты --- */ .x-tag, .x-obtn, .x-filter, .x-pagination .page-numbers, .x-icon-btn, .x-theme-toggle { min-height: 44px; display: inline-flex; align-items: center; } .x-icon-btn, .x-theme-toggle { display: flex; justify-content: center; } } @media (max-width: 380px) { .x-hero__title { font-size: 26px; } .x-title-block__h1 { font-size: 24px; } .x-archive-head__h1 { font-size: 32px; } } @media print { .x-header, .x-aside, .x-ad, .x-banner, .x-footer { display: none; } .x-shell { border: 0; max-width: none; } }