/* Simply Hive — simplyhive.ru Story-deck landing: chapter snap, brand palette (royal/orange/navy/sky), Scandinavian grotesque, dense-but-quiet motion. */ :root { --royal: #264FCC; --royal-deep: #1C3A99; --sky: #2A99FF; --sky-soft: #E8F2FF; --orange: #FF9F40; --orange-deep: #E8842A; --amber: #FFC24D; --navy: #232266; --ink: #1F1F45; --ink-soft: #50527A; --bg: #F8F9FD; --bg-tint: #EFF2FB; --hairline: #DEE3F2; --card: #ffffff; --dark: #121014; --max: 1080px; --sans: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif; /* Регистр приборный: два радиуса, две тени, один фон, один акцент. До 2026-07-28 здесь было 9 радиусов, 10 теней, 8 рецептов фона на 11 экранов и четыре материала кнопок — каждая секция сама себе обои. Разбор 60 фолдов (см. _Foldbook-Synthesis-2026-07) показал: не хватало не разнообразия, а одного правила. */ --r-control: 999px; /* всё, что нажимают */ --r-media: 14px; /* всё остальное: карточки, скриншоты, плашки */ --lift: 0 18px 44px rgba(31, 31, 69, 0.10); /* единственная «поднятая» тень — под медиа */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Фото сот снято 2026-07-28 по замечанию Bee: когда вся остальная страница перешла на настоящие артефакты (скриншоты прода, вывод QA-ворот, лог ночного обхода), документальное макро воска стало единственным изображением, которое ПРИТВОРЯЕТСЯ уликой, не будучи ею — оно показывает не нашу работу, а метафору названия. Осталась процедурная решётка: она очевидно нарисована и ничего не изображает, поэтому не врёт. Файл и промпт сохранены (assets/img/honeycomb.jpg, vault/20-Wiki/Design/Image-Generation-Playbook.md) — пригодятся, когда фактура понадобится там, где она честна. */ --honeycomb-photo: none; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-snap-type: y proximity; } body { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } .container { max-width: var(--max); margin: 0 auto; padding: 0 28px; position: relative; width: 100%; } h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); } h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 1.6rem; } a { color: var(--royal); } /* ---------- chapters (slides) ---------- */ .chapter { min-height: 100svh; display: flex; align-items: center; scroll-snap-align: start; padding: 110px 0 70px; position: relative; } /* ---------- reveal engine ---------- Прячем только когда JS точно жив (класс .js ставится инлайном в ). Упадёт скрипт — страница просто останется видимой. */ .js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms); } .js .rv.in { opacity: 1; transform: none; } /* ---------- header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; } .site-header.scrolled { background: rgba(248, 249, 253, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hairline); } .site-header.on-dark { background: rgba(18, 16, 20, 0.65); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } .site-header.on-dark .brand, .site-header.on-dark .site-nav a:not(.nav-cta) { color: #EDEAE4; } .site-header.on-dark .nav-cta { border-color: var(--amber); color: var(--amber) !important; } .site-header.on-dark .nav-cta:hover { background: var(--amber); color: #1A1207 !important; } .brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--navy); text-decoration: none; } .brand-mark { width: 38px; height: 38px; display: block; transition: transform 0.4s var(--ease-out); } .brand:hover .brand-mark { transform: rotate(14deg); } .site-nav { display: flex; gap: 26px; align-items: center; } .site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.96rem; position: relative; } .site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--royal); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); } .site-nav a:not(.nav-cta):hover { color: var(--navy); } .site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); } .nav-cta { border: 1.5px solid var(--royal); border-radius: var(--r-control); padding: 8px 20px; color: var(--royal) !important; transition: background 0.2s, color 0.2s, transform 0.15s; } .nav-cta:hover { background: var(--royal); color: #fff !important; } .nav-cta:active { transform: scale(0.96); } /* ---------- story nav (chapter dots) ---------- */ .story-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 16px; } .story-nav a { width: 10px; height: 10px; border-radius: var(--r-control); background: var(--hairline); position: relative; display: block; transition: background 0.25s, height 0.3s var(--ease-out); } /* Точка остаётся 10px, но кликается как 24px — минимум по канону для десктопа. Шаг между точками 26px, так что зоны клика не наезжают друг на друга. */ .story-nav a::before { content: ""; position: absolute; inset: -7px; border-radius: var(--r-control); } .story-nav a:hover { background: var(--sky); } .story-nav a.on { background: var(--royal); height: 26px; } .story-nav a span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(6px); font-size: 0.78rem; color: var(--navy); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); padding: 3px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s var(--ease-out); } .story-nav a:hover span { opacity: 1; transform: translateY(-50%) translateX(0); } /* ---------- buttons ---------- */ /* inline-flex + vertical-align:middle вместо inline-block: у inline-block кнопка садится на базовую линию строки и оставляет под собой место под выносные элементы — из-за этого пилюля читается приподнятой над соседним текстом на пиксель-другой. Тени у кнопок нет вовсе: --lift рассчитан на медиа, и на маленькой пилюле он читается как «висит». */ .btn { display: inline-flex; align-items: center; vertical-align: middle; padding: 15px 32px; border-radius: var(--r-control); text-decoration: none; font-size: 1.02rem; font-weight: 600; line-height: 1.2; border: 1.5px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; } .btn:active { transform: translateY(0) scale(0.97); } /* Одна кнопка, один материал. Блик и стеклянное размытие сняты 2026-07-28: декоративный глянец спорил с тезисом о дежурстве. Осталась плотная заливка и одна тень — та же, что под медиа. */ .btn-primary { background: var(--royal); color: #fff; } .btn-primary:hover { background: var(--royal-deep); color: #fff; } /* Вторая кнопка тише первой — иерархия важнее симметрии. Без backdrop-filter: размытие было четвёртым материалом кнопок на странице. */ .btn-ghost { border-color: var(--hairline); color: var(--navy); background: var(--card); } .btn-ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); } /* Акцентная кнопка одна на весь сайт — амбер, и она занята единственным действием: «Заказать аудит» на тёмном экране. .btn-accent (второй оранжевый градиент) слит сюда 2026-07-28: два тёплых градиента подряд — это уже не акцент, а вторая палитра. */ /* amber CTA on the dark offer slide */ .btn-amber { background: var(--amber); color: #1A1207; font-size: 1.1rem; padding: 17px 40px; } .btn-amber:hover { background: #FFD37A; color: #1A1207; } a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: var(--r-media); } /* ---------- 01 hero ---------- */ /* Свечения убраны: glass-depth — ровно тот регистр, который врёт про тезис (глянец читается как маркетинг, а мы продаём дежурство). Фон один на всю страницу; материал первого экрана несёт решётка сот на canvas. */ .hero { overflow: hidden; background: var(--bg); } /* Холст лежит под текстом на всю секцию и не ловит события — курсор отслеживается на самой секции, так что ссылки и кнопки работают как обычно. */ .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* Маска решает читаемость и композицию разом: слева, под текстом, решётка почти гаснет, справа живёт в полную силу. Это и есть то самое одно намеренное нарушение симметрии, которого странице не хватало — плотность поля работает как противовес текстовому блоку. */ -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.07) 34%, rgba(0,0,0,0.45) 52%, #000 74%); mask-image: linear-gradient(100deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.07) 34%, rgba(0,0,0,0.45) 52%, #000 74%); /* Резервируем место сразу: холст позиционирован абсолютно и не двигает вёрстку, CLS остаётся нулевым даже до инициализации скрипта. */ } .hero .container { position: relative; z-index: 1; } .eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.82rem; font-weight: 600; color: var(--royal); margin-bottom: 20px; } .hero h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); max-width: 17ch; margin-bottom: 28px; } .lead { font-size: 1.25rem; color: var(--ink-soft); max-width: 54ch; margin-bottom: 28px; } /* Доказательство под тезисом. Набрано тише заголовка, но с крупной цифрой — глаз должен зацепиться за ноль, а не за строку целиком. Линия слева вместо рамки: карточка здесь спорила бы с кнопками за внимание. */ .hero-proof { border-left: 2px solid var(--amber); padding-left: 16px; margin-bottom: 40px; font-size: 1.02rem; color: var(--ink-soft); max-width: 46ch; } .hero-proof b { font-size: 1.9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-right: 6px; } .hero-actions, .contact-actions { display: flex; gap: 16px; flex-wrap: wrap; } .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--ink-soft); text-decoration: none; font-size: 1.3rem; padding: 4px 14px; line-height: 1.2; animation: hint 2.2s var(--ease-out) infinite; } @keyframes hint { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; } 50% { transform: translateX(-50%) translateY(8px); opacity: 1; } } /* ---------- 02 offer (dark honeycomb) ---------- */ .offer { background: linear-gradient(160deg, rgba(10, 9, 12, 0.88) 0%, rgba(18, 16, 20, 0.55) 55%, rgba(10, 9, 12, 0.92) 100%), var(--honeycomb-photo) center / cover no-repeat, url("img/honeycomb.svg") 0 0 / 116px 67px repeat, radial-gradient(60rem 40rem at 75% 30%, #2A2732, #121014 70%); color: #EDEAE4; } /* Слоя два, и это намеренно: honeycomb.svg — процедурная решётка сот, она есть всегда и ничего не весит. Фото (--honeycomb-photo, см. :root) ляжет поверх неё, когда появится. Бриф и команда генерации — в бэклоге: simplyhive-honeycomb-photo. */ /* Выключка влево, как на всех остальных экранах: центрирование было единственным на странице и ломало общий ритм. */ .offer .container { max-width: 860px; } .eyebrow-light { color: var(--amber); } .offer-title { color: #FAF8F3; font-size: clamp(2.3rem, 5vw, 3.6rem); margin-bottom: 20px; } .offer-lead { color: rgba(237, 234, 228, 0.82); font-size: 1.18rem; max-width: 56ch; margin: 0 0 26px; } .offer-price { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--amber); margin-bottom: 34px; } .offer-note { margin-top: 26px; font-size: 0.95rem; color: rgba(237, 234, 228, 0.6); } /* ---------- 03 start ---------- */ .start { background: var(--bg); } /* ---------- 04 services ---------- */ /* Ровно 2×2: четвёртая карточка не должна оставаться сиротой в ряду из трёх. */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); padding: 30px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s; } .card:hover { transform: translateY(-5px); border-color: var(--sky); box-shadow: var(--lift); } .card h3 { margin-bottom: 12px; font-size: 1.25rem; } .card p { color: var(--ink-soft); font-size: 0.97rem; } .services-note { margin-top: 28px; color: var(--ink-soft); } /* ---------- 05 approach ---------- */ .approach { background: var(--bg); } .approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 36px 56px; } .approach-item h3 { font-size: 1.22rem; margin-bottom: 10px; } .approach-item p { color: var(--ink-soft); font-size: 0.97rem; } /* ---------- 06 cases ---------- */ /* Кейс длиннее экрана — не притягиваем его снапом, иначе прокрутка дёргается. */ .case { overflow: hidden; min-height: auto; padding: 110px 0 96px; scroll-snap-align: none; } .case-idea { background: var(--bg); } .case-casa { background: var(--bg); } .case h2 { margin-bottom: 34px; } .case-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px 52px; align-items: start; margin-bottom: 40px; } .case-layout-flip .case-body { order: 2; } .case-layout-flip .shot { order: 1; } .case-step + .case-step { margin-top: 24px; } .case-step h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--royal); margin-bottom: 8px; } .case-step p { color: var(--ink-soft); font-size: 1rem; } .case-body-wide { max-width: 72ch; margin-bottom: 40px; } .case-body-wide .case-step + .case-step { margin-top: 22px; } /* скриншот в лёгкой рамке браузера */ .shot { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); overflow: hidden; box-shadow: var(--lift); } .shot img { display: block; width: 100%; height: auto; } .shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--bg-tint); border-bottom: 1px solid var(--hairline); } .shot-bar span { width: 9px; height: 9px; border-radius: var(--r-control); background: var(--hairline); } .shot-bar em { font-style: normal; font-size: 0.78rem; color: var(--ink-soft); margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shot figcaption { padding: 12px 16px; font-size: 0.86rem; color: var(--ink-soft); border-top: 1px solid var(--hairline); } /* Одно намеренное нарушение сетки на страницу: скриншот каталога уезжает за правый край контейнера к краю экрана. */ .shot-bleed { margin-right: calc(50% - 50vw); border-radius: var(--r-media) 0 0 16px; } .shot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 26px; } .shot-sm { box-shadow: var(--lift); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 36px; } .stat { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; } .stat:nth-child(1) { border-top: 4px solid var(--royal); } .stat:nth-child(2) { border-top: 4px solid var(--orange); } .stat:nth-child(3) { border-top: 4px solid var(--sky); } .stat:nth-child(4) { border-top: 4px solid var(--navy); } .stat-num { font-size: 2.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.9rem; color: var(--ink-soft); } .case-note { max-width: 68ch; color: var(--ink-soft); } /* ---------- 07 telegram ---------- */ .telegram { background: var(--bg); } @keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } } /* ---------- 08 faq ---------- */ .faq { background: var(--bg-tint); } .faq-list { max-width: 760px; } .faq-list details { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); padding: 18px 24px; margin-bottom: 12px; transition: border-color 0.25s, box-shadow 0.25s; } .faq-list details:hover { border-color: var(--sky); } .faq-list details[open] { border-color: var(--royal); box-shadow: 0 10px 28px rgba(35, 34, 102, 0.08); } .faq-list summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--navy); list-style: none; position: relative; padding-right: 32px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--royal); transition: transform 0.3s var(--ease-out); } .faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-list details[open] summary { margin-bottom: 10px; } .faq-list p { color: var(--ink-soft); } /* ---------- 09 contact ---------- */ .contact { background: var(--bg); } .about-line { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--hairline); padding-bottom: 36px; margin-bottom: 44px; } .about-mark { width: 88px; height: 88px; flex-shrink: 0; } .about-line p { color: var(--ink-soft); max-width: 60ch; } .contact-lead { max-width: 58ch; color: var(--ink-soft); margin-bottom: 34px; font-size: 1.05rem; } .footer-inline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--ink-soft); } .footer-inline a { color: var(--ink-soft); } /* ---------- legal page (privacy.html reuses header styles statically) ---------- */ .legal-text { max-width: 740px; margin-top: 80px; } .legal-text h1 { font-size: 1.8rem; margin-bottom: 8px; } .legal-text h2 { font-size: 1.2rem; margin: 30px 0 8px; } .legal-text p { color: var(--ink-soft); margin-bottom: 12px; } .legal-date { font-size: 0.9rem; font-style: italic; } .site-footer { padding: 32px 28px; font-size: 0.92rem; color: var(--ink-soft); } .site-footer .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: var(--max); margin: 0 auto; } .site-footer a { color: var(--ink-soft); } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } .js .rv, .rv { opacity: 1; transform: none; transition: none; } .btn:hover, .card:hover { transform: none; } /* Блик по кнопке — тоже движение: гасим вместе с остальным. */ .btn-primary:hover::after { animation: none; } /* Прыгающая стрелка «дальше». Правило потерялось в коммите f90f68b вместе с удалённым .tg-typing (они стояли одним селектором) — вернул 2026-08-11 на прогоне гейта: бесконечная анимация при reduced-motion недопустима. */ .scroll-hint { animation: none; } } /* ---------- responsive ---------- */ @media (max-width: 900px) { .tg-inner { grid-template-columns: 1fr; gap: 36px; } .case-layout { grid-template-columns: 1fr; gap: 30px; } .case-layout-flip .case-body { order: 1; } .case-layout-flip .shot { order: 2; } .shot-bleed { margin-right: 0; border-radius: var(--r-media); } .case { min-height: 0; padding: 90px 0 70px; } } @media (max-width: 640px) { /* Лог ночного обхода: на узком экране кегль меньше, длинная строка по-прежнему скроллится внутри своего контейнера — страница не едет. */ .gate-log code { font-size: 0.76rem; } .gate-checks li { padding: 10px 14px; gap: 8px; } .gate-head, .gate-log { padding-left: 14px; padding-right: 14px; } .chapter { padding: 90px 0 60px; min-height: 100svh; } .shot-row { grid-template-columns: 1fr; gap: 20px; } /* Строка вопроса — 28px по высоте, для пальца мало: добиваем до 44px. */ .faq-list summary { padding-top: 8px; padding-bottom: 8px; } .site-nav { gap: 14px; font-size: 0.9rem; } .site-nav a:not(.nav-cta) { display: none; } /* На телефоне точки главы дали бы тап-таргет в 8px — вчетверо меньше нормы. Индикатор декоративный, прокрутка от него не зависит: убираем. */ .story-nav { display: none; } /* На телефоне курсора нет — решётка живёт только медленным дрейфом, поэтому приглушаем её, чтобы не спорила с заголовком на узком экране. */ .hero-canvas { opacity: 0.55; } .stats { grid-template-columns: 1fr 1fr; } .stat-num { font-size: 1.6rem; } } /* ---------- 03 работа: улика внутри пункта ---------- */ /* Приём Rive: заголовок → улика → пояснение. Раньше .card-proof имел margin-top:auto и физически отталкивал доказательство в самый низ карточки — это была противоположность приёму. */ .item-proof { font-weight: 700; color: var(--navy); margin: 2px 0 8px; font-size: 1.02rem; } .services-head { font-size: 1.15rem; margin: 52px 0 18px; color: var(--navy); } .services-list { list-style: none; display: grid; gap: 14px; max-width: 74ch; } .services-list li { border-top: 1px solid var(--hairline); padding-top: 14px; color: var(--ink-soft); font-size: 1.02rem; } .services-list b { color: var(--navy); } .services-list span { display: block; color: var(--navy); font-size: 0.95rem; margin-top: 3px; } .services-note { margin-top: 26px; color: var(--ink-soft); } /* ---------- 07 QA-ворота: приборная панель ---------- */ /* Единственное место на светлой странице, где появляется цвет-статус. Он занят строго состоянием проверки — больше нигде (приём Linear). */ .gate-lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; margin-bottom: 34px; } .gate-panel { border: 1px solid var(--hairline); border-radius: var(--r-media); background: var(--card); overflow: hidden; max-width: 860px; } .gate-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; color: var(--ink-soft); } .gate-head b { color: var(--navy); } .gate-head em { margin-left: auto; font-style: normal; font-weight: 700; color: #1F7A4D; } .gate-dot { width: 9px; height: 9px; border-radius: var(--r-control); background: #1F7A4D; } .gate-checks { list-style: none; } .gate-checks li { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 11px 20px; border-bottom: 1px solid var(--hairline); font-size: 0.94rem; color: var(--ink-soft); } .gate-checks code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy); font-size: 0.92rem; } .gate-checks span { flex: 1 1 260px; } .gate-checks i { font-style: normal; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; } .sev-b { color: #A33; font-weight: 700; } .sev-w { color: #8A6A1F; } .sev-i { color: var(--ink-soft); } .gate-checks .ok { color: #1F7A4D; font-weight: 700; } .gate-log { padding: 18px 20px 20px; } .gate-log-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 10px; } .gate-log pre { overflow-x: auto; } .gate-log code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; line-height: 1.7; color: var(--navy); white-space: pre; } .gate-note { margin-top: 22px; color: var(--ink-soft); max-width: 62ch; } /* Телеграм тихой ссылкой вместо второй кнопки равного веса. */ .contact-alt { margin-top: 14px; color: var(--ink-soft); font-size: 0.98rem; max-width: 54ch; } /* ---------- служебные страницы (404/500) ---------- */ /* Тот же приборный регистр, что и на экране проверок: посетитель, попавший на аварийную страницу, должен видеть систему, а не извинения. */ .status-page { min-height: 100svh; align-items: center; } .status-page h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 12px 0 20px; } .status-page .lead { margin-bottom: 34px; } .status-page .gate-panel { max-width: 620px; } /* ---------- документные страницы (образец аудита) ---------- */ /* Не «глава» лендинга: здесь читают подряд, поэтому обычный поток, узкая мера и никакого snap. Регистр тот же приборный — те же severity-метки, что на экране проверок и в 404. */ .doc { padding: 120px 0 90px; } .doc .container { max-width: 760px; } .doc h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 10px 0 22px; } .doc h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 54px 0 14px; } .doc h3 { font-size: 1.14rem; margin-bottom: 8px; } .doc p { margin-bottom: 16px; color: var(--ink-soft); } .doc .lead { font-size: 1.18rem; color: var(--ink-soft); } .doc b { color: var(--navy); } .doc i { font-style: italic; } .doc-note { border-left: 2px solid var(--amber); padding: 2px 0 2px 16px; margin: 28px 0 8px; } .doc-note p { margin: 0; font-size: 0.98rem; } .audit-layer { border-top: 1px solid var(--hairline); padding-top: 22px; margin-top: 26px; } .layer-what { font-size: 0.98rem; } .findings { list-style: none; display: grid; gap: 12px; margin-top: 14px; } .findings li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; font-size: 0.98rem; color: var(--ink-soft); } .findings i { font-style: normal; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .doc-cta { border: 1px solid var(--hairline); border-radius: var(--r-media); background: var(--card); padding: 28px; margin: 48px 0 30px; } .doc-cta-lead { font-size: 1.15rem; color: var(--navy); font-weight: 700; margin-bottom: 18px; } .doc-cta-note { margin: 16px 0 0; font-size: 0.95rem; } .doc-back { margin-top: 30px; } @media (max-width: 640px) { .findings li { grid-template-columns: 1fr; gap: 3px; } } /* Оффер: боевое действие и «сначала посмотреть» — разного веса, не две кнопки. */ .offer-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .offer-link { color: var(--amber); text-decoration: none; font-size: 0.98rem; border-bottom: 1px solid rgba(255,194,77,0.35); } .offer-link:hover { border-bottom-color: var(--amber); } /* ---------- 05 pricing (added 2026-08-12, cash-sprint W33) ---------- */ /* Карточки длиннее экрана в сумме — как и кейсы, без снапа. */ .pricing { background: var(--bg-tint); min-height: auto; padding: 110px 0 96px; scroll-snap-align: none; } .pricing-lead { max-width: 64ch; color: var(--ink-soft); margin-bottom: 40px; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 24px; } .pricing-item { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); padding: 26px 24px; display: flex; flex-direction: column; } .pricing-item h3 { font-size: 1.12rem; margin-bottom: 6px; } .pricing-price { color: var(--royal); font-weight: 700; font-size: 1.05rem; } .pricing-term { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 12px; } .pricing-item > p:not([class]) { color: var(--ink-soft); font-size: 0.95rem; } .pricing-fit { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 0.88rem; color: var(--navy); } .pricing-item > p:not([class]) { margin-bottom: 14px; } .pricing-sub { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-media); padding: 18px 24px; } .pricing-sub p { color: var(--ink-soft); font-size: 0.97rem; } .pricing-sub b { color: var(--navy); } .pricing-sub a { color: var(--royal); } /* Строка про метрику в подвале — тише копирайта, не спорит с контактом. */ .footer-note { color: var(--ink-soft); font-size: 0.88rem; } .footer-note a { color: var(--ink-soft); }