/* Design system — единственный CSS-файл проекта.
0. Fonts локальный Raleway
1. Primitives сырая палитра: цвета с номерами, ничего кроме значений
2. Semantics токены по назначению: текст, фон, размеры, отступы
3. Base сброс и настройки по умолчанию
4. Layout контейнер и ритм секций
5. Atoms мельчайшие элементы: кнопка, бейдж, иконка
6. Blocks составные блоки: шапка, карточка проекта, опыт, сильные стороны
7. Pages то, что существует в одном экземпляре
Правило: каждый уровень берёт значения только из уровней выше.
Компоненты обращаются к Semantics, а не к Primitives напрямую.
Исключение — декоративные цвета (подсветка бейджа, точка, фон карточки):
они выбираются по вкусу, поэтому передаются из разметки как var(--primitive). */
/* ==========================================================================
0. FONTS
Raleway variable (100–900), локальные файлы. Браузер качает только те
наборы символов, которые встретил на странице.
========================================================================== */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/raleway-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: 'Raleway';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/raleway-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/raleway-latin-italic.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: 'Raleway';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/raleway-cyrillic-italic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* ==========================================================================
1. PRIMITIVES
Сырая палитра. Номер = светлота: чем больше, тем темнее.
Пропуски в номерах — это норма: место под будущие оттенки.
========================================================================== */
:root {
/* Серые */
--gray-0: #ffffff;
--gray-25: #fafafa;
--gray-50: #f5f5f5;
--gray-100: #ebebeb;
--gray-200: #dbdbdb;
--gray-500: #707070;
--gray-600: #515151;
--gray-900: #101010;
--black-alpha-5: rgba(0, 0, 0, 0.05);
/* Пастельные: 50 — подсветка бейджа и фон иконки, 100 — фон карточки проекта */
--violet-50: #f2ecfa;
--violet-100: #ede8ff;
--blue-50: #e3f3fa;
--blue-100: #ddf1fa;
--indigo-50: #e3ebfe;
--indigo-100: #e2e7fb;
--pink-50: #fcebf0;
--pink-100: #fceaf0;
--mint-50: #d3f6f1;
--mint-100: #d8f2f2;
--green-50: #e1f5e2;
--amber-50: #fef6e0;
--magenta-50: #fae3f8;
/* Насыщенные: точки у названий компаний в «Опыте» */
--slate-500: #92adc9;
--blue-500: #79b7fc;
--cyan-500: #73e3ea;
--teal-500: #6ce0cf;
--amber-500: #f5bb7c;
--red-500: #fe6161;
--magenta-500: #fc8ef2;
}
/* ==========================================================================
2. SEMANTICS
Токены по назначению. Их и используют компоненты.
========================================================================== */
:root {
/* Цвет */
--color-text: var(--gray-900);
--color-heading: var(--gray-900);
--color-text-muted: var(--gray-600);
--color-text-caption: var(--gray-500);
--color-bg: var(--gray-0);
--color-surface: var(--gray-50);
--color-surface-soft: var(--gray-25); /* подложка бледнее обычной: плашка шоурума */
--color-surface-hover: var(--gray-100);
--color-border: var(--gray-200); /* заметнее, чем --color-line */
--color-line: var(--black-alpha-5);
/* Шрифт */
--font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Размеры */
--font-size-h1: 48px;
--font-size-h2: 34px;
--font-size-h3: 30px;
--font-size-h4: 20px;
--font-size-subtitle: 24px; /* подзаголовки разделов в кейсах */
--font-size-body-l: 18px; /* текст кейсов: длинное чтение */
--font-size-body: 16px;
--font-size-caption: 14px;
/* Межстрочный интервал — множитель, а не пиксели: пересчитывается сам
при смене кегля на мобильных. В скобках то же в процентах, как в макете. */
--line-height-tight: 1.2; /* 120% */
--line-height-snug: 1.5; /* 150% */
--line-height-body: 1.7; /* 170% */
--line-height-loose: 1.9; /* 190% — текст и подписи в кейсах */
/* Текстовые стили — применяются целиком, набором из трёх токенов:
H1 h1 / medium / tight заголовок страницы кейса
H2 h2 / medium / tight заголовки блоков
H3 h3 / medium / snug приветствие, призыв в контактах
(призыв на мобильном берёт размер H2)
и логотип в открытом меню
H4 h4 / medium / snug карточки, компании, логотип,
ссылки в открытом меню
Subtitle subtitle/ medium / body подзаголовки разделов в кейсах
Body body / regular / body описания и абзацы
Body L body-l / medium / loose текст кейсов: длинное чтение
(подзаголовок в списке — bold)
Label body / medium / 1 бейдж навыка
Label S caption / medium / 1 бейдж периода в «Опыте»
Action body / semibold / body кнопка, ссылки шапки, почта
Caption caption / regular / body теги под карточками; в кейсах —
подписи под картинками (loose, серый)
Label и Action различаются только начертанием: статичная подпись и то,
на что нажимают. Цвет в стиль не входит — задаётся отдельно. */
/* Отступы (шаг 8) */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
--space-6: 64px;
/* Радиусы */
--radius-xs: 4px; /* квадрат с иконкой */
--radius-s: 6px; /* бейдж навыка */
--radius-m: 12px; /* карточка проекта, рамка блока */
--radius-full: 999px;
/* Сетка */
--container-width: 760px;
--container-width-wide: 1160px; /* картинки и слайдер в кейсах */
--container-padding: 20px;
--header-padding: 80px;
--header-height: 80px;
--section-gap: 112px; /* 14 × 8 */
}
/* Брейкпоинты — три точки, у каждой своя задача:
1360px шапка: ссылки сменяются бургером, шапка выравнивается по контент-
колонке и перестаёт прилипать — иначе при прокрутке наезжает на текст
800px контейнер перестаёт быть 760px и начинает сжиматься;
«Опыт» встаёт в столбик, «Сильные стороны» — в одну колонку
640px мобильный: проекты в одну колонку, мельче кегли, компактная шапка
Новую точку заводим, только когда вёрстка на ней реально ломается. */
@media (max-width: 640px) {
:root {
--font-size-h1: 34px;
--font-size-h2: 28px;
--font-size-h3: 22px;
--font-size-h4: 18px;
--font-size-subtitle: 20px;
--font-size-body-l: 16px;
--font-size-body: 14px;
--font-size-caption: 12px;
--container-padding: 24px;
--header-height: 64px;
--section-gap: 80px; /* 10 × 8 */
}
}
/* ==========================================================================
3. BASE
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body);
color: var(--color-text);
background: var(--color-bg);
font-variant-numeric: lining-nums;
}
h1,
h2,
h3,
p {
margin: 0;
}
/* Теги заголовков не несут оформления: тег выбирается по смыслу,
а размер со начертанием задаёт компонент из таблицы текстовых стилей. */
h1,
h2,
h3 {
font-size: inherit;
font-weight: inherit;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* Без этого обёртка остаётся строчной и браузер отводит под неё целую
строку — над картинкой появляется лишний отступ. */
picture {
display: block;
}
a {
color: inherit;
text-decoration: none;
}
/* Маркеры и нумерацию рисуем сами, когда нужно: в кейсах номера уже
вшиты в текст подзаголовка, и браузерные добавились бы вторыми. */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 3px;
}
/* ==========================================================================
4. LAYOUT
========================================================================== */
.container {
width: 100%;
max-width: calc(var(--container-width) + var(--container-padding) * 2);
margin-inline: auto;
padding-inline: var(--container-padding);
}
/* Широкий контейнер — картинки и слайдер в кейсах. Текст остаётся в 760px,
чтобы строка не становилась слишком длинной для чтения. */
.container--wide {
max-width: calc(var(--container-width-wide) + var(--container-padding) * 2);
}
.section {
padding-bottom: var(--section-gap);
}
/* Запрещает перенос внутри куска. Нужно для текста с эмодзи: картинка —
отдельный объект, и браузер разрешает перенос прямо перед ней даже после
неразрывного пробела. Обернуть слово вместе с картинкой — единственный способ. */
.nowrap {
white-space: nowrap;
}
/* Перенос только для широкого экрана: на мобильном он оставляет короткую
строку, поэтому отключается и текст переносится сам.
Обычный
без класса работает на всех ширинах. */
@media (max-width: 640px) {
.br-desktop {
display: none;
}
}
/* Текстовый стиль H2 */
.section__title {
margin-bottom: 32px;
font-size: var(--font-size-h2);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
color: var(--color-heading);
}
/* ==========================================================================
5. ATOMS
========================================================================== */
/* --- Button — текстовый стиль Action ------------------------------------ */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 60px;
padding-inline: 48px;
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
line-height: 1;
color: var(--color-bg);
background: var(--color-text);
border: 1px solid var(--color-text);
border-radius: var(--radius-full);
transition:
background-color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.button:hover {
color: var(--color-text);
background: var(--color-bg);
}
/* Светлый вариант: контур вместо заливки. Переходы между кейсами.
При наведении заливка не меняется — только темнеет рамка, как в оригинале.
Своя длительность 0.2s, чтобы совпадать с отъездом стрелки. */
.button--outline {
color: var(--color-text);
background: var(--color-bg);
border-color: var(--color-border);
transition: border-color 0.2s ease-in-out;
}
.button--outline:hover {
color: var(--color-text);
background: var(--color-bg);
border-color: var(--color-text);
}
/* На мобильном кнопка занимает всю ширину контейнера */
@media (max-width: 640px) {
.button {
width: 100%;
}
}
/* --- Badge — текстовый стиль Label --------------------------------------
Один атом в двух размерах: lg — навыки, sm — периоды в «Опыте».
Цвет подсветки передаётся из разметки через --badge-hover. */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-body);
font-weight: var(--font-weight-medium);
line-height: 1;
white-space: nowrap;
background: var(--color-surface);
transition: background-color 0.3s ease-in-out;
}
.badge:hover {
background: var(--badge-hover, var(--color-surface));
}
/* Боковой отступ 24px, а не 27px как в Tilda: там шрифт был 15px, у нас 16px,
и текст в первом ряду стал шире на 25px. Расчёт по ширинам из Tilda:
текст первого ряда 401px + 6 плашек × 48px отступов + 5 зазоров × 12px = 749px
при контейнере 760px. При 27px выходило 785px и ряд уезжал на четвёртый. */
.badge--lg {
height: 48px;
padding-inline: 24px;
border-radius: var(--radius-s);
}
/* Период в «Опыте»: 14px — в колонке 96px текст занимает 66px вместо 75px,
поэтому по бокам остаётся по 15px воздуха вместо 10px.
Отступ 10px, а не больше: плашку растягивает сетка до 96px, и при 16px
на текст оставалось всего 64px — он переносился на вторую строку. */
.badge--sm {
height: 32px;
/* Отступ можно увеличить снаружи: в «Опыте» плашку растягивает колонка,
а тегам на обложке кейса нужен воздух пошире. */
padding-inline: var(--badge-padding, 10px);
font-size: var(--font-size-caption);
border-radius: var(--radius-full);
}
/* На мобильном плашка ниже и уже: при 48px и отступах 24px в ряд помещалось
по одной-две штуки, и блок выглядел рыхлым. */
@media (max-width: 640px) {
.badge--lg {
height: 36px;
padding-inline: 16px;
}
}
/* --- Icon box — цветной квадрат с иконкой -------------------------------
Фон передаётся из разметки через --icon-box-bg. */
.icon-box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-xs);
background: var(--icon-box-bg, var(--color-surface));
}
/* ==========================================================================
6. BLOCKS
========================================================================== */
/* --- Header ------------------------------------------------------------- */
.header {
position: sticky;
top: 0;
z-index: 10;
}
/* flex-wrap нужен открытому меню: ниже 1360px логотип и ссылки занимают
по целой строке и переносятся под кнопку, раздвигая шапку вниз. */
.header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
min-height: var(--header-height);
padding-inline: var(--header-padding);
}
/* Текстовый стиль H4 */
.header__logo {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
color: var(--color-heading);
}
.header__nav {
display: flex;
align-items: center;
gap: 30px;
margin-left: auto;
}
/* Текстовый стиль Action */
.header__link {
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
transition: color 0.3s ease-in-out;
}
.header__link:hover,
.header__link:focus-visible {
color: var(--color-text-muted);
}
/* --- Burger — кнопка мобильного меню ------------------------------------
На десктопе скрыта. Три линии превращаются в крестик, когда меню открыто. */
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
/* Высота во всю шапку, а не по размеру значка: иначе в открытом меню
строка с кнопкой сжимается до 32px и крестик уезжает к верхнему краю. */
width: 32px;
height: var(--header-height);
padding: 0;
margin-left: auto;
background: none;
border: 0;
cursor: pointer;
}
.burger__line {
width: 24px;
height: 2px;
background: var(--color-text);
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.header--open .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header--open .burger__line:nth-child(2) { opacity: 0; }
.header--open .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Бургер с 1360px, а не с 960px как в Tilda: контент-колонка 760px стоит по
центру, а логотип со ссылками прижаты к краям окна. Ниже 1360px зазор между
ними меньше 50px, и липкая шапка при прокрутке наезжает на карточки.
Открытое меню раскладывается в столбик по центру: сначала логотип, под ним
ссылки. Меню не накрывает страницу, а раздвигает её — для этого у
.header__inner стоит перенос строк, а у кнопки order, потому что в разметке
логотип идёт первым. Фон появляется только у открытого меню, иначе ссылки
легли бы поверх текста страницы. */
@media (max-width: 1360px) {
/* Шапка перестаёт прилипать — как в Tilda. Иначе бургер при прокрутке
висел бы поверх карточек, ради чего всё и затевалось. */
.header {
position: static;
}
/* Шапка выравнивается по контент-колонке, а не по краям окна: бургер
встаёт ровно над правым краем карточек. Размеры те же, что у .container. */
.header__inner {
max-width: calc(var(--container-width) + var(--container-padding) * 2);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.burger {
display: flex;
order: -1;
}
.header__logo,
.header__nav {
display: none;
width: 100%;
text-align: center;
}
.header--open .header__inner {
padding-bottom: var(--space-3);
background: var(--color-bg);
}
/* В открытом меню текст крупнее: логотип берёт размер H3, ссылки — H4.
Оба токена сами уменьшаются на 640px, поэтому на планшете выходит
30/20px, а на телефоне 22/18px — без отдельного брейкпоинта. */
.header--open .header__logo {
display: block;
margin-top: var(--space-3);
font-size: var(--font-size-h3);
}
.header--open .header__link {
font-size: var(--font-size-h4);
}
.header--open .header__nav {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.burger__line {
transition: none;
}
}
/* --- Project card -------------------------------------------------------
Макет карточки 360×236: картинка 312×155 с отступами 24 / 43, три телефона
70×142 с шагом 91. Размеры в процентах, поэтому карточка тянется по колонке.
Фон подложки передаётся из разметки через --media-bg. */
.project-card {
display: block;
}
.project-card__media {
position: relative;
aspect-ratio: 360 / 236;
border-radius: var(--radius-m);
background: var(--media-bg, var(--color-surface));
}
.project-card__image {
position: absolute;
top: 18.2%;
left: 6.67%;
width: 86.67%;
height: auto;
transition: transform 0.8s ease-in-out;
}
.project-card__media:hover .project-card__image {
transform: scale(1.02);
}
.project-card__phones {
position: absolute;
top: 19.1%;
right: 15%;
left: 15%;
display: flex;
justify-content: space-between;
}
.project-card__phone {
width: 27.8%;
height: auto;
transition: transform 0.8s ease-in-out;
}
.project-card__media:hover .project-card__phone { transform: scale(1.02); }
.project-card__media:hover .project-card__phone--left { transform: translateX(-5px) scale(1.02); }
.project-card__media:hover .project-card__phone--right { transform: translateX(5px) scale(1.02); }
/* Текстовый стиль H4 */
.project-card__title {
margin: var(--space-3) 2px 0;
font-size: var(--font-size-h4);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
color: var(--color-heading);
}
/* Текстовый стиль Caption */
.project-card__tag {
margin: var(--space-2) 2px 0;
font-size: var(--font-size-caption);
line-height: var(--line-height-body);
opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
.project-card__media:hover .project-card__image,
.project-card__media:hover .project-card__phone {
transform: none;
}
}
/* --- Showroom — широкая плашка без картинки -----------------------------
Кейс живёт в Figma, скриншота для карточки нет. Вместо подложки с картинкой
плашка на всю ширину сетки: заголовок слева, кнопка справа. Фон бледно-серый,
контур светлый — так единственная заметная обводка внутри плашки
у кнопки, и плашка не спорит с цветными подложками карточек выше.
Контур, радиус и отступы перекликаются с «Сильными сторонами»: тот же
светлый --color-line, 32px по бокам — как до иконки в ячейке, 24px сверху
и снизу — как снизу в ячейке.
Отступ сверху 30px — тот же вертикальный шаг, что между рядами карточек. */
.showroom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: 30px;
padding: var(--space-4) 32px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-m);
}
/* Текстовый стиль H4 — тот же, что у заголовка карточки проекта */
.showroom__title {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
color: var(--color-heading);
}
/* Кнопка не сжимается: текст плашки длинный и перетягивает её на себя.
Ниже обычной (48 вместо 60) — иначе она задаёт высоту всей плашки.
Справа отступ меньше, чем слева: справа стоит стрелка, и при равных
отступах воздуха за ней кажется больше, чем перед текстом. */
.showroom__button {
--arrow-gap: var(--space-2);
flex-shrink: 0;
height: 48px;
padding-inline: 32px 28px;
}
/* На мобильном кнопка уезжает под текст и тянется на всю ширину.
Отступы 16px со всех сторон — как в ячейках «Сильных сторон» на этой ширине. */
@media (max-width: 640px) {
.showroom {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-3);
}
}
/* --- Timeline (опыт) ----------------------------------------------------
Колонки как в макете: период 96px, компания с цветной точкой, описание 424px.
Цвет точки передаётся из разметки через --dot-color. */
.timeline__item {
display: grid;
grid-template-columns: 96px 1fr 424px;
align-items: center;
column-gap: 30px;
padding-block: 20px;
border-bottom: 1px solid var(--color-line);
}
.timeline__item:first-child {
padding-top: 0;
}
.timeline__item:last-child {
border-bottom: 0;
}
/* Текстовый стиль H4 */
.timeline__company {
position: relative;
font-size: var(--font-size-h4);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
color: var(--color-heading);
}
.timeline__company::before {
content: '';
position: absolute;
top: 50%;
left: -14px;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--dot-color);
transform: translateY(-50%);
}
/* Текстовый стиль Body */
.timeline__text {
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
/* На узком экране период и компания встают в одну строку, описание уходит под них.
Колонка auto сжимает бейдж по содержимому, точка остаётся в зазоре между ними. */
@media (max-width: 800px) {
.timeline__item {
grid-template-columns: auto 1fr;
column-gap: 20px;
row-gap: var(--space-2);
}
.timeline__text {
grid-column: 1 / -1;
}
}
/* --- Skills (навыки) ---------------------------------------------------- */
.skills {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 640px) {
.skills {
gap: 8px;
}
}
/* --- Features (сильные стороны): сетка 2×2 в рамке с разделителями ------ */
.features {
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: var(--radius-m);
}
/* Правый отступ меньше левого — так в оригинале: иконка стоит в 32px от края,
а текстовому блоку остаётся 344px. При 316px длинная фраза в первой ячейке
переносится на четвёртую строку. */
.features__item {
padding: 28px 4px 24px 32px;
}
.features__item:nth-child(odd) {
border-right: 1px solid var(--color-line);
}
.features__item:nth-child(-n + 2) {
border-bottom: 1px solid var(--color-line);
}
/* Текстовый стиль Body */
.features__text {
margin-top: var(--space-3);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
/* В одну колонку уже при 800px, а не при 640: ниже этой ширины контейнер
сжимается, текстовому блоку не хватает 344px и фразы уходят на лишнюю строку. */
/* На узком экране ячейки идут в столбик, а внутри ячейки иконка встаёт
слева от текста: так высота строки не растёт втрое. */
@media (max-width: 800px) {
.features {
grid-template-columns: 1fr;
}
.features__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
}
.features__item:nth-child(odd) {
border-right: 0;
}
.features__item:not(:last-child) {
border-bottom: 1px solid var(--color-line);
}
.features__item .icon-box {
width: 36px;
height: 36px;
}
.features__text {
margin-top: 0;
}
}
/* На телефоне текст занимает три-четыре строки, и центрированная иконка
повисала бы в середине — там она прижата к верху. */
@media (max-width: 640px) {
.features__item {
align-items: flex-start;
}
}
/* --- Arrow link — стрелка в ссылке или кнопке ---------------------------
Размеры из Tilda: стрелка 22px, отступ до текста 12px, при наведении
она уезжает на 8px в свою сторону. Класс отвечает только за стрелку,
поэтому сочетается и с .button, и с самостоятельной ссылкой. */
.arrow-link {
display: inline-flex;
align-items: center;
/* Отступ можно уменьшить снаружи: в компактной кнопке 12px слишком много. */
gap: var(--arrow-gap, 12px);
}
/* «Домой» — отдельная ссылка, текстовый стиль Action */
.arrow-link--text {
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.2px;
transition: color 0.3s ease-in-out;
}
.arrow-link--text:hover {
color: var(--color-text-muted);
}
.arrow-link svg,
.arrow-link__icon {
width: 22px;
height: 22px;
transition: transform 0.2s ease-in-out;
}
/* Стрелка из файла в assets/icons. Подключается маской, а не картинкой:
у маски виден только силуэт, цвет даёт background — поэтому иконка
красится currentColor, как и нарисованные здесь же стрелки.
Файл приходит из разметки: style="--arrow-icon: url(/assets/icons/…)" */
.arrow-link__icon {
background: currentColor;
-webkit-mask: var(--arrow-icon) center / contain no-repeat;
mask: var(--arrow-icon) center / contain no-repeat;
}
.arrow-link:hover svg,
.arrow-link:hover .arrow-link__icon {
transform: translateX(-8px);
}
/* Стрелка смотрит вперёд — уезжает вправо */
.arrow-link--forward:hover svg,
.arrow-link--forward:hover .arrow-link__icon {
transform: translateX(8px);
}
/* Стрелка по диагонали — внешняя ссылка. Уезжает вверх-вправо совсем чуть,
по 1px на ось: до текста у неё всего 8px, и любой сдвиг вправо читается
как разрыв между текстом и стрелкой. */
.arrow-link--diagonal:hover svg,
.arrow-link--diagonal:hover .arrow-link__icon {
transform: translate(1px, -1px);
}
@media (prefers-reduced-motion: reduce) {
.arrow-link:hover svg,
.arrow-link--forward:hover svg,
.arrow-link--diagonal:hover svg,
.arrow-link:hover .arrow-link__icon {
transform: none;
}
}
/* --- Case cover — обложка кейса -----------------------------------------
Порядок как в оригинале: «Домой», заголовок, теги, вводный текст. */
.case-cover {
padding-top: var(--space-6);
}
/* Текстовый стиль H1 */
.case-cover__title {
margin-top: var(--space-5);
font-size: var(--font-size-h1);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
color: var(--color-heading);
}
.case-cover__tags {
--badge-padding: 18px;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-4);
}
.case-cover__intro {
margin-top: var(--space-5);
}
/* Отступ сжимается вместе с картинкой: ниже 1200px она начинает
/* Отступ такой же, как «текст → картинка» внутри страницы: обложка
относится к вводному абзацу над ней, а не начинает новый блок.
Поэтому он меньше, чем расстояние между блоками (48 / 40). */
.case-cover__media {
margin-top: var(--space-5);
}
/* Узкую версию обложки подставляет в разметке — так браузер
скачивает только подходящую, а не обе. */
.case-cover__media img {
width: 100%;
border-radius: var(--radius-m);
}
@media (max-width: 640px) {
.case-cover {
padding-top: var(--space-5);
}
}
/* --- Case section — подзаголовок и текст -------------------------------- */
/* Лесенка отступов кейса, от тесного к свободному:
картинка → подпись, текст → картинка, блок → блок.
На десктопе 24 / 40 / 48, на телефоне 16 / 24 / 48.
48px записано числом: в шкале отступов шага между 40 и 64 нет. */
.case-section {
margin-top: 48px;
}
/* Правило стоит до модификатора --tight, чтобы тот сохранил свой
меньший отступ и на телефоне. */
@media (max-width: 640px) {
.case-section {
margin-top: var(--space-5);
}
}
/* Раздел, который продолжает предыдущий, а не начинает новую мысль:
например, финальное «Благодарю за внимание!» после «Итогов». */
.case-section--tight {
margin-top: var(--space-4);
}
/* Текстовый стиль Subtitle */
.case-section__title {
margin-bottom: var(--space-3);
font-size: var(--font-size-subtitle);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
color: var(--color-heading);
}
/* Текстовый стиль Body L — основной текст кейса */
.case-text {
font-size: var(--font-size-body-l);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-loose);
}
.case-text + .case-text {
margin-top: var(--space-3);
}
/* --- Figure — картинка с подписью --------------------------------------- */
.figure {
margin-top: var(--space-5);
}
.figure__image {
width: 100%;
border-radius: var(--radius-m);
}
/* В одном блоке может быть несколько картинок с общей подписью */
.figure__image + .figure__image {
margin-top: var(--space-4);
}
/* Текстовый стиль Caption */
/* Картинка во всю широкую колонку, а подпись под ней выравнивается
по левому краю текста: ограничиваем её шириной текстовой колонки. */
.figure__caption {
max-width: var(--container-width);
margin-top: var(--space-4);
margin-inline: auto;
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-loose);
color: var(--color-text-caption);
}
/* На телефоне картинки идут во всю ширину экрана, без боковых полей
и без скругления — как в оригинале. Подпись отступы сохраняет. */
@media (max-width: 640px) {
.case-cover__media,
.figure,
.slider {
padding-inline: 0;
}
/* Меньше, чем отступ перед текстом (40px): картинка относится
к абзацу над ней, а не начинает новый раздел. */
.case-cover__media,
.figure,
.slider {
margin-top: var(--space-4);
}
.case-cover__media img,
.figure__image,
.slider__image {
border-radius: 0;
}
/* Подпись ближе всего к своей картинке — меньше, чем отступ
перед картинкой (24px) и перед следующим разделом (40px). */
.figure__caption {
margin-top: var(--space-3);
padding-inline: var(--container-padding);
}
}
/* --- Case list — пункты с подзаголовком --------------------------------- */
.case-list__item + .case-list__item {
margin-top: var(--list-gap, var(--space-3));
}
.case-list__title {
font-size: var(--font-size-body-l);
line-height: var(--line-height-loose);
}
/* Body L, но bold: подзаголовок внутри пункта и финальная строка кейса.
В оригинале у обоих 700. */
.case-list__title,
.case-text--strong {
font-weight: var(--font-weight-bold);
color: var(--color-heading);
}
.case-list__text {
font-size: var(--font-size-body-l);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-loose);
}
/* Маркер-иконка вместо точки. Картинка и зазор между пунктами приходят
из разметки: style="--list-icon: url(/assets/icons/flash.svg)" */
/* Иконка относится только к первой строке пункта: в «Итогах» это
подзаголовок, а абзац под ним возвращается к левому краю колонки. */
/* text-indent, а не padding: сдвигается только первая строка, а перенос
возвращается к левому краю и проходит под иконкой — как в оригинале. */
.case-list--icon .case-list__item > :first-child {
position: relative;
text-indent: 32px;
}
.case-list--icon .case-list__item > :first-child::before {
content: '';
position: absolute;
top: 0.4em;
left: 0;
width: 20px;
height: 20px;
background: var(--list-icon) center / contain no-repeat;
}
/* Нумерация вшита в текст жирными цифрами, поэтому пункты идут вплотную */
.case-list--numbered {
--list-gap: 0px;
}
/* Обычное перечисление внутри абзаца: возвращаем браузерный маркер,
он сам даёт висячий отступ. Пункты идут вплотную. */
.case-list--bullet {
--list-gap: 0px;
padding-left: var(--space-4);
list-style: disc;
}
/* --- Slider — прокрутка с прилипанием ------------------------------------
Без библиотек: листание пальцем, колесом и клавишами даёт сам браузер,
скриптом добавлены только стрелки (js/components/slider.js). */
.slider {
position: relative;
margin-top: var(--space-5);
}
.slider__track {
display: flex;
gap: var(--space-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.slider__track::-webkit-scrollbar {
display: none;
}
.slider__slide {
flex: 0 0 100%;
scroll-snap-align: start;
}
.slider__image {
width: 100%;
border-radius: var(--radius-m);
}
.slider__arrow {
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: var(--color-surface);
border: 0;
border-radius: var(--radius-full);
cursor: pointer;
transform: translateY(-50%);
transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/* Лёгкое затемнение, без резкого контраста */
.slider__arrow:not([disabled]):hover {
background: var(--color-surface-hover);
}
/* Кнопки стоят снаружи картинки: 40px ширины плюс 28px зазора */
.slider__arrow--prev { left: -68px; }
.slider__arrow--next { right: -68px; }
.slider__arrow svg {
width: 14px;
height: 14px;
}
.slider__arrow[disabled] {
opacity: 0.3;
cursor: default;
}
/* Снаружи места уже не хватает — кнопки заходят на края картинки */
@media (max-width: 1360px) {
.slider__arrow--prev { left: var(--space-3); }
.slider__arrow--next { right: var(--space-3); }
}
/* На узких экранах остаются свайп и точки */
@media (max-width: 800px) {
.slider__arrow {
display: none;
}
}
/* --- Точки слайдера ------------------------------------------------------
Кнопка 20px ради удобного попадания, сама точка 8px. */
.slider__dots {
display: flex;
justify-content: center;
margin-top: var(--space-4);
}
.slider__dot {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.slider__dot::before {
content: '';
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-text);
opacity: 0.2;
transition: opacity 0.3s ease-in-out;
}
/* Правило наведения стоит до активного, чтобы активная точка
оставалась полностью чёрной и под курсором. */
.slider__dot:hover::before {
opacity: 0.45;
}
.slider__dot--active::before {
opacity: 1;
}
/* --- Case nav — переход к соседним кейсам -------------------------------- */
/* Две кнопки делят текстовую колонку поровну */
.case-nav {
display: flex;
gap: var(--space-3);
/* 56px — значение из оригинала, в шкале отступов такого шага нет */
margin-top: 56px;
margin-bottom: var(--section-gap);
}
.case-nav .button {
flex: 1;
padding-inline: var(--space-4);
}
/* Две кнопки в строку не помещаются — ставим столбиком.
Ширину во всю строку даёт правило .button в секции Atoms. */
@media (max-width: 640px) {
.case-nav {
flex-direction: column;
}
/* В столбике flex: 1 растянул бы кнопки по высоте */
.case-nav .button {
flex: none;
}
}
/* ==========================================================================
7. PAGES
Только то, что существует в одном экземпляре. Блоки страниц кейсов
(обложка, слайдер, галерея) повторяются шесть раз и пойдут в BLOCKS.
========================================================================== */
/* --- Главная: приветствие ----------------------------------------------- */
.hero {
padding-block: var(--section-gap) 160px;
}
/* Текстовый стиль H3 */
.hero__text,
.contacts__title {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
color: var(--color-heading);
}
.hero__emoji {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: -0.2em;
}
.hero__photo {
display: block;
width: 126px;
height: 126px;
/* Фото заходит на последнюю строку текста на 8px — в Tilda было 7px */
margin: -8px 74px 0 auto;
border-radius: var(--radius-full);
}
/* На мобильном фото поднимается над текстом и прижимается к левому краю */
@media (max-width: 640px) {
.hero {
display: flex;
flex-direction: column;
padding-block: var(--space-4) var(--space-6);
}
/* 121px — размер из Tilda на экранах до 479px (на десктопе 126px) */
.hero__photo {
order: -1;
width: 121px;
height: 121px;
margin: 0 0 var(--space-4);
}
}
/* Анимации эмодзи по наведению, перенесены из Tilda */
.hero__emoji--wave:hover {
animation: emoji-wave 1.2s ease-in-out;
}
.hero__emoji--heart:hover {
animation: emoji-pulse 1.1s infinite;
}
/* Размеры и позиции звёзд взяты из Tilda (кластер 34×31px при тексте 30px) */
.sparkles {
position: relative;
display: inline-block;
width: 1.13em;
height: 1.03em;
margin-left: 0.1em;
vertical-align: -0.2em;
}
.sparkles__star {
position: absolute;
height: auto;
}
.sparkles__star--a { left: 0.27em; top: 0; width: 0.87em; }
.sparkles__star--b { left: 0.13em; top: 0; width: 0.3em; }
.sparkles__star--c { left: 0; top: 0.57em; width: 0.37em; }
.sparkles:hover .sparkles__star--a { animation: sparkle-a 2s ease-in-out; }
.sparkles:hover .sparkles__star--b { animation: sparkle-b 2s ease-in-out; }
.sparkles:hover .sparkles__star--c { animation: sparkle-c 2.1s ease-in-out; }
@keyframes emoji-wave {
25% { transform: rotate(18deg); }
75% { transform: rotate(-18deg); }
100% { transform: rotate(0); }
}
@keyframes emoji-pulse {
0% { transform: scale(1); }
18% { transform: scale(0.96); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
64% { transform: scale(1.08); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
100% { transform: scale(1); }
}
@keyframes sparkle-a {
20% { transform: scale(0.9); }
45% { transform: scale(1.08); }
75% { transform: scale(0.9); }
100% { transform: scale(1); }
}
@keyframes sparkle-b {
20% { transform: scale(1.08); }
45% { transform: scale(0.94); }
75% { transform: scale(1.06); }
100% { transform: scale(1); }
}
@keyframes sparkle-c {
19% { transform: scale(1.08); }
48% { transform: scale(0.92); }
76% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero__emoji--wave:hover,
.hero__emoji--heart:hover,
.sparkles:hover .sparkles__star {
animation: none;
}
}
/* --- Главная: проекты --------------------------------------------------- */
.projects__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px var(--space-5);
}
@media (max-width: 640px) {
.projects__grid {
grid-template-columns: 1fr;
}
}
/* --- Страница 404 -------------------------------------------------------- */
.notfound {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
min-height: 60vh;
padding-block: var(--section-gap);
text-align: center;
}
/* --- Главная: контакты -------------------------------------------------- */
.contacts {
padding-top: 50px;
text-align: center;
}
.contacts__title {
margin-bottom: var(--space-4);
}
/* Текстовый стиль Action */
.contacts__alt {
margin-top: var(--space-3);
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
}
.contacts__alt span {
margin-right: var(--space-1);
font-weight: var(--font-weight-regular);
font-style: italic;
opacity: 0.5;
}
/* На мобильном блок выравнивается по левому краю, а не по центру.
Принудительный перенос в заголовке рассчитан на широкую строку: на узком
экране он оставляет висящее слово, поэтому текст переносится сам. */
@media (max-width: 640px) {
.contacts {
text-align: left;
}
/* Призыв почти не уменьшается: 30 → 28px, тогда как приветствие
падает с 30 до 22px. Берём размер H2 — свой токен заводить незачем. */
.contacts__title {
font-size: var(--font-size-h2);
}
}