/* ========================================================================== Секция 14 — подвал Размеры сняты линейкой с design/экран 14.png (коэффициент 1.742, вьюпорт 1920): логотип 176x29 колонки навигации левые края 812 / 1164 / 1515 при контенте от 88 → бренд 661, навигация 1021, промежуток 64, между колонками 32 «Разработчик…» строка 16.1, шаг 28.1 → кегль 17 сноска про Meta строка 13.2, шаг 22.4 → кегль 14 почта строка 17.2 → кегль 18 кнопка 260x49, подпись 17.8 → кегль 18, поля 24 заголовок колонки строка 19.5 → кегль 21 ссылка колонки строка 17.8, шаг 41.2 → кегль 19 реквизиты строка 15.5, шаг 33.3 → кегль 17 документы строка 16.7, зазор 31.6 → кегль 18 копирайт строка 14.9 → кегль 15 Тёмная зона. Контраст проверен на --dark-bg (#15111F): --dark-ink (#8B84A8) — 5.3:1, вторичный текст и реквизиты --dark-link (#A99FC6) — 7.5:1, ссылки #fff — 18.6:1, заголовки колонок и телефон Мельче и глуше, чем в макете, не делаем: ниже 4.5:1 текст перестаёт читаться. ========================================================================== */ .footer { /* В tokens.css нет цвета линии для тёмной зоны — держим его здесь одной строкой */ --footer-line: rgba(255, 255, 255, .10); position: relative; /* Было 96 сверху и 32 снизу — тройная разница на ровном месте. Тёмная зона отбивается одинаково с обеих сторон. */ padding-block: var(--s-8); /* Тёмная заливка подвала — единственное исключение из правила «у секций своего фона нет»: это осмысленная зона, а не подложка под текст. Но плоский цвет на всю ширину читается провалом, поэтому здесь тот же приём, что по всему сайту, — перелив вместо заливки. Два еле заметных брендовых пятна: одно над колонками ссылок, второе под реквизитами. Центры вынесены за пределы блока, в кадр попадает только затухающий край — иначе пятно читается засветкой, а подвалу тянуть внимание на себя не положено. Альфа подобрана по контрасту, а не на глаз: уже при .16 фон светлеет до rgb(38,24,65), и --dark-ink на нём даёт 4.6:1 — впритык к норме. Здесь .11 справа (фон rgb(32,22,55), --dark-ink 4.9:1) и .06 слева внизу, над мелкими реквизитами (5.1:1). */ background: radial-gradient(58% 62% at 96% -8%, rgba(124, 59, 246, .11) 0%, transparent 68%), radial-gradient(46% 50% at 0% 108%, rgba(124, 59, 246, .06) 0%, transparent 68%), var(--dark-bg); color: var(--dark-ink); } /* Верхняя кромка тёмной зоны. Без неё светлая страница обрывается в чёрное поле голым срезом — подвал выглядит не концом сайта, а дырой в нём. Приём тот же, что у .card--edge, но цвет обратный: светлая кромка здесь не видна, потому что сверху почти белая страница — она ярче любой линии. Работает только брендовая: фиолетовая нить темнее страницы и светлее подвала, поэтому читается на обеих сторонах среза. К краям гаснет, чтобы не превратиться в рамку. */ .footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(124, 59, 246, .30) 14%, rgba(139, 77, 255, .85) 50%, rgba(124, 59, 246, .30) 86%, transparent 100%); } .footer a { color: var(--dark-link); } /* Кнопка — не текстовая ссылка: цвет ссылок её перебивать не должен, иначе на фиолетовой заливке остаётся сиреневый текст и контраст падает. */ .footer a.btn--primary { color: #fff; } /* Медиазапрос — общее правило сайта, разбор в base.css. */ @media (hover: hover) { .footer a:hover { color: #fff; } .footer a.btn--primary:hover { color: #fff; } } /* ---------- Верх: бренд + три колонки ссылок ---------- Пропорции с макета: колонка бренда 661, навигация 1021 при промежутке 64. Так левые края колонок попадают в макетные 812 / 1164 / 1515. */ .footer__top { display: grid; grid-template-columns: minmax(0, 661fr) minmax(0, 1021fr); gap: var(--s-8); } /* Логотип — значок, а не текст: зона нажатия не меньше 44px. Отрицательные поля гасят прибавку, чтобы блок не разъехался. */ .footer__logo-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; } .footer__logo { width: auto; height: clamp(20px, 1.51vw, 29px); } .footer__about { margin-top: var(--s-3); /* В макете абзац разбит на 3 строки — предел меры подобран под эту разбивку */ max-width: 33em; font-size: var(--fz-small); line-height: var(--lh-body); } /* Сноска набрана тем же цветом, что абзац выше (глушить нельзя: 14px на тёмном и так на пороге), поэтому её отбивает не цвет, а вертикальная черта слева — обычная типографская пометка «это сноска, а не текст». */ .footer__note { margin-top: var(--s-5); max-width: 31em; padding-left: var(--s-4); border-left: 1px solid var(--footer-line); font-size: var(--fz-caption); line-height: var(--lh-body); } .footer__mail { margin-top: var(--s-6); font-size: var(--fz-small); } /* Адрес почты цветом почти не отличался от соседнего текста (--dark-link против --dark-ink) — это читалось как обычная строка, а не как ссылка. Белый плюс подчёркивание. */ .footer__mail a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; /* base.css плавно меняет ссылке только цвет, а по наведению здесь перекрашивается подчёркивание — без этой строки оно подставлялось рывком, тогда как у ссылок в колонках ниже (.footer__links) тот же приём шёл переходом. Один и тот же элемент подвала отзывался двумя разными способами. */ transition: color var(--t-fast), text-decoration-color var(--t-fast); } @media (hover: hover) { .footer__mail a:hover { text-decoration-color: var(--brand-light); } } /* В макете кнопка плоская — фирменное свечение на тёмном фоне только грязнит. Высота и поля теперь как у остальных btn--sm: было 44px и 24px при 48 и 22 у соседей. */ .footer__support { margin-top: var(--s-4); min-height: var(--s-7); font-size: var(--fz-small); text-transform: none; letter-spacing: 0; box-shadow: none; } /* Наведения не было вовсе: ни тени, ни смены фона — кнопка выглядела неживой. Заливку меняем, свечение так и не включаем. Пара разведена: нажатие остаётся на всех устройствах, наведение — только там, где есть указатель (разбор в base.css). */ .footer__support:active { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); box-shadow: none; } @media (hover: hover) { .footer__support:hover { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); box-shadow: none; } } /* ---------- Колонки ссылок ---------- */ .footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } /* Заголовки колонок — единственные на сайте, набранные строчными: все прочие заголовки, бейджи и кнопки идут капсом. Разнобой читается как «блоки из разных систем», поэтому здесь тоже капс с разрядкой. Кегль ниже макетного 21px: у заглавных высота больше, и на 18px строка занимает столько же места, но перестаёт спорить с самими ссылками. */ .footer__col-title { margin-bottom: var(--s-4); font-size: var(--fz-small); font-weight: 700; line-height: 1.2; letter-spacing: var(--ls-caps-sm); text-transform: uppercase; /* Капс не переносится: свод, «Переносы». */ -webkit-hyphens: none; hyphens: none; color: #fff; } .footer__links { display: grid; /* Зазор между зонами нажатия, а не между строками текста. Было ноль: ссылка ростом 45px при видимой строке в 21, и соседние цели стыковались вплотную — замер показывал y=27022 h=45, следующая y=27067. Границы между целями не существовало вовсе, а все двенадцать ссылок внешние и открываются в новой вкладке: промах на два пикселя уносит человека в чужой раздел поверх лендинга. Делим не размер цели (45px остаётся), а соседство. 8px, а не 4: четыре пикселя на глаз всё ещё читаются как «строки подряд», восемь — как отдельные цели. Между центрами соседних целей выходит 53px при требовании 24 (SC 2.5.8, разнесение). */ gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--fz-small); line-height: 1.4; } /* Ссылки колонок были 29px в высоту при норме 44. Разводим их полями, а не зазором списка: так сама зона нажатия остаётся крупной, а зазор выше отвечает только за границу между соседями. */ .footer__links a, .footer__docs a { display: inline-block; padding-block: var(--s-3); } /* Отклик на наведение. Подчёркивание не появляется рывком, а проявляется цветом за 220ms — тем же переходом, что у остальных элементов сайта. Медленно и еле заметно: подвалу отклик нужен, чтобы не выглядеть картинкой, но тянуть внимание на себя он не должен. text-decoration-color, а не фоновая полоска: у ссылок в две строки подчёркиваются обе, а не только последняя. При prefers-reduced-motion переход снимает общее правило в base.css — подчёркивание остаётся, исчезает только его проявление. */ .footer__links a, .footer__docs a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: .28em; /* Навигация переносами не рвётся (свод, «Переносы»: `nav a` в списке исключений). Подписи здесь короткие и стоят в узкой колонке — перенос в «МЕССЕНДЖЕРЫ» или «ИНТЕГРАЦИИ» читался бы как сломанная вёрстка, а не как перенос. */ -webkit-hyphens: none; hyphens: none; transition: color var(--t-fast), text-decoration-color var(--t-fast); } @media (hover: hover) { .footer__links a:hover, .footer__docs a:hover { text-decoration-color: currentColor; } } /* Якорь сноски про Meta. Белым, а не фиолетовым: --brand-light на тёмном фоне даёт 4.1:1, для текста мало. Белый — 18.6:1 и заметен. */ .footer__star { color: #fff; } /* ---------- Разделитель ---------- */ /* Разделитель гаснет к краям, а не упирается в поля контейнера ровным срезом: линия во всю ширину делит подвал на две несвязанные плиты, растушёванная — отбивает низ, оставаясь одним блоком. */ .footer__rule { height: 1px; margin: var(--s-7) 0 var(--s-6); border: 0; background: linear-gradient(90deg, transparent 0%, var(--footer-line) 8%, var(--footer-line) 92%, transparent 100%); } /* ---------- Низ: реквизиты, документы, копирайт ---------- */ /*
по умолчанию курсивный — реквизиты набраны прямым */ .footer__reqs { font-style: normal; } /* Мера. Самый плотный блок страницы: 741 знак на 1000px против медианы 359, и на 768 строка выходила в 77 знаков — выше верхней границы 75 (свод, «Длина строки»). Сквозная --measure задана в ch и на широком экране у́же контейнера, поэтому именно здесь её надо позвать явно: реквизиты лежат в .footer__bottom во всю полосу, ограничивать их некому. */ .footer__req { max-width: var(--measure); font-size: var(--fz-small); line-height: var(--lh-body); } /* Телефон и почта — ссылки, по которым звонят и пишут с телефона, но обе ростом со строку: 24px против нормы 44. Раздвигать сами строки нельзя, реквизиты разъедутся, поэтому в разметке на них висит .tap-safe — он расширяет зону нажатия невидимой областью, не меняя вид. Высота здесь остаётся прежней и задаёт видимый габарит. */ .footer__phone, .footer__mail a { display: inline-flex; align-items: center; min-height: 24px; } /* Телефон обычным начертанием: в реквизитах он такой же факт, как адрес и БИН рядом, и выделять его нечем — по нему не звонят чаще остального. */ .footer__phone { color: #fff; } .footer__docs { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--fz-small); } .footer__copy { margin-top: var(--s-4); font-size: var(--fz-caption); } /* ---------- Адаптив ---------- */ /* ---------- Порядок блоков подвала на узком экране ---------- Замер до правки (375): первое, что читает человек, долиставший до подвала, — «Разработчик (правообладатель): ООО „ИИ Платформа“ осуществляет деятельность по разработке и предоставлению доступа к ПО „NextBot“» (106px) и следом сноска про Meta (90px). Двести пикселей юридической справки стоят ВЫШЕ почты, кнопки поддержки и всей навигации. На десктопе этого не видно: там колонка бренда стоит слева, а ссылки справа, и глаз берёт их одновременно. В одну колонку «слева» становится «сначала», и порядок разметки, безупречный для двухколоночной сетки, выдаёт справку вперёд контактов. Правка чисто раскладочная: .footer__brand объявляется display: contents, его дети становятся прямыми элементами сетки подвала, и порядок задаётся свойством order. Разметку не трогаем — значит, десктоп (от 901px) не может поехать в принципе: там правило не действует, а DOM тот же. Порядок: логотип → почта → кнопка поддержки → навигация → справка о правообладателе → сноска. Отбивки переезжают с gap контейнера на сами блоки: gap один на всех, а расстояния тут разные — внутри группы «как связаться» 32 и 16, между группами 48. Сноска про Meta остаётся текстом на странице и никуда не сворачивается: свод (раздел «Формы и заявки») требует реквизиты и правовые пометки текстом, а не картинкой и не за нажатием. Меняется только очередь. */ @media (max-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1fr); gap: 0; } .footer__brand { display: contents; } /* justify-self обязателен обоим: в блоке они были inline-flex и жались по содержимому, а элемент сетки по умолчанию растягивается на всю полосу — логотип получил бы зону нажатия во всю ширину экрана, кнопка поддержки растянулась бы на 327px вместо своих 260. */ .footer__logo-link { order: 1; justify-self: start; } .footer__mail { order: 2; margin-top: var(--s-6); } .footer__support { order: 3; justify-self: start; margin-top: var(--s-4); } .footer__nav { order: 4; margin-top: var(--s-7); } .footer__about { order: 5; margin-top: var(--s-6); } .footer__note { order: 6; margin-top: var(--s-5); } /* Ссылка занимает всю ширину своей колонки, а не ширину слова. Замер (375): «Блог» — цель 35×45, «Кейсы» 51×45, «Тарифы» 58×45. По высоте всё в порядке (padding-block 12 сверху и снизу), по ширине короткие подписи давали 35px — WCAG 2.5.8 (AA, 24×24) проходит, но пальцем в слово из четырёх букв целятся, а не попадают. display: block растит только зону: подчёркивание остаётся под текстом, фона у ссылки нет, вид строки не меняется — цель становится 152×45 в колонке навигации и 327×45 в списке документов. От 901px не трогаем: там принятый десктоп и указатель точнее пальца. */ .footer__links a, .footer__docs a { display: block; } /* Полоса документов в одну строку не помещается и переносится как придётся: на 768 выходило «одна ссылка — две ссылки — одна». Столбиком ровнее, и зоны нажатия перестают стоять впритык по горизонтали. Зазор --s-2, а не ноль. Ноль здесь — та же беда, что была в колонках навигации выше: у ссылок зона нажатия 45px при видимой строке в 21, соседние зоны стыковались вплотную, и границы между целями не существовало. Замер до правки: три пары подряд с зазором ровно 0px («Согласие…» / «Политика…» / «Публичная оферта» / «Яндекс Метрика»), и все четыре ссылки внешние, с target="_blank", — промах уносит человека в чужой PDF поверх лендинга. Делится не размер цели, а соседство, ровно как в .footer__links. */ .footer__docs { flex-direction: column; gap: var(--s-2); } } /* ---------- Навигация подвала на телефоне: два столбца ---------- Было: ниже 420px три группы ссылок вставали строго друг под другом — десктопные три колонки просто схлопывались в стопку. Это давало 778px одной навигации на 375 при подвале в 1794 (2,2 экрана), причём ширины хватало на два столбца с запасом: полоса 327px, столбец 152. Стало: два столбца от самого узкого экрана. Раскладка не «две колонки и что останется», а осмысленная: «Интеграции» (5 ссылок) занимает левый столбец целиком, «Решения» (3) и «Компания» (4) встают друг под другом в правом. Так обе колонки почти равной высоты (291 против 455 против прежних 291+185+238 в столбик), и подвал теряет 323px. Горизонтальный зазор 24, а не 32: на 320 полоса всего 288px, и каждые восемь пикселей зазора — это восемь пикселей, отнятых у обеих подписей. Вертикальный остаётся 32: с 24 заголовок группы стоял от чужого списка ровно на столько же, на сколько от своего, и группы переставали читаться группами.
вместо колонок здесь сознательно не ставится: выбор между двумя колонками и сворачиваемыми группами — за заказчиком (docs/design-review.md). Колонки — вариант без интерактива и без риска, поэтому он и стоит по умолчанию. */ @media (max-width: 700px) { .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } .footer__col:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .footer__col:nth-child(2) { grid-column: 2; grid-row: 1; } .footer__col:nth-child(3) { grid-column: 2; grid-row: 2; } } /* ---------- Поля тёмной зоны на телефоне ---------- Подвал держит --s-8 (64) сверху и снизу и ещё 48/32 вокруг разделителя — это размеры, снятые с макета 1920. На 375 они дают 176px чистого фона в блоке, который целиком состоит из мелкого текста и ссылок: последние два экрана страницы человек листает через пустоту. Ступень вниз по шкале у обоих: поля 64 → 48, отбивки разделителя 32 → 24. Разделитель по-прежнему отделяет сильнее, чем зазор внутри групп (16), — пропорция сохранена, ужат масштаб. Порог 767 — «телефон» из tokens.css. Планшет и десктоп остаются с макетными значениями. */ @media (max-width: 767px) { .footer { padding-block: var(--s-7); } .footer__rule { margin: var(--s-6) 0 var(--s-5); } } /* Телефон боком (852×393 и 932×430): 767 туда не попадает по ширине, а высота там вдвое меньше портретной — макетные 64/48/32 отъедают почти полэкрана на пустой фон. Те же ступени, что и на телефоне. */ @media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) { .footer { padding-block: var(--s-7); } .footer__rule { margin: var(--s-6) 0 var(--s-5); } }