/* Лендинг DHosting. Вёрстка по макету дизайнера (landing-src/Лендинг). Две темы: тёмная (основная) и светлая — переключаются атрибутом data-theme на . Шапка в обеих тёмно-синяя, как в макете. Всё построено на переменных: правки палитры не требуют лазить по компонентам. */ @font-face { font-family: "Century Gothic"; src: url("../fonts/century-gothic.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Century Gothic"; src: url("../fonts/century-gothic-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --primary: #1849d2; --primary-hover: #1f57ee; /* Три размера скругления на весь сайт — по спецификации дизайнера: крупные блоки и карточки, средние плашки (кнопки, поля, контейнеры), мелочь внутри плашек (вкладки, чипы, теги). Других значений быть не должно. */ /* Общий вертикальный ритм: между соседними блоками получается два таких отступа. Раньше у каждого блока был свой, и зазоры гуляли от 80 до 128px. */ --block-gap: 56px; /* Отступ от заголовка блока до его содержимого — тоже единый */ --head-gap: 34px; --radius: 25px; --radius-md: 15px; --radius-sm: 10px; --wrap: 1240px; --header-h: 72px; /* Тёмная тема — значения сняты пипеткой с макета */ --bg: #07052a; --bg-hero: radial-gradient(120% 100% at 50% 0%, #14276f 0%, #0a1046 45%, #07052a 100%); --surface: #1c1b43; --surface-2: #232252; --border: rgba(255, 255, 255, 0.08); --text: #eef1ff; /* Мелкий текст (подписи под заголовками, лиды, пункты меню) — оттенок из макета */ --text-dim: #7e8bc7; --text-mute: #7e8bc7; --accent-text: #6f8cff; --header-bg: #0a0c2c; --images-bg: linear-gradient(135deg, #1b2970 0%, #1e40b8 55%, #1849d2 100%); --card-why: linear-gradient(150deg, #2b3f95 0%, #1f2e73 100%); --chip: #16153a; --shadow: 0 18px 50px rgba(0, 0, 0, 0.35); --abuse-art: -webkit-image-set(url("../img/abuse-dark.webp") type("image/webp"), url("../img/abuse-dark.png") type("image/png")); --abuse-art: image-set(url("../img/abuse-dark.webp") type("image/webp"), url("../img/abuse-dark.png") type("image/png")); --art-hero: -webkit-image-set(url("../img/hero-dark.webp") type("image/webp"), url("../img/hero-dark.png") type("image/png")); --art-hero: image-set(url("../img/hero-dark.webp") type("image/webp"), url("../img/hero-dark.png") type("image/png")); --art-panel: -webkit-image-set(url("../img/panel-dark.webp") type("image/webp"), url("../img/panel-dark.png") type("image/png")); --art-panel: image-set(url("../img/panel-dark.webp") type("image/webp"), url("../img/panel-dark.png") type("image/png")); --art-partners: -webkit-image-set(url("../img/partners-dark.webp") type("image/webp"), url("../img/partners-dark.png") type("image/png")); --art-partners: image-set(url("../img/partners-dark.webp") type("image/webp"), url("../img/partners-dark.png") type("image/png")); --art-support: -webkit-image-set(url("../img/support-dark.webp") type("image/webp"), url("../img/support-dark.png") type("image/png")); --art-support: image-set(url("../img/support-dark.webp") type("image/webp"), url("../img/support-dark.png") type("image/png")); --art-pay: -webkit-image-set(url("../img/pay-dark.webp") type("image/webp"), url("../img/pay-dark.png") type("image/png")); --art-pay: image-set(url("../img/pay-dark.webp") type("image/webp"), url("../img/pay-dark.png") type("image/png")); --abuse-bg: linear-gradient(90deg, #1c1a43 0%, #1b245f 30%, #1a3086 50%, #1844c3 75%, #1a3087 100%); --glow: radial-gradient(60% 130% at 50% 118%, rgba(36, 80, 232, 0.42) 0%, rgba(20, 39, 111, 0.22) 42%, transparent 72%); /* Галочка и шеврон рисуются маской — так они принимают цвет темы */ --head-grad: linear-gradient(96deg, #ffffff 0%, #dfe6ff 34%, #6f8cff 100%); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8 14.5 16 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } :root[data-theme="light"] { --bg: #fdfdff; --bg-hero: linear-gradient(180deg, #eef1fd 0%, #f7f8ff 60%, #fdfdff 100%); --surface: #e8edfb; --surface-2: #dde5f8; --border: rgba(24, 73, 210, 0.12); --text: #101a44; /* Второстепенный текст в светлой теме — фирменный синий (цвет дизайнера) */ --text-dim: #1849d3; --text-mute: #1849d3; --accent-text: #1849d2; --header-bg: #232d5c; /* шапка тёмная и в светлой теме */ --images-bg: linear-gradient(135deg, #e9edfc 0%, #dfe7fb 100%); /* Заливка блока «Почему мы» — одна на всю сетку, сверху вниз (цвета дизайнера) */ --card-why: linear-gradient(180deg, #f2f5ff 0%, #c1cdf0 100%); --chip: #eef1fd; --shadow: 0 18px 40px rgba(24, 73, 210, 0.10); --abuse-art: -webkit-image-set(url("../img/abuse-light.webp") type("image/webp"), url("../img/abuse-light.png") type("image/png")); --abuse-art: image-set(url("../img/abuse-light.webp") type("image/webp"), url("../img/abuse-light.png") type("image/png")); --art-hero: -webkit-image-set(url("../img/hero-light.webp") type("image/webp"), url("../img/hero-light.png") type("image/png")); --art-hero: image-set(url("../img/hero-light.webp") type("image/webp"), url("../img/hero-light.png") type("image/png")); --art-panel: -webkit-image-set(url("../img/panel-light.webp") type("image/webp"), url("../img/panel-light.png") type("image/png")); --art-panel: image-set(url("../img/panel-light.webp") type("image/webp"), url("../img/panel-light.png") type("image/png")); --art-partners: -webkit-image-set(url("../img/partners-light.webp") type("image/webp"), url("../img/partners-light.png") type("image/png")); --art-partners: image-set(url("../img/partners-light.webp") type("image/webp"), url("../img/partners-light.png") type("image/png")); --art-support: -webkit-image-set(url("../img/support-light.webp") type("image/webp"), url("../img/support-light.png") type("image/png")); --art-support: image-set(url("../img/support-light.webp") type("image/webp"), url("../img/support-light.png") type("image/png")); --art-pay: -webkit-image-set(url("../img/pay-light.webp") type("image/webp"), url("../img/pay-light.png") type("image/png")); --art-pay: image-set(url("../img/pay-light.webp") type("image/webp"), url("../img/pay-light.png") type("image/png")); --abuse-bg: linear-gradient(90deg, #f2f5ff 0%, #c9d5f7 30%, #91a8eb 50%, #3963da 75%, #94aceb 100%); --head-grad: linear-gradient(96deg, #0d1444 0%, #16307f 38%, #1849d2 100%); --glow: radial-gradient(68% 150% at 50% 122%, rgba(96, 130, 235, 0.42) 0%, rgba(120, 150, 240, 0.20) 45%, transparent 74%); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Century Gothic", "Trebuchet MS", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* Атрибут hidden должен побеждать display у компонентов (.os-list и т.п.) */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } .wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; } /* ---------- Шапка ---------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--header-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #eef1ff; } .header__in { display: flex; align-items: center; gap: 20px; height: 100%; } .logo { display: flex; align-items: center; flex: none; } .logo img { width: auto; height: 34px; } /* Вертикальная черта отделяет логотип от меню */ .logo__sep { width: 2px; height: 28px; flex: none; border-radius: 1px; background: rgba(255, 255, 255, 0.4); margin-left: 16px; } .nav { display: flex; align-items: center; gap: 6px; margin-left: 8px; } .nav a, .nav button { white-space: nowrap; color: #7e8bc7; background: none; border: 0; padding: 9px 14px; border-radius: var(--radius-sm); font-size: 15px; transition: background 0.15s, color 0.15s; } .nav a:hover, .nav button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Выпадающее меню «Серверы» */ .menu { position: relative; } .menu__btn { display: inline-flex; align-items: center; gap: 8px; } /* Подсветка — только когда меню раскрыто или мы на страницах серверов; постоянный серый фон делал вид, будто пункт всегда выбран. */ .menu[aria-expanded="true"] .menu__btn { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 700; } .menu__list { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; padding: 6px; background: #fff; color: #101a44; border-radius: var(--radius-md); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); display: none; } .menu[aria-expanded="true"] .menu__list { display: block; } .menu__list a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: #101a44; font-size: 15px; } .menu__list a:hover { background: #eef1fd; color: #101a44; } .header__side { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Плашки шапки держим в одном скруглении с активным пунктом меню: рядом стоят кнопки, переключатель языка и «таблетка» раздела — разные радиусы бросаются в глаза. Внутри страниц кнопки крупнее и остаются на среднем радиусе. */ .header__side .btn, .header__side .lang__btn { border-radius: var(--radius-sm); } .icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 0; color: #fff; } .icon-btn:hover { background: rgba(255, 255, 255, 0.18); } .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 18px; border-radius: var(--radius-md); border: 0; background: var(--primary); color: #fff; font-weight: 700; font-size: 15px; transition: background 0.15s, transform 0.15s; } .btn:hover { background: var(--primary-hover); } .btn:active { transform: translateY(1px); } .btn--ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); } /* На светлом фоне белая кнопка на белом просто исчезала */ :root[data-theme="light"] .btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); } :root[data-theme="light"] .btn--ghost:hover { background: var(--surface-2); } .btn--lg { padding: 14px 26px; font-size: 16px; border-radius: var(--radius-md); } /* Растянутые кнопки под блоком управления — как в макете */ .btn--wide { min-width: 300px; justify-content: center; gap: 12px; padding-inline: 34px; } .btn--wide img { width: 20px; height: 20px; } .burger { display: none; } /* Градиент — только у главного заголовка страницы (h1). Подзаголовки секций остаются белыми: иначе градиент теряет смысл акцента и рябит на странице. Заливка идёт через фон текста, поэтому у вложенного цвет гасим. */ .hero h1, .ttl { width: fit-content; background-image: var(--head-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero h1 em, .ttl em { color: inherit; } .section__head h2, .images h2, .faq__group, .abuse h2, .legal h2 { color: #fff; } :root[data-theme="light"] .section__head h2, :root[data-theme="light"] .images h2, :root[data-theme="light"] .faq__group, :root[data-theme="light"] .abuse h2, :root[data-theme="light"] .legal h2 { color: var(--text); } /* ---------- Герой ---------- */ .hero { position: relative; background: var(--bg-hero); /* Низ — общим ритмом, чтобы стык с тарифами был как между всеми блоками */ padding: 40px 0 var(--block-gap); overflow: hidden; } .hero__in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 32px; } .hero h1 { margin: 0 0 22px; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.2; font-weight: 700; } .hero h1 em { font-style: normal; color: var(--accent-text); } .hero__lead { margin: 0; font-weight: 700; font-size: 17px; } .hero__list { margin: 8px 0 0; color: var(--text-dim); font-size: 16px; } .hero__art { justify-self: end; width: 100%; max-width: 560px; } /* Липкая шапка перекрывала цель якоря — резервируем её высоту */ :target, #tariffs { scroll-margin-top: calc(var(--header-h) + 12px); } /* Иллюстрации, у которых свой вариант на каждую тему. Фон вместо : так браузер грузит ровно одну картинку, а не обе. Пропорции держит aspect-ratio, поэтому вёрстка не прыгает до загрузки. */ .art { background: var(--art) center / contain no-repeat; width: 100%; } .art--hero { --art: var(--art-hero); aspect-ratio: 1200 / 977; } .art--panel { --art: var(--art-panel); aspect-ratio: 1200 / 839; } .art--partners { --art: var(--art-partners); aspect-ratio: 900 / 960; } .art--support { --art: var(--art-support); aspect-ratio: 620 / 756; } .art--pay { --art: var(--art-pay); aspect-ratio: 760 / 710; } /* Safari до 15 не знает aspect-ratio — там высоту держит классический отступ */ @supports not (aspect-ratio: 1 / 1) { .art { position: relative; height: 0; } .art--hero { padding-bottom: 81.4%; } .art--panel { padding-bottom: 69.9%; } .art--partners { padding-bottom: 106.7%; } .art--support { padding-bottom: 121.9%; } .art--pay { padding-bottom: 93.4%; } .news__card { height: 0; padding-bottom: 83.3%; } } /* ---------- Секции ---------- */ .section { padding: var(--block-gap) 0; } /* Заголовок блока: колонка с фиксированным зазором внутри. Через margin получалось по-разному — с описанием и без него отступ до содержимого отличался вдвое, потому что нижний отступ заголовка то схлопывался, то нет. */ .section__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: var(--head-gap); } .section__head h2, .faq__group { margin-inline: auto; } .section__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; } .section__head p { margin: 0; color: var(--text-dim); } /* Табы локаций */ .tabs { display: inline-flex; gap: 6px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0 0 26px; } .tabs__row { display: flex; justify-content: center; } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-dim); font-size: 15px; white-space: nowrap; /* «Нидерланды (10 Gbit/s)» не должно ломаться на две строки */ transition: background 0.15s, color 0.15s; } .tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } :root[data-theme="light"] .tab:hover { background: rgba(24, 73, 210, 0.07); } .tab[aria-selected="true"] { background: var(--primary); color: #fff; font-weight: 700; } .tab[aria-selected="true"]:hover { background: var(--primary); color: #fff; } .flag { width: 18px; height: 13px; border-radius: 3px; flex: none; vertical-align: -1px; } .tab small { font-size: 13px; font-weight: 400; opacity: 0.85; } /* Сетка тарифов */ .plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .plan { display: flex; flex-direction: column; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.15s, border-color 0.15s; } .plan:hover { transform: translateY(-3px); border-color: rgba(111, 140, 255, 0.45); } .plan__name { font-size: 22px; color: var(--accent-text); margin-bottom: 14px; text-align: center; } .plan__row { font-size: 14px; color: var(--text-dim); margin-bottom: 6px; } .plan__row b { color: var(--text); font-size: 15px; } .plan__price { margin-top: auto; padding: 11px 10px; background: var(--surface-2); color: var(--text); border: 0; border-radius: var(--radius-md); text-align: center; font-size: 18px; font-weight: 700; } .plan__price small { font-size: 13px; font-weight: 400; color: var(--text-dim); } .plan__price { transition: background 0.15s, color 0.15s; } .plan--best .plan__price { background: var(--primary); color: #fff; } .plan--best .plan__price small { color: rgba(255, 255, 255, 0.8); } /* Пока курсор в сетке, «дежурная» подсветка гаснет — синим горит только тариф под курсором */ .plans:hover .plan--best .plan__price { background: var(--surface-2); color: var(--text); } .plans:hover .plan--best .plan__price small { color: var(--text-dim); } .plans:hover .plan--best:hover .plan__price { background: var(--primary); color: #fff; } .plans:hover .plan--best:hover .plan__price small { color: rgba(255, 255, 255, 0.8); } .plan:hover .plan__price { background: var(--primary); color: #fff; } .plan:hover .plan__price small { color: rgba(255, 255, 255, 0.8); } /* ---------- Готовые образы ---------- */ .images { padding: 34px 28px 30px; background: var(--images-bg); border-radius: var(--radius); text-align: center; } /* Размер как у заголовков остальных секций — блоки идут подряд, разнобой заметен */ .images h2 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 34px); } .images p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.75); } :root[data-theme="light"] .images p { color: var(--text-dim); } :root[data-theme="light"] .images h2 { color: var(--text); } /* Линия под вкладками — сплошная, как в макете; активную выделяет более жирный отрезок поверх неё (раньше подчёркивание висело только под активной). */ .images__tabs { display: inline-flex; justify-content: center; gap: 34px; margin: 0 auto 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.45); } :root[data-theme="light"] .images__tabs { border-bottom-color: rgba(24, 73, 210, 0.25); } .images__tab { background: none; border: 0; padding: 6px 10px 10px; color: rgba(255, 255, 255, 0.7); border-bottom: 3px solid transparent; margin-bottom: -1px; font-size: 16px; } :root[data-theme="light"] .images__tab { color: var(--text-dim); } .images__tab[aria-selected="true"] { color: #fff; font-weight: 700; border-bottom-color: #fff; } :root[data-theme="light"] .images__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); } .soft { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 12px; } .soft__item { display: flex; align-items: center; gap: 12px; justify-content: flex-start; } .soft__item img { width: 38px; height: 38px; border-radius: 50%; } .soft__item span { font-size: 16px; color: #fff; } :root[data-theme="light"] .soft__item span { color: var(--text); } /* Логотипы вырезаны из макета в двух вариантах — под каждую тему свой */ .soft__item .light-only { display: none; } :root[data-theme="light"] .soft__item .dark-only { display: none; } :root[data-theme="light"] .soft__item .light-only { display: block; } /* Список ОС — та же плитка, что и у предустановленного ПО, но логотипы цветные и одинаковые в обеих темах, поэтому вариант под тему им не нужен. */ .os-list .soft__item img { border-radius: 0; object-fit: contain; } /* ---------- Преимущества тарифа ---------- */ .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .perk { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 15px; } .perk svg { flex: none; color: #22c55e; } /* ---------- Панель и бот ---------- */ .manage { text-align: center; } .manage__btns { display: flex; gap: 14px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; } .manage__shot { margin: 0 auto; max-width: 900px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } /* Нижний край скриншота гасим в фон — границы блока быть не должно */ .manage__shot img { -webkit-mask: linear-gradient(180deg, #000 58%, transparent 96%); mask: linear-gradient(180deg, #000 58%, transparent 96%); } /* ---------- Почему мы ---------- */ /* Заливка у шести карточек ОДНА на всю сетку: каждая показывает свой кусок общего градиента, как вставка в рамку. Приём: фон растянут на размер всей сетки (с учётом промежутков), а позиция в процентах ставит нужный участок — 0% прижимает левый/верхний край, 100% правый/нижний, промежуточные значения попадают ровно в свою колонку. Строки одной высоты (1fr), иначе стык поедет. */ .why { --why-gap: 16px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--why-gap); } .why__card { position: relative; padding: 22px 22px 24px; min-height: 158px; background-color: transparent; background-image: var(--card-why); background-repeat: no-repeat; background-size: calc(300% + var(--why-gap) * 2) calc(200% + var(--why-gap)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .why__card:nth-child(3n + 1) { background-position-x: 0%; } .why__card:nth-child(3n + 2) { background-position-x: 50%; } .why__card:nth-child(3n + 3) { background-position-x: 100%; } .why__card:nth-child(-n + 3) { background-position-y: 0%; } .why__card:nth-child(n + 4) { background-position-y: 100%; } /* Заголовок держим уже картинки: он ломается на две строки, как в макете. Высота под две строки резервируется всегда — иначе в карточке с коротким заголовком описание подъезжает под иконку. */ .why__card h3 { margin: 0 0 14px; font-size: 18px; line-height: 1.3; max-width: 47%; min-height: 2.6em; text-wrap: balance; } /* Текст не заходит под иконку даже на строках ниже неё: колонка описания заканчивается там, где начинается её зона. */ .why__card p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; max-width: calc(100% - 92px); } /* Иконка — в правом верхнем углу; текст под ней идёт на всю ширину карточки */ .why__card img { position: absolute; right: 16px; top: 16px; width: 72px; height: auto; max-height: 72px; object-fit: contain; } /* ---------- Футер ---------- */ .footer { position: relative; margin-top: var(--block-gap); padding: 46px 0 26px; background: var(--bg); border-top: 1px solid var(--border); } /* Мягкое свечение снизу — футер продолжает фон страницы, а не отделяется от него */ .footer::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; } .footer > * { position: relative; } .footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; } .footer__logo { width: auto; height: 46px; margin-bottom: 16px; } /* Логотип и иконки нарисованы под каждую тему — показываем нужный вариант */ .light-only { display: none; } :root[data-theme="light"] .dark-only { display: none; } :root[data-theme="light"] .light-only { display: block; } .footer__legal { color: var(--text-dim); font-size: 14px; margin-bottom: 14px; } .footer__tg { display: flex; flex-wrap: wrap; gap: 8px; } .footer__tg a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: var(--radius-sm); background: var(--chip); border: 1px solid var(--border); font-size: 14px; } .footer__tg img, .footer__mail img { width: 17px; height: 17px; } .footer__mail { display: inline-flex; align-items: center; gap: 8px; } .footer__tg a:hover { border-color: var(--primary); } .footer h4 { margin: 0 0 14px; font-size: 17px; } .footer__links { display: grid; gap: 9px; } .footer__links a { color: var(--text-dim); font-size: 14px; } .footer__links a:hover { color: var(--text); } .footer__pay { margin-top: 4px; max-width: 260px; } .footer__bottom { margin-top: 34px; padding-top: 18px; text-align: center; color: var(--text-dim); font-size: 13px; } /* ---------- Адаптив ---------- */ @media (max-width: 1100px) { .plans { grid-template-columns: repeat(3, 1fr); } .soft { grid-template-columns: repeat(3, 1fr); } /* Сетка стала 2×3 — общий фон пересобираем под неё */ .why { grid-template-columns: repeat(2, 1fr); } .why__card { background-size: calc(200% + var(--why-gap)) calc(300% + var(--why-gap) * 2); } .why__card:nth-child(2n + 1) { background-position-x: 0%; } .why__card:nth-child(2n) { background-position-x: 100%; } .why__card:nth-child(-n + 2) { background-position-y: 0%; } .why__card:nth-child(n + 3):nth-child(-n + 4) { background-position-y: 50%; } .why__card:nth-child(n + 5) { background-position-y: 100%; } .footer__in { grid-template-columns: 1fr 1fr; } } @media (max-width: 1150px) { .nav, .header__side .btn span, .logo__sep, .lang { display: none; } .header__in { gap: 10px; } .header__side { gap: 8px; } .header__side .btn { padding: 10px 12px; } .burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.1); border: 0; color: #fff; } .hero__in { grid-template-columns: 1fr; } .hero__art { justify-self: center; width: 100%; max-width: 420px; } .plans { grid-template-columns: repeat(2, 1fr); } .perks { grid-template-columns: 1fr; } /* Одна колонка — общий фон растянут на все шесть карточек по вертикали */ .why { grid-template-columns: 1fr; } /* Карточка широкая: заголовок влезает в строку, резерв под вторую не нужен */ .why__card h3 { max-width: calc(100% - 96px); min-height: 0; } .why__card { background-size: 100% calc(600% + var(--why-gap) * 5); } .why__card:nth-child(n) { background-position-x: 0%; } .why__card:nth-child(1) { background-position-y: 0%; } .why__card:nth-child(2) { background-position-y: 20%; } .why__card:nth-child(3) { background-position-y: 40%; } .why__card:nth-child(4) { background-position-y: 60%; } .why__card:nth-child(5) { background-position-y: 80%; } .why__card:nth-child(6) { background-position-y: 100%; } /* Мобильное меню: сплошная панель на всю ширину. Полупрозрачный фон не годился — сквозь него читался контент страницы, а пункты сливались с текстом под ними. */ .nav--open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; position: absolute; top: var(--header-h); left: 0; right: 0; padding: 10px 12px 16px; background: #0a0c2c; border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav--open .nav__link, .nav--open .menu__btn { display: flex; width: 100%; padding: 13px 14px; border-radius: var(--radius-sm); font-size: 16px; } .nav--open .menu { width: 100%; } .nav--open .menu__btn { justify-content: space-between; background: none !important; } .nav--open .menu__btn svg { display: none; } /* подпункты и так раскрыты */ /* Подпункты «Серверы» — частью списка, а не белой карточкой поверх остальных пунктов */ .nav--open .menu__list { position: static; display: block; margin: 0 0 4px; padding: 0 0 0 14px; background: none; box-shadow: none; } .nav--open .menu__list a { color: #aab2dd; padding: 11px 12px; font-size: 15px; border-left: 2px solid rgba(255, 255, 255, 0.12); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .nav--open .menu__list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } } @media (max-width: 860px) { @media (max-width: 700px) { /* Две локации с пометкой канала в строку не влезают — переносим */ .tabs { flex-wrap: wrap; width: 100%; } .tab { flex: 1 1 auto; justify-content: center; } } @media (max-width: 560px) { .plans { grid-template-columns: 1fr; } .soft { grid-template-columns: 1fr; } .footer__in { grid-template-columns: 1fr; } .section { padding: 44px 0; } } /* Уважаем системную настройку «меньше движения» */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }