/* site-chrome.css — общая «обвязка» публичных страниц на Liquid Glass: * финальная CTA-панель и подвал. * * История файла: раньше здесь жили плоские .site-header/.site-footer/.cta-band * Библиотеки — единственного раздела, который не был переведён на стекло. После * перевода Библиотеки (index + статьи) плоской обвязки не осталось: шапку даёт * .lp-nav из pages/landing-glass.css, а подвал и финальную панель — этот файл. * * Подключают: index.html (лендинг) и library/*.html. Грузится ПОСЛЕ * landing-glass.css (примитивы) и ПЕРЕД landing.css/library.css, чтобы * страница могла донастроить обвязку под себя. * * Всё заскоплено на `.lp` — класс на обеих страниц. */ /* ═══════════════════════════════════════════════════════════════════════════ ФИНАЛЬНАЯ CTA Крупная стеклянная панель с брендовым свечением — последний экран страницы. ═══════════════════════════════════════════════════════════════════════════ */ .lp-final { position: relative; max-width: 900px; margin-inline: auto; padding: clamp(var(--space-10), 6vw, var(--space-20)) clamp(var(--space-6), 5vw, var(--space-16)); text-align: center; border-radius: var(--lp-r-xl); box-shadow: var(--glass-shadow), 0 0 80px color-mix(in srgb, var(--lp-accent) 22%, transparent); } .lp-final__sub { max-width: 46ch; margin: var(--space-4) auto 0; font-size: var(--lp-lead); color: var(--lp-ink-2); } .lp-final__cta { margin-top: var(--space-8); display: flex; justify-content: center; } /* `.lp ` — подъём специфичности над `.lp p` (landing-glass.css §7). Библиотека ставит тот же класс на , поэтому правило действует на обеих страницах. */ .lp .lp-final__note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--lp-ink-3); } /* ═══════════════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .lp-footer { margin-top: var(--lp-section); padding-block: var(--space-12) var(--space-10); border-top: 1px solid var(--glass-hairline); } .lp-footer__top { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: var(--space-10); margin-bottom: var(--space-12); } .lp-footer__brand { display: inline-flex; align-items: center; /* gap нельзя: части слова «Фокусн»/«ИИ»/«к» — отдельные flex-элементы. */ gap: 0; font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--text-xl); color: var(--lp-ink); } .lp-footer__brand span:not(.lp-footer__mark) { color: var(--lp-accent); } /* 40px, а не 34: внутрь плейсхолдера landing.js вставляет FN.mascot с классом .mascot--sm, а он объявлен в components/mascot.css как 40×40. Контейнер был меньше содержимого — фигура вылезала на 6px и съедала половину отступа до слова «ФокуснИИк». Размеры обязаны совпадать. */ .lp-footer__mark { width: 40px; height: 40px; margin-right: var(--space-3); flex-shrink: 0; line-height: 0; } /* `.lp ` — подъём специфичности над `.lp p`, см. выше. */ .lp .lp-footer__tagline { margin-top: var(--space-4); max-width: 34ch; font-size: var(--text-sm); color: var(--lp-ink-3); } /* h3, а не h4: подвал идёт сразу за секцией уровня h2, и h4 давал скачок уровня (WCAG 1.3.1 — порядок заголовков). Вид не изменился: размер, вес и трекинг заданы здесь явно и перекрывают дефолт h3 из typography.css. */ .lp-footer__col h3 { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-ink-3); } /* Тап-таргеты подвала. Было: строка 26.4px при шаге 38.4px (высота + gap 12) — ниже нормы проекта 44px, которая в шапке и в мобильном меню соблюдена. Хит-зону добираем вертикальным padding у самой ссылки, а gap уменьшаем на ту же величину: визуальная плотность списка не меняется, промахнуться становится труднее. Аудитория с импульсивной моторикой мажет чаще, а именно здесь лежат оферта и политика. */ .lp-footer__col ul { display: flex; flex-direction: column; gap: var(--space-1); } .lp-footer__col a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--lp-ink-2); transition: color var(--transition-fast); } .lp-footer__col a:hover { color: var(--lp-ink); } .lp-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--glass-hairline); font-size: var(--text-sm); color: var(--lp-ink-3); } /* Ниже яруса планшета (--bp-md): бренд занимает всю строку, колонки ссылок встают парой под ним. */ @media (max-width: 767px) { .lp-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .lp-footer__brand-col { grid-column: 1 / -1; } }