/* ============================================================ Кодработ — лендинг, редизайн 2026-07 Здесь только то, что нельзя выразить инлайн-стилем: базовые правила, @keyframes, :hover/:focus, состояния (.reveal, .is-active, .is-open), анимации маскота d1–d6. Всё остальное — инлайн в index.html, как в прототипе. Старый assets/style.css удалён 20.07.2026 (не использовался). ============================================================ */ /* ---------- База ---------- */ * { box-sizing: border-box; } html, body { overflow-x: clip; } body { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; color: #262420; background: #faf9f6; -webkit-font-smoothing: antialiased; } html { scroll-behavior: smooth; } /* Якорь: верх секции встаёт почти вплотную к верху экрана — хвост предыдущего раздела полностью уходит за кромку и не просвечивает сквозь липкую шапку. Воздух под шапкой даёт собственный padding-top секции (64px). */ section[id] { scroll-margin-top: 16px; } a { color: inherit; text-decoration: none; } a:hover { color: oklch(0.42 0.1 155); } ::selection { background: oklch(0.92 0.05 155); } input { font-family: 'Golos Text', system-ui, sans-serif; } /* ---------- Демо в hero ---------- */ .demo-input:focus { border-color: oklch(0.42 0.1 155); } .demo-chip { transition: border-color .15s; } .demo-chip:hover { border-color: oklch(0.42 0.1 155); } .demo-btn { transition: transform .13s, background .13s; } /* .is-pressed — тот же вид, что и :active; его вешает автодемо на «клик» курсора */ .demo-btn:active, .demo-btn.is-pressed { background: oklch(0.34 0.09 155); transform: scale(0.96); } /* Раскладка таблицы демо. Живёт здесь, а не в инлайне, потому что колонки меняются по брейкпоинтам, а строки рисует JS (landing.js, renderResults). */ .demo-zone { min-height: 300px; } .demo-head, .demo-row { display: grid; grid-template-columns: 168px 1fr 110px 150px; gap: 0; } .demo-row { min-height: 66px; } /* Строки результата: появление (используется и автодемо на шаге JS) */ @keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .demo-row { animation: rowIn .45s cubic-bezier(.2,.7,.2,1) both; } .demo-row:nth-child(1) { animation-delay: 0s; } .demo-row:nth-child(2) { animation-delay: .12s; } .demo-row:nth-child(3) { animation-delay: .24s; } @keyframes caretBlink { 0%,45%{opacity:1} 50%,95%{opacity:0} 100%{opacity:1} } /* ---------- Левое оглавление (scroll-spy) ---------- */ .toc-link { display: flex; gap: 9px; align-items: baseline; font-size: 13.5px; padding: 7px 10px; border-radius: 8px; font-weight: 500; color: #8d887b; background: transparent; border-left: 2.5px solid transparent; transition: all .2s; } .toc-link .toc-num { font-family: 'PT Mono', monospace; font-size: 11px; } .toc-link.is-active { font-weight: 700; color: #262420; background: #efece3; border-left-color: oklch(0.42 0.1 155); } /* ---------- Скролл-анимации ---------- Прячем блоки ТОЛЬКО если на висит класс .js-reveal — его вешает скрипт лендинга (следующий шаг). Пока JS нет — контент виден сразу, страница не остаётся пустой. Штампы без JS просто нарисованы на месте. */ .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); } .js-reveal .reveal.in { opacity: 1; transform: none; } .stampEl { transform: rotate(-8deg); } .js-reveal .stampEl { opacity: 0; } .js-reveal .reveal.in .stampEl { animation: stampIn .55s cubic-bezier(.2,.8,.2,1) .25s both; } @keyframes stampIn { 0% { transform: rotate(-8deg) scale(1.7); opacity: 0; } 60% { transform: rotate(-8deg) scale(0.95); opacity: 1; } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } } /* ---------- FAQ (аккордеон) ---------- */ .faq-item { transition: border-color .15s; } .faq-item.is-open { border-color: oklch(0.75 0.06 155); } .faq-icon { font-size: 22px; color: oklch(0.42 0.1 155); transform: rotate(0deg); transition: transform .2s; flex-shrink: 0; font-weight: 400; } .faq-item.is-open .faq-icon { transform: rotate(45deg); } .faq-answer { font-size: 14.5px; color: #6e6a60; line-height: 1.55; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: all .25s; } .faq-item.is-open .faq-answer { max-height: 200px; opacity: 1; margin-top: 12px; } /* ---------- Пузырь маскота ---------- */ @keyframes bubbleIn { 0% { opacity: 0; transform: translateY(8px) scale(0.94); } 100% { opacity: 1; transform: none; } } .mk-bubble { animation: bubbleIn .3s cubic-bezier(.2,.8,.2,1) both; } .mk-bubble[hidden] { display: none; } /* Рельса маскота: фиксирована у правого края, отступы задаёт сам док. Обрезает уехавшего/выглядывающего маскота именно она — страница не получает горизонтального скролла. В обычном состоянии обрезки нет: пузырь шире дока. */ .mk-rail { position: fixed; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: flex-end; pointer-events: none; } .mk-rail.mk-clip { overflow: hidden; } /* Отступы от кромки и масштаб — через переменные: их же использует съезд за край, поэтому на всех брейкпоинтах он считается сам. */ .mk-dock { --mk-gap: 36px; --mk-bottom: 24px; --mk-scale: 1; --mk-out: 0px; /* сдвиг за кромку, в пикселях экрана */ --mk-in: 0px; /* сдвиг в системе самого дока (масштабируется) */ --mk-rot: 0deg; margin: 0 var(--mk-gap) var(--mk-bottom) 0; transform: translateX(var(--mk-out)) scale(var(--mk-scale)) translateX(var(--mk-in)) rotate(var(--mk-rot)); transform-origin: bottom right; transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .45s ease; } /* ============================================================ Уход по кнопке «Скрыть» — ураганом (перенос из прототипа handoff_pencil: карандаш раскручивается, кроссфейдится в смерч, тот всасывает пузырь и улетает за край). Фазы считает landing.js, здесь — рисовка смерча, его собственные анимации и состояние дока. ============================================================ */ /* На время урагана рельса растёт на всю высоту окна: улёт идёт вверх-вправо, и обрезать его должна только правая кромка, а не низкая коробка дока. */ .mk-rail.mk-storm { height: 100vh; width: 420px; max-width: 100vw; align-items: flex-end; } .mk-dock { position: relative; } .mk-dock.mk-storm { pointer-events: none; } /* Лицо растворяется, наклон покоя и idle снимаются — как перед письмом. */ .mk-dock.mk-storm .mkFace { opacity: 0; } .mk-dock.mk-storm .tiltG { transform: none; } .mk-dock.mk-storm .mkSvg * { animation: none !important; } /* bubbleIn стоит с fill-mode: both и её конечный кадр (transform: none) навсегда перебивает инлайн — на время всасывания её надо снять. */ .mk-dock.mk-storm .mk-bubble { animation: none !important; } /* Смерч: рисовка и кейфреймы прототипа (pmTwist/pmDash), имена в нашем неймспейсе. Позицию задаёт JS через left/top в координатах дока. */ #mk-tornado { position: absolute; left: 0; top: 0; width: 122px; height: 179px; opacity: 0; pointer-events: none; filter: drop-shadow(0 12px 9px rgba(38, 36, 32, 0.18)); } #mk-tornado svg { width: 100%; height: 100%; animation: mkTwist .36s ease-in-out infinite alternate; transform-origin: 50% 94%; overflow: visible; } @keyframes mkTwist { from { transform: skewX(-7deg) translateX(-3px); } to { transform: skewX(7deg) translateX(3px); } } .mkSpinLine { stroke-dasharray: 24 16; animation: mkDash .45s linear infinite; } @keyframes mkDash { to { stroke-dashoffset: -40; } } /* Стартовое применение скрытия — без выезда: иначе при загрузке маскот успевал бы мелькнуть и уехать. Класс снимается на следующем кадре. */ .mk-dock.mk-instant { transition: none !important; } /* Уехал совсем: за кромку целиком, рельса обрезает хвост. */ .mk-dock.mk-away { --mk-out: var(--mk-gap); --mk-in: 108%; opacity: 0; } /* Выглядывает: половина корпуса за кромкой, корпус наклонён к странице. */ .mk-dock.mk-peek { --mk-out: var(--mk-gap); --mk-in: 50%; --mk-rot: -11deg; opacity: 1; } /* Уже ниже 1420px маскот наползает на ссылку «Полный доступ →» в карточке демо. Точечная защита до отдельного шага с полным адаптивом: ужимаем и подбираем к углу, но воздух у кромки окна оставляем — вплотную он смотрелся обрезанным. */ @media (max-width: 1420px) { .mk-dock { --mk-gap: 24px; --mk-bottom: 16px; --mk-scale: 0.72; } } /* ============================================================ Маскот «Мистер Кодработ» — анимации Idle работает всегда; классы d1–d6 вешаются на .mkSvg на шаге JS. ============================================================ */ .mkSvg { overflow: visible; display: block; } /* Наклон в покое: персонаж стоит живо, а не по стойке смирно. Крутим вокруг низа группы — это кончик грифеля, он остаётся на месте. Отдельная обёртка, а не .rootG: у той transform занят idle-анимацией. */ .mkSvg .tiltG { transform: rotate(-7deg); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .42s ease; } .mkSvg .rootG { animation: bob3d 4.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 95%; } @keyframes bob3d { 0%,100% { transform: translateY(0) rotateY(0); } 25% { transform: translateY(-4px) rotateY(9deg); } 50% { transform: translateY(-7px) rotateY(0); } 75% { transform: translateY(-3px) rotateY(-9deg); } } .mkSvg .shadowE { animation: shadowPulse 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes shadowPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.82); opacity: 0.7; } } .mkSvg .headG, .mkSvg .pupilsG, .mkSvg .browsG, .mkSvg .papersG, .mkSvg .sheetTop, .mkSvg .glassesG { transform-box: fill-box; } .mkSvg .headG { transform-origin: 50% 92%; } .mkSvg .pupilsG, .mkSvg .browsG, .mkSvg .glassesG { transform-origin: 50% 50%; } .mkSvg .papersG { transform-origin: 60% 85%; } .mkSvg .sheetTop { transform-origin: 50% 100%; } @keyframes clipBob { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-7px) rotate(3deg)} } @keyframes clipBlink { 0%,91%,100%{transform:scaleY(1)} 94%,97%{transform:scaleY(0.08)} } /* Подмигивание при выглядывании: закрывается только левый глаз. Его части лежат в трёх группах .winkE (белок, зрачок с бликами, веко) — общая точка вращения в координатах viewBox держит их синхронно. */ @keyframes winkK { 0%,18%,100%{transform:scaleY(1)} 34%,62%{transform:scaleY(0.06)} } .mkSvg .winkE { transform-origin: 51px 104px; } .mkSvg.mk-wink .winkE { animation: winkK 1.5s ease-in-out .45s 1 both; } @keyframes clipBrow { 0%,86%,100%{transform:translateY(0)} 90%,94%{transform:translateY(-2px)} } @keyframes headUpDown { 0%,100%{transform:none} 16%,36%{transform:rotate(-15deg)} 55%,82%{transform:rotate(12deg)} } @keyframes pupilsUD { 0%,100%{transform:none} 16%,36%{transform:translateY(-2.6px)} 55%,82%{transform:translateY(2.8px)} } @keyframes papersCheck { 0%,100%{transform:none} 55%,82%{transform:rotate(-9deg) translateY(-4px)} } @keyframes lookDownK { 0%,100%{transform:none} 22%,85%{transform:rotate(13deg)} } @keyframes pupilsDownK { 0%,100%{transform:none} 22%,85%{transform:translateY(2.8px)} } @keyframes shuffleK { 0%,100%{transform:none} 20%{transform:rotate(-11deg)} 40%{transform:rotate(7deg)} 60%{transform:rotate(-9deg)} 80%{transform:rotate(5deg)} } @keyframes sheetFlyK { 0%,100%{transform:none} 30%{transform:translate(4px,-16px) rotate(16deg)} 60%{transform:translate(-3px,-7px) rotate(-9deg)} } @keyframes glassBounceK { 0%,100%{transform:none} 30%{transform:translateY(-2.6px)} 45%{transform:translateY(1.2px)} 62%{transform:translateY(-1.6px)} } @keyframes browsUpK { 0%,100%{transform:none} 25%,72%{transform:translateY(-2.6px)} } @keyframes nodK { 0%,100%{transform:none} 20%{transform:rotate(10deg)} 40%{transform:rotate(-4deg)} 60%{transform:rotate(9deg)} 80%{transform:rotate(-2deg)} } @keyframes hopK { 0%,100%{transform:none} 30%{transform:translateY(-8px)} 50%{transform:none} 70%{transform:translateY(-5px)} } @keyframes headUpK { 0%,100%{transform:none} 28%,75%{transform:rotate(-14deg)} } @keyframes pupilsUpK { 0%,100%{transform:none} 28%,75%{transform:translateY(-2.6px)} } @keyframes jumpK { 0%,100%{transform:none} 25%{transform:translateY(-18px)} 55%{transform:none} 75%{transform:translateY(-8px)} } /* Бормотание рта: раньше это был морф d-путей под прежнюю форму рта. Рот прототипа — другая геометрия, поэтому «открывается» масштабом группы от верхней губы: пути при этом не переписываются. */ @keyframes talkK { 0%,100% { transform: scaleY(1); } 14% { transform: scaleY(0.72); } 30% { transform: scaleY(1.14); } 48% { transform: scaleY(0.8); } 66% { transform: scaleY(1.1); } 84% { transform: scaleY(0.88); } } @keyframes sighBodyK { 0%,100% { transform: none; } 22% { transform: translateY(-6px) scale(1.015,1.06); } 55% { transform: translateY(2.5px) scale(1,0.95) rotate(2.5deg); } 80% { transform: translateY(1px) rotate(1.2deg); } } @keyframes sighEyesK { 0%,100%{transform:none} 40%,70%{transform:scaleY(0.55)} } @keyframes sighMouthK { 0%,100% { transform: scaleY(1); } 22% { transform: scaleY(1.22); } 45% { transform: scaleY(1.3); } 72% { transform: scaleY(0.86); } } /* --- Позы d1–d5: «танцы» + бормотание --- */ .d1 .mouthG, .d2 .mouthG, .d3 .mouthG, .d4 .mouthG, .d5 .mouthG { animation: talkK 1.5s ease-in-out both; } .d1 .headG { animation: headUpDown 1.6s ease-in-out both; } .d1 .pupilsG { animation: pupilsUD 1.6s ease-in-out both; } .d1 .papersG { animation: papersCheck 1.6s ease-in-out both; } .d2 .papersG { animation: shuffleK 1.5s ease-in-out both; } .d2 .sheetTop { animation: sheetFlyK 1.5s ease-in-out both; } .d2 .headG { animation: lookDownK 1.5s ease-in-out both; } .d2 .pupilsG { animation: pupilsDownK 1.5s ease-in-out both; } .d3 .glassesG { animation: glassBounceK 1.5s ease-in-out both; } .d3 .browsG { animation: browsUpK 1.5s ease-in-out both; } .d4 .headG { animation: nodK 1.5s ease-in-out both; } .d4 .rootG { animation: hopK 1.5s ease-in-out both; } .d5 .headG { animation: headUpK 1.5s ease-in-out both; } .d5 .pupilsG { animation: pupilsUpK 1.5s ease-in-out both; } .d5 .rootG { animation: jumpK 1.5s cubic-bezier(.3,.7,.3,1) both; } /* --- Поза d6: «вздох» по клику --- */ .d6 .headG { animation: sighBodyK 1.9s ease-in-out both; } .d6 .glassesG { animation: sighEyesK 1.9s ease-in-out both; } .d6 .mouthG { animation: sighMouthK 1.9s ease-in-out both; } /* ============================================================ Письмо: маскот превращается в пишущий карандаш и выводит совет от руки. Механика — из прототипа handoff_pencil: лицо/руки/ноги растворяются, корпус наклоняется и едет по строкам, текст проявляется слева направо через clip-path синхронно с остриём. Сам полёт считает landing.js (transform на .mkSvg), здесь — только статика: растворение, пауза idle/танцев и стиль строк. ============================================================ */ .mkSvg .mkFace { transition: opacity .42s ease; } /* Рот «открывается» от верхней губы, а не от центра. */ .mkSvg .mouthG { transform-box: fill-box; transform-origin: 50% 8%; } /* На время письма idle-покачивание, моргание и позы d1–d6 глушим: их transform складывался бы с траекторией письма и остриё уезжало бы мимо строки. JS дополнительно не даёт ставить позы, пока busy. */ .mkSvg.mk-writing .rootG, .mkSvg.mk-writing .shadowE, .mkSvg.mk-writing * { animation: none !important; } .mkSvg.mk-writing .mkFace { opacity: 0; } /* Наклон покоя на время письма снимается — карандаш заходит на строку под тем же углом, что и раньше. Уходит плавно, вместе с лицом. */ .mkSvg.mk-writing .tiltG { transform: none; } /* Пузырь в режиме письма: строки лежат абсолютно, чтобы остриё могло идти ровно по базовой линии каждой из них. */ /* Строки лежат абсолютно и ширину пузырю не задают — иначе он схлопнулся бы по ширине кнопок и совет ломался бы на восемь коротких строк. 269px = 300 (max-width пузыря) − 2×14 padding − 2×1.5 border. */ #mk-text.mk-lines { position: relative; display: block; width: 269px; } .mkLine { position: absolute; left: 0; white-space: nowrap; font-family: 'Caveat', 'Golos Text', cursive; font-weight: 600; font-size: 19px; line-height: 22px; color: #262420; clip-path: inset(-4px 100% -4px 0); } .mkLine.mk-done { clip-path: none; } /* Кнопки — строго в одну строку и в один ряд: при длинном CTA («Попробовать») текст ломался на две строки и ряд разъезжался. */ #mk-actions { transition: opacity .3s ease, transform .3s ease; flex-wrap: nowrap; gap: 6px !important; } #mk-actions > * { white-space: nowrap; flex: 0 0 auto; } #mk-actions.mk-hidden { opacity: 0; transform: translateY(5px); pointer-events: none; } /* ---------- Cookie-баннер (cookie.js строит эту разметку) ---------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: #262420; color: #fdfcf9; opacity: 0; transform: translateY(20px); transition: opacity 300ms ease, transform 300ms ease; } .cookie-banner.cookie-banner-visible { opacity: 1; transform: translateY(0); } .cookie-banner-text { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; color: #fdfcf9; } .cookie-banner-text a { color: oklch(0.82 0.09 155); text-decoration: underline; } .cookie-banner-text a:hover { color: oklch(0.88 0.07 155); text-decoration: none; } .cookie-banner-button { flex-shrink: 0; padding: 10px 24px; border: none; border-radius: 8px; background: oklch(0.42 0.1 155); color: #fdfcf9; font-family: 'Golos Text', system-ui, sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: opacity 0.15s ease; } .cookie-banner-button:hover { opacity: 0.9; } /* ---------- Доступность: уважаем prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-reveal .reveal { opacity: 1; transform: none; transition: none; } .js-reveal .stampEl { opacity: 1; } .js-reveal .reveal.in .stampEl, .demo-row, .mk-bubble, .mkSvg .rootG, .mkSvg .shadowE, .mkSvg * { animation: none !important; } /* Уход и возврат маскота — мгновенные, без выезда и без урагана. */ .mk-dock { transition: none !important; } .mk-rail.mk-storm { height: auto; width: auto; } #mk-tornado svg, .mkSpinLine { animation: none !important; } } /* ============================================================ АДАПТИВ Десктоп ≥1240px — эталон, ниже ничего не переопределяем. Разметка свёрстана инлайн-стилями, поэтому там, где нужно перебить инлайн, стоит !important — это единственный способ, а не небрежность. Блок идёт последним в файле: он должен выигрывать у @media 1420px выше. ============================================================ */ /* ---------- Брейкпоинт 1: планшет / узкое окно (≤1239px) ---------- */ @media (max-width: 1239px) { /* Грид- и флекс-элементы по умолчанию имеют min-width:auto и отказываются сжиматься уже колонки собственного контента — из-за этого длинные строки и лента чипов распирали страницу шире экрана. Сбрасываем по цепочке. */ .page-grid > *, .demo-card, .demo-zone, .demo-chips, .demo-head, .demo-row, .prob-table, .prob-row, .prob-cause, .price-card, .price-head, .price-row, .price-total, .roles-head, .roles-body, .how-grid, .how-notes, .access-grid, .cta-final, .footer-grid { min-width: 0; } .demo-head > *, .demo-row > *, .prob-row > *, .prob-cause > *, .price-head > *, .price-row > *, .price-total > *, .roles-head > *, .roles-body > * { min-width: 0; } /* Каркас: одна колонка, боковые отступы 24px */ .page-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 24px !important; } .hdr-inner, .footer-grid { padding: 0 24px !important; } .footer-bottom { padding: 20px 24px 0 !important; } /* Оглавление: из липкой колонки — в горизонтальную полосу над контентом. Одной строкой с горизонтальным скроллом: с переносом оно занимало несколько рядов и отжимало заголовок вниз. */ .toc { position: static !important; padding-top: 28px !important; padding-bottom: 4px; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; align-items: center; gap: 6px !important; } .toc-link { flex: 0 0 auto; white-space: nowrap; } .toc-title, .toc-note { display: none; } .toc-link { border-left: none; border-bottom: 2.5px solid transparent; } .toc-link.is-active { border-left-color: transparent; border-bottom-color: oklch(0.42 0.1 155); } /* Hero */ .hero-h1 { font-size: 36px !important; } /* Демо: колонка «Источник» не влезает — убираем её и в шапке, и в строках */ .demo-head, .demo-row { grid-template-columns: 140px 1fr 90px; } .demo-head > span:nth-child(4), .demo-row > span:nth-child(4) { display: none; } /* 02 Как работает: цепочка разворачивается в столбик, стрелки — вниз */ .how-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .how-arrow { transform: rotate(90deg); font-size: 22px !important; } .how-notes { grid-template-columns: 1fr !important; } /* 03 Роли: колонки друг под другом, вертикальный разделитель → горизонтальный */ .roles-head, .roles-body { grid-template-columns: 1fr !important; } .roles-head > span:nth-child(2), .roles-body > div:nth-child(2) { border-left: none !important; border-top: 1px solid #e7e4dc; } /* 05 Доступ: 4 шага → 2×2 */ .access-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Подвал: 4 колонки → 2 */ .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } /* Маскот живёт только на полноразмерном десктопе (≥1240). Ниже — убираем целиком: на планшетах он налезал на контент и перехватывал тапы. Прячем всю рельсу, а не .mk-dock: пузырь и смерч лежат внутри неё. */ .mk-rail { display: none !important; } } /* ---------- Брейкпоинт 2: телефон (≤699px) ---------- */ @media (max-width: 699px) { /* Отступы и типографика */ .page-grid { padding: 0 16px !important; } .hdr-inner, .footer-grid { padding: 0 16px !important; } .footer-bottom { padding: 20px 16px 0 !important; } .hero-h1 { font-size: 30px !important; } /* :not(.legal-page) — иначе правило перебивало бы размер заголовков на offer.html / privacy.html, где
тоже есть */ main:not(.legal-page) h2 { font-size: 24px !important; } .sec-head { flex-direction: column; align-items: flex-start !important; gap: 4px !important; } /* Оглавление (лента и скролл заданы выше, в блоке ≤1239px) — поджимаем отступ */ .toc { padding-top: 18px !important; } /* Шапка: подпись убираем, кнопку поджимаем — всё в одну строку */ .hdr-sub { display: none; } .hdr-inner { gap: 12px !important; } .hdr-cta { padding: 8px 14px !important; font-size: 13px !important; } /* Демо: инпут и кнопка в столбик, чипы — горизонтальным скроллом */ .demo-form { flex-direction: column !important; } .demo-form > button { width: 100%; height: 48px; padding: 0 !important; } .demo-chips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .demo-chips > * { flex: 0 0 auto; } .demo-zone { min-height: 230px; padding: 6px 14px 16px !important; } /* 112px — ровно под «ГЭСН27-07-010-01» в PT Mono 11px, чтобы код не ломался */ .demo-head, .demo-row { grid-template-columns: 112px 1fr 62px; } .demo-row { min-height: 58px; } .demo-head { font-size: 10px !important; } /* «СООТВЕТСТВИЕ» в 70px не влезает и обрезается — процент читается и без подписи, поэтому прячем ярлык, сохраняя выравнивание колонок */ .demo-head > span:nth-child(3) { visibility: hidden; } .demo-row > span:nth-child(1) { font-size: 11px !important; white-space: nowrap; } .demo-row > span:nth-child(2) { padding-right: 8px !important; } .demo-row > span:nth-child(3) span { font-size: 12px !important; padding: 2px 7px !important; } .demo-foot { flex-direction: column; align-items: flex-start !important; gap: 8px; } /* 01 Замечания: номер + заголовок в строку, причина — во всю ширину под ними. Трёхколоночная шапка при такой раскладке уже ни к чему не относится. */ .prob-head { display: none !important; } .prob-row { grid-template-columns: 38px 1fr !important; row-gap: 6px; padding: 14px 16px !important; } .prob-row > span:nth-child(3) { grid-column: 1 / -1; } .prob-cause { flex-direction: column; align-items: flex-start !important; gap: 10px !important; } .prob-cause .stampEl { align-self: flex-start; } /* 04 Тариф: прячем «Ед. изм.» и «Кол-во», штамп мельче и не давит на заголовок */ .price-head, .price-row { grid-template-columns: 32px 1fr 92px !important; } .price-head > span:nth-child(3), .price-head > span:nth-child(4), .price-row > span:nth-child(3), .price-row > span:nth-child(4) { display: none; } .price-total { grid-template-columns: 1fr 92px !important; } .price-stamp { font-size: 11px !important; padding: 5px 9px !important; top: 14px !important; right: 14px !important; } .price-card > div:nth-child(2) { padding: 52px 18px 0 !important; } .price-card > div:nth-child(3) { padding: 14px 18px 0 !important; } .price-foot { flex-direction: column; align-items: stretch !important; gap: 12px !important; padding: 16px 18px 20px !important; } .price-btn { text-align: center; } /* 05 Доступ и подвал — в одну колонку */ .access-grid { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; } /* Финальный CTA: в столбик, кнопка во всю ширину */ .cta-final { flex-direction: column; align-items: stretch !important; padding: 28px 20px !important; gap: 20px !important; } .cta-btn { text-align: center; white-space: normal !important; } /* Cookie-баннер: в строку он съедал почти пол-экрана — ставим в столбик */ .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; } .cookie-banner-text { font-size: 13px; } } /* ============================================================ ЮР.СТРАНИЦЫ — offer.html и privacy.html Их разметка, в отличие от главной, семантическая и с классами .legal-* : юр.текст менять нельзя, поэтому всё оформление живёт здесь и общее для обеих страниц. Маскот туда не добавляется. ============================================================ */ .legal-page { max-width: 800px; margin: 0 auto; padding: 40px 36px 72px; } /* Ссылка «← На главную» — первым элементом внутри .legal-page */ .legal-page a.legal-back-link { display: inline-block; font-family: 'PT Mono', monospace; font-size: 13px; color: oklch(0.42 0.1 155); text-decoration: none; margin-bottom: 28px; } .legal-page a.legal-back-link:hover { text-decoration: underline; } .legal-page h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; text-align: left; margin: 0 0 10px; } /* Строка «Редакция от …» + жирная линия, как под заголовками разделов главной */ .legal-page .legal-meta { font-family: 'PT Mono', monospace; font-size: 12.5px; color: #8d887b; margin: 0; padding-bottom: 16px; border-bottom: 2px solid #262420; } .legal-page .legal-section, .legal-page .legal-requisites { margin-top: 36px; } .legal-page h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; text-align: left; margin: 0 0 14px; } .legal-page p, .legal-page li { font-size: 15px; line-height: 1.6; color: #3b3830; } .legal-page p { margin: 0 0 12px; } .legal-page p:last-child { margin-bottom: 0; } .legal-page .legal-list { margin: 0 0 12px; padding-left: 22px; } .legal-page .legal-list li { margin-bottom: 7px; } /* Номер пункта («1.1.») — тёмный, чтобы читался как маркер структуры */ .legal-page .legal-clause strong { font-weight: 700; color: #262420; } .legal-page a { color: oklch(0.42 0.1 155); text-decoration: underline; } .legal-page a:hover { text-decoration: none; } /* Реквизиты — выделены карточкой, как блоки на главной */ .legal-page .legal-requisites { background: #fff; border: 1px solid #e7e4dc; border-radius: 14px; padding: 24px 26px; } .legal-page .legal-requisites p { margin: 0 0 8px; } /* ---------- Адаптив юр.страниц ---------- */ @media (max-width: 1239px) { .legal-page { padding: 32px 24px 60px; } } @media (max-width: 699px) { .legal-page { padding: 24px 16px 48px; } .legal-page h1 { font-size: 26px; } .legal-page h2 { font-size: 18px; } .legal-page .legal-requisites { padding: 20px 18px; } }