/* ============================================================ Aschool · webinar.css Стили ОДНОЙ страницы — webinar-homework.html (лендинг вебинара «Домашнее задание легко»). Подключается только там. Правила игры этого файла: • всё живёт под .wh-page (класс на этой страницы) либо под собственным префиксом .wh-* — ни одно правило не может дотянуться до других страниц сайта; • дизайн-система не переопределяется: .btn / .btn-primary / .card / .lead-form / .site-footer / .cookie-banner берутся из css/main.css + css/components.css как есть, здесь только раскладка, ритм и собственные блоки лендинга; • цвета — из брендовых токенов (--brand-*), локальные токены ниже лишь дают им смысловые имена внутри страницы. ============================================================ */ .wh-page { /* Локальные смысловые токены. Значения — брендовые. */ --wh-ink: var(--brand-dark); --wh-ink-soft: rgba(var(--brand-dark-rgb), .74); /* .68, а не .58: этим токеном покрашены подписи 12–13,5 px (подсказки под полями, примечания под CTA, dt в кейсах). На белом .58 даёт ~3,2:1 при требуемых WCAG AA 4,5:1 для обычного текста, .68 — ~5,0:1. */ --wh-ink-faint: rgba(var(--brand-dark-rgb), .68); --wh-line: rgba(var(--brand-dark-rgb), .10); /* Красный как ЦВЕТ ТЕКСТА на светло-красной подложке тега «средняя школа». Подложка rgba(--brand-red-rgb, .10) на белом даёт #FDEBED; на ней --brand-red-cta (#D8334A) — 4,08:1 при требуемых WCAG AA 4,5:1. #B82A3E на том же фоне — 5,33:1 (на белом — 6,11:1), остаётся тем же брендовым красным, лишь затемнённым, — тот же приём, что уже применён в main.css для --brand-red-cta / --brand-orange-cta. Токен локальный: глобальная палитра сайта не меняется. */ --wh-red-ink: #B82A3E; --wh-surface: #FFFFFF; --wh-warm: #FFF6EC; /* тёплая подложка блоков «про чувства» */ --wh-cool: #F1F8FC; /* прохладная подложка «про метод» */ --wh-radius: 22px; --wh-radius-lg: 30px; --wh-shadow: 0 10px 30px rgba(var(--brand-dark-rgb), .07); --wh-shadow-lg: 0 24px 60px rgba(var(--brand-dark-rgb), .13); --wh-section-y: clamp(56px, 7vw, 104px); } /* Ритм страницы задаём здесь, а не глобальным section{} из main.css: у лендинга воздуха заметно больше, чем у контентных страниц. */ .wh-page main section { padding: var(--wh-section-y) 0; } .wh-page .container { padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .wh-page .container { padding-left: 24px; padding-right: 24px; } } /* Узкая колонка для смысловых блоков — «много воздуха», короткая строка */ .wh-narrow { max-width: 860px; margin-left: auto; margin-right: auto; } /* ── Типографика страницы ───────────────────────────────────── */ .wh-page h2 { font-size: clamp(25px, 3.4vw, 42px); line-height: 1.16; color: var(--wh-ink); margin: 0 0 16px; } .wh-page h3 { color: var(--wh-ink); } .wh-lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--wh-ink-soft); margin: 0 0 20px; } .wh-section-head { margin-bottom: clamp(28px, 4vw, 48px); } .wh-section-head .wh-lead { max-width: 720px; } .wh-section-head--center { text-align: center; } .wh-section-head--center .wh-lead { margin-left: auto; margin-right: auto; } .wh-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-blue); background: rgba(var(--brand-blue-rgb), .09); border-radius: 999px; padding: 7px 15px; margin: 0 0 16px; } /* ══════════════════════════════════════════════════════════════ HEADER — компактный, только логотип и одна CTA ══════════════════════════════════════════════════════════════ */ .wh-header .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 11px; padding-bottom: 11px; } .wh-header .logo-mark-img { width: 34px; height: 34px; } .wh-header .logo span { font-size: 17px; } .wh-header__note { font-size: 13px; line-height: 1.3; color: var(--wh-ink-faint); border-left: 1px solid var(--wh-line); padding-left: 14px; margin-left: 2px; } /* Подпись рядом с логотипом — роскошь широкого экрана, на мобильном место отдаём кнопке. */ @media (max-width: 720px) { .wh-header__note { display: none; } .wh-header .logo span { font-size: 15px; } .wh-header .container { padding-top: 9px; padding-bottom: 9px; } } .wh-header__spacer { flex: 1; } /* ══════════════════════════════════════════════════════════════ БЛОК 1 — HERO ══════════════════════════════════════════════════════════════ */ .wh-hero { padding-top: clamp(28px, 4vw, 56px) !important; } .wh-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (min-width: 981px) { .wh-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } } .wh-hero h1 { font-size: clamp(32px, 6.2vw, 60px); line-height: 1.08; letter-spacing: -.02em; color: var(--wh-ink); margin: 0 0 14px; text-wrap: balance; } .wh-hero__sub { font-size: clamp(18px, 2.2vw, 25px); font-weight: 700; line-height: 1.32; color: var(--brand-blue); margin: 0 0 18px; text-wrap: balance; } .wh-hero__text { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.62; color: var(--wh-ink-soft); max-width: 560px; margin: 0 0 26px; } /* Дата и формат — две «плашки факта» */ .wh-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; } .wh-fact { display: inline-flex; align-items: center; gap: 9px; background: var(--wh-surface); border: 1px solid var(--wh-line); border-radius: 14px; padding: 11px 16px; font-size: 15px; font-weight: 700; color: var(--wh-ink); box-shadow: 0 3px 10px rgba(var(--brand-dark-rgb), .05); } .wh-fact__ic { font-size: 17px; line-height: 1; } .wh-fact--accent { background: rgba(var(--brand-orange-rgb), .10); border-color: rgba(var(--brand-orange-rgb), .28); } .wh-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .wh-hero__cta .btn { max-width: 100%; } @media (max-width: 560px) { .wh-hero__cta { align-items: stretch; } .wh-hero__cta .btn { width: 100%; } } .wh-bonus-note { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--wh-ink-faint); margin: 0; max-width: 460px; } .wh-bonus-note__ic { flex-shrink: 0; font-size: 15px; line-height: 1.4; } /* ══════════════════════════════════════════════════════════════ ФОРМА РЕГИСТРАЦИИ ══════════════════════════════════════════════════════════════ */ .wh-form-card { background: var(--wh-surface); border: 1px solid var(--wh-line); border-radius: var(--wh-radius-lg); box-shadow: var(--wh-shadow-lg); padding: clamp(22px, 3vw, 32px); scroll-margin-top: 84px; /* липкий header не перекрывает форму при переходе по якорю */ } .wh-form-card__title { font-size: clamp(20px, 2.2vw, 25px) !important; margin: 0 0 6px !important; } .wh-form-card__sub { font-size: 14px; line-height: 1.5; color: var(--wh-ink-faint); margin: 0 0 20px; } /* .lead-form из components.css — своя карточка с тенью; внутри нашей карточки она должна быть прозрачной подложкой. */ .wh-form-card .lead-form { background: transparent; box-shadow: none; border: none; border-radius: 0; padding: 0; max-width: none; } .wh-form-card .field-hint { display: block; font-size: 12.5px; line-height: 1.45; color: var(--wh-ink-faint); margin-top: 6px; } .wh-form-card .form-thanks { margin: 0; } /* Что получает человек сразу после отправки — под кнопкой, мелко */ .wh-form-card__after { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--wh-ink-faint); } /* ══════════════════════════════════════════════════════════════ БЛОК 2 — ПРОБЛЕМА ══════════════════════════════════════════════════════════════ */ .wh-problem { background: var(--wh-warm); } .wh-problem-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 620px) { .wh-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .wh-problem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .wh-problem-grid .card { padding: 20px; border-radius: 18px; box-shadow: 0 4px 14px rgba(var(--brand-dark-rgb), .06); gap: 12px; flex-direction: row; align-items: flex-start; } .wh-problem-grid .card:hover { transform: none; /* карточки-симптомы не «прыгают»: тон блока спокойный */ box-shadow: 0 8px 22px rgba(var(--brand-dark-rgb), .10); } .wh-problem__mark { flex-shrink: 0; width: 26px; height: 26px; border-radius: 9px; background: rgba(var(--brand-orange-rgb), .14); color: var(--brand-orange-cta); display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; } .wh-problem__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wh-ink); } /* Вывод под карточками — мягкий, без диагноза */ .wh-note { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 780px; background: var(--wh-surface); border: 1px solid rgba(var(--brand-orange-rgb), .26); border-left: 4px solid var(--brand-orange); border-radius: 18px; padding: clamp(20px, 2.6vw, 28px); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; font-weight: 600; color: var(--wh-ink); text-align: left; } /* ══════════════════════════════════════════════════════════════ БЛОК 3 — STATEMENT ══════════════════════════════════════════════════════════════ */ .wh-statement { background: linear-gradient(140deg, var(--brand-blue) 0%, var(--brand-cyan) 100%); color: var(--brand-white); } .wh-statement__quote { font-size: clamp(22px, 3.4vw, 40px); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 clamp(22px, 3vw, 34px); text-wrap: balance; } .wh-statement__body p { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .92); max-width: 760px; margin: 0 0 14px; } .wh-statement__body p:last-child { margin-bottom: 0; } .wh-statement__rule { width: 64px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .55); margin: 0 0 26px; } /* ══════════════════════════════════════════════════════════════ БЛОК 4 — НАЧАЛЬНАЯ / СРЕДНЯЯ ШКОЛА ══════════════════════════════════════════════════════════════ */ .wh-age-grid { display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .wh-age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wh-age-card { background: var(--wh-surface); border: 1px solid var(--wh-line); border-radius: var(--wh-radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--wh-shadow); position: relative; overflow: hidden; } .wh-age-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--wh-age-accent, var(--brand-blue)); } .wh-age-card--primary { --wh-age-accent: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue)); } .wh-age-card--middle { --wh-age-accent: linear-gradient(90deg, var(--brand-orange), var(--brand-red)); } .wh-age-card__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: 6px 13px; margin-bottom: 14px; } .wh-age-card--primary .wh-age-card__tag { background: rgba(var(--brand-blue-rgb), .10); color: var(--brand-blue); } .wh-age-card--middle .wh-age-card__tag { background: rgba(var(--brand-red-rgb), .10); color: var(--wh-red-ink); } .wh-age-card h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.25; margin: 0 0 18px; } .wh-age-list { list-style: none; margin: 0; padding: 0; } .wh-age-list li { position: relative; padding: 9px 0 9px 30px; font-size: 15.5px; line-height: 1.5; color: var(--wh-ink-soft); border-bottom: 1px solid rgba(var(--brand-dark-rgb), .06); } .wh-age-list li:last-child { border-bottom: none; } .wh-age-list li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .42; } /* ══════════════════════════════════════════════════════════════ БЛОК 5 — ЧТО ВЫ УЗНАЕТЕ (нумерованные карточки 01–06) ══════════════════════════════════════════════════════════════ */ .wh-learn { background: var(--wh-cool); } .wh-learn-grid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: minmax(0, 1fr); } @media (min-width: 680px) { .wh-learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .wh-learn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wh-learn-grid .card { padding: clamp(22px, 2.4vw, 30px); border-radius: var(--wh-radius); box-shadow: var(--wh-shadow); gap: 0; } .wh-learn__num { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.02em; /* .70, а не .42: цифры 01–06 — крупный жирный текст (30px/900), порог WCAG AA для него 3:1. На белом .42 даёт #94C1E0 и всего 1,91:1 (axe-core, serious, color-contrast), .70 — #4D98CB и 3,15:1. Тот же брендовый синий, только плотнее: --brand-blue и палитра сайта не меняются. */ color: rgba(var(--brand-blue-rgb), .70); margin-bottom: 14px; font-variant-numeric: tabular-nums; } .wh-learn__text { margin: 0; font-size: 16px; line-height: 1.52; color: var(--wh-ink); font-weight: 500; } /* ══════════════════════════════════════════════════════════════ БЛОК 6 — МЕТОД «ЛЕГКО» (лестница из пяти шагов) ══════════════════════════════════════════════════════════════ */ .wh-method__steps { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: flex; flex-direction: column; gap: 14px; } .wh-method__step { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 22px); background: var(--wh-surface); border: 1px solid var(--wh-line); border-radius: var(--wh-radius); padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--wh-shadow); /* Ступень: каждый следующий шаг чуть правее. Сдвиг съедает ширину самого блока (он блочный внутри flex-колонки), поэтому горизонтального переполнения не даёт ни на одной ширине. */ margin-left: calc(var(--wh-i, 0) * clamp(0px, 1.8vw, 34px)); transition: transform .25s ease, box-shadow .25s ease; } @media (hover: hover) { .wh-method__step:hover { transform: translateX(4px); box-shadow: 0 16px 34px rgba(var(--brand-dark-rgb), .12); } } @media (max-width: 680px) { .wh-method__step { margin-left: 0; } } .wh-method__letter { flex-shrink: 0; width: clamp(48px, 7vw, 62px); height: clamp(48px, 7vw, 62px); border-radius: 18px; display: grid; place-items: center; font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; line-height: 1; color: var(--brand-white); background: linear-gradient(140deg, var(--brand-blue), var(--brand-cyan)); box-shadow: 0 8px 18px rgba(var(--brand-blue-rgb), .28); } .wh-method__body { min-width: 0; } .wh-method__body h3 { font-size: clamp(17px, 1.9vw, 21px); margin: 0 0 7px; line-height: 1.25; } .wh-method__body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--wh-ink-soft); } /* ══════════════════════════════════════════════════════════════ БЛОК 7 — РЕЗУЛЬТАТ (чек-лист) ══════════════════════════════════════════════════════════════ */ .wh-result { background: var(--wh-warm); } .wh-result-list { list-style: none; margin: 0 0 clamp(30px, 4vw, 44px); padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 820px) { .wh-result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wh-result-list li { display: flex; align-items: flex-start; gap: 13px; background: var(--wh-surface); border: 1px solid var(--wh-line); border-radius: 16px; padding: 17px 19px; font-size: 15.5px; line-height: 1.5; color: var(--wh-ink); } .wh-check { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(var(--brand-blue-rgb), .11); display: grid; place-items: center; } .wh-check svg { width: 13px; height: 13px; stroke: var(--brand-blue); } /* ══════════════════════════════════════════════════════════════ БЛОК 8 — ЭКСПЕРТ ══════════════════════════════════════════════════════════════ */ .wh-expert__grid { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .wh-expert__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } } .wh-expert__media { position: relative; border-radius: var(--wh-radius-lg); background: linear-gradient(160deg, rgba(var(--brand-cyan-rgb), .16), rgba(var(--brand-orange-rgb), .14)); padding: 18px 18px 0; overflow: hidden; max-width: 420px; margin: 0 auto; width: 100%; } /* Фиксируем пропорцию контейнера — картинка не «дёргает» вёрстку при загрузке (CLS), даже если заказчик заменит файл на другой размер. */ .wh-expert__media img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 749; object-fit: contain; object-position: bottom center; } .wh-expert__name { font-size: clamp(24px, 3vw, 36px); margin: 0 0 8px; } .wh-expert__role { font-size: clamp(16px, 1.7vw, 19px); font-weight: 700; color: var(--brand-blue); margin: 0 0 18px; } .wh-expert__text { font-size: 16px; line-height: 1.6; color: var(--wh-ink-soft); margin: 0 0 18px; } .wh-expert__founds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .wh-expert__founds li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--wh-ink); } .wh-expert__founds li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(140deg, var(--brand-orange), var(--brand-red)); } /* ══════════════════════════════════════════════════════════════ БЛОК 9 — БОНУС ══════════════════════════════════════════════════════════════ */ .wh-bonus { background: linear-gradient(150deg, #2B2A29 0%, #3A3550 55%, #24304A 100%); color: var(--brand-white); } .wh-bonus h2 { color: var(--brand-white); } .wh-bonus h3 { color: var(--brand-white); } .wh-bonus .wh-eyebrow { color: var(--brand-white); background: rgba(255, 255, 255, .14); } .wh-bonus__grid { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .wh-bonus__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } .wh-bonus__sub { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .84); margin: 0 0 24px; } .wh-bonus__h3 { font-size: clamp(17px, 1.8vw, 20px); margin: 0 0 14px; } .wh-bonus__phrases { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .wh-bonus__phrases li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 12px 16px; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .93); } .wh-bonus__more { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 0 0 26px; } .wh-bonus__cover { position: relative; margin: 0 auto; width: 100%; max-width: 360px; aspect-ratio: 3 / 4; border-radius: 20px; background: linear-gradient(155deg, #FFFFFF 0%, #FFF1E2 100%); box-shadow: 0 26px 60px rgba(0, 0, 0, .38); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; justify-content: space-between; color: var(--wh-ink); transform: rotate(-2deg); } @media (prefers-reduced-motion: reduce) { .wh-bonus__cover { transform: none; } } .wh-bonus__cover-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-orange-cta); } .wh-bonus__cover-title { font-size: clamp(22px, 3vw, 30px); font-weight: 900; line-height: 1.14; letter-spacing: -.02em; margin: 14px 0 0; } .wh-bonus__cover-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--wh-ink-faint); } .wh-bonus__cover-foot img { width: 26px; height: 26px; } /* Когда заказчик положит готовую обложку — этот заменит рисованную карточку выше (см. HTML-комментарий у .wh-bonus__cover). */ .wh-bonus__cover-img { width: 100%; max-width: 360px; margin: 0 auto; border-radius: 20px; box-shadow: 0 26px 60px rgba(0, 0, 0, .38); } /* ══════════════════════════════════════════════════════════════ БЛОК 10 — КЕЙСЫ ══════════════════════════════════════════════════════════════ */ .wh-cases-grid { display: grid; gap: clamp(16px, 2.4vw, 24px); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .wh-cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wh-case { background: var(--wh-surface); border: 1px solid var(--wh-line); border-radius: var(--wh-radius); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--wh-shadow); display: flex; flex-direction: column; height: 100%; } .wh-case__age { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(var(--brand-blue-rgb), .10); color: var(--brand-blue); border-radius: 999px; padding: 6px 13px; margin-bottom: 14px; } .wh-case h3 { font-size: 19px; margin: 0 0 14px; line-height: 1.3; } .wh-case dl { margin: 0; display: grid; gap: 12px; } .wh-case dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wh-ink-faint); margin-bottom: 3px; } .wh-case dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wh-ink); } /* ══════════════════════════════════════════════════════════════ БЛОК 11 — ФИНАЛЬНЫЙ CTA ══════════════════════════════════════════════════════════════ */ .wh-final { background: linear-gradient(140deg, var(--brand-blue) 0%, #0B4E8A 55%, #123A63 100%); color: var(--brand-white); text-align: center; } .wh-final h2 { color: var(--brand-white); font-size: clamp(26px, 3.8vw, 46px); line-height: 1.16; max-width: 840px; margin: 0 auto 18px; text-wrap: balance; } .wh-final__text { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .88); max-width: 700px; margin: 0 auto clamp(26px, 3.4vw, 36px); } .wh-final .wh-facts { justify-content: center; margin-bottom: 22px; } .wh-final .wh-fact { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); color: var(--brand-white); box-shadow: none; } .wh-final .wh-fact--accent { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); } .wh-final__reminder { margin: 20px auto 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .78); } .wh-final .btn-primary { box-shadow: 0 12px 30px rgba(0, 0, 0, .28); } /* ══════════════════════════════════════════════════════════════ CTA-строка, повторяемая в секциях ══════════════════════════════════════════════════════════════ */ .wh-cta-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(30px, 4vw, 44px); text-align: center; } .wh-cta-row__note { font-size: 13.5px; color: var(--wh-ink-faint); margin: 0; } .wh-statement .wh-cta-row__note, .wh-bonus .wh-cta-row__note { color: rgba(255, 255, 255, .78); } .wh-cta-row--left { align-items: flex-start; text-align: left; } @media (max-width: 560px) { .wh-cta-row .btn, .wh-cta-row--left .btn { width: 100%; } } /* ══════════════════════════════════════════════════════════════ ДОСТУПНОСТЬ: видимый фокус на всех интерактивных элементах страницы, включая ссылки-кнопки поверх цветных подложек. ══════════════════════════════════════════════════════════════ */ .wh-page a:focus-visible, .wh-page button:focus-visible, .wh-page input:focus-visible, .wh-page textarea:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; border-radius: 8px; } .wh-statement a:focus-visible, .wh-statement button:focus-visible, .wh-bonus a:focus-visible, .wh-bonus button:focus-visible, .wh-final a:focus-visible, .wh-final button:focus-visible { outline-color: var(--brand-white); } /* ══════════════════════════════════════════════════════════════ АНИМАЦИИ — только лёгкое появление. Класс .reveal и его выключение при prefers-reduced-motion живут в components.css; здесь лишь задержки для шагов метода. ══════════════════════════════════════════════════════════════ */ .wh-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--wh-i, 0) * 70ms); } .wh-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wh-reveal { opacity: 1; transform: none; transition: none; } .wh-method__step { transition: none; } }