/* ========================================================================== NÜKT — Base: reset, типографіка, контейнер, хедер, кнопки Залежить від css/variables.css (підключати ПІСЛЯ нього). ========================================================================== */ /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Якір зупиняється рівно під sticky-хедером. Саме висота хедера, а не кругле число: будь-який запас зверху — це смужка попередньої секції під хедером. Значення перемірює js/nav.js — на мобільному хедер вищий через тумблер бургера. */ scroll-padding-top: var(--header-height); } body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* страховка від випадкового горизонтального скролу */ } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* Єдиний видимий фокус на весь сайт */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- Утиліти -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .is-scroll-locked { overflow: hidden; } /* Поки js/i18n.js не підставив переклад, сторінка не показується — щоб не блимав англійський текст. Клас ставить інлайн-скрипт у лише для DE / FR і сам знімає його через 3 с, якщо рушій не завантажився. */ .i18n-pending body { visibility: hidden; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-padding-block); } .section--tint { background-color: var(--color-bg-tint); } .section--dark { background-color: var(--color-bg-dark); color: var(--color-text-inverse); } /* -------------------------------------------------------------------------- Типографічні блоки (з токенів макета) -------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--color-accent); font-size: var(--font-size-eyebrow); /* У макеті висота рядка 14px при 12px шрифті (leading normal). Успадкований --line-height-body: 1.5 дав би 18px і зсунув би вниз усе, що стоїть під шапкою секції. */ line-height: normal; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; } .eyebrow::before { content: ''; flex: 0 0 auto; width: var(--eyebrow-dot-size); height: var(--eyebrow-dot-size); border-radius: 50%; background-color: currentColor; } .section--dark .eyebrow { color: var(--color-text-inverse); } .section--dark .eyebrow::before { background-color: var(--color-accent); } .display-xl, .display-l, .heading-2, .heading-3 { font-weight: var(--font-weight-bold); text-wrap: balance; } .display-xl { font-size: var(--font-size-display-xl); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); } .display-l { font-size: var(--font-size-display-l); line-height: var(--line-height-display-l); letter-spacing: var(--letter-spacing-display-l); } .heading-2 { font-size: var(--font-size-h2); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); } .heading-2--sm { font-size: var(--font-size-h2-sm); } .heading-3 { font-size: var(--font-size-h3); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); } .lead { color: var(--color-text-muted); font-size: var(--font-size-lead); line-height: var(--line-height-lead); text-wrap: pretty; } .section--dark .lead { color: var(--color-text-muted-dark); } /* -------------------------------------------------------------------------- Button — глобальний компонент (макет 1002:327 / 1002:329) -------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--button-padding-block) var(--button-padding-inline); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); background-color: transparent; font-size: var(--button-font-size); font-weight: var(--font-weight-bold); line-height: normal; text-align: center; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); } .button--primary { border-color: var(--color-ink); background-color: var(--color-ink); color: var(--color-white); } .button--primary:hover { background-color: var(--color-text); border-color: var(--color-text); } .button--secondary { border-color: var(--color-ink); background-color: var(--color-white); color: var(--color-text); } .button--secondary:hover { background-color: var(--color-ink); color: var(--color-white); } .button--ghost { border-color: var(--color-border-soft); background-color: transparent; color: var(--color-text); } .button--ghost:hover { border-color: var(--color-ink); } .button--block { width: 100%; } .button[disabled], .button[aria-busy='true'] { opacity: 0.55; cursor: not-allowed; } /* -------------------------------------------------------------------------- Page header (макет 1002:3) Три колонки на десктопі: лого · нав · мови. -------------------------------------------------------------------------- */ .page-header { position: sticky; top: 0; z-index: var(--z-header); background-color: var(--color-bg); border-bottom: var(--border-width) solid var(--color-border); } .page-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); max-width: var(--container-max); margin-inline: auto; padding-block: var(--header-padding-block); padding-inline: var(--gutter); } .page-header__logo { display: inline-block; } .page-header__logo img { width: var(--logo-width); height: var(--logo-height); object-fit: contain; } /* Головна навігація */ .main-nav__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); } .main-nav__link { color: var(--color-text-muted); font-size: var(--font-size-body); white-space: nowrap; transition: color var(--transition-fast); } .main-nav__link:hover { color: var(--color-text); } /* Перемикач мов (макет 1002:14) */ .lang-switch { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-label); } .lang-switch__item { color: var(--color-text-subtle); padding-inline: var(--space-1); background: none; border: 0; cursor: pointer; transition: color var(--transition-fast); } .lang-switch__item:hover { color: var(--color-text); } .lang-switch__item[aria-current='true'] { color: var(--color-text); font-weight: var(--font-weight-bold); } .lang-switch__separator { color: var(--color-text-subtle); user-select: none; } /* -------------------------------------------------------------------------- Тумблер бургера На десктопі прихований. Іконка — один : сам він середня риска, ::before / ::after — верхня й нижня. У відкритому стані середня гасне, крайні сходяться в хрестик. -------------------------------------------------------------------------- */ .page-header__toggle { display: none; align-items: center; justify-content: center; width: 44px; /* мінімальна зручна ціль для пальця */ height: 44px; /* Оптичне вирівнювання: риски стають врівень із правим краєм гатера, а сама кнопка лишається великою. */ margin-inline-end: -10px; padding: 0; background: none; border: 0; cursor: pointer; } .page-header__burger, .page-header__burger::before, .page-header__burger::after { display: block; width: 22px; height: 2px; border-radius: 2px; background-color: var(--color-ink); transition: transform var(--transition-base), background-color var(--transition-fast); } .page-header__burger { position: relative; } .page-header__burger::before, .page-header__burger::after { content: ''; position: absolute; left: 0; } .page-header__burger::before { top: -7px; } .page-header__burger::after { top: 7px; } .page-header.is-nav-open .page-header__burger { background-color: transparent; } .page-header.is-nav-open .page-header__burger::before { transform: translateY(7px) rotate(45deg); } .page-header.is-nav-open .page-header__burger::after { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- Шторка навігації display: contents — щоб на десктопі обгортка не існувала для розкладки: .main-nav і .lang-switch лишаються прямими колонками грида хедера, як у макеті 1002:3. Усе мобільне живе в медіазапиті нижче. -------------------------------------------------------------------------- */ .page-header__drawer { display: contents; } .page-header__backdrop { display: none; } /* -------------------------------------------------------------------------- Проміжна ширина: рядок навігації ще вміщається, але вже без запасу. Стискаємо відступи й кегль — німецькі й французькі підписи довші за англійські, інакше список переносився б у другий рядок. -------------------------------------------------------------------------- */ @media (max-width: 1279px) { .main-nav__list { gap: var(--space-4); } .main-nav__link { font-size: var(--font-size-label); } } /* -------------------------------------------------------------------------- Мобільний хедер (< 1024px, --bp-lg): лого + бургер. Мобільного макета в Figma немає, тому це інженерне рішення в тій самій пластиці, що й решта сайту: плаский білий фон, волосяні лінії, без тіней і скруглень. Навігація виїжджає шторкою справа, під хедером — лого й хрестик лишаються на місці, тож видно, де ти є. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .page-header__inner { grid-template-columns: 1fr auto; } .page-header__toggle { display: inline-flex; } .page-header__drawer { position: fixed; top: var(--header-height); right: 0; bottom: 0; z-index: var(--z-nav-drawer); display: flex; flex-direction: column; gap: var(--space-8); width: min(360px, 86vw); /* Правий відступ дорівнює гатеру сторінки: кінці пунктів та рисок стають рівно під хрестиком. Лівий — фіксований, інакше на планшеті (гатер росте до 85px) текстові лишалось би замало місця. */ padding: var(--space-7) var(--gutter) var(--space-9) var(--space-7); background-color: var(--color-bg); border-left: var(--border-width) solid var(--color-border); overflow-y: auto; overscroll-behavior: contain; /* Закрита шторка не просто зсунута за екран — вона ще й visibility: hidden, інакше її посилання лишались би в порядку табуляції. */ visibility: hidden; transform: translateX(100%); transition: transform var(--transition-base), visibility 0s linear var(--transition-base-duration); } .page-header.is-nav-open .page-header__drawer { visibility: visible; transform: translateX(0); transition: transform var(--transition-base); } .page-header__backdrop { position: fixed; top: var(--header-height); right: 0; bottom: 0; left: 0; z-index: var(--z-nav-backdrop); display: block; background-color: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .page-header.is-nav-open .page-header__backdrop { opacity: 1; pointer-events: auto; } /* Пункти — великим кеглем, у колонку, розділені волосяними лініями */ .main-nav__list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; } .main-nav__link { display: block; padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-soft); color: var(--color-text); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-h4); white-space: normal; } .main-nav__list li:last-child .main-nav__link { border-bottom: 0; } /* Пункти підтягуються каскадом — рух іде за шторкою, а не разом із нею. Саме transition, а не animation із fill-mode: кінцевий стан тут — звичайне оголошення, тому навіть там, де анімації не програються, пункти гарантовано видно. З animation вони застрягали би на opacity: 0. */ .main-nav__link { opacity: 0; transform: translateX(14px); transition: opacity var(--transition-base), transform var(--transition-base); } .page-header.is-nav-open .main-nav__link { opacity: 1; transform: translateX(0); } /* Затримки тільки на відкриття: закривається меню одним рухом. */ .page-header.is-nav-open .main-nav__list li:nth-child(1) .main-nav__link { transition-delay: 100ms; } .page-header.is-nav-open .main-nav__list li:nth-child(2) .main-nav__link { transition-delay: 135ms; } .page-header.is-nav-open .main-nav__list li:nth-child(3) .main-nav__link { transition-delay: 170ms; } .page-header.is-nav-open .main-nav__list li:nth-child(4) .main-nav__link { transition-delay: 205ms; } .page-header.is-nav-open .main-nav__list li:nth-child(5) .main-nav__link { transition-delay: 240ms; } .page-header.is-nav-open .main-nav__list li:nth-child(6) .main-nav__link { transition-delay: 275ms; } .page-header.is-nav-open .main-nav__list li:nth-child(7) .main-nav__link { transition-delay: 310ms; } /* Глобальне правило на початку файлу гасить тривалість, але не затримку — інакше пункти все одно з'являлися б по черзі. */ @media (prefers-reduced-motion: reduce) { .page-header.is-nav-open .main-nav__link { transition-delay: 0s !important; } } /* Перемикач мов притиснутий до низу шторки й відбитий від пунктів такою самою волосяною лінією — виходить підвал шторки. */ .page-header__drawer .lang-switch { margin-top: auto; padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border-soft); gap: var(--space-2); font-size: var(--font-size-body); } .page-header__drawer .lang-switch__item { padding: var(--space-2) var(--space-1); } }