/* ============================================================
BINDUS·DIGITAL — портфолио
Светлая «бумага», акцент — красный маркер корректора
============================================================ */
/* ---------- Шрифты ----------
Свои файлы вместо fonts.googleapis.com: у внешнего сервиса браузер сначала
тянет CSS с одного домена, потом сам шрифт с другого — два лишних соединения
и рендер стоит всё это время. Оба шрифта переменные, лежат рядом с сайтом
и предзагружаются из . Golos Text — текст и интерфейс, Piazzolla —
только крупные заголовки и курсивные пометки. unicode-range оставлен:
кириллица, латиница и знак ₽ (latin-ext) качаются независимо, и браузер
не возьмёт файл, символы которого на странице не встретились.
Manrope и Unbounded из /fonts/ не удалять: ими пользуются демо-лендинги. */
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/golos-cyrillic.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/golos-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/golos-latin-ext.woff2) format("woff2");
/* Ради знака ₽ (U+20BD): в кириллический срез Google его не кладёт */
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/piazzolla-cyrillic.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/piazzolla-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Piazzolla";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/piazzolla-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Piazzolla";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/piazzolla-italic-cyrillic.woff2) format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Piazzolla";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/piazzolla-italic-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Piazzolla";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url(/fonts/piazzolla-italic-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* «Швейцарский» белый: нейтральный лист без кремового подтона
(Иван 12.09.2026). Раньше был тёплый #fbfaf6 — бумага; теперь чистый
#fafafa, полосы и карточки — тот же серый без оттенка. */
--bg: #fafafa;
--bg-2: #f2f2f2;
--card: #ffffff;
--card-2: #f6f6f6;
--line: rgba(20, 20, 20, 0.12);
--line-2: rgba(20, 20, 20, 0.28);
--txt: #161616;
--muted: #5f5f5f;
--ac-1: #cd3a20;
--ac-2: #a72e18;
--grad: linear-gradient(120deg, #d94e2f, #a72e18);
--ok: #2e7d4f;
--font: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-display: "Piazzolla", Georgia, "Times New Roman", serif;
/* Системный моно для служебных подписей: номера секций, индексы строк.
Своего файла не заводим — на этих кеглях любой системный моно неотличим,
а лишний шрифт стоил бы соединения и байтов на каждой странице. */
--mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, monospace;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--r: 16px;
--shadow: 0 20px 44px -22px rgba(20, 20, 20, 0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--txt);
line-height: 1.65;
font-size: 16px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.container {
width: min(1160px, 100% - 40px);
margin-inline: auto;
}
.container--narrow { width: min(860px, 100% - 40px); }
::selection { background: rgba(205, 58, 32, 0.22); }
/* ---------- Клавиатурная навигация ---------- */
/* :focus-visible, а не :focus — рамка появляется при Tab и не мешает мыши */
:focus-visible {
outline: 2px solid var(--ac-2);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible, .filter:focus-visible, .fab:focus-visible { outline-offset: 4px; }
/* ссылка «к содержимому» — первая по Tab, видна только при фокусе */
.skip {
position: fixed;
top: 12px; left: 50%;
transform: translate(-50%, -200%);
z-index: 300;
padding: 12px 22px;
border-radius: 999px;
background: var(--grad);
color: #fdfcf9;
font-weight: 800; font-size: 14px;
transition: transform 0.2s ease;
}
.skip:focus { transform: translate(-50%, 0); }
/* ---------- Типографика ---------- */
h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(26px, 4vw, 42px);
letter-spacing: 0;
}
.grad {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Акцентное слово в заголовке — курсивная антиква: жест «Красной ручки».
em внутри заголовка, а не отдельный класс: без стилей текст остаётся
просто выделенным словом. */
h1 em.grad, h2 em.grad { font-style: italic; font-weight: 600; }
/* Подчёркивание маркером: полоса-градиент под текстом, а не text-decoration —
линия ложится за буквы, как след маркера, и не режет нижние выносные. */
u.stroke {
text-decoration: none;
background-image: linear-gradient(104deg, transparent 0.5%, rgba(205, 58, 32, 0.42) 2%, rgba(205, 58, 32, 0.42) 98%, transparent 99%);
background-size: 100% 0.32em;
background-repeat: no-repeat;
background-position: 0 90%;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ac-2);
margin-bottom: 14px;
}
/* Градиентная риска перед надрубрикой: взгляд цепляется за начало блока,
а фирменный градиент повторяется там, где до этого был только цвет. */
.eyebrow::before {
content: "";
width: 20px; height: 2px;
flex-shrink: 0;
border-radius: 2px;
background: var(--grad);
}
/* Номер секции перед надрубрикой: у длинной страницы появляется оглавление —
видно, что секций конечное число и где ты сейчас. order: -1 ставит номер
раньше градиентной риски (::before — тоже флекс-элемент с order: 0). */
.eyebrow__no {
order: -1;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--txt);
opacity: 0.8;
}
.section {
/* Было 72–120px: на главной из десяти секций одни просветы набирали
полтора экрана, и страница читалась полотном. Ужато на ~15%. */
padding: clamp(60px, 7.5vw, 104px) 0;
position: relative;
}
.section--tint { background: var(--bg-2); border-block: 1px solid var(--line); }
/* Стыки затонированных секций. Обычная линия делит страницу на прямоугольники;
градиент, гаснущий к краям, делает ту же работу, но читается как свет,
а не как разлиновка. Лежит поверх штатной рамки, поэтому убирать её не надо. */
.section--tint::before,
.section--tint::after,
.toolbelt::before,
.toolbelt::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(205, 58, 32, 0.32), rgba(167, 46, 24, 0.32), transparent);
}
.section--tint::before, .toolbelt::before { top: -1px; }
.section--tint::after, .toolbelt::after { bottom: -1px; }
.section__head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section__sub { color: var(--muted); margin-top: 16px; font-size: 17px; }
/* ---------- Кнопки ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 30px;
border-radius: 10px;
font-weight: 700;
font-size: 15px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
/* inset-блик по верхней кромке: одна строка в box-shadow, никакого лишнего
слоя — но кнопка перестаёт выглядеть плоской заливкой. */
/* Ховер — чернильная заливка: тёмная волна накатывает по диагонали.
Никаких псевдоэлементов поверх текста: весь градиент — одна картинка
втрое шире кнопки, где слева чернила, справа — штатный красный,
а ховер только сдвигает background-position. Кнопка при этом не прыгает:
прежний translateY(-2px) убран сознательно — движение теперь в заливке. */
.btn--primary {
background-image: linear-gradient(110deg, #7c1e0f 0%, #8c2312 52%, #b93a20 63%, #d94e2f 68%, #a72e18 100%);
background-size: 300% 100%;
background-position: 100% 0;
color: #fdfcf9;
box-shadow: 0 10px 26px -12px rgba(205, 58, 32, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition: background-position 0.45s var(--ease), box-shadow 0.25s ease, transform 0.2s ease;
}
.btn--primary:hover {
background-position: 0 0;
box-shadow: 0 14px 30px -12px rgba(167, 46, 24, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn--ghost {
position: relative;
border: 1px solid var(--line-2);
color: var(--txt);
background: transparent;
}
/* Ховер второй кнопки — след маркера, прорисовывающийся под текстом слева
направо: тот же жест, что под заголовком hero (u.stroke). Полоса
полупрозрачная, поэтому ей можно лежать поверх нижних выносных букв —
читается как маркер по написанному. Ширина привязана к кнопке, а не к
тексту, поэтому у широких btn--block ограничена: маркер во всю кнопку
выглядел бы полосой загрузки. */
.btn--ghost::after {
content: "";
position: absolute;
left: 50%; bottom: 9px;
width: calc(100% - 52px);
max-width: 230px;
height: 0.34em;
background: linear-gradient(104deg, transparent 0.5%, rgba(205, 58, 32, 0.42) 2%, rgba(205, 58, 32, 0.42) 98%, transparent 99%);
transform: translateX(-50%) scaleX(0);
transform-origin: left center;
transition: transform 0.35s var(--ease);
pointer-events: none;
}
.btn--ghost:hover { border-color: var(--ac-1); }
.btn--ghost:hover::after, .btn--ghost:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.btn--sm.btn--ghost::after { bottom: 7px; width: calc(100% - 36px); }
.btn--sm { padding: 11px 22px; font-size: 14px; }
.btn--block { width: 100%; }
/* ---------- Шапка ---------- */
.hdr {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
border-bottom: 1px solid transparent;
}
.hdr.scrolled {
background: rgba(251, 250, 246, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--line);
}
.hdr__in {
display: flex;
align-items: center;
gap: 28px;
height: 74px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
/* Знак тот же файл, что стоит в . Браузер качает его под
вкладку в любом случае, поэтому здесь он достаётся из кеша и не добавляет
ни одного запроса — а логотип в шапке и иконка на вкладке гарантированно
не разъезжаются. Пересобрать: node tools/build-icons.js */
.logo__mark {
width: 24px; height: 24px;
flex-shrink: 0;
border-radius: 7px;
/* Адрес обязан совпадать с до последнего знака, включая
метку ?v=2: иначе браузер считает это другим файлом и качает знак дважды. */
background: url("/favicon.svg?v=2") center / contain no-repeat;
box-shadow: 0 6px 14px -6px rgba(205, 58, 32, 0.5);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.logo:hover .logo__mark {
transform: rotate(-6deg) scale(1.06);
box-shadow: 0 8px 18px -6px rgba(167, 46, 24, 0.55);
}
.logo__text { letter-spacing: 0.06em; font-size: 15px; }
.logo__dot { color: var(--ac-2); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
font-size: 14.5px; font-weight: 600; color: var(--muted);
transition: color 0.2s ease;
}
.nav a:hover { color: var(--txt); }
/* Подчёркивание, растущее слева направо, вместо простой смены цвета.
В мобильном меню ссылки лежат колонкой со своими рамками — там линия лишняя. */
.nav a { position: relative; }
.nav a::after {
content: "";
position: absolute;
left: 0; bottom: -3px;
width: 100%; height: 1.5px;
border-radius: 1px;
background: var(--grad);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 860px) { .nav a::after { content: none; } }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span {
width: 22px; height: 2px; background: var(--txt); border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero {
position: relative;
padding: clamp(140px, 18vw, 200px) 0 clamp(60px, 7vw, 90px);
overflow: hidden;
}
/* Свечение за первым экраном. Раньше здесь был filter: blur(90px) — на слабых
телефонах это самый дорогой пиксель на странице, а рисуется он ровно там, где
браузер меряет LCP. Размытие убрано, мягкость набрана самим градиентом:
картинка та же, работы для GPU почти нет. */
.hero__orb {
position: absolute;
border-radius: 50%;
opacity: 0.5;
pointer-events: none;
}
.hero__orb--1 {
width: 660px; height: 660px;
background: radial-gradient(circle closest-side, rgba(205, 58, 32, 0.12), rgba(205, 58, 32, 0.05) 48%, transparent 88%);
top: -230px; right: -170px;
}
.hero__orb--2 {
width: 580px; height: 580px;
background: radial-gradient(circle closest-side, rgba(167, 46, 24, 0.09), rgba(167, 46, 24, 0.04) 48%, transparent 88%);
bottom: -260px; left: -200px;
}
.hero__content { max-width: 760px; position: relative; }
.chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 16px;
border: 1px solid var(--line-2);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
background: rgba(27, 26, 23, 0.03);
margin-bottom: 26px;
}
.chip__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 rgba(46, 125, 79, 0.6);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(46, 125, 79, 0.55); }
70% { box-shadow: 0 0 0 9px rgba(46, 125, 79, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 125, 79, 0); }
}
/* Табличка «Открыто» — статус «беру заказы» на месте прежнего чипа в hero.
Как на двери мастерской: гвоздик, две верёвочки, лёгкое покачивание.
Верёвочки повёрнуты вокруг своей верхней точки — она совпадает с гвоздём,
поэтому геометрия сходится при любой ширине таблички. Качание — transform
на крошечном слое, перекрасов нет. Подпись про месяц проставляет main.js,
без него остаётся нейтральное «беру новые проекты» из разметки. */
.doorsign {
position: relative;
display: inline-block;
padding-top: 26px;
margin-bottom: 26px;
}
.doorsign__nail {
position: absolute;
left: 50%; top: 0;
width: 6px; height: 6px;
margin-left: -3px;
border-radius: 50%;
background: var(--line-2);
}
.doorsign__sign {
position: relative;
display: block;
padding: 10px 22px 9px;
background: var(--card);
border: 1.5px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 12px 26px -16px rgba(40, 28, 18, 0.35);
text-align: center;
transform-origin: 50% -24px; /* ось качания — гвоздик */
animation: doorsign-swing 3.4s ease-in-out infinite alternate;
}
.doorsign__sign::before, .doorsign__sign::after {
content: "";
position: absolute;
left: 50%; top: -24px;
width: 1.5px; height: 27px;
background: var(--line-2);
transform-origin: top center;
}
.doorsign__sign::before { transform: rotate(24deg); }
.doorsign__sign::after { transform: rotate(-24deg); }
.doorsign__open {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 19px;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
color: var(--ac-2);
}
.doorsign__sub {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
margin-top: 1px;
}
@keyframes doorsign-swing {
from { transform: rotate(-2deg); }
to { transform: rotate(2deg); }
}
.hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(30px, 5.6vw, 58px);
letter-spacing: 0;
margin-bottom: 24px;
}
.hero__sub {
font-size: clamp(16px, 2vw, 19px);
color: var(--muted);
max-width: 620px;
margin-bottom: 34px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: clamp(48px, 6vw, 72px);
}
.stat {
position: relative;
border: 1px solid var(--line);
background: linear-gradient(160deg, #ffffff, #faf8f2);
border-radius: var(--r);
padding: 22px 20px;
}
/* Светящаяся риска по верхней кромке — четыре цифры первого экрана
перестают читаться как таблица и становятся набором карточек. */
.stat::before {
content: "";
position: absolute;
top: -1px; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(205, 58, 32, 0.55), rgba(167, 46, 24, 0.4), transparent);
}
.stat__num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20px, 2.6vw, 28px);
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 6px;
white-space: nowrap;
/* цифры набегают от нуля (main.js) — моноширинные знаки, чтобы «57» и «90»
не дёргали ширину карточки во время счёта */
font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
/* ---------- Инструменты ---------- */
.toolbelt {
position: relative;
border-block: 1px solid var(--line);
padding: 18px 0;
background: var(--bg-2);
}
.toolbelt__in {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 12px;
}
.toolbelt__in span {
font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--muted); white-space: nowrap;
padding: 7px 14px;
border: 1px solid var(--line);
border-radius: 999px;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.toolbelt__in span:hover {
color: var(--txt);
border-color: rgba(205, 58, 32, 0.45);
background: rgba(205, 58, 32, 0.08);
}
/* ---------- Карточки услуг ---------- */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
background: linear-gradient(165deg, var(--card), var(--bg-2));
border-radius: var(--r);
padding: 26px 24px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-5px);
border-color: rgba(205, 58, 32, 0.45);
/* Вторая тень — не размытие, а цветной ореол: карточка на ховере
подсвечивается фирменным, а не просто уезжает вверх. */
box-shadow: var(--shadow), 0 18px 44px -26px rgba(205, 58, 32, 0.4);
}
.card__top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
}
.card__icon {
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 13px;
background: linear-gradient(150deg, rgba(205, 58, 32, 0.22), rgba(167, 46, 24, 0.09));
border: 1px solid rgba(205, 58, 32, 0.25);
color: var(--ac-2);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover .card__icon {
border-color: rgba(167, 46, 24, 0.45);
box-shadow: 0 0 0 4px rgba(205, 58, 32, 0.08);
}
.card__icon svg { width: 24px; height: 24px; }
.tag {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px;
border: 1px solid rgba(205, 58, 32, 0.4);
color: #b8371f;
}
.tag--cyan { border-color: rgba(167, 46, 24, 0.4); color: #a72e18; }
.tag--violet { border-color: rgba(46, 125, 79, 0.4); color: #2e7d4f; }
.card h3 { font-size: 19px; margin-bottom: 14px; }
.card__list { flex: 1; display: grid; gap: 8px; margin-bottom: 20px; }
.card__list li {
position: relative;
padding-left: 20px;
font-size: 14px;
color: var(--muted);
}
.card__list li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 8px; height: 8px;
border-radius: 3px;
background: var(--grad);
opacity: 0.85;
}
.card__price {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding-top: 16px;
border-top: 1px solid var(--line);
margin-bottom: 14px;
}
.card__price b { font-size: 20px; font-weight: 800; }
.card__price span { font-size: 13px; color: var(--muted); }
.card__links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.card__link {
font-weight: 700; font-size: 14.5px; color: var(--ac-2);
transition: gap 0.2s ease, color 0.2s ease;
}
.card__link:hover { color: #8c2712; }
.card__link--soft { color: var(--muted); font-weight: 600; }
.card__link--soft:hover { color: var(--txt); }
.card__lead { font-size: 14px; color: var(--muted); margin-top: 12px; }
/* ---------- Индекс услуг (главная) ----------
Девять направлений одной таблицей вместо сетки карточек с буллетами:
строка = номер, название, одна фраза, цена. Секция стала втрое ниже,
а состав работ и так расписан на страницах услуг. Ховер — заливка
слева направо: это transform, а не перекраска, перфу не стоит ничего. */
.svc { border-top: 1px solid var(--line-2); }
.svc__row {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 44px minmax(0, 0.95fr) minmax(0, 1.55fr) auto 22px;
gap: 6px 26px;
align-items: center;
padding: 18px 10px;
border-bottom: 1px solid var(--line);
}
.svc__row::before {
content: "";
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(205, 58, 32, 0.13), rgba(167, 46, 24, 0.05) 70%, transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s var(--ease);
}
.svc__row:hover::before, .svc__row:focus-visible::before { transform: scaleX(1); }
.svc__no {
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.svc__row h3 {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 17px;
}
.svc__tag {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
padding: 3px 10px;
border: 1px solid rgba(167, 46, 24, 0.4);
border-radius: 999px;
color: #a72e18;
white-space: nowrap;
}
.svc__note { font-size: 14px; color: var(--muted); line-height: 1.55; }
.svc__price { display: grid; gap: 1px; justify-items: end; text-align: right; white-space: nowrap; }
.svc__price b { font-size: 15.5px; font-weight: 800; }
.svc__price span { font-size: 12.5px; color: var(--muted); }
.svc__arrow {
color: var(--ac-2);
font-weight: 700;
transition: transform 0.25s var(--ease);
}
.svc__row:hover .svc__arrow { transform: translateX(5px); }
.svc__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; flex-wrap: wrap;
margin-top: 28px;
}
.svc__all { font-weight: 700; font-size: 15px; color: var(--ac-2); }
.svc__all:hover { color: #8c2712; }
@media (max-width: 1060px) {
/* Фраза уходит второй строкой под название, стрелка не нужна */
.svc__row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 16px; }
.svc__row h3 { grid-row: 1; grid-column: 2; }
.svc__price { grid-row: 1; grid-column: 3; }
.svc__note { grid-column: 2 / -1; }
.svc__arrow { display: none; }
}
@media (max-width: 640px) {
.svc__row { grid-template-columns: 34px minmax(0, 1fr); padding: 16px 4px; }
.svc__price { grid-row: 3; grid-column: 2; justify-items: start; text-align: left; margin-top: 4px; white-space: normal; }
}
/* ---------- Пакеты ---------- */
.packs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: stretch;
}
.pack {
position: relative;
display: flex; flex-direction: column;
border: 1px solid var(--line);
background: var(--card);
border-radius: 22px;
padding: 30px 26px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pack:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pack--featured {
border: 1px solid transparent;
background:
linear-gradient(var(--card-2), var(--card-2)) padding-box,
var(--grad) border-box;
box-shadow: 0 26px 60px -32px rgba(205, 58, 32, 0.32);
}
.pack__badge {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--grad); color: #fdfcf9;
font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.pack__name {
font-family: var(--font-display);
font-weight: 600; font-size: 24px;
margin-bottom: 8px;
}
.pack__for { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; min-height: 44px; }
.pack__list { flex: 1; display: grid; gap: 10px; margin-bottom: 24px; }
.pack__list li {
position: relative; padding-left: 26px; font-size: 14.5px;
}
.pack__list li::before {
content: "✓";
position: absolute; left: 0; top: 0;
color: var(--ok); font-weight: 800;
}
.pack__price { margin-bottom: 20px; }
.pack__price b { display: block; font-size: 26px; font-weight: 800; }
.pack__price span { font-size: 13px; color: var(--muted); }
/* ---------- Калькулятор сметы ---------- */
.calc {
margin-top: clamp(28px, 4vw, 44px);
border: 1px solid var(--line);
background: linear-gradient(165deg, var(--card), var(--bg-2));
border-radius: 22px;
overflow: hidden;
}
.calc__head {
padding: 28px clamp(20px, 3vw, 32px) 22px;
border-bottom: 1px solid var(--line);
}
.calc__head h3 { font-size: 21px; margin-bottom: 8px; }
.calc__head p { color: var(--muted); font-size: 14.5px; max-width: 62ch; }
/* ступени скидки за пакет */
.calc__tiers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.calc__tiers li {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: #ffffff;
font-size: 13px;
}
.calc__tiers b { font-weight: 600; }
.calc__tiers span {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.calc__tiers-note { margin-top: 12px; font-size: 12.5px; }
.calc__body {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 0;
}
.calc__opts {
display: grid;
gap: 26px;
padding: 26px clamp(20px, 3vw, 32px);
border-right: 1px solid var(--line);
}
.calc__group { border: 0; display: grid; gap: 8px; }
.calc__label {
padding: 0;
font-size: 12px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ac-2);
margin-bottom: 4px;
}
.opt {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 13px;
background: #ffffff;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.opt:hover { border-color: var(--line-2); background: #ffffff; }
.opt input {
flex: 0 0 auto;
width: 18px; height: 18px;
accent-color: var(--ac-1);
cursor: pointer;
}
.opt b { display: block; font-size: 14.5px; font-weight: 700; }
.opt i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.opt:has(input:checked) {
border-color: rgba(205, 58, 32, 0.55);
background: rgba(205, 58, 32, 0.08);
}
.calc__out {
padding: 26px clamp(20px, 3vw, 32px);
display: flex;
flex-direction: column;
gap: 14px;
}
.calc__sum, .calc__term {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.calc__sum span, .calc__term span { color: var(--muted); font-size: 13.5px; }
.calc__sum b {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(21px, 2.6vw, 27px);
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
}
.calc__sum--month b { font-size: 19px; }
.calc__sum[hidden] { display: none; }
/* строка скидки и подсказка «до следующей ступени» */
.calc__disc {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-top: -6px;
font-size: 13.5px;
color: var(--ok);
}
.calc__disc[hidden] { display: none; }
.calc__disc i {
font-style: normal;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: rgba(46, 125, 79, 0.14);
}
.calc__disc b { font-weight: 700; white-space: nowrap; }
.calc__nudge {
margin-top: -6px;
font-size: 12.5px;
color: var(--muted);
}
.calc__nudge[hidden] { display: none; }
.calc__term {
padding-top: 12px;
border-top: 1px solid var(--line);
}
.calc__term b { font-size: 15px; white-space: nowrap; }
.calc__list {
flex: 1;
display: grid;
gap: 7px;
align-content: start;
padding-top: 12px;
border-top: 1px solid var(--line);
min-height: 96px;
}
.calc__list li {
position: relative;
padding-left: 20px;
font-size: 13.5px;
color: var(--muted);
}
.calc__list li::before {
content: "";
position: absolute; left: 0; top: 7px;
width: 7px; height: 7px; border-radius: 2px;
background: var(--grad);
}
.calc__empty::before { display: none; }
.calc__empty { padding-left: 0 !important; opacity: 0.6; }
.calc__note { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
.calc__body { grid-template-columns: 1fr; }
.calc__opts { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* ---------- Работы ---------- */
.section__head--wide { max-width: 760px; }
.filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: transparent;
color: var(--muted);
font-size: 14px;
font-weight: 600;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.filter span {
font-size: 12px;
font-weight: 700;
padding: 1px 8px;
border-radius: 999px;
background: rgba(27, 26, 23, 0.06);
color: var(--muted);
}
.filter:hover { color: var(--txt); border-color: var(--ac-1); }
.filter.is-active {
background: var(--grad);
border-color: transparent;
color: #fdfcf9;
}
.filter.is-active span { background: rgba(6, 8, 16, 0.22); color: #fdfcf9; }
.works {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.work.is-hidden { display: none; }
.work {
display: block;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
background: var(--card);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.work:hover {
transform: translateY(-6px);
border-color: rgba(167, 46, 24, 0.45);
box-shadow: var(--shadow);
}
.work__shot { position: relative; background: #0a0d16; }
.work__bar {
display: flex; gap: 6px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.03);
}
.work__bar i {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
}
.work__bar i:first-child { background: rgba(255, 99, 99, 0.6); }
.work__bar i:nth-child(2) { background: rgba(255, 200, 90, 0.6); }
.work__bar i:nth-child(3) { background: rgba(90, 220, 130, 0.6); }
.work__frame {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--card-2);
}
/* скелетон, пока сайт в iframe не загрузился */
.work__frame::before {
content: "";
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(100deg,
rgba(27, 26, 23, 0) 20%,
rgba(27, 26, 23, 0.05) 45%,
rgba(27, 26, 23, 0) 70%)
var(--card-2);
background-size: 220% 100%;
animation: shimmer 1.6s linear infinite;
transition: opacity 0.4s ease;
}
.work__frame.is-loaded::before { opacity: 0; animation: none; }
@keyframes shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
.work__frame iframe {
width: 1280px;
height: 800px;
border: 0;
transform-origin: 0 0;
/* масштаб выставляет js/main.js под ширину карточки */
transform: scale(0.28);
pointer-events: none;
background: #fff;
opacity: 0;
transition: opacity 0.45s ease;
}
.work__frame.is-loaded iframe { opacity: 1; }
.work__frame::after {
content: "Открыть сайт ↗";
position: absolute; inset: 0;
z-index: 2; /* поверх скелетона */
display: grid; place-items: center;
background: rgba(251, 250, 246, 0);
color: transparent;
font-weight: 800; font-size: 15px;
letter-spacing: 0.04em;
transition: background 0.25s ease, color 0.25s ease;
}
.work:hover .work__frame::after {
background: rgba(251, 250, 246, 0.8);
color: var(--txt);
}
.work__meta { padding: 20px 22px 24px; }
.work__meta h3 { font-size: 18px; letter-spacing: 0.04em; margin-bottom: 6px; }
.work__meta p { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.work__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.work__tags span {
font-size: 12px; font-weight: 600;
padding: 4px 11px; border-radius: 999px;
border: 1px solid var(--line-2);
color: var(--muted);
}
/* Домен живого проекта на /raboty/: отличает настоящий сайт клиента
от демо-работы, где компания вымышленная. */
.work__tags .work__dom {
border-color: rgba(167, 46, 24, 0.4);
color: var(--ac-2);
}
/* Полосы фонов на главной чередуются: услуги — пакеты — работы — ниши — кейсы —
процесс — обо мне — FAQ — контакты. Меняете порядок секций — проверьте, что
section--tint по-прежнему через одну, иначе два тёмных блока сольются. */
/* ---------- Кейсы ---------- */
/* Кейсы и находки лежат в аккордеонах на стилях FAQ (.cases__acc, .findings__acc):
двенадцать текстовых карточек разом читались как полотно. */
/* Главная цифра кейса — то, что читают, даже если не читают остальное */
.case__stat {
padding: 14px 18px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(205, 58, 32, 0.07);
margin-bottom: 18px;
}
.case__stat b {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(18px, 2.2vw, 22px);
line-height: 1.3;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.case__stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.case__list { display: grid; gap: 10px; margin-bottom: 18px; align-content: start; }
.case__list li {
position: relative;
padding-left: 20px;
font-size: 14px;
color: var(--muted);
}
.case__list li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 8px; height: 8px;
border-radius: 3px;
background: var(--grad);
opacity: 0.85;
}
.case__result {
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: 14.5px;
}
.case__result b { color: var(--ac-2); }
/* Отзыв под кейсом. Появляется, только когда в tools/pages-uslugi.js заполнено
поле `отзыв` у КЕЙСА: до письменного согласия клиента блока на странице нет. */
.quote {
max-width: 720px;
margin: 22px 0 0;
padding: 20px 22px 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(167, 46, 24, 0.05);
}
.quote blockquote {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: var(--txt);
quotes: "«" "»";
}
.quote blockquote::before { content: open-quote; }
.quote blockquote::after { content: close-quote; }
.quote figcaption { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.quote figcaption b { display: block; color: var(--txt); font-weight: 700; font-size: 14.5px; }
/* Типовые находки из разборов карточек: аккордеон на стилях FAQ,
чтобы после шести кейсов секция не превращалась в полотно текста */
.findings { margin-top: 54px; }
.findings__head { max-width: 760px; margin-bottom: 22px; }
/* h2 — когда блок стоит отдельной секцией на /kejsy/, h3 — когда внутри
секции «Кейсы» на главной. Размер один и тот же, разница только в уровне. */
.findings__head h3, .findings__head h2 { font-size: clamp(19px, 2.4vw, 24px); margin-bottom: 10px; }
.findings__head p { color: var(--muted); font-size: 14.5px; }
.finding__sphere {
display: block;
font-style: normal;
font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.finding__fix { margin-top: 10px; }
.finding__fix b { color: var(--ac-2); }
/* Плашка под кейсами: связка с акцией из верхнего промо-баннера */
.cases__cta {
position: relative;
margin-top: 26px;
display: flex; align-items: center; justify-content: space-between;
gap: 18px 40px; flex-wrap: wrap;
border: 1px solid rgba(167, 46, 24, 0.35);
background: linear-gradient(165deg, var(--card), var(--bg-2));
border-radius: var(--r);
padding: 26px 28px;
}
.cases__cta::after {
content: "";
position: absolute; inset: 0;
border-radius: var(--r);
pointer-events: none;
background: radial-gradient(520px 200px at 12% 0%, rgba(167, 46, 24, 0.12), transparent 70%);
}
.cases__cta h3 { font-size: 19px; margin-bottom: 6px; }
.cases__cta p { color: var(--muted); font-size: 14.5px; max-width: 600px; }
.cases__cta .btn { position: relative; z-index: 1; }
/* ---------- Процесс ---------- */
.steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
counter-reset: step;
}
.step {
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--r);
padding: 24px 20px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.step:hover { transform: translateY(-4px); border-color: rgba(205, 58, 32, 0.4); }
.step__num {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; margin-bottom: 10px; }
.step p { font-size: 13.5px; color: var(--muted); }
/* ---------- Условия работы ---------- */
.terms {
margin-top: clamp(30px, 4vw, 48px);
border: 1px solid var(--line);
background: linear-gradient(165deg, var(--card), var(--bg-2));
border-radius: 22px;
padding: clamp(26px, 3.5vw, 36px);
}
.terms__head { max-width: 640px; margin-bottom: 26px; }
.terms__head h3 { font-size: 21px; margin-bottom: 8px; }
.terms__head p { color: var(--muted); font-size: 14.5px; }
.terms__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px 28px;
}
.terms__list li {
position: relative;
padding-left: 32px;
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
.terms__list li::before {
content: "✓";
position: absolute; left: 0; top: 1px;
width: 22px; height: 22px;
display: grid; place-items: center;
border-radius: 8px;
background: rgba(46, 125, 79, 0.14);
color: var(--ok);
font-size: 12px; font-weight: 800;
}
.terms__list b {
display: block;
color: var(--txt);
font-size: 15.5px;
margin-bottom: 5px;
}
@media (max-width: 1060px) { .terms__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .terms__list { grid-template-columns: 1fr; } }
/* ---------- Обо мне ---------- */
.about {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: clamp(28px, 5vw, 64px);
align-items: start;
}
.about__text h2 { margin-bottom: 22px; }
.about__text p { color: var(--muted); margin-bottom: 16px; max-width: 560px; }
.about__points { display: grid; gap: 12px; margin-top: 26px; }
.about__points li {
position: relative; padding-left: 30px; font-weight: 600; font-size: 15px;
}
.about__points li::before {
content: "✓";
position: absolute; left: 0; top: -1px;
width: 20px; height: 20px;
display: grid; place-items: center;
border-radius: 7px;
background: rgba(46, 125, 79, 0.14);
color: var(--ok);
font-size: 12px; font-weight: 800;
}
.about__card {
border: 1px solid var(--line);
background: linear-gradient(165deg, var(--card-2), var(--bg-2));
border-radius: 22px;
padding: 30px 26px;
text-align: center;
position: sticky;
top: 100px;
}
.about__ava {
width: 92px; height: 92px;
margin: 0 auto 18px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--grad);
color: #fdfcf9;
font-family: var(--font-display);
font-size: 38px; font-weight: 700;
box-shadow: 0 14px 30px -12px rgba(205, 58, 32, 0.4);
}
.about__name { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.about__role { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }
.about__tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.about__tools span {
font-size: 12px; font-weight: 600;
padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--line-2);
color: var(--muted);
}
/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
border: 1px solid var(--line);
background: var(--card);
border-radius: 16px;
overflow: hidden;
transition: border-color 0.25s ease;
}
.faq details[open] { border-color: rgba(205, 58, 32, 0.45); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 22px;
font-weight: 700; font-size: 16px;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon {
flex: 0 0 auto;
width: 26px; height: 26px;
position: relative;
border-radius: 9px;
border: 1px solid var(--line-2);
transition: transform 0.25s ease, background 0.25s ease;
}
.faq__icon::before, .faq__icon::after {
content: "";
position: absolute; top: 50%; left: 50%;
width: 10px; height: 2px;
background: var(--ac-2);
transform: translate(-50%, -50%);
transition: transform 0.25s ease;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details[open] .faq__icon { background: rgba(205, 58, 32, 0.14); }
.faq__body { padding: 0 22px 20px; }
.faq__body p { color: var(--muted); font-size: 15px; }
/* ---------- Контакты ---------- */
.contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 60px);
align-items: start;
}
.contact__text h2 { margin-bottom: 4px; }
.contact__links { display: grid; gap: 12px; margin-top: 28px; }
.clink {
display: flex; align-items: center; gap: 15px;
border: 1px solid var(--line);
background: var(--card);
border-radius: 16px;
padding: 15px 18px;
transition: transform 0.2s ease, border-color 0.2s ease;
text-align: left;
width: 100%;
}
.clink:hover { transform: translateX(4px); border-color: rgba(167, 46, 24, 0.5); }
.clink__icon {
flex: 0 0 auto;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 13px;
background: rgba(167, 46, 24, 0.1);
color: var(--ac-2);
}
.clink__icon svg { width: 22px; height: 22px; }
.clink b { display: block; font-size: 15px; }
.clink i { font-style: normal; font-size: 13px; color: var(--muted); }
.form {
border: 1px solid var(--line);
background: linear-gradient(165deg, var(--card-2), var(--bg-2));
border-radius: 22px;
padding: 30px 28px;
}
.form__row { margin-bottom: 18px; }
.form label {
display: block;
font-size: 13px; font-weight: 700;
color: var(--muted);
margin-bottom: 8px;
letter-spacing: 0.03em;
}
.form input:not([type="checkbox"]), .form textarea {
width: 100%;
background: #ffffff;
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 14px 16px;
color: var(--txt);
font: inherit;
font-size: 15px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
resize: vertical;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(99, 96, 90, 0.55); }
.form input:not([type="checkbox"]):focus, .form textarea:focus {
outline: none;
border-color: var(--ac-1);
box-shadow: 0 0 0 3px rgba(205, 58, 32, 0.18);
}
.form__note {
margin-top: 14px;
font-size: 12.5px;
color: var(--muted);
}
.form__note a { color: var(--ac-2); text-decoration: underline; }
.form__note.is-error { color: #b3261e; }
/* поле-ловушка для ботов: убрано с экрана, но доступно для автозаполнения бота */
.form__trap {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.form { position: relative; }
/* согласие на обработку данных — требование модерации Директа.
Селектор с двумя классами, иначе выигрывает общее правило `.form label` */
.form .form__check {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.5;
color: var(--muted);
cursor: pointer;
margin-bottom: 20px;
}
.form__check input {
flex: 0 0 auto;
width: 18px; height: 18px;
margin-top: 1px;
accent-color: var(--ac-1);
cursor: pointer;
}
.form__check a { color: var(--ac-2); text-decoration: underline; }
.form__check.is-error { color: #b3261e; }
/* поле с ошибкой валидации */
.form input.is-error, .form textarea.is-error {
border-color: rgba(179, 38, 30, 0.6);
box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.1);
}
/* состояние отправки */
.form.is-sending { opacity: 0.6; pointer-events: none; }
/* экран «заявка отправлена» */
.form__done {
border: 1px solid rgba(46, 125, 79, 0.4);
background: linear-gradient(165deg, var(--card-2), var(--bg-2));
border-radius: 22px;
padding: 42px 28px;
text-align: center;
}
.form__done[hidden] { display: none; }
.form__done-icon {
width: 56px; height: 56px;
margin: 0 auto 18px;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(46, 125, 79, 0.14);
color: var(--ok);
}
.form__done-icon svg { width: 28px; height: 28px; }
/* Штамп «Принято» вместо нейтральной галочки: жест из мира бумаг и договоров,
которым сайт говорит о себе на каждом шагу. Ставится «с удара» — scale
2.4 → 1 с отскоком. Элемент собирает main.js (он же вписывает дату), а
анимация перезапускается сама: блок каждый раз выходит из display:none. */
.form__done .stamp {
display: inline-block;
margin: 0 auto 18px;
padding: 8px 18px 7px;
border: 2.5px solid var(--ac-2);
border-radius: 8px;
box-shadow: inset 0 0 0 1.5px rgba(167, 46, 24, 0.35);
color: var(--ac-2);
font-weight: 800;
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.25;
text-align: center;
opacity: 0;
transform: rotate(-8deg) scale(2.4);
animation: stamp-hit 0.45s cubic-bezier(0.2, 1.5, 0.45, 1) 0.25s forwards;
}
.form__done .stamp small {
display: block;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
}
@keyframes stamp-hit { to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.form__done h3 { font-size: 21px; margin-bottom: 10px; }
.form__done p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.form__done a { color: var(--ac-2); text-decoration: underline; }
/* ---------- Подвал ---------- */
.footer {
position: relative;
border-top: 1px solid var(--line);
background: var(--bg-2);
padding-top: 56px;
}
/* Тот же приём, что на стыках секций: подвал отделяется светом, а не чертой. */
.footer::before {
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(205, 58, 32, 0.35), rgba(167, 46, 24, 0.35), transparent);
}
.footer__in {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 28px;
padding-bottom: 40px;
}
.footer__col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.footer__col b { font-size: 14px; margin-bottom: 4px; }
.footer__col a { color: var(--muted); font-size: 14px; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--txt); }
.footer__brand p { color: var(--muted); font-size: 14px; max-width: 240px; }
.footer__brand .logo { margin-bottom: 6px; }
.footer__bottom {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 0 28px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13.5px;
flex-wrap: wrap;
}
.footer__up { color: var(--muted); }
.footer__up:hover { color: var(--txt); }
/* ============================================================
Страницы услуг (/uslugi/…)
============================================================ */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted);
margin-bottom: 22px;
}
.crumbs a { color: var(--muted); transition: color 0.2s ease; }
.crumbs a:hover { color: var(--ac-2); }
.crumbs span[aria-current] { color: var(--txt); }
.crumbs i { font-style: normal; opacity: 0.45; }
/* Дата последнего изменения страницы. Стоит внизу текста, перед формой:
читателю она нужна как проверка «не устарели ли цены», а поисковику и
нейроответу — как признак свежести источника. Тон приглушённый: это
служебная строка, а не часть предложения. */
.upd {
font-size: 13px;
color: var(--muted);
opacity: 0.75;
margin: clamp(28px, 4vw, 44px) 0 0;
}
.lead-hero { padding: clamp(120px, 15vw, 160px) 0 clamp(40px, 6vw, 64px); position: relative; overflow: hidden; }
.lead-hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(27px, 4.6vw, 46px);
letter-spacing: 0;
margin-bottom: 20px;
max-width: 15ch;
}
.lead-hero__sub { color: var(--muted); font-size: clamp(16px, 2vw, 18.5px); max-width: 640px; margin-bottom: 30px; }
.lead-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* «что входит» — плотный список с галочками */
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.checks li {
position: relative;
padding-left: 30px;
font-size: 15px;
color: var(--muted);
}
.checks li b { color: var(--txt); font-weight: 700; }
.checks li::before {
content: "✓";
position: absolute; left: 0; top: 1px;
width: 20px; height: 20px;
display: grid; place-items: center;
border-radius: 7px;
background: rgba(46, 125, 79, 0.14);
color: var(--ok);
font-size: 12px; font-weight: 800;
}
/* прайс-строки: вариант работы — что внутри — цена */
.tiers { display: grid; gap: 14px; }
.tier {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px 28px;
align-items: start;
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--r);
padding: 24px 26px;
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tier:hover { border-color: rgba(205, 58, 32, 0.4); transform: translateY(-3px); }
.tier h3 { font-size: 18px; margin-bottom: 8px; }
.tier p { color: var(--muted); font-size: 14.5px; max-width: 62ch; }
.tier__price { text-align: right; white-space: nowrap; }
.tier__price b { display: block; font-size: 21px; font-weight: 800; }
.tier__price span { font-size: 13px; color: var(--muted); }
/* текстовые блоки страниц услуг */
.prose { max-width: 720px; }
.prose p { color: var(--muted); font-size: 16px; margin-bottom: 16px; }
.prose p b, .prose p strong { color: var(--txt); }
.prose h3 { font-size: 19px; margin: 30px 0 12px; }
.prose ul { display: grid; gap: 10px; margin-bottom: 18px; }
.prose ul li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15.5px; }
.prose ul li::before {
content: "";
position: absolute; left: 0; top: 9px;
width: 8px; height: 8px; border-radius: 3px;
background: var(--grad); opacity: 0.85;
}
/* перелинковка между услугами */
.xlinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xlink {
display: block;
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--r);
padding: 22px 24px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.xlink:hover { transform: translateY(-4px); border-color: rgba(167, 46, 24, 0.45); }
.xlink b { display: block; font-size: 16.5px; margin-bottom: 6px; }
.xlink span { color: var(--muted); font-size: 14px; }
.xlink i { display: block; margin-top: 12px; color: var(--ac-2); font-style: normal; font-weight: 700; font-size: 14px; }
/* ---------- Журнал: оглавление, разбор по шагам, таблицы, врезки ----------
Четыре кирпича, которых не хватало статьям. Страница услуги — это список
и цена, статья — это последовательность и сравнение, и на .prose с .checks
она не раскладывается. Всё на тех же переменных темы: новых цветов нет. */
/* строка под H1: дата и время чтения */
.post-meta {
margin: 18px 0 0;
font-size: 13.5px; color: var(--muted);
line-height: 1.7;
}
.post-meta a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.post-meta a:hover { color: var(--txt); }
.post-meta b { color: var(--txt); font-weight: 700; }
/* короткий ответ над оглавлением: вопрос и ответ на него до начала статьи.
Выделен полосой слева, а не рамкой и фоном, — иначе на экране получается
три карточки подряд (ответ, оглавление, первая секция) и глазу не за что
зацепиться. Полоса градиентом: тот же приём, что у цифр в оглавлении. */
.answer {
max-width: 720px;
margin-bottom: 22px;
padding: 2px 0 2px 20px;
border-left: 3px solid transparent;
border-image: var(--grad) 1;
}
.answer__q {
display: block;
font-family: var(--font-display);
font-size: 17px; line-height: 1.35;
margin-bottom: 10px;
}
.answer p { color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.answer p + p { margin-top: 9px; }
.answer b { color: var(--txt); }
/* оглавление: якоря на секции статьи. Оно же подсказывает поиску структуру
документа, а читателю — что внутри, не пролистывая до конца. */
.toc {
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--r);
padding: 22px 24px;
max-width: 720px;
}
.toc b { display: block; font-size: 14px; margin-bottom: 12px; }
.toc ol { display: grid; gap: 9px; counter-reset: toc; list-style: none; }
.toc li { counter-increment: toc; position: relative; padding-left: 30px; }
.toc li::before {
content: counter(toc, decimal-leading-zero);
position: absolute; left: 0; top: 1px;
font-family: var(--font-display); font-weight: 700; font-size: 12px;
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.toc a { color: var(--muted); font-size: 15px; }
.toc a:hover { color: var(--txt); }
/* разбор по шагам: вертикальный нумерованный список с большими цифрами.
.steps на главной — сетка на пять колонок, для семи шагов она не годится. */
.numbered { display: grid; gap: 14px; counter-reset: num; max-width: 860px; }
.numbered > li {
counter-increment: num;
position: relative;
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--r);
padding: 22px 24px 22px 68px;
}
.numbered > li::before {
content: counter(num, decimal-leading-zero);
position: absolute; left: 24px; top: 22px;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numbered h3 { font-size: 17px; margin-bottom: 8px; }
.numbered p { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.numbered p:last-child { margin-bottom: 0; }
.numbered p b { color: var(--txt); }
/* таблица сравнения. Обёртка со своей прокруткой обязательна: без неё
таблица на телефоне растягивает страницу и появляется горизонтальный скролл
у всего документа. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl {
width: 100%; min-width: 560px;
border-collapse: collapse;
font-size: 15px;
}
.tbl th, .tbl td {
text-align: left;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
vertical-align: top;
color: var(--muted);
}
.tbl th {
color: var(--txt); font-weight: 700; font-size: 14px;
border-bottom-color: rgba(205, 58, 32, 0.35);
white-space: nowrap;
}
.tbl td b { color: var(--txt); }
.tbl tr:last-child td { border-bottom: none; }
.tbl__cap { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
/* врезка: короткая мысль, которую нельзя пропустить */
.note {
border: 1px solid var(--line);
border-left: 3px solid var(--ac-2);
background: linear-gradient(120deg, rgba(167, 46, 24, 0.07), transparent 60%), var(--card);
border-radius: 14px;
padding: 20px 24px;
max-width: 860px;
}
.note b { display: block; margin-bottom: 6px; font-size: 15.5px; }
.note p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 640px) {
.numbered > li { padding: 20px 18px 20px 18px; }
.numbered > li::before { position: static; display: block; margin-bottom: 8px; }
}
/* блок с формой в конце страницы услуги */
.cta-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) {
.checks { grid-template-columns: 1fr; }
.xlinks { grid-template-columns: 1fr; }
.cta-band { grid-template-columns: 1fr; }
.tier { grid-template-columns: 1fr; }
.tier__price { text-align: left; }
}
/* ---------- Плавающая кнопка «Написать» ---------- */
.fab {
display: none;
position: fixed;
right: 16px; bottom: 16px;
z-index: 90;
align-items: center;
gap: 8px;
padding: 13px 20px;
border-radius: 999px;
background: var(--grad);
color: #fdfcf9;
font-weight: 800;
font-size: 14.5px;
box-shadow: 0 14px 30px -12px rgba(205, 58, 32, 0.45);
}
.fab svg { width: 19px; height: 19px; }
.fab:active { transform: scale(0.96); }
/* ---------- Тост ---------- */
.toast {
position: fixed;
left: 50%; bottom: 30px;
transform: translate(-50%, 20px);
background: var(--card-2);
border: 1px solid rgba(46, 125, 79, 0.5);
color: var(--txt);
padding: 12px 22px;
border-radius: 999px;
font-size: 14px; font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ============================================================
Декоративные акценты
------------------------------------------------------------
Всё в этом блоке — оформление, которое ничего не двигает в раскладке:
фоны, тени и градиентные линии. Правило отбора было одно — эффект не должен
стоить кадров. Поэтому здесь нет ни filter: blur, ни анимаций непрерывного
перекраса: только фоновые градиенты (рисуются один раз) и transform/opacity
на ховере (уходят в композитор). Убрать любой кусок можно целиком —
вёрстка этого не заметит.
============================================================ */
/* Точечная сетка на первом экране. Ровный лист под крупным заголовком
выглядит пустым; сетка даёт ему фактуру и глубину. Верхний слой градиента —
не маска, а заливка цветом фона: он гасит точки к краям, и блок не обрывается
резкой границей. Маской это делать нельзя — на mask-image страница
получает лишний композиторский слой во всю высоту экрана. */
.hero, .lead-hero {
background-image:
radial-gradient(ellipse 80% 62% at 50% 0%, transparent 32%, var(--bg) 84%),
radial-gradient(circle at 1px 1px, rgba(20, 20, 20, 0.1) 1px, transparent 0);
background-size: auto, 26px 26px;
background-repeat: no-repeat, repeat;
}
/* Полоса прогресса чтения по нижней кромке шапки.
Скроллом её двигает сам браузер (animation-timeline: scroll) — ни одной
строки JS и ни одного обработчика на событие прокрутки. Там, где этого
не умеют, @supports просто не отдаёт правило и полосы нет: без запасного
варианта на скриптах, ради полоски он не нужен. */
@supports (animation-timeline: scroll()) {
.hdr::after {
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 100%; height: 2px;
background: var(--grad);
transform: scaleX(0);
transform-origin: 0 50%;
animation: progress-scroll linear;
animation-timeline: scroll(root block);
}
@keyframes progress-scroll { to { transform: scaleX(1); } }
}
/* Иконки контактов — той же выделки, что и иконки карточек услуг. */
.clink__icon {
background: linear-gradient(150deg, rgba(205, 58, 32, 0.22), rgba(167, 46, 24, 0.09));
border: 1px solid rgba(205, 58, 32, 0.25);
}
/* Ореол на ховере у остальных плиток — как у .card, одной строкой тени. */
.pack:hover { box-shadow: var(--shadow), 0 18px 44px -26px rgba(205, 58, 32, 0.4); }
.step:hover { box-shadow: 0 16px 40px -26px rgba(205, 58, 32, 0.35); }
.xlink:hover { box-shadow: 0 16px 40px -26px rgba(167, 46, 24, 0.35); }
.tier:hover { box-shadow: 0 16px 40px -26px rgba(205, 58, 32, 0.35); }
.work:hover { box-shadow: var(--shadow), 0 20px 50px -30px rgba(167, 46, 24, 0.35); }
/* Бумажный самолётик — вылетает из кнопки «Отправить заявку», когда заявка
реально ушла: тот же знак, что у ссылки на Telegram, только живой.
Элемент создаёт main.js на время полёта и удаляет по animationend;
весь полёт — transform и opacity. */
.plane-fly {
position: fixed;
z-index: 210;
width: 30px; height: 30px;
margin: -15px 0 0 -15px;
color: var(--ac-2);
pointer-events: none;
animation: plane-fly 1.1s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}
@keyframes plane-fly {
0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.7); }
12% { opacity: 1; transform: translate(16px, -12px) rotate(6deg) scale(1); }
55% { opacity: 1; transform: translate(clamp(90px, 22vw, 220px), -110px) rotate(14deg) scale(1.05); }
100% { opacity: 0; transform: translate(clamp(150px, 38vw, 380px), -240px) rotate(22deg) scale(0.9); }
}
/* Полоса прокрутки в цветах сайта. На тёмной теме системная светлая полоса —
самая заметная чужеродная деталь на экране. */
html {
scrollbar-width: thin;
scrollbar-color: rgba(205, 58, 32, 0.55) var(--bg-2);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 3px solid var(--bg-2);
background: linear-gradient(var(--ac-1), var(--ac-2));
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--ac-2), var(--ac-1)); }
/* ---------- Появление при скролле ---------- */
.rv {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.7s ease var(--d, 0s), transform 0.7s ease var(--d, 0s);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.rv { opacity: 1; transform: none; transition: none; }
.work__frame::before { animation: none; }
.chip__dot { animation: none; }
.doorsign__sign { animation: none; }
.plane-fly { animation-duration: 0.01s; }
.form__done .stamp { animation-duration: 0.01s; animation-delay: 0s; }
html { scroll-behavior: auto; }
}
/* ============================================================
Адаптив
============================================================ */
@media (max-width: 1060px) {
.cards { grid-template-columns: repeat(2, 1fr); }
.works { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(3, 1fr); }
.packs { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
.pack__for { min-height: 0; }
.footer__in { grid-template-columns: 1fr 1fr; }
.card__lead { margin-bottom: 14px; }
}
@media (max-width: 860px) {
.nav {
position: fixed;
top: 74px; left: 0; right: 0;
flex-direction: column;
gap: 0;
background: rgba(251, 250, 246, 0.97);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
padding: 10px 20px 20px;
transform: translateY(-130%);
transition: transform 0.3s ease;
z-index: 99;
}
.nav.open { transform: translateY(0); }
.nav a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
.nav a:last-child { border-bottom: 0; }
.burger { display: flex; }
.hdr__cta { display: none; }
.fab { display: inline-flex; } /* заменяет кнопку из шапки, которая скрыта */
.hero__stats { grid-template-columns: repeat(2, 1fr); }
.about { grid-template-columns: 1fr; }
.about__card { position: static; max-width: 420px; }
.contact { grid-template-columns: 1fr; }
.works { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.cards { grid-template-columns: 1fr; }
.toolbelt { padding: 14px 0; }
.toolbelt__in { gap: 8px; }
.toolbelt__in span { font-size: 10.5px; padding: 5px 10px; }
.steps { grid-template-columns: 1fr 1fr; }
.hero__cta .btn { width: 100%; }
}
@media (max-width: 440px) {
.steps { grid-template-columns: 1fr; }
/* minmax(0,1fr) + min-width, иначе неразрывное «0 посредников»
распирает колонку и текст уезжает за край экрана */
.hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 16px 12px; min-width: 0; }
.stat__num { font-size: 15px; white-space: normal; line-height: 1.25; }
.stat__label { font-size: 12.5px; }
}
/* Рукописная пометка на полях. Нужна там, где нейросетевой текст выдаёт себя
идеальной симметрией: живой автор позволяет себе реплику в сторону.
Наклон и левый штрих — чтобы блок читался как приписка, а не как ещё одна
секция. На узких экранах наклон снимаем: там он выглядит поломкой. */
.note-hand {
position: relative;
max-width: 620px;
margin-top: 22px;
padding: 12px 0 12px 18px;
border-left: 2px solid var(--ac-1);
color: var(--muted);
font-family: var(--font-display);
font-size: 16.5px;
font-style: italic;
line-height: 1.6;
}
@media (min-width: 861px) {
.note-hand { transform: rotate(-.35deg); }
}
/* ============================================================
Микротипографика и переходы
------------------------------------------------------------
Отделка поверх готовой вёрстки. Всё в блоке — прогрессивные свойства
и статичные фоны: браузер без поддержки молча пропускает строку, кадров
не стоит ничего. Правило то же, что у «Декоративных акцентов»: любой
кусок можно вырезать целиком, раскладка не заметит.
============================================================ */
/* Заголовок не оставляет одинокое слово на второй строке (balance),
абзац — висячее слово в последней (pretty). Печатная вёрстка руками
делает это переносами, тут то же самое делает браузер. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Кавычка первой строки заголовка выносится на поля — приём наборной
вёрстки; пока умеет только Safari, остальные пропустят. */
h1, h2, blockquote { hanging-punctuation: first; }
/* Нативные контролы (чекбоксы, радио) — в цвет ручки без перечисления
селекторов; подсветка перехода по ссылке с #:~:text= — фирменная,
а не системная жёлтая. */
:root { accent-color: var(--ac-1); }
::target-text { background: rgba(205, 58, 32, 0.22); }
/* Переход между страницами без единой строки JS: старая страница
растворяется в новую, а шапка и кнопка «Написать» получают свои снимки
и не мигают при навигации. Работает в Chromium 126+; где не работает —
обычный переход, терять нечего. Внутрь reduced-motion не заворачиваем
руками каждое правило: весь блок включается только при no-preference. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.hdr { view-transition-name: header; }
.fab { view-transition-name: fab; }
}
/* Овал корректора: красная ручка обводит слово, ради которого абзац
и написан. Кривая нарисована с неточным замыканием — начало и конец
не сходятся, как у настоящего росчерка; машинно-ровный эллипс здесь
выдал бы подделку. Фон тянется на всю ширину слова, отрицательные
поля компенсируют паддинги — раскладка строки не меняется. */
.ring {
font-style: normal;
font-weight: 600;
color: var(--txt);
/* Запас вокруг букв: без него линия ложится прямо по буквам и читается
зачёркиванием, а не обводкой. Отрицательные поля равны паддингам,
поэтому строка не раздвигается — росчерк просто заезжает на поля. */
padding: 0.3em 0.9em 0.38em;
margin: -0.3em -0.9em -0.38em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M84 5 C36 2 8 12 7 24 c-1 13 26 20 55 19 29-1 52-9 51-21 C112 11 92 6 71 6' stroke='%23cd3a20' stroke-width='3.2' stroke-linecap='round' opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Имя в строке © набрано курсивной антиквой — росчерк под документом.
Кегль чуть крупнее соседнего текста: курсив Piazzolla на 13.5px
становится мельче гротеска той же высоты. */
.sig {
font-family: var(--font-display);
font-style: italic;
font-size: 1.12em;
color: var(--txt);
}
/* ---------- Печать ----------
Сайт прикидывается бумагой на экране — значит, на настоящей бумаге
обязан выглядеть документом, а не скриншотом: без фиксированной шапки,
промо и формы, с видимыми адресами ссылок в текстах. Кому это нужно:
коммерческое предложение со страницы услуги печатают или сохраняют
в PDF чаще, чем кажется. */
@media print {
.hdr, .fab, .skip, .toast, .form-wrap, .hero__orb,
.footer__up, .burger { display: none !important; }
body { background: #fff; }
.rv { opacity: 1 !important; transform: none !important; transition: none; }
.hero, .lead-hero { padding-top: 24px; background: #fff; }
.section { padding: 26px 0; }
.section--tint, .toolbelt, .footer { background: #fff; }
.card, .pack, .step, .tier, .xlink, .work, .faq details, .numbered > li { break-inside: avoid; }
/* адрес ссылки — в скобках после неё: на бумаге кликать некуда.
Только внутренним (href с «/»): у внешних адрес и так в тексте
или неважен, а «bindus.ru» перед «https://…» был бы враньём. */
.prose a[href^="/"]::after, .faq__body a[href^="/"]::after {
content: " (bindus.ru" attr(href) ")";
font-size: 0.85em;
color: var(--muted);
}
}