@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@700;800&display=swap'); /* ========================================================================= ЄДИНИЙ ХЕДЕР ДЛЯ ВСЬОГО САЙТУ (еталон — головна сторінка) ------------------------------------------------------------------------- Цей файл підключається ОСТАННІМ у кожної сторінки, тому він завжди перекриває локальні стилі сторінок. Кожна властивість задана явно (шрифт, розмір, жирність, колір), щоб власні шрифти сторінок (Manrope, Montserrat 900 тощо) не впливали на вигляд хедера. Всі селектори мають префікс .header — це не зачіпає решту сторінки. ========================================================================= */ .header { /* Кольори беруться з css/theme.css (палітра логотипа). Значення після коми — запасні, якщо theme.css не завантажився. */ --hdr-black: var(--sb-ink, #16181B); --hdr-dark: var(--sb-black, #111315); /* STAR — чорний, як блоки логотипа */ --hdr-accent: var(--sb-red, #E52224); /* BRUK — червоний, як блок логотипа */ --hdr-gray: var(--sb-soft, #F5F6F8); --hdr-line: var(--sb-line, #E4E7EA); position: sticky; top: 0; z-index: 100; background: #FFFFFF; display: block; box-shadow: none; max-height: none; overflow: visible; transition: none; /* Базові успадковані властивості — щоб шрифт/колір сторінки (Manrope, system-ui тощо) не протікав у хедер */ font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; font-style: normal; line-height: 1.5; color: var(--hdr-black); text-align: left; letter-spacing: normal; } /* Контейнер всередині хедера — однакові відступи на всіх сторінках */ .header .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; width: 100%; box-sizing: border-box; } /* ---------- Верхня смужка: телефон, адреса, мова ---------- */ .header .header__top { background-color: var(--hdr-gray); padding: 10px 0; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; color: #666666; /* нейтралізуємо згортання верхньої смужки на catalog.html */ max-height: none; opacity: 1; overflow: visible; transition: none; border: none; } .header .header__top-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .header .header__contacts { display: flex; align-items: center; gap: 20px; } .header .header__phone { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--hdr-black); text-decoration: none; letter-spacing: normal; } .header .header__phone:hover { color: var(--hdr-accent); } .header .header__address { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; color: #666666; letter-spacing: normal; } .header .header__lang a { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #999999; text-decoration: none; } .header .header__lang a.active { color: var(--hdr-black); } /* ---------- Основна частина: лого, меню, кнопка ---------- */ .header .header__main { padding: 20px 0; background: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--hdr-black); border-bottom: 1px solid var(--hdr-line); /* та сама сіра лінія скрізь */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .header .header__main-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; } /* ---------- Логотип: знак + текст ---------- */ .header .header__logo { display: flex; flex-direction: row; align-items: center; gap: 14px; text-decoration: none; line-height: 1; flex: 0 0 auto; } /* Сам знак (PNG з прозорим фоном) */ .header .header__logo-img { display: block; height: 52px; width: auto; flex: 0 0 auto; object-fit: contain; /* легка тінь, щоб знак не «плавав» на білому */ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16)); transform: translateZ(0); transition: transform 0.3s ease, filter 0.3s ease; } .header .header__logo:hover .header__logo-img { transform: translateY(-1px) scale(1.04); filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22)); } /* Текстовий блок праворуч від знака */ .header .header__logo-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; /* тонка розділова риска між знаком і текстом */ padding-left: 14px; border-left: 1px solid var(--hdr-line); } .header .logo-text { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: 0.5px; color: var(--hdr-dark); white-space: nowrap; } .header .logo-sub { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; color: #888888; text-transform: uppercase; letter-spacing: 1.4px; margin-top: 0; white-space: nowrap; } .header .accent { color: var(--hdr-accent); } /* Навігація */ .header .nav__list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .header .nav__list li { margin: 0; padding: 0; } .header .nav__link { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: normal; color: var(--hdr-black); text-transform: uppercase; text-decoration: none; transition: color 0.3s ease; } .header .nav__link:hover, .header .nav__link.active { color: var(--hdr-accent); } /* Кнопка "Скачати прайс" — веде на price.html (перегляд + завантаження PDF). Стоїть ПЕРЕД кнопкою "Зв'язатися з нами" у .header__actions. Приглушений червоний фон: помітно, але не конкурує з основним CTA; на ховері заливається фірмовим червоним. */ .header .btn--price { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: 'Inter', sans-serif; padding: 13px 24px; font-size: 14px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; border-radius: 6px; border: 1px solid rgba(229, 34, 36, 0.32); background: var(--sb-red-soft, #FDF2F2); color: var(--hdr-accent); text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .header .btn--price i { display: inline-block; font-size: 15px; line-height: 1; color: inherit; } .header .btn--price:focus-visible, .header .btn--price:hover { background: var(--hdr-accent); border-color: var(--hdr-accent); color: #FFFFFF; box-shadow: 0 6px 16px rgba(229, 34, 36, 0.26); transform: translateY(-1px); } /* На тач-екранах ховер залипає після тапу — вимикаємо його там. */ @media (hover: none) { .header .btn--price:hover { background: var(--sb-red-soft, #FDF2F2); border-color: rgba(229, 34, 36, 0.32); color: var(--hdr-accent); box-shadow: none; transform: none; } } /* На самій сторінці прайсу кнопка вже "залита" — як активний пункт меню */ .header .btn--price.active { background: var(--hdr-accent); border-color: var(--hdr-accent); color: #FFFFFF; } /* Кнопка "Зв'язатися з нами" */ .header .header__actions { display: flex; align-items: center; gap: 15px; } .header .btn--outline { display: inline-block; font-family: 'Inter', sans-serif; padding: 14px 32px; font-size: 14px; font-weight: 600; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 6px; border: 1px solid var(--hdr-line); background: transparent; color: var(--hdr-black); text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; } /* hover:hover — щоб на телефоні/планшеті стан ховера не «залипав» червоним після тапу (на тач-екранах він тримається до наступного тапу). */ @media (hover: hover) { .header .btn--outline:hover { border-color: var(--hdr-accent); color: var(--hdr-accent); background: transparent; } } /* Кнопка мобільного меню — прихована на ПК. Явні розміри: кнопка залишається клікабельною (44×44 — зручно для пальця) навіть якщо іконка Font Awesome не завантажилась. */ .header .mobile-toggle { display: none; background: none; border: none; padding: 0; width: 44px; height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 24px; line-height: 1; color: var(--hdr-black); cursor: pointer; } .header .mobile-toggle i { display: inline-block; font-size: 24px; line-height: 1; color: inherit; } /* ---------- Випадне мобільне меню ---------- */ /* Приховане завжди, окрім випадку, коли відкрите на вузькому екрані */ .header .nav-mob { display: none; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--hdr-black); background: #FFFFFF; border-bottom: 0 solid var(--hdr-line); } /* Проміжні ширини ноутбуків: меню + ДВІ кнопки в рядок починають виштовхувати хедер за екран. Спершу просто ущільнюємо — так обидві кнопки живуть якнайдовше. */ @media (max-width: 1320px) { .header .nav__list { gap: 22px; } .header .nav__link { font-size: 14px; } .header .header__actions{ gap: 10px; } .header .btn--price { padding: 12px 18px; } .header .btn--outline { padding: 13px 20px; } } /* 993–1160 px: навіть ущільнені дві кнопки не влазять (з'являвся горизонтальний скрол). Ховаємо "Зв'язатися з нами" — телефон лишається у верхній смузі й у підвалі, а кнопка прайсу залишається. */ @media (max-width: 1160px) { .header .btn--outline { display: none; } } @media (max-width: 992px) { .header .nav__list { display: none; } .header .mobile-toggle{ display: flex; } .header .header__top { display: none; } .header .btn--outline { display: none; } /* Кнопка прайсу переїжджає всередину бургер-меню (див. .nav-mob__price), щоб не тиснути логотип у вузькому рядку хедера. */ .header .btn--price { display: none; } .header .nav-mob { display: none; background: #FFFFFF; border-bottom: 1px solid var(--hdr-line); border-bottom-color: var(--hdr-line); } .header .nav-mob.open { display: block; } .header .nav-mob a { display: block; font-family: 'Inter', sans-serif; padding: 14px 20px; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: normal; color: var(--hdr-black); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--hdr-line); } .header .nav-mob a:last-child { border-bottom: none; } .header .nav-mob a.active { color: var(--hdr-accent); } /* Виділена кнопка "Скачати прайс" унизу мобільного меню. Селектор з тегом `a` — щоб перебити .header .nav-mob a вище. */ .header .nav-mob a.nav-mob__price { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 20px 18px; padding: 15px 18px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase; color: #FFFFFF; background: var(--hdr-accent); border: none; border-bottom: none; border-radius: 10px; box-shadow: 0 8px 18px rgba(229, 34, 36, 0.24); text-decoration: none; } .header .nav-mob a.nav-mob__price i { display: inline-block; font-size: 17px; line-height: 1; color: inherit; } .header .nav-mob a.nav-mob__price:active { transform: translateY(1px); } } /* ---------- Логотип: планшет і мобільні ---------- */ @media (max-width: 992px) { .header .header__logo { gap: 11px; } .header .header__logo-img { height: 40px; } .header .header__logo-text { padding-left: 11px; } .header .logo-text { font-size: 21px; } } @media (max-width: 480px) { .header .header__logo { gap: 9px; } .header .header__logo-img { height: 34px; } .header .header__logo-text { padding-left: 9px; } .header .logo-text { font-size: 18px; letter-spacing: 0.3px; } .header .logo-sub { font-size: 9px; letter-spacing: 1px; } } /* На дуже вузьких екранах лишається тільки знак — текст ховаємо, щоб хедер не ламався поруч із кнопкою меню */ @media (max-width: 360px) { .header .header__logo-text { display: none; } .header .header__logo-img { height: 36px; } } /* Друк / екрани з високою щільністю — знак і так у 4x роздільній здатності */ @media print { .header .header__logo-img { filter: none; } }