... (секции .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. КЛИЕНТСКАЯ СТЕНА. Единый размер карточек (84px) и выравнивание текста строго по центру (по вертикали и горизонтали). ------------------------------------------------------------------ */ .client-wall { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: 1fr !important; gap: 12px !important; } .client-cell { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: 84px !important; height: 100% !important; padding: 14px 12px !important; font-weight: 800 !important; font-size: 14px !important; line-height: 1.35 !important; letter-spacing: .04em !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; box-sizing: border-box !important; } @media (max-width: 1100px) { .client-wall { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 860px) { .client-wall { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .client-cell { min-height: 76px !important; font-size: 13px !important; } } /* ------------------------------------------------------------------ 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)) !important; gap: 10px !important; } .client-cell { min-height: 68px !important; padding: 10px 8px !important; font-size: 12px !important; } /* Герой: длинный бейдж не распадается на число и хвост */ .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; } /* ------------------------------------------------------------------ 18. СТРАНИЦА /prc — роли и пакеты. Скрытая страница (noindex), ссылок на неё с основных страниц нет. ------------------------------------------------------------------ */ .role-card { justify-content: flex-start; } .role-card h3 { margin-top: 16px; } .role-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .role-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); } .role-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); } .role-list b { color: var(--ink); font-weight: 700; } /* Пакеты: 4 основных + 2 доп опции */ .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; } .price-card { position: relative; padding: 32px 28px; display: flex; flex-direction: column; } .price-card .price-name { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .price-val { font-size: clamp(30px, 2.6vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 2px; } .price-val span { color: var(--acc); } .price-card .price-sub { font-size: 13px; color: var(--muted); } .price-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .price-roles span { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 100px; border: 1px solid var(--brd); color: var(--muted); background: var(--input-bg); } .price-card.featured { border-color: var(--acc-brd-hov); box-shadow: 0 0 0 1px var(--acc-glow), 0 24px 60px rgba(0,0,0,.25); } .price-flag { position: absolute; top: -13px; left: 28px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; background: var(--btn-bg); color: var(--btn-ink); } .price-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .addon-tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); } /* Обязательные пометки под прайсом */ .price-notes { margin-top: 44px; padding: 30px 32px; } .price-notes ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .price-notes li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .price-notes li b { color: var(--ink); font-weight: 700; } .price-notes li::before { content: "!"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--badge-bg); color: var(--badge-ink); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } @media (max-width: 1024px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .price-grid, .price-addons { grid-template-columns: minmax(0, 1fr); } .price-card { padding: 28px 22px; } } /* === prc: бенто ролей без пустых клеток === */ .bento-roles { grid-auto-flow: dense; } .role-card.b6 .role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } @media (max-width: 1100px) { .bento .role-card.b2, .bento .role-card.b3 { grid-column: span 2; } .bento .role-card.b4, .bento .role-card.b6 { grid-column: span 4; } } @media (max-width: 860px) { .bento .role-card.b4, .bento .role-card.b3, .bento .role-card.b6 { grid-column: span 2; } .bento .role-card.b2 { grid-column: span 1; } } @media (max-width: 640px) { .role-card.b6 .role-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .bento .role-card.b2, .bento .role-card.b3, .bento .role-card.b4, .bento .role-card.b6 { grid-column: span 1; } }