... (секции .section уже имеют position: relative) ------------------------------------------------------------------ */ .orb-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .orb-field::before, .orb-field::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(150px); } .orb-field::before { background: #CCFF00; opacity: .12; top: -140px; left: -120px; } .orb-field::after { background: #0077FF; opacity: .10; bottom: -160px; right: -120px; } .section > .wrap, .section > .cta, .section > div { position: relative; z-index: 1; } /* ------------------------------------------------------------------ 10. NDA. Цвет тега - по палитре (inline-стиль убрать в HTML, см. правку №3 в инструкции). ------------------------------------------------------------------ */ .nda-note .chip { color: #999999 !important; border-color: rgba(255,255,255,.2) !important; } /* ------------------------------------------------------------------ 11. ФОТО. Быстрая цветовая правка мерч-пакшотов (белые подложки убираются заменой фото, см. правку №5 в инструкции). ------------------------------------------------------------------ */ .case-imgs img, .zone-photos img, .arch-card img { filter: brightness(.92) contrast(1.02) saturate(.95); } /* ------------------------------------------------------------------ 12. ГЕОГРАФИЯ. Левое выравнивание (центр - только цифры и обложки). ------------------------------------------------------------------ */ .geo-bento-cell { text-align: left; } .geo-list { justify-content: flex-start; } /* ------------------------------------------------------------------ 13. КЛИЕНТСКАЯ СТЕНА. Воздух вместо плотной таблицы. ------------------------------------------------------------------ */ .client-wall { gap: 12px; } .client-cell { border: 1px solid rgba(255,255,255,.08); border-radius: 16px; } /* ------------------------------------------------------------------ 14. МОБИЛЬНАЯ ВЕРСИЯ (<=480px). Проверено на 390px. ------------------------------------------------------------------ */ @media (max-width: 480px) { /* Таскбар: EN и все пункты доступны - лента со скрытым скроллом, а не обрезанный край */ .taskbar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .taskbar::-webkit-scrollbar { display: none; } .tb-link { padding: 10px 8px; font-size: 11px; white-space: nowrap; flex: 0 0 auto; } /* Куки-баннер: компактный, кнопка не на всю ширину, не заливает контент и CTA */ .cookies { padding: 14px 16px; gap: 10px; font-size: 12.5px; max-height: 40vh; overflow-y: auto; } .cookies .btn { width: auto; padding: 10px 22px; } /* Клиентская стена: 2 колонки вместо 3 - стена не съедает 3 экрана */ .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .client-cell { padding: 12px 10px; font-size: 12.5px; } /* Герой: длинный бейдж не распадается на число и хвост */ .badge { font-size: 10.5px; line-height: 1.3; } /* Тень таскбара на маленьких экранах слабее - не сливает контент */ .taskbar { box-shadow: 0 12px 34px rgba(0,0,0,.45); } } /* ------------------------------------------------------------------ 15. КНОПКИ. Межстрочный интервал 1, иначе uppercase-текст визуально "всплывает" вверх пилюли (наследовался line-height 1.6). ------------------------------------------------------------------ */ .btn, .tb-link { line-height: 1; } .btn, .tb-link, .cookies .btn { justify-content: center; text-align: center; } /* Десктоп: нижний отступ страницы, чтобы контент не слипался с нижним fixed-таскбаром (на мобильных отступ уже есть, 78px) */ @media (min-width: 861px) { body { padding-bottom: 110px; } } /* ------------------------------------------------------------------ 17. ТАСКБАР. Пункты не сжимаются (flex-shrink по умолчанию ужимал кнопку "Обсудить проект" меньше текста: overflow-wrap:break-word из style.css разрешал "аварийный" перенос, текст с nowrap-ом выпирал, и надпись визуально уходила вправо/влево от центра). white-space:nowrap у пунктов и так запрещает перенос, поэтому overflow-wrap здесь не нужен. Мобильные медиа задают свои правила (лента с flex: 0 0 auto) - им это не мешает. ------------------------------------------------------------------ */ .tb-link { flex: 0 0 auto; overflow-wrap: normal; }