/* ===== About Page - Start ===== */
/* Макет: 1920 `492:15460`, 1480 `492:15944`, 375 `492:16400`
(останній підписаний «Гуртовим клієнтам 1481» — ім'я бреше, див. коментар у about-us.php).
Ритм сторінки: між секціями 160 / 150 / 80, від заголовка секції до вмісту 80 / 60 / 10.
Перші два числа збігаються з рештою сторінок проекту; третє своє — на 375 дизайнер
притиснула картки до заголовка майже впритул (9 px між боксами), і це видно на рендері,
тому коробкові 40 тут не ставимо.
🔴 Інтерліньяж Forum на цій сторінці 1.16, а не коробковий 0.9 — відоме виключення,
про нього прямо написано в шапці `base/02-text.css`. Ставимо контекстним правилом
сторінки, базу не чіпаємо. Але виключення НЕ суцільне: h1 тримає 1.16 на всіх трьох
тирах (65 / 56 / 39), а заголовки секцій — тільки на 1920 і 1480; на 375 вони
повертаються до коробкових 31 (виміряно: Forum 34 / 30.6). */
/* About Intro - Start */
/* Дві колонки: фото ліворуч на всю висоту тексту, текст праворуч.
Ширини сходяться з сіткою теми самі: на 1920 фото 4 колонки (613 проти 612 у макеті),
текст 6 колонок (930 — точно), між ними порожні 2; на 1480 текст займає 7 колонок (832).
Свого padding-top тут немає навмисно: блок крихт теми вже несе 20 + 20, і разом
з текстом дає ті самі 62 px, що в макеті займає смуга крихт (24 + 12 + 24 = 60).
Додати сюди ще 24 — зсунути H1 на 26 px униз; так само зроблено на сусідніх
сторінках проекту (b2b.php). */
.about-page .about-intro .container {
row-gap: 60px;
}
.about-page .about-intro-media {
grid-column: 1 / span 4;
grid-row: 1 / span 2;
}
.about-page .about-intro-lead,
.about-page .about-intro-more {
display: flex;
flex-direction: column;
grid-column: 7 / -1;
}
.about-page .about-intro-lead {
grid-row: 1;
gap: 60px;
}
.about-page .about-intro-more {
grid-row: 2;
gap: 60px;
}
/* Фото тягнеться за висотою тексту — так його низ сходиться з другою лінією,
як у макеті (там фото 765 і низ рівно на `Line 56`). */
.about-page .about-intro-media,
.about-page .about-intro-media img {
display: block;
width: 100%;
height: 100%;
}
.about-page .about-intro-media img {
object-fit: cover;
}
.about-page .about-intro h1 {
line-height: 65px;
}
/* Абзаци йдуть у дві колонки — у макеті 455 + 20 + 455 на 1920 і 404 + 24 + 404 на 1480;
обидва проміжки зводимо до `--blocks-indent`. */
.about-page .about-intro-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--blocks-indent);
}
/* Тонка лінія-роздільник, `Line 55` і `Line 56`. Такий самий 1px чорного 16%,
як вертикальні лінії між картками нижче і як лінії умов на B2B-лендінгу.
Роздільник — border на порожньому елементі, як вимагає `dividers.md`; тег
не вживаємо.
Колір не `--border` (#dadada), а літерал з макета: на кремовому тлі цього проекту
дизайнер скрізь веде лінії чорним з alpha 0.16; окремого токена під нього в базі поки немає. */
.about-page .about-rule {
display: block;
border-bottom: 1px solid rgb(0 0 0 / 16%);
}
/* About Intro - End */
/* About Advantages - Start */
.about-page .about-advantages {
padding-top: 160px;
padding-bottom: 160px;
}
.about-page .about-section-title {
line-height: 65px;
margin-bottom: 80px;
}
/* Картка: іконка, під нею назва й опис, усе по центру.
Вертикальні лінії — межі комірок, тому самі тягнуться на всю висоту ряду. */
.about-page .about-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 0 10px;
}
.about-page .about-card:not(:nth-child(4n)) {
border-right: 1px solid rgb(0 0 0 / 16%);
}
.about-page .about-card-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
/* Опис у макеті вужчий за картку (380 із 455) і відцентрований. */
.about-page .about-card-text p:last-child {
max-width: 380px;
}
.about-page .about-card-icon {
width: var(--icon-medium);
height: var(--icon-medium);
}
/* About Advantages - End */
/* About CTA - Start */
/* Смуга на всю ширину: ліворуч текст, праворуч фото до краю екрана.
Тло смуги — `--light-gray` (#fcf9f3), світліше за кремове тло сторінок. */
.about-page .about-cta {
position: relative;
overflow: hidden;
margin-bottom: 160px;
}
/* Декоративні завитки. Це не два окремі файли з ручним позиціюванням, а один шар
на всю смугу: SVG знято композитом самої смуги з прихованим вмістом, тому обидва
завитки вже стоять на своїх місцях і обрізані так само, як у макеті.
Свій файл на тир — пропорції смуги між тирами різні. */
.about-page .about-cta-decor {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("/wp-content/themes/shop/img/page-about/swirls.svg") no-repeat center / 100% 100%;
}
.about-page .about-cta .container {
position: relative;
z-index: 1;
}
.about-page .about-cta-content {
justify-content: flex-end;
gap: 24px;
padding: 0 40px 40px;
}
/* Від заголовка до тексту 32, від тексту до кнопок 24 — на всіх трьох тирах однаково. */
.about-page .about-cta-content .h2 {
line-height: 65px;
margin-bottom: 8px;
}
.about-page .about-cta-text {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-page .about-cta-actions {
margin-top: 0;
}
/* Пропорція фото знята з макета окремо на кожному тирі: 934×580 на 1920 і 730×493
на 1480 — це різні кадри (1.61 проти 1.48), одним aspect-ratio не обійтися.
Числа саме такі, бо мост віддає ноду вже обрізаною клипящим фреймом. */
.about-page .about-cta-media {
aspect-ratio: 934 / 580;
}
.about-page .about-cta-image,
.about-page .about-cta-image img {
display: block;
width: 100%;
height: 100%;
}
.about-page .about-cta-image img {
object-fit: cover;
}
/* About CTA - End */
@media (max-width: 1680px) {
.about-page .about-intro .container {
row-gap: 40px;
}
.about-page .about-intro-lead,
.about-page .about-intro-more {
grid-column: 6 / -1;
gap: 40px;
}
.about-page .about-intro h1,
.about-page .about-section-title,
.about-page .about-cta-content .h2 {
line-height: 56px;
}
.about-page .about-advantages {
padding-top: 150px;
padding-bottom: 150px;
}
.about-page .about-section-title {
margin-bottom: 60px;
}
.about-page .about-card-text p:last-child {
max-width: 300px;
}
.about-page .about-cta {
margin-bottom: 150px;
}
.about-page .about-cta-decor {
background-image: url("/wp-content/themes/shop/img/page-about/swirls-1480.svg");
}
.about-page .about-cta-content {
padding: 0 20px 20px;
}
.about-page .about-cta-media {
aspect-ratio: 730 / 493;
}
}
@media (max-width: 1279px) {
/* Порядок стовпчиком інший, ніж у DOM: заголовок і перші абзаци, потім фото,
і вже під ним друга група тексту. Лінії-роздільники на 375 не намальовані. */
.about-page .about-intro .container {
row-gap: 24px;
}
.about-page .about-intro-lead,
.about-page .about-intro-more,
.about-page .about-intro-media {
grid-column: 1 / -1;
grid-row: auto;
}
/* Макет 375 дає фото 355×380. У діапазоні 481–1279 та сама пропорція розтягнула б
кадр на півекрана заввишки (на 1024 — 1080px), тому там ширший кадр.
Макет цей діапазон не покриває — це доведення, а не число з нод. */
.about-page .about-intro-media {
order: 1;
aspect-ratio: 3 / 2;
}
.about-page .about-intro-more {
order: 2;
gap: 16px;
}
.about-page .about-intro-lead {
gap: 48px;
}
.about-page .about-intro h1 {
line-height: 39px;
}
/* На 375 заголовки секцій повертаються до коробкового інтерліньяжу (Forum 34 / 30.6),
виключення 1.16 діє тільки на десктопних тирах. */
.about-page .about-section-title,
.about-page .about-cta-content .h2 {
line-height: 31px;
}
.about-page .about-rule {
display: none;
}
.about-page .about-advantages {
padding-top: 80px;
padding-bottom: 80px;
}
.about-page .about-section-title {
margin-bottom: 10px;
}
/* На планшеті дві колонки — як у сітці умов на B2B-лендінгу. Макет цей
діапазон не покриває; одна колонка на 1009px давала рядки по ~140 знаків.
Лінії — межі комірок: вертикальна між парою, горизонтальна між рядами. */
.about-page .about-card {
gap: 24px;
padding: 24px 10px;
}
.about-page .about-card:not(:nth-child(4n)) {
border-right: 0;
}
.about-page .about-card:nth-child(odd) {
border-right: 1px solid rgb(0 0 0 / 16%);
}
.about-page .about-card:not(:nth-last-child(-n + 2)) {
border-bottom: 1px solid rgb(0 0 0 / 16%);
}
.about-page .about-card-text {
gap: 16px;
}
.about-page .about-card-text p:last-child {
max-width: none;
}
.about-page .about-card-icon {
width: var(--icon-small);
height: var(--icon-small);
}
.about-page .about-cta {
margin-bottom: 80px;
}
.about-page .about-cta-decor {
background-image: url("/wp-content/themes/shop/img/page-about/swirls-mob.svg");
}
/* Великий відступ згори — місце під завиток, як у макеті (текст починається зі 148). */
.about-page .about-cta-content {
padding: 148px 10px 24px;
}
/* Кнопки стають стовпчиком і вирівнюються по ширшій із них (230 у макеті),
а не розтягуються на всю ширину екрана. */
.about-page .about-cta-actions {
flex-direction: column;
width: fit-content;
}
.about-page .about-cta-actions .btn {
width: 100%;
}
.about-page .about-cta-media {
aspect-ratio: 375 / 252;
}
}
@media (max-width: 768px) {
/* Телефон: одна колонка всюди, лінії між картками горизонтальні — як у макеті 375. */
.about-page .about-intro-cols {
grid-template-columns: 1fr;
gap: 16px;
}
.about-page .about-card {
padding: 24px 0;
}
.about-page .about-card:nth-child(odd) {
border-right: 0;
}
.about-page .about-card:not(:nth-last-child(-n + 2)) {
border-bottom: 0;
}
.about-page .about-card + .about-card {
border-top: 1px solid rgb(0 0 0 / 16%);
}
.about-page .about-card:first-child {
padding-top: 0;
}
.about-page .about-card:last-child {
padding-bottom: 0;
}
}
@media (max-width: 480px) {
/* Тут перемикається на мобільний кадр — й пропорція стає макетною (355×380). */
.about-page .about-intro-media {
aspect-ratio: 355 / 380;
}
}
/* ===== About Page - End ===== */