@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;700&family=PT+Sans:wght@400;700&display=swap'); /* Источник — дизайн-система проекта, файл «Сушка - дизайн-система.dc.html». */ /* Палитра и шрифты продублированы из qw-ds/tokens/theme-dryer.css (тема */ /* «цех и паспорт партии»). Лендинг статический и не может подключить общий */ /* файл темы по сборке — при изменении значений в qw-ds править оба места, */ /* значения переносить посимвольно (никакого color-mix — палитра дублируется). */ :root { --graphite: #1B1E20; --graphite-2: #252A2C; --paper: #F7F5F2; --ink: #20262A; --muted: #6E6A64; --amber: #E0912B; --oak: #A9762F; /* Кнопка действия: наведение и нажатие — плоские значения по системе. */ --amber-hover: #F0A03A; --amber-active: #C87F22; --oak-ink: #8A5E20; /* дуб в роли текста/плашки на бумаге: 5.2:1 к --paper */ --success: #2E7D4F; /* успех на бумаге: 4.6:1 к --paper */ --alarm: #A63A2B; /* тревога на бумаге: 5.9:1 к --paper */ --alarm-on-dark: #F1A99C; /* Тревога на графите: --alarm (#A63A2B) на тёмном фоне давал лишь 2.6:1 — ниже порога 4.5:1 для мелкого текста. #F1A99C даёт 7.3:1 к --graphite. Значение обязано посимвольно совпадать с --qwds-dryer-warn-on-dark в qw-ds/tokens/theme-dryer.css. */ --field: #FFFFFF; /* только поля ввода, чтобы их было видно на бумаге */ --paper-2: #EFEBE4; /* заглушка породы без фото (плоское поле, без текстуры) */ --blank-border: #C9C3B8; /* пунктирная граница заглушки породы */ --btn-disabled: #4A4643; /* фон недоступной кнопки */ --font-h: 'Bitter', Georgia, serif; --font-b: 'PT Sans', 'Segoe UI', system-ui, sans-serif; --gutter: clamp(16px, 4vw, 40px); /* Инструмент, а не брошюра: скругления и тени убраны (владелец, 2026-09-16). Разметку разделяют линии/сетка, не карточки. Токен остаётся 0, а не удалён — единственное исключение — плитки пород (.wood), у них свой радиус: снимок остаётся цветовым пятном страницы, его не трогаем. */ --radius: 0; /* Радиусы системы (поле / максимум) — для элементов, которые их используют; текущая разметка скругления отключает через --radius: 0 выше. */ --radius-field: 2px; --radius-max: 4px; --border-1: 1px; --border-2: 2px; /* Линия-разделитель: плоские значения по системе, не color-mix — палитра дублируется в сайте и в библиотеке виджета и должна копироваться посимвольно (design-system.html, раздел «Осознанно не используется»). */ --line: #E2DED7; /* линия на бумаге */ --line-dark: #34393B; /* линия на графите */ /* Приглушённый серый на графите: 6.5:1 к --graphite-2, 7.2:1 к --graphite — плоский hex, не color-mix(var(--paper)...), чтобы значение можно было посимвольно скопировать в qw-ds/tokens/theme-dryer.css как --qwds-dryer-muted-on-dark (там нет переменной --paper). */ --muted-on-dark: #AEAEAD; /* Длительности по системе: --dur-fast — переходы наведения/фокуса, --dur-flash — единственная анимация системы, подсветка пересчитанной цены (620ms). Значение обязано посимвольно совпадать с --qwds-dryer-dur-fast / --qwds-dryer-dur в qw-ds/tokens/theme-dryer.css. */ --dur-fast: 120ms; --dur-flash: 620ms; color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font: 16px/1.6 var(--font-b); margin: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--oak-ink); } h1, h2, h3, h4, .num { font-family: var(--font-h); text-wrap: balance; } h1, h2, h3, h4, .num { line-height: 1.2; margin: 0 0 .5em; } h1 { font-size: clamp(22px, 3.6vw, 32px); } h2 { font-size: clamp(22px, 3.2vw, 32px); } .muted { color: var(--muted); } [hidden] { display: none !important; } /* Задача 19 — экраны вместо длинной прокрутки. Без JS ничего из этого не включается: не получает класс .js-tabs, панели остаются видимыми (в разметке у них нет hidden), и страница ведёт себя как раньше — длинная лента с рабочими #calc/#how/#faq-переходами. Класс добавляет page.js, только когда сам выполнился. */ .js-tabs body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; margin: 0; } .js-tabs main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .js-tabs .app-head, .js-tabs .foot { flex: 0 0 auto; } /* Чередование фонов: паспорт задаёт графитовый акцент первому экрану, */ /* галерее пород (снимки лучше читаются на тёмном) и контактам (закрывающий */ /* экран, парный к hero). Рабочие блоки — расчёт, объяснения, вопросы — */ /* остаются на бумаге: там читают и считают, а не рассматривают. */ .section--dark { background: var(--graphite); color: var(--paper); box-shadow: 0 0 0 100vmax var(--graphite); } .section--dark h2 { color: var(--paper); } .section--dark .muted { color: var(--muted-on-dark); } .section--dark a:not(.btn) { color: var(--amber); } /* Тень выше растягивает графит во всю ширину окна — но она же накрывает соседние светлые секции, у которых своего фона нет, и их тёмный текст становится нечитаемым. Поэтому светлые секции получают собственный фон и слой выше тени. */ main > section:not(.section--dark) { position: relative; z-index: 1; background: var(--paper); } /* Шапка и полоса вкладок — один липкий блок (задача 19): так их суммарная высота не считается вручную под sticky-top второго уровня. */ .app-head { position: sticky; top: 0; z-index: 10; background: var(--graphite); } /* Узкая, графитовая: только название и телефон — спека, раздел 4. */ .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 10px var(--gutter); } .brand { font-weight: 700; color: var(--paper); text-decoration: none; } .top__phone { font-weight: 600; color: var(--amber); text-decoration: none; } /* Полоса вкладок: якоря-ссылки, чтобы без JS они всё равно работали как обычная внутристраничная навигация по длинной ленте (href="#id" ведёт на секцию с этим id). С JS клики перехватываются и переключают панель — см. page.js. Горизонтальная прокрутка своя, чтобы на узком экране полоса не толкала страницу вбок (спека, раздел «Проверки»). */ .tabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--gutter); border-bottom: 1px solid var(--line-dark); scrollbar-width: thin; } .tab { flex: 0 0 auto; padding: 12px 14px; color: var(--muted-on-dark); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; border-bottom: 3px solid transparent; } .tab:hover { color: var(--paper); } /* Активная вкладка отмечена не только цветом, но и линией снизу — доступность, спека «Доступность». */ .tab.is-active, .tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--amber); } .tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; } main > section { padding: clamp(40px, 7vw, 80px) var(--gutter); max-width: 1160px; margin: 0 auto; } /* Первый экран — инструмент, а не разворот брошюры (владелец, 2026-09-16): расчёт (виджет) — главный объект, заголовок компактный и стоит над ним, без фиксированной высоты (100vh запрещён — экран растёт по контенту). Задача 21: расчёт должен помещаться на экране целиком, поэтому верхний блок (шапка + вкладки уже sticky, дальше надзаголовок/заголовок/лид) сжат — отступы и кегли меньше, чем у обложечных экранов «Породы» и «Контакты». */ .hero { display: block; padding-top: clamp(16px, 2.4vw, 28px); } .hero__head { max-width: 68ch; } .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--muted-on-dark); margin: 0 0 8px; } .lead { font-size: 15px; color: var(--muted-on-dark); max-width: 62ch; margin: 8px 0 0; } .calc__widget { margin-top: 18px; min-height: 120px; } .fallback { margin-top: 16px; padding: 16px 20px; background: var(--paper); color: var(--ink); border: 1px dashed var(--line); border-radius: var(--radius); } .hero .fallback a { color: var(--oak-ink); } .fallback__links { display: flex; flex-wrap: wrap; gap: 8px 18px; } /* Строка технической сводки вместо карточек-показателей (владелец, 2026-09-16): подпись — значение — единица, разделены линиями, цифры сохранены дословно. */ .summary { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); } .summary li { flex: 1 1 200px; padding: 16px 22px; border-left: 1px solid var(--line-dark); } .summary li:first-child { border-left: none; padding-left: 0; } .summary__label { display: block; color: var(--muted-on-dark); font-size: 13px; } .summary__value { display: block; margin-top: 6px; font-family: var(--font-h); font-size: clamp(22px, 3vw, 30px); font-variant-numeric: tabular-nums; color: var(--amber); } .summary__value i { font-style: normal; font-size: 14px; font-weight: 400; color: var(--muted-on-dark); margin-left: 6px; } /* Паспорт камеры: узкая полоса подписей, а не карточка (владелец, 2026-09-16). Строки без подтверждённых значений (вакуум, температура) не добавляются — см. отчёт задачи 9. */ .hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; } .passport { display: flex; flex-wrap: wrap; margin: 0; font-variant-numeric: tabular-nums; } .passport div { display: flex; align-items: baseline; gap: 6px; padding: 0 16px; border-left: 1px solid var(--line-dark); } .passport div:first-child { padding-left: 0; border-left: none; } .passport dt { margin: 0; color: var(--muted-on-dark); font-size: 13px; } .passport dd { margin: 0; font-family: var(--font-h); font-size: 14px; } .btn { display: inline-block; padding: 10px 20px; border: 1px solid var(--paper); color: var(--paper); text-decoration: none; font-weight: 600; } .btn:hover, .btn:focus-visible { background: var(--paper); color: var(--graphite); } /* Подзаголовки внутри объединённой панели «Как это работает» (задача 19: «почему вакуумная сушка» и «как проходит заказ» — теперь один экран, текст соответственно подрезан). Первый подзаголовок примыкает к h2, у второго обычный отступ сверху. */ .how__sub { font-size: 17px; margin-top: 0; } .how__sub + .cards, .how__sub + .muted { margin-top: 0; } h3.how__sub ~ h3.how__sub { margin-top: 28px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: 20px; } .cards article { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px; } .cards h4 { font-size: 15px; margin-bottom: .3em; } .cards p { margin: 0; font-size: 14px; } .species__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 12px; } .wood { /* Плитки пород — не трогаем форму подачи (владелец, 2026-09-16): снимок остаётся главным цветовым пятном страницы. Радиус фиксирован явно, а не токеном --radius, который для всей остальной страницы теперь 0. */ display: block; background: var(--graphite-2); border: 1px solid var(--line-dark); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; } .wood img { aspect-ratio: 360 / 290; object-fit: cover; width: 100%; } .wood__blank { display: grid; place-items: center; aspect-ratio: 360 / 290; width: 100%; font-family: var(--font-h); font-size: 34px; font-weight: 700; color: var(--muted-on-dark); } .wood__name { display: block; padding: 8px 12px 0; font-weight: 600; } .wood__group { display: block; padding: 0 12px 10px; color: var(--muted-on-dark); font-size: 13px; } .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .steps li { counter-increment: step; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px; } .steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-h); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--oak-ink); margin-bottom: 8px; font-variant-numeric: tabular-nums; } .steps b { display: block; margin-bottom: 4px; } .steps span { color: var(--muted); } .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); padding: 16px 0; margin: 0; } .faq summary { cursor: pointer; font-weight: 600; } .faq details p { margin: 10px 0 2px; } .contacts__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .map { min-height: 180px; display: grid; place-items: center; border: 1px dashed var(--line-dark); border-radius: var(--radius); color: var(--muted-on-dark); } .foot { padding: 24px var(--gutter); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; }