05. style.css: шапка и общие элементы

Разбираем две следующие секции — 2 (шапка и навигация) и 3 (общие элементы). Здесь появляются те самые «кирпичи» интерфейса, из которых собирается каждая страница: шапка с логотипом, меню, бургер, заголовки, кнопки.

Секция 2: шапка и навигация

Шапка — визитная карточка сайта. Она одинакова на всех страницах, потому что целиком собрана из двух partials (header.html и nav.html). А вот стили для неё живут здесь, в Секции 2.

2.1. Контейнер шапки — .header

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 4px solid #2b6f9c;
  padding-bottom: 15px;
  margin-bottom: 40px;
  position: relative;
}

Восемь свойств. Разбираем каждое — они тут все важные.

display: flex — включает flexbox. Это режим раскладки, при котором дочерние элементы становятся гибкими: их можно выстроить в строку, развести по краям, выровнять по вертикали. Почти вся современная вёрстка — на flexbox.

align-items: center — выравнивание по поперечной оси. Здесь flex-направление — строка (по умолчанию flex-direction: row), значит поперечная ось — вертикаль. Свойство говорит: «выровняй все элементы по центру по вертикали». Логотип, текст и бургер встанут на одной высоте.

justify-content: space-between — распределение по главной оси (горизонталь). Значение space-between означает: «первый элемент прижми к левому краю, последний — к правому, между остальными раздели пространство поровну».

flex-wrap: wrap — разрешение переноса. Если элементы не помещаются в одну строку — они переносятся на следующую. Без этого свойства flex-контейнер пытался бы втиснуть всё в одну строку, сжимая элементы до нечитаемости.

border-bottom: 4px solid #2b6f9c — нижняя граница. Это та самая синяя полоска под шапкой. Свойство — сокращённая запись трёх:

border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #2b6f9c;

Читается как «снизу — граница толщиной 4 пикселя, сплошная, цвет — акцентный синий».

padding-bottom: 15px — внутренний отступ снизу. Отодвигает содержимое шапки от синей линии, чтобы логотип не «прилипал» к границе.

margin-bottom: 40px — внешний отступ снизу. Отодвигает следующие секции от шапки. Без этого отступа первая белая секция наехала бы прямо на синюю линию.

position: relative — устанавливает «точку отсчёта» для дочерних элементов с абсолютным позиционированием. Сейчас у нас таких нет, но свойство оставлено как «страховка»: если понадобится позиционировать что-то внутри шапки абсолютно — оно уже готово.

2.2. Левая группа — .header-left

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

Обёртка вокруг логотипа и текстовой группы. Тоже flex — чтобы логотип и текст выстроились в строку и выровнялись по вертикальному центру.

gap: 20px — расстояние между дочерними элементами. Это современная альтернатива старым трюкам с margin-right у каждого элемента. Одно свойство — и все промежутки одинаковые, без «лишнего» отступа справа у последнего элемента.

2.3. Логотип — .header .icon

.header .icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

Селектор .header .icon — это не «класс .header .icon» (такого не бывает), а «элемент с классом .icon внутри элемента с классом .header». Читается справа налево: «найди все .icon, у которых есть предок .header».

width: 48px; height: 48px; — размеры квадрата. Логотип-SVG без явных размеров попытался бы занять всю доступную ширину — а нам нужен аккуратный квадрат.

flex-shrink: 0 — запрет на сжатие. По умолчанию flex-элементы могут сжиматься, если места не хватает. Логотип сжиматься не должен — он либо есть в нормальном размере, либо пусть лучше переносится на следующую строку (у нас же flex-wrap: wrap).

2.4. Текстовая группа — .header-text

.header-text h1 {
  font-weight: 700;
  font-size: 1.4rem;
  color: #0b1a2b;
  letter-spacing: -0.5px;
  margin: 0;
}

.header-text .sub {
  font-weight: 300;
  font-size: 0.85rem;
  color: #4d6885;
}

Разбираем два селектора.

.header-text h1 — заголовок первого уровня внутри шапки. Свойства:

