/* CORE — критичний CSS. * Тільки те, що є на КОЖНІЙ сторінці: змінні, типографіка, * шапка, підвал, крихти. Вантажиться завжди й першим. * Усе інше — окремими модулями під конкретні сторінки. */ /* ТЕМИ. * * Уся палітра — у змінних, тому компоненти нижче не знають про тему взагалі. * Світла — за замовчуванням; темна вмикається системним налаштуванням * (prefers-color-scheme) або вручну через [data-theme] на . * * Контраст обох тем перевірено за WCAG: усі пари ≥ 4.5:1 (AA). */ :root { --bg: #fdfcfa; --surface: #ffffff; --border: #e6e1d8; --text: #241f1a; --muted: #6f6558; --accent: #8a5a2b; --accent-dark: #6d4621; --accent-soft: #f4ece1; /* Контраст на власному фоні: --ok 7.00:1, --off 5.81:1. Попередній зелений #2f7d4f давав 4.44:1 і не дотягував до 4.5. */ --ok: #1d5c38; --ok-soft: #e6f4ea; --off: #9a3d3d; --off-soft: #fbeaea; /* Текст на кнопці: у світлій темі білий, у темній — темний, бо акцент там світлий. Тримаємо змінною, щоб .btn був один. */ --on-accent: #ffffff; --shadow: 0 6px 18px rgb(0 0 0 / .08); /* Підкладка під фото товару — світла в обох темах, бо знімки зроблені на білому тлі. */ --photo-bg: #ffffff; --photo-pad: 0px; --radius: 10px; color-scheme: light; } /* Темні значення винесено в міксин-подібний блок, щоб не дублювати його для медіазапиту й для ручного перемикача. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14110e; --surface: #1c1815; --border: #332c25; --text: #f0e9e1; --muted: #a89a89; --accent: #d9a066; --accent-dark: #e8b884; --accent-soft: #2a2119; --ok: #7fd4a0; --ok-soft: #1a3326; --off: #f0908c; --off-soft: #3a1e1e; --on-accent: #14110e; --shadow: 0 6px 18px rgb(0 0 0 / .5); /* Не чистий білий: приглушений, щоб не сліпив на темному фоні. */ --photo-bg: #ece7e0; --photo-pad: 10px; color-scheme: dark; } } /* Ручний вибір користувача перекриває системний. */ :root[data-theme="dark"] { --bg: #14110e; --surface: #1c1815; --border: #332c25; --text: #f0e9e1; --muted: #a89a89; --accent: #d9a066; --accent-dark: #e8b884; --accent-soft: #2a2119; --ok: #7fd4a0; --ok-soft: #1a3326; --off: #f0908c; --off-soft: #3a1e1e; --on-accent: #14110e; --shadow: 0 6px 18px rgb(0 0 0 / .5); --photo-bg: #ece7e0; --photo-pad: 10px; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; /* Sticky footer: колонка на всю висоту вікна, main забирає весь вільний простір — підвал притискається донизу навіть на коротких сторінках (Контакти, порожній кошик). */ min-height: 100dvh; display: flex; flex-direction: column; } /* main — одночасно flex-item body і контейнер .wrap із max-width. width: 100% обов'язковий: без нього flex-item стискається під вміст, і сітка каталогу згортається в одну колонку. */ main { flex: 1 0 auto; min-height: 0; width: 100%; padding-bottom: 64px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; } a { color: var(--accent); } /* ---------- типографіка ---------- */ h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 0 0 10px; } h2 { font-size: clamp(19px, 3vw, 24px); margin: 40px 0 16px; } .h-sm { font-size: 17px; margin: 24px 0 10px; } .h-section { font-size: 17px; margin: 24px 0 4px; color: var(--muted); font-weight: 600; } .lede { color: var(--muted); font-size: 17px; margin: 0 0 24px; max-width: 65ch; } .muted { color: var(--muted); } .count { font-size: 14px; margin: 0 0 16px; } /* ---------- шапка ---------- */ .site-header { width: 100%; position: relative; background: var(--surface); border-bottom: 1px solid var(--border); } /* Один ряд на десктопі: логотип — навігація — дії. nowrap явно: без нього довша назва чи більше пунктів меню переносили б дії на другий рядок. */ .header-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; padding-block: 16px; } .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo { font-weight: 700; font-size: 19px; color: var(--text); text-decoration: none; flex-shrink: 0; white-space: nowrap; } .nav { display: flex; gap: 18px; margin-right: auto; flex-shrink: 0; } .nav a { color: var(--text); text-decoration: none; font-size: 15px; transition: color .15s ease; } .nav a:hover { color: var(--accent); } .phone { font-weight: 600; text-decoration: none; white-space: nowrap; } /* ---------- хлібні крихти (є на всіх сторінках, крім головної) ---------- */ .crumbs { margin: 20px 0 16px; font-size: 14px; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .crumbs li + li::before { content: "/"; color: var(--muted); margin-right: 8px; } .crumbs [aria-current] { color: var(--muted); } /* ---------- спільні дрібниці ---------- */ .price { font-weight: 700; display: block; } .per-kg { font-size: 13px; color: var(--muted); } .badge { font-size: 12px; padding: 3px 9px; border-radius: 99px; white-space: nowrap; display: inline-block; } .badge.in { background: var(--ok-soft); color: var(--ok); } .badge.out { background: var(--off-soft); color: var(--off); } .btn { display: inline-block; padding: 11px 22px; background: var(--accent); color: var(--on-accent); text-decoration: none; border-radius: var(--radius); font-weight: 600; border: 0; font-size: 15px; font-family: inherit; cursor: pointer; transition: background-color .15s ease, transform .08s ease, box-shadow .15s ease; } .btn:hover { background: var(--accent-dark); } /* Легке "втискання" при кліку — тактильний відгук замість статики. */ .btn:active { transform: translateY(1px); } .btn:disabled, .btn[disabled] { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; } /* Фокус з клавіатури — окремо від hover: :focus-visible не спрацьовує на клік мишею, тому обвідка не заважає тим, хто клікає. */ .btn:focus-visible, .btn-link:focus-visible, .cart-link:focus-visible, .nav a:focus-visible, .card-link:focus-visible, .crumbs a:focus-visible, .plain a:focus-visible, a:focus-visible, input:focus-visible, .variant:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---------- підвал ---------- */ /* Без margin-top: відступ дає padding-bottom на main, інакше на коротких сторінках з'являється зайва порожнеча над підвалом. */ .site-footer { width: 100%; padding: 32px 0; background: var(--surface); border-top: 1px solid var(--border); } .footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .footer-inner p { font-size: 14px; margin: 6px 0 0; } .plain { list-style: none; padding: 0; margin: 6px 0 0; font-size: 14px; } .plain li { margin-bottom: 4px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- кошик у шапці (є на кожній сторінці) ---------- */ .cart-link { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--text); padding: 7px 14px; border: 1px solid var(--border); border-radius: 99px; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .cart-link:hover { border-color: var(--accent); color: var(--accent); } .cart-link.has-items { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cart-link.has-items:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); } .cart-num { margin-left: 4px; } /* Для скрінрідерів: підписи, які не потрібні візуально. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- тости ---------- */ .toasts { position: fixed; top: 20px; left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; padding: 0 16px; } .toast { background: var(--text); color: var(--bg); padding: 13px 18px; max-width: min(420px, 100%); text-align: center; border-radius: var(--radius); font-size: 15px; font-weight: 500; box-shadow: var(--shadow); opacity: 0; transform: translateY(-12px); transition: opacity .22s ease, transform .22s ease; } .toast.is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; opacity: 1; transform: none; } } /* ---------- перемикач теми ---------- */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 99px; width: 36px; height: 36px; padding: 0; cursor: pointer; flex-shrink: 0; color: var(--text); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Телефон у шапці — іконка замість номера: економить місце, а номер лишається в title, aria-label, підвалі й контактах. */ .phone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 99px; color: var(--text); text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .phone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ---------- МОБІЛЬНА ШАПКА ---------- Блок наприкінці файлу навмисно: його правила мають перекривати десктопні за порядком у каскаді. */ @media (max-width: 760px) { .site-header { position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); } /* Два ряди: логотип + дії зверху, навігація знизу. Grid, а не flex-wrap — інакше елементи розповзаються непередбачувано на три ряди. */ .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo actions" "nav nav"; gap: 4px 10px; padding-block: 8px; align-items: center; } /* nowrap: довга назва інакше ламається на два рядки. */ .logo { grid-area: logo; font-size: 17px; white-space: nowrap; margin: 0; } .header-actions { grid-area: actions; gap: 6px; } .phone, .theme-toggle { width: 34px; height: 34px; } .cart-link { padding: 6px 12px; font-size: 14px; } /* Навігація на всю ширину; при потребі скролиться вбік, а не переноситься — висота шапки лишається сталою. */ .nav { grid-area: nav; margin: 0; gap: 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; font-size: 14px; } .toasts { top: 86px; } .toast { width: 100%; } }