/* Shared styles for // service landing pages (scripts/build-services.mjs). Same visual language as the homepage (Directions/Process/Work/Footer/Nav): ink + bone + signal, Unbounded / Manrope / Instrument Serif / JetBrains Mono, soft signal-colored background blooms, bordered gradient cards, a stage-by-stage guide. Вся интерактивность — нативная: FAQ, «Подробнее» и карточки «что входит» на
, ховеры на CSS. Единственный скрипт, /services/_service.js, включает эффект «в фокусе один этап» в гайде: он ставит класс на и считает позицию скролла. Скролл при этом не перехватывается, а без скрипта (и при «уменьшить движение») гайд остаётся обычным списком и читается целиком — см. блок ГАЙД ниже. Цвет услуги едет одной инлайновой переменной на
. Используется РОВНО В ДВУХ местах — точки в панели фактов и полоска сверху карточки. Всё остальное (надзаголовки, стрелки, маркеры, FAQ) остаётся фирменным жёлтым: иначе страница перестаёт читаться как AGENCY 21 и выглядит как сайт другого бренда. Не расширяйте область применения. with the brand signal color as fallback, so nothing else needs inline styles. */ :root { --ink: #0A0A0A; --bone: #F5F1E8; --signal: #FFB020; --signal-400: #FFC44D; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--bone); font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } ul, ol { list-style: none; } ::selection { background: var(--signal); color: var(--ink); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px) { .wrap { padding: 0 16px; } } .mono { font-family: 'JetBrains Mono', monospace; } /* Text measure — applied to prose blocks, never to the whole page. */ .measure { max-width: 68ch; } /* ============================== HEADER ============================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 10, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(245, 241, 232, .08); } .site-header .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 58px; } @media (min-width: 768px) { .site-header .row { height: 76px; } } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bone); flex-shrink: 0; min-width: 0; } .brand img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } @media (min-width: 768px) { .brand img { width: 40px; height: 40px; } } .brand .name { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; } .brand .name em { font-style: normal; color: var(--signal); } @media (max-width: 480px) { .brand .name { display: none; } } .main-nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; } .main-nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: rgba(245, 241, 232, .68); transition: color .2s; white-space: nowrap; } .main-nav a:hover { color: var(--signal); } .main-nav a[aria-current="page"] { color: var(--bone); } .header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-actions .phone { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: -0.01em; color: rgba(245, 241, 232, .85); text-decoration: none; white-space: nowrap; transition: color .2s; } .header-actions .phone:hover { color: var(--signal); } /* Шапка на планшетах. Узбекские подписи («LOYIHANI MUHOKAMA QILISH», «BIZ HAQIMIZDA») заметно длиннее русских, и настоящим Unbounded строка шапки переставала помещаться — страница ехала вбок уже на 1024 и ниже. Поэтому телефон уходит раньше, меню ужимается, а до 900px убирается совсем (полная навигация остаётся в футере). */ @media (max-width: 1160px) { .header-actions .phone { display: none; } .main-nav { gap: 0; } .main-nav a { padding: 8px 9px; font-size: 10.5px; letter-spacing: .02em; } } @media (max-width: 900px) { .main-nav { display: none; } } .btn-header { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--signal); color: var(--ink); text-decoration: none; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s; } .btn-header:hover { background: var(--signal-400); } @media (min-width: 768px) { .btn-header { height: 42px; padding: 0 22px; font-size: 12px; } } /* ============================== LAYOUT / GLOW ============================== */ .page { position: relative; } .bg-glow { position: absolute; pointer-events: none; filter: blur(60px); border-radius: 50%; background: radial-gradient(circle, var(--signal) 0%, transparent 62%); } .bg-glow--hero { top: -180px; left: -140px; width: 520px; height: 520px; opacity: .1; } .bg-glow--lower { top: 8%; right: -180px; width: 480px; height: 480px; opacity: .08; } /* ============================== BREADCRUMBS ============================== */ .crumbs { display: flex; gap: 8px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(245, 241, 232, .5); margin-bottom: 28px; } .crumbs a { color: rgba(245, 241, 232, .5); text-decoration: none; transition: color .2s; } .crumbs a:hover { color: var(--signal); } .crumbs .now { color: var(--bone); } /* ============================== EYEBROW / HEADINGS ============================== */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 241, 232, .6); margin-bottom: 16px; } .eyebrow .slash { color: rgba(245, 241, 232, .35); } .eyebrow .num { color: var(--signal); } .eyebrow--hero { color: var(--signal); font-size: 13px; } .h1 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(2.1rem, 4.3vw, 3.7rem); line-height: .98; letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: break-word; margin-bottom: 22px; } .h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.04; letter-spacing: -0.035em; text-transform: uppercase; overflow-wrap: break-word; } .lead { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; color: rgba(245, 241, 232, .82); } /* ============================== HERO ============================== */ .hero { position: relative; overflow: hidden; padding: 48px 0 64px; } @media (min-width: 768px) { .hero { padding: 76px 0 88px; } } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; } } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 28px; border-radius: 999px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .2s; } .btn--primary { background: var(--signal); color: var(--ink); } .btn--primary:hover { background: var(--signal-400); } .btn--outline { border: 1px solid rgba(245, 241, 232, .22); color: rgba(245, 241, 232, .9); } .btn--outline:hover { border-color: var(--signal); color: var(--signal); } .fact-panel { border: 1px solid rgba(245, 241, 232, .1); border-radius: 20px; padding: 28px 26px; background: linear-gradient(160deg, rgba(245, 241, 232, .06), rgba(245, 241, 232, .015)); } .fact-panel__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 241, 232, .5); margin-bottom: 18px; } .fact-panel__list { display: flex; flex-direction: column; gap: 14px; } .fact-panel__list li { display: flex; align-items: flex-start; gap: 12px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.3; color: var(--bone); padding-bottom: 14px; border-bottom: 1px solid rgba(245, 241, 232, .07); } .fact-panel__list li:last-child { border-bottom: none; padding-bottom: 0; } .fact-panel__dot { flex-shrink: 0; margin-top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--signal)); } /* ============================== SECTIONS ============================== */ .section { position: relative; overflow: hidden; border-top: 1px solid rgba(245, 241, 232, .08); padding: 56px 0; } @media (min-width: 768px) { .section { padding: 80px 0; } } .section__head { margin-bottom: 34px; max-width: 62ch; } @media (min-width: 768px) { .section__head { margin-bottom: 44px; } } /* ============================== CARDS (incl + related) ============================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .card { position: relative; overflow: hidden; padding: 24px; border-radius: 16px; border: 1px solid rgba(245, 241, 232, .08); background: linear-gradient(to bottom, rgba(245, 241, 232, .05), rgba(245, 241, 232, .012)); transition: transform .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-4px); border-color: rgba(245, 241, 232, .2); } .card__stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, var(--signal)); } .card__title { display: block; font-family: 'Unbounded', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1rem; line-height: 1.25; color: var(--bone); margin: 8px 0 10px; } .card__desc { font-size: .92rem; line-height: 1.55; color: rgba(245, 241, 232, .7); } .card--link { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; } .card--link .card__title { margin: 8px 0 0; } .card__arrow { flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 16px; color: var(--signal); transition: transform .25s ease; } .card--link:hover .card__arrow { transform: translateX(4px); } /* Карточка «что входит» — теперь
. На первом плане остался только ярлык, фраза-описание открывается по клику: пять описаний подряд читались как ещё одно полотно текста, из-за которого клиент и написал «много текста». Из HTML описание никуда не делось — оно просто свёрнуто. */ .card--incl { padding: 0; } .card--incl > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 22px 22px 22px; } .card--incl > summary::-webkit-details-marker { display: none; } .card--incl > summary::marker { content: ''; } /* «Плюс» рисуем псевдоэлементом, чтобы в остался ровно один заголовок: h3 нужен структуре страницы, лишние span её ломают. */ .card--incl > summary::after { content: '+'; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 16px; line-height: 1; color: var(--signal); transition: transform .25s ease; } .card--incl[open] > summary::after { transform: rotate(45deg); } .card--incl .card__title { margin: 0; } .card--incl .card__desc { padding: 0 22px 22px; } /* Сеткой теперь управляет
  • : карточка-details тянется на всю высоту ряда, иначе соседи разной высоты расходятся. */ .card-grid > li { display: grid; } /* Свёрнутый хвост длинного абзаца (лид героя, заметка о цене). Тот же контрол, что и «Подробнее» у этапа, — вид один на всю страницу. */ .inline-more { margin-top: 14px; } .inline-more__text { margin-top: 12px; max-width: 62ch; color: rgba(245, 241, 232, .7); font-size: .95rem; line-height: 1.7; } /* ============================== ГАЙД «КАК ЭТО БУДЕТ» ============================== Страницы услуг были плоским полотном текста: клиент не понимал, что и в каком порядке будет происходить. Вместо этого — пять этапов одного каркаса (с чем приходят → что делаем → что получаете → сроки и бюджет → что дальше). На первом плане у этапа только номер, роль, заголовок в одну строку и одна фраза; весь длинный текст лежит рядом, в закрытом
    — со страницы он ушёл визуально, но не из HTML и не из индекса. ВАЖНО: всё, что ниже до блока «Эффект», — это базовый вид БЕЗ JS. Здесь нет ни одного правила, которое что-то прячет: без скриптов страница читается целиком. */ .stages { display: block; max-width: 1020px; } .stage { position: relative; padding: 26px 0 30px; min-height: 30vh; border-top: 1px solid rgba(245, 241, 232, .1); } @media (min-width: 768px) { .stage { padding: 38px 0 44px; min-height: 38vh; } .stage__inner { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 36px; align-content: start; } } /* Засечка этапа на разделительной линии. Без JS видна у всех этапов — так гайд читается как список шагов; с JS её зажигает только активный. */ .stage::before { content: ''; position: absolute; left: 0; top: -1px; width: 54px; height: 2px; background: var(--signal); opacity: .32; transition: opacity .45s ease; } .stage__aside { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } @media (min-width: 768px) { .stage__aside { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 0; } } .stage__num { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 4vw, 3rem); line-height: .9; letter-spacing: -0.04em; color: rgba(245, 241, 232, .3); transition: color .45s ease; } .stage__role { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: rgba(245, 241, 232, .5); transition: color .45s ease; } .stage__body { min-width: 0; } .stage__title { font-family: 'Unbounded', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 2.2vw, 1.7rem); line-height: 1.1; letter-spacing: -0.03em; overflow-wrap: break-word; } .stage__line { margin-top: 12px; max-width: 48ch; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.6; color: rgba(245, 241, 232, .74); } /* «Подробнее» — сюда переехал длинный текст с первого плана. Закрыт по умолчанию, но лежит в HTML: поиску видно, клиента не грузит. */ .stage__more { margin-top: 18px; } .stage__more > summary, .inline-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 241, 232, .55); transition: color .25s ease; } .stage__more > summary::-webkit-details-marker, .inline-more > summary::-webkit-details-marker { display: none; } .stage__more > summary::marker, .inline-more > summary::marker { content: ''; } .stage__more > summary:hover, .inline-more > summary:hover { color: var(--signal); } .stage__marker { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245, 241, 232, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: var(--signal); transition: transform .25s ease, border-color .25s ease; } .stage__marker::before { content: '+'; } .stage__more[open] .stage__marker, .inline-more[open] .stage__marker { transform: rotate(45deg); border-color: var(--signal); } .deep { margin-top: 18px; max-width: 64ch; border-left: 1px solid rgba(245, 241, 232, .12); padding-left: 18px; } .deep__h { font-family: 'Unbounded', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: .92rem; line-height: 1.3; margin: 22px 0 8px; overflow-wrap: break-word; } .deep > .deep__h:first-child { margin-top: 0; } .deep__p { color: rgba(245, 241, 232, .7); font-size: .95rem; line-height: 1.7; margin-bottom: 4px; } .deep-steps { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; } .deep-steps__item { display: flex; gap: 14px; align-items: flex-start; } .deep-steps__num { flex-shrink: 0; padding-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--signal); } .deep-steps .deep__h { margin: 0 0 4px; font-size: .88rem; } /* ── Эффект «в фокусе один этап» ──────────────────────────────────── Клиент смотрел прошлую версию и сказал прямо: соседние этапы не должны быть видны вообще. Поэтому теперь секция — это ДОРОЖКА высотой в несколько экранов, внутри которой залипает один экран, а этапы сменяют друг друга кросс-фейдом. Тот же приём, что и на главной, чтобы страницы ощущались как один сайт. Эффект живёт на пересечении двух условий, и оба обязательны: · класс .has-stagefx на — его ставит /services/_service.js; · @media (prefers-reduced-motion: no-preference). Значит, без JS и при «уменьшить движение» ни одно правило ниже не применяется: дорожки нет, залипания нет, этапы идут обычным списком и читаются целиком. Отменять эффект обратно через !important не нужно — он просто не включается. Скролл не перехватывается: колесо и тачпад работают штатно, JS только считает, какой этап попал в текущее окно прокрутки. */ /* Секция гайда НЕ должна клипать содержимое: position: sticky перестаёт работать, если у любого предка overflow отличается от visible. Свечение поэтому переехало в собственный клипающий слой — горизонтальной прокрутки оно по-прежнему не даёт. */ .section--guide { overflow: visible; } .glow-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* В обычной секции свечение стоит на 8% высоты; дорожка высотой в пять экранов увела бы его далеко вниз, поэтому здесь оно прижато к началу. */ .section--guide .bg-glow--lower { top: 2vh; } /* Шаг прокрутки на один этап — 65vh на телефоне, 80vh на десктопе. */ .stages-track { --stage-step: 65vh; } @media (min-width: 768px) { .stages-track { --stage-step: 80vh; } } /* Индикатор прогресса нужен, только когда этапы показываются по одному: в обычном списке видны все пять и считать нечего. */ .stages-progress { display: none; } .stages-progress__count b { font-weight: 500; color: var(--signal); } .stages-progress__bars { display: flex; gap: 6px; flex: 1 1 auto; max-width: 220px; } .stages-progress__bars i { flex: 1 1 auto; height: 2px; background: rgba(245, 241, 232, .16); transition: background-color .4s ease; } .stages-progress__bars i.is-on { background: var(--signal); } @media (prefers-reduced-motion: no-preference) { .has-stagefx .stages-track { /* 100vh — сам залипший экран, остальное — путь прокрутки: ровно один шаг на этап. После последнего шага дорожка кончается и секция отпускает страницу дальше. --stage-count проставляет сборщик по числу этапов, чтобы в CSS не было магической пятёрки. */ height: calc(100vh + var(--stage-step) * var(--stage-count, 5)); } .has-stagefx .stages-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; /* Шапка сайта тоже липкая — верхний отступ держит заголовок секции из-под неё, поэтому top: 0 не прячет первую строку. */ padding: 78px 0 28px; } /* Заголовок и прогресс видны всё время, поэтому отступ под ними меньше обычного секционного: место нужно самому этапу. */ .has-stagefx .stages-sticky .section__head { margin-bottom: 18px; } .has-stagefx .stages-progress { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .12em; color: rgba(245, 241, 232, .45); } /* Слой этапов занимает остаток залипшего экрана, сами этапы лежат друг на друге — видно всегда ровно один. */ .has-stagefx .stages { position: relative; flex: 1 1 auto; min-height: 0; } .has-stagefx .stage { position: absolute; inset: 0; border-top-color: transparent; /* Этап стоит по центру свободной высоты — иначе под ним оставалась пустая половина экрана. Центрируется ОБЁРТКА, она же и прокручивается: если центрировать сам скроллящийся блок, при переполнении его верх становится недоступен (ловушка align-items: center + overflow). */ display: flex; align-items: center; overflow: hidden; /* Скрытый этап убран и с клавиатуры, и из дерева доступности: visibility: hidden выносит его из табуляции, aria-hidden и inert ставит скрипт. */ opacity: 0; visibility: hidden; transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; } .has-stagefx .stage__inner { width: 100%; /* Раскрытое «Подробнее» выше экрана прокручивается здесь, а не обрезается. Цепочку прокрутки НЕ обрываем: дочитав до низа, человек тем же движением уезжает к следующему этапу. */ max-height: 100%; overflow-y: auto; } /* Направление сдвига берём из позиции этапа в списке, а не из направления скролла: вперёд следующий приходит снизу, назад — предыдущий сверху. */ .has-stagefx .stage.is-after { transform: translateY(18px); } .has-stagefx .stage.is-before { transform: translateY(-18px); } .has-stagefx .stage.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .4s ease, visibility 0s; } /* Засечка на разделительной линии — деталь списка; в режиме «по одному» её работу делает индикатор прогресса. */ .has-stagefx .stage::before { display: none; } .has-stagefx .stage__role { color: rgba(245, 241, 232, .78); } /* Один этап на экране может быть крупнее строки списка — иначе посреди пустого экрана висит мелкий заголовок. Верхняя граница clamp подобрана под Unbounded в верхнем регистре: он заметно шире привычных шрифтов, и на большем кегле длинные слова переставали помещаться в колонку. */ .has-stagefx .stage__num { color: var(--signal); font-size: clamp(1.9rem, 4.6vw, 3.4rem); } .has-stagefx .stage__title { font-size: clamp(1.35rem, 3.2vw, 2.5rem); } .has-stagefx .stage__line { margin-top: 16px; font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 42ch; } } @media (prefers-reduced-motion: no-preference) and (min-width: 768px) { .has-stagefx .stages-sticky { padding: 100px 0 36px; } } /* ============================== PRICE ============================== */ .price-note { color: rgba(245, 241, 232, .8); line-height: 1.65; margin-bottom: 26px; } /* ============================== FAQ ============================== */ .faq-item { border-top: 1px solid rgba(245, 241, 232, .08); padding: 20px 0; } .faq-item:first-child { border-top: none; padding-top: 0; } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: 'Unbounded', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: .98rem; line-height: 1.3; color: var(--bone); } @media (min-width: 640px) { .faq-item summary { font-size: 1.05rem; } } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ''; } .faq-item summary .faq-marker { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(245, 241, 232, .2); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 16px; line-height: 1; color: var(--signal); transition: transform .25s ease, border-color .25s ease; } .faq-item summary .faq-marker::before { content: '+'; } .faq-item[open] summary .faq-marker { transform: rotate(45deg); border-color: var(--signal); } .faq-item .faq-answer { margin-top: 14px; color: rgba(245, 241, 232, .75); line-height: 1.7; } /* ============================== FOOTER ============================== */ .site-footer { position: relative; border-top: 1px solid rgba(245, 241, 232, .08); background: var(--ink); margin-top: 24px; padding: 52px 0 26px; } .footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } @media (min-width: 860px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; } } .footer-brand { grid-column: span 2; } @media (min-width: 860px) { .footer-brand { grid-column: auto; } } .footer-brand a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bone); } .footer-brand img { width: 36px; height: 36px; object-fit: contain; } .footer-brand .name { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; } .footer-brand .name em { font-style: normal; color: var(--signal); } .footer-tagline { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(245, 241, 232, .55); max-width: 30ch; } .footer-heading { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 241, 232, .45); margin-bottom: 16px; } .footer-list { display: flex; flex-direction: column; gap: 10px; } .footer-list a { font-size: 13px; color: rgba(245, 241, 232, .7); text-decoration: none; transition: color .2s; } .footer-list a:hover { color: var(--signal); } .footer-contacts .phone { display: block; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; color: var(--bone); text-decoration: none; margin-bottom: 12px; transition: color .2s; } .footer-contacts .phone:hover { color: var(--signal); } .footer-contacts .footer-list { margin-bottom: 12px; } .footer-address { font-style: normal; font-size: 13px; line-height: 1.5; color: rgba(245, 241, 232, .55); } .footer-maplink { display: inline-block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); text-decoration: none; transition: transform .2s ease; } .footer-maplink:hover { transform: translateX(3px); } .footer-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(245, 241, 232, .08); display: flex; flex-direction: column; gap: 8px; } @media (min-width: 640px) { .footer-legal { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } } .footer-legal p { font-size: 12px; line-height: 1.5; color: rgba(245, 241, 232, .45); margin: 0; } /* Подзаголовок секции. Класс использовался в разметке блока работ, но правила для него не было — абзац прилипал к H2 вплотную. */ .section__lede { margin-top: 12px; color: rgba(245, 241, 232, .6); font-size: 15px; line-height: 1.6; } /* ============================== ВИТРИНА РАБОТ ============================== Страницы услуг были полностью текстовыми и рядом с главной выглядели голо. Здесь стоят настоящие работы агентства — постеры роликов из /reels/, вертикаль 9:16. Стокового фото с интернета тут нет и быть не должно: лицензия на коммерческом сайте и собственные работы, которые продают сильнее. Подборка под каждую услугу задаётся в scripts/build-services.mjs. */ .work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } .work { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(245, 241, 232, .09); background: #0f0f10; aspect-ratio: 9 / 16; } .work__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .work:hover .work__img { transform: scale(1.04); } /* Плотная заливка снизу: подпись ложится поверх кадра и без неё теряется. */ .work::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.55) 55%, transparent 100%); pointer-events: none; } .work__name { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 241, 232, .88); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; } .work-links a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); text-decoration: none; } .work-links a:hover { text-decoration: underline; text-underline-offset: 4px; }