• font-weight: 700 — жирность. 700 — это «жирный». Обычный текст — 400, тонкий — 300.
• font-size: 1.4rem — размер. rem — это «относительно корневого шрифта». Если корневой 16 пикселей (по умолчанию), то 1.4rem = 22.4px. Использование rem вместо пикселей — «правильный» способ: пользователь может увеличить базовый шрифт в настройках браузера, и весь сайт масштабируется.
• color: #0b1a2b — почти чёрный, чуть синеватый. Не путать с основным #1e2a3a — тот светлее.
• letter-spacing: -0.5px — межбуквенное расстояние. Отрицательное значение сжимает буквы на полпикселя. Приём типографов: крупные заголовки без сжатия выглядят «разряженно».
• margin: 0 — обнуляем отступ. Хотя глобальный * уже обнулил, здесь дублируем — «на всякий случай», если кто-то переопределит *.

.header-text .sub — подзаголовок. Тонкий (300), маленький (0.85rem ≈ 13.6px), приглушённый цвет #4d6885. Визуально «уходит на второй план» — так и должно быть, это пояснение.

2.5. Бургер-кнопка — .burger

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  order: 2;
}

.burger span {
  display: block;
  width: 28px;
  height: 3px;
  background: #1a3a5c;
  border-radius: 2px;
  transition: all 0.3s ease;
}

Ключевое здесь — display: none в первой строке. Бургер скрыт по умолчанию. Он показывается только в медиа-запросе для мобильных — это разберём в Секции 9.

Остальные свойства сработают, когда бургер станет видимым:

• flex-direction: column — три полоски встанут вертикально.
• gap: 5px — между полосками 5 пикселей.
• background: none; border: none; — убираем стандартный вид кнопки браузера (серый фон, рамку). Стилизуем с нуля.
• cursor: pointer — при наведении курсор меняется на «палец». Пользователь понимает: это интерактивный элемент.
• padding: 5px — отступы внутри кнопки, чтобы увеличить область клика.
• order: 2 — управляет порядком flex-элементов. Мы задаём порядок вручную, чтобы бургер стоял на своём месте и на десктопе, и на мобильных (об этом в Секции 9).

.burger span — три полоски. Каждая — display: block (то есть занимает свою строку, не пытается встать рядом), ширина 28, высота 3, цвет тёмно-синий, скругление углов 2 пикселя.

transition: all 0.3s ease — плавные переходы. Когда позже бургер превратится в «крестик» (при клике), полоски будут поворачиваться не мгновенно, а за 0.3 секунды. Это приятнее глазу.

Состояние «крестика»:

.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

Класс active добавляет JavaScript при клике. Тогда:

• Первая полоска поворачивается на 45° и смещается вниз-вправо.
• Вторая полоска исчезает (opacity: 0).
• Третья поворачивается на −45° и смещается вверх-вправо.

Вместе первые две наклонные полоски образуют «галочку» крестика.

2.6. Навигация — .nav и .nav a

.nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  order: 1;
}

Тот же flex, что и в шапке. Расстояние между ссылками — 18 пикселей. flex-wrap: wrap — если ссылки не помещаются в строку, перенесутся. order: 1 — меню стоит раньше бургера (у которого order: 2) в порядке флекс-элементов.

.nav a {
  font-weight: 400;
  font-size: 0.95rem;
  color: #1a3a5c;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border 0.2s;
}

.nav a:hover { border-bottom-color: #33ff33; }
.nav a.active {
  border-bottom-color: #33ff33;
  font-weight: 500;
}

Каждая ссылка меню — как «мини-кнопка» с зелёным подчёркиванием при наведении и у активного пункта.

text-decoration: none — убирает стандартное подчёркивание ссылок. Оставили бы — выглядело бы как куча синих подчёркнутых строк.

border-bottom: 2px solid transparent — очень важная деталь. Ссылка получает нижнюю границу толщиной 2 пикселя, но прозрачную. Зачем? Затем, чтобы при наведении сменить только цвет границы, но не её толщину.

Если бы мы не поставили прозрачную границу сейчас, а просто добавили её при ховере — при наведении текст бы «дёрнулся» вниз на 2 пикселя, потому что появился бы новый элемент.

padding-bottom: 4px — расстояние от текста до границы. Без отступа подчёркивание прилипло бы к буквам.

transition: border 0.2s — плавно меняем border, а не all. Точное указание свойства чуть производительнее, чем all. При наведении цвет границы меняется за 0.2 секунды.

И наконец:

• .nav a:hover — при наведении граница становится зелёной #33ff33 (акцент бренда).
• .nav a.active — у активной ссылки граница постоянно зелёная, и текст чуть жирнее (500 вместо 400).

Секция 3: общие элементы

Это стили, которые работают почти на всех страницах. Секции, заголовки, абзацы, кнопки, CTA-блоки. Именно их использует HTML-разметка внутри каждой страницы.

3.1. Секция section

section {
  margin-bottom: 60px;
  background: #ffffff;
  border-radius: 12px;
  padding: 40px 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

Пять свойств — и обычный HTML-тег <section> превращается в красивую «карточку».

background: #ffffff — белый фон. На светло-сером фоне сайта (#f5f7fa) белые секции «выделяются» и выглядят как отдельные карточки.

border-radius: 12px — скругление углов радиусом 12 пикселей. Небольшое, но достаточное, чтобы блок не выглядел «брутальным прямоугольником».

padding: 40px 50px — внутренние отступы. Сверху и снизу 40, слева и справа 50. Содержимое не липнет к краям секции, есть «воздух».

box-shadow: 0 4px 20px rgba(0,0,0,0.05) — тень. Разберём запись:

• 0 — смещение по горизонтали. 0 = тень по центру, не вбок.
• 4px — смещение по вертикали. 4 = тень «опущена» на 4 пикселя вниз.
• 20px — размытие. Чем больше, тем мягче тень.
• rgba(0,0,0,0.05) — цвет. Чёрный с прозрачностью 5%. Именно из-за низкой прозрачности тень лёгкая, почти незаметная — но объём придаёт.

margin-bottom: 60px — расстояние между секциями. Не 10, не 20 — 60 пикселей. Секции должны «дышать».

3.2. Заголовки h2, h3, h4

h2 {
  font-weight: 500;
  font-size: 1.8rem;
  color: #1a3a5c;
  border-left: 6px solid #2b6f9c;
  padding-left: 18px;
  margin-bottom: 25px;
}

h3 {
  font-weight: 500;
  font-size: 1.3rem;
  color: #2c3e50;
  margin: 20px 0 10px 0;
}

h4 {
  font-weight: 500;
  font-size: 1.1rem;
  color: #1a3a5c;
  margin: 15px 0 5px 0;
}

Все три заголовка используют font-weight: 500 — «средняя жирность». Не 400 (обычный) и не 700 (жирный). Такой выбор — фирменный приём, делает заголовки заметными, но не «кричащими».

Разница между уровнями — в размере и отступах.

h2 — самый крупный, с синей вертикальной полосой слева:

• border-left: 6px solid #2b6f9c — вертикальная линия толщиной 6 пикселей слева.
• padding-left: 18px — отступ между полосой и текстом.
• margin-bottom: 25px — большой отступ снизу до следующего содержимого.

Эта полоса — визуальный маркер: «здесь начинается крупный раздел».

h3 — без полосы, меньше размером. margin: 20px 0 10px 0 — сокращённая запись:

margin-top: 20px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;

Читается: «20 пикселей сверху, 0 справа, 10 снизу, 0 слева». Сокращение из четырёх значений идёт по часовой стрелке: верх, право, низ, лево.

h4 — самый маленький, используется внутри карточек и блоков. Отступы минимальные.

3.3. Абзацы и списки

p, li {
  font-weight: 300;
  font-size: 1.05rem;
  color: #2d3f54;
}

ul, ol { padding-left: 25px; margin-bottom: 18px; }
li { margin-bottom: 6px; text-align: justify; }

Селектор p, li через запятую означает: «применить правило и к абзацам, и к пунктам списка». Одна запись — два типа элементов. Так короче, чем два отдельных правила.

font-weight: 300 — «тонкий». Обратите внимание: весь основной текст сайта — тонкий, а не обычный 400. Это создаёт «лёгкий» вид страниц.

text-align: justify — выравнивание по ширине. Абзац растягивается так, чтобы левый и правый край были ровными. Браузер добавляет дополнительные пробелы между словами. Спорный приём (иногда создаёт «рваные» интервалы), но для делового сайта — уместен.

3.4. Класс .text-block

.text-block {
  text-align: justify;
  text-indent: 1.5em;
  margin-bottom: 0.8em;
}

Класс для «классического» абзаца с красной строкой.

text-indent: 1.5em — отступ первой строки. em — «относительно текущего размера шрифта». То есть 1.5 размера шрифта. Для 16-пиксельного текста это ~24 пикселя. Так делают в книгах и документах.

margin-bottom: 0.8em — небольшой отступ между абзацами. Тоже в em, чтобы отступ «подстраивался» под размер шрифта.

3.5. Специальные заголовки

.hero-title {
  border-left: none;
  padding-left: 0;
  font-size: 2.4rem;
  margin-bottom: 25px;
}

.hero-lead { font-size: 1.2rem; }

.section-subtitle {
  border-left: 6px solid #2b6f9c;
  padding-left: 18px;
  font-weight: 500;
  margin-bottom: 18px;
}

Три дополнительных класса-модификатора для частных случаев.

.hero-title — главный заголовок на первой странице. Это h2, но без полосы слева (border-left: none) и крупнее (2.4rem ≈ 38px). Используется на главной и на странице 404.

.hero-lead — лид-абзац. Первый абзац после главного заголовка. Крупнее обычного (1.2rem против 1.05rem) — визуально «вводит в тему».

.section-subtitle — подзаголовок внутри секции с полосой слева. Отличается от h3 тем, что имеет ту самую синюю полосу. Применяется там, где по структуре нужен h3, но хочется визуально выделить его как «мини-h2».

3.6. Кнопка .btn

.btn {
  display: inline-block;
  background: #2b6f9c;
  color: #ffffff;
  padding: 12px 35px;
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}

.btn:hover { background: #1f5479; }

Один класс — два тега. .btn навешивается и на <a> (ссылки-кнопки, «Получить консультацию»), и на <button> (формы). Поэтому в правиле есть свойства и для одного, и для другого.

display: inline-block — «строчный блок». С одной стороны, ведёт себя как строчный — стоит рядом с текстом. С другой, у него можно задавать padding и width как у блочного. Обычный inline (у <a> по умолчанию) этого не позволяет.

padding: 12px 35px — просторные внутренние отступы. По бокам 35 пикселей — чтобы кнопка была «широкой», удобной для клика.

border: none — для тега <button> убираем стандартную рамку браузера. Если забыть это свойство, кнопки-button будут выглядеть иначе, чем кнопки-ссылки.

cursor: pointer — курсор-палец. Для <a> это по умолчанию, для <button> тоже. Но дублируем — на всякий случай.

.btn:hover — при наведении цвет меняется на более тёмный #1f5479. Тот же синий, но темнее на 15%. Классический приём: «кнопка нажалась».

3.7. CTA-блок .cta-block

.cta-block {
  margin: 30px 0 20px;
  padding: 20px 30px;
  background: #f5f9fe;
  border-radius: 8px;
  border-left: 4px solid #2b6f9c;
  font-weight: 400;
  font-size: 1.05rem;
  text-align: center;
  color: #1a3a5c;
}

CTA = Call To Action, «призыв к действию». Визуально — врезка с призывом связаться или обсудить проект.

background: #f5f9fe — очень светлый синеватый оттенок. Отличается от белого фона секции, но едва заметно — CTA не «кричит», а мягко приглашает.

border-left: 4px solid #2b6f9c — синяя полоса слева. Тот же приём, что у h2, — единый визуальный язык.

text-align: center — центрируем текст. Обычно текст в проекте выровнен по ширине, а CTA — по центру. Так привлекает внимание.

3.8. Блок-выноска .highlight-box

.highlight-box {
  background: #f0f6fc;
  border-left: 6px solid #2b6f9c;
  padding: 20px 28px;
  margin: 25px 0;
  border-radius: 0 8px 8px 0;
}
.highlight-box p { margin: 0; }

«Выноска» — блок для важной мысли. Применяется на страницах «Обо мне», «КП» и «Политика конфиденциальности».

border-radius: 0 8px 8px 0 — четыре значения по часовой стрелке: верх-лево, верх-право, низ-право, низ-лево. То есть у левых углов радиус 0 (прямые), у правых — 8px (скруглённые). Левая сторона плоская, потому что там полоса, правые углы скруглены.

.highlight-box p { margin: 0 } — последний абзац внутри выноски не имеет отступа снизу. Иначе был бы лишний «пустой» отступ внутри блока.

Итог

• Секция 2 — шапка: flexbox, space-between, gap, бургер с анимацией в «крестик».
• Секция 3 — общие элементы: секции, заголовки, абзацы, кнопки, CTA, выноски.
• Секции выглядят как белые карточки на сером фоне — за счёт background, border-radius, box-shadow.
• Единый визуальный язык: синяя полоса слева маркирует смысловые блоки.
• Тонкий шрифт (300) для основного текста, средний (500) для заголовков, жирный (700) для главного h1.
• Класс .btn работает и на ссылках, и на кнопках — один стиль для двух тегов.

Следующий раздел — Секции 4–6: сетки, карточки, футер, блок «Контакты».