/* ============================================ ESC — базові стилі ============================================ */ /* ---- Шрифти (локально в fonts/ через @font-face) ---- Дисплейні заголовки — Ermilov Bold; акцентний дисплей — Unbounded; основний текст — Inter (Google Fonts, підключено в ). */ @font-face { font-family: 'Ermilov'; src: url('../fonts/Ermilov-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- Кольори (з home_page.json — фактичні fills) ---- */ --color-bg: #fefefe; /* основне тло */ --color-card: #f4f7f6; /* світлі секції / картки */ --color-text: #1a1a1a; /* основний текст (заголовки, меню, CTA) */ --color-accent: #9fe870; /* світло-зелений акцент (кнопки, підкреслення) */ --color-accent-bright:#81df4c; /* насичений зелений (промо-плашка, соц-іконки) */ --color-accent-dark: #163300; /* темно-зелений (текст на акценті, заголовки) */ --color-hover: #8edb5c; /* зелений для hover-станів (меню, дропдаун, посилання) */ --color-dark: #18302c; /* темні секції (тло) */ --color-dark-green: #1d3208; /* глибокий зелений (декор/тло) */ --color-slate: #38474f; /* приглушений текст / слейт */ --color-muted: #f2f5f4; /* ледь-сірий роздільник */ --color-line: #d3d5d2; /* роздільники на світлому тлі */ --font-display: 'Ermilov', 'Unbounded', system-ui, sans-serif; --font-accent: 'Unbounded', 'Ermilov', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --container-width: 1180px; /* ВНУТРІШНЯ ширина контенту (як у Figma, x=370..1550) */ --container-narrow: 1024px; --container-pad: 24px; /* 8px-сітка відступів: 4 / 8 / 16 / 24 / 32 / 48 / 64 */ --radius-lg: 20px; --radius-md: 10px; --radius-sm: 6px; --transition: 0.25s ease; } /* ---- Reset ---- */ * { box-sizing: border-box; } html, body { /* захист від горизонтального скролу через off-screen мобільне меню */ overflow-x: hidden; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.5; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; margin: 0; padding: 0; } button { font: inherit; } p { margin: 0; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---- Layout ---- */ .container { width: 100%; max-width: calc(var(--container-width) + var(--container-pad) * 2); margin: 0 auto; padding: 0 var(--container-pad); } .container-narrow { max-width: calc(var(--container-narrow) + var(--container-pad) * 2); } .section { padding: 64px 0; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 32px; border-radius: 30px; /* pill — як у Figma (r=30) */ font-size: 18px; font-weight: 700; border: none; cursor: pointer; white-space: nowrap; transition: background var(--transition), transform var(--transition); } /* Акцентна зелена кнопка з темно-зеленим текстом (Wise-стиль) */ .btn-accent, .btn-primary { background: var(--color-accent); color: var(--color-accent-dark); } .btn-accent:hover, .btn-primary:hover { background: var(--color-hover); transform: translateY(-1px); } .btn-outline { background: transparent; border: 1px solid var(--color-accent-dark); color: var(--color-accent-dark); } /* ---- Утиліта: двоколірний заголовок ---- */ .accent { color: var(--color-accent); } /* ============================================ ХЕДЕР — промо-смуга + топ-бар (#2) + меню (#3) ============================================ */ /* ---- Промо-смуга ---- */ .promo-bar { background: var(--color-accent-bright); color: #fff; } .promo-inner { display: flex; align-items: center; justify-content: center; min-height: 60px; /* висота плашки в Figma */ padding-top: 8px; padding-bottom: 8px; text-align: center; } .promo-inner p { font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: 0.3px; margin: 0; } /* ---- Топ-бар (ряд 1) ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: #fffefe; transition: box-shadow var(--transition); } .site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .topbar { background: #f7f7f8; color: var(--color-dark); font-size: 15px; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 24px; } .brand { display: inline-flex; align-items: center; color: inherit; } .brand-logo { width: auto; height: 80px; } .topbar-contacts { display: flex; gap: 48px; } .tb-col { display: flex; flex-direction: column; gap: 8px; } .tb-ic { flex: 0 0 auto; } .tb-phone, .tb-addr, .tb-hours { display: flex; align-items: center; gap: 8px; } .tb-phone { font-weight: 600; color: inherit; } .tb-note { font-weight: 400; color: var(--color-slate); } .tb-addr { font-weight: 600; } .tb-hours { font-weight: 600; color: var(--color-slate); } .tb-msgr { display: flex; gap: 16px; } .tb-msgr a { display: inline-flex; align-items: center; gap: 8px; color: var(--color-slate); } .tb-msgr a:hover { color: var(--color-dark); } /* ---- Меню (ряд 2) ---- */ .navbar { position: relative; background: #fffefe; border-top: 1px solid var(--color-muted); border-bottom: 1px solid var(--color-muted); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; /* меню — до лівого краю, дії — до правого (як у дизайні) */ gap: 40px; /* мінімальний гап, якщо контенту стане тісно */ min-height: 64px; /* компактний навбар — як у Figma (64px) */ } .main-nav { flex: 0 1 auto; } .nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; } .nav-item > a, .nav-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; /* Inter SemiBold */ font-size: 18px; color: var(--color-text); background: none; border: none; padding: 0; cursor: pointer; transition: color var(--transition); } .nav-item > a:hover, .nav-toggle:hover, .has-mega:hover .nav-toggle { color: var(--color-hover); } /* каретка «Послуги» — лише на мобільному (на ПК меню відкривається по hover) */ .nav-caret { display: none; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: currentColor transparent transparent transparent; transition: transform var(--transition); } .header-actions { display: flex; align-items: center; gap: 40px; } .btn-appoint { font-family: var(--font-body); font-weight: 800; /* Inter ExtraBold */ font-size: 18px; color: var(--color-dark-green); text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--color-accent); /* тонка лінія 1px #9FE870, як у Figma */ } .btn-appoint:hover { border-bottom-color: var(--color-accent-bright); } /* ---- Мега-меню «Послуги» ---- */ .has-mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 55; background: var(--color-card); box-shadow: 0 18px 30px rgba(0,0,0,0.10); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .mega-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 48px var(--container-pad); } /* вертикальні роздільники між колонками */ .mega-col { padding: 0 48px; } .mega-col:first-child { padding-left: 0; } .mega-col:last-child { padding-right: 0; } .mega-col:not(:last-child) { border-right: 1px solid rgba(24,48,44,0.14); } .mega-group + .mega-group { margin-top: 32px; } .mega-title { position: relative; display: block; width: 100%; text-align: left; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--color-dark-green); background: none; border: none; padding: 0; margin-bottom: 24px; cursor: pointer; } /* підкреслення заголовка категорії — 1px, колір тексту (як у Figma) */ .mega-title::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 56px; height: 1px; background: currentColor; } .mega-caret { display: none; } .mega-list { display: flex; flex-direction: column; gap: 16px; } .mega-list a { font-size: 15px; color: var(--color-dark); } .mega-list a:hover, .mega-title:hover { color: var(--color-hover); } /* Показ мега на десктопі — по hover/фокусу + підкреслення пунктів */ @media (min-width: 961px) { .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; } .nav-item > a, .nav-toggle { position: relative; } .nav-item > a::after, .nav-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: currentColor; opacity: 0; transition: opacity var(--transition); } .nav-item > a:hover::after, .nav-toggle:hover::after, .has-mega:hover .nav-toggle::after { opacity: 1; } } /* ---- Мобільний «підвал» меню + фіксований бар — лише на мобільному ---- */ .nav-extra { display: none; } .mobile-bar { display: none; } /* ---- Попап (модалка контактів; форма запису — TODO) ---- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; } .modal[hidden] { display: none; } .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity var(--transition); } .modal.is-open .modal-overlay { opacity: 1; } .modal-panel { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform var(--transition); } .modal.is-open .modal-panel { transform: none; } /* Центрований варіант (попап-форма запису) */ .modal--center { align-items: center; } .modal--center .modal-panel { border-radius: 20px; transform: translateY(24px); opacity: 0; transition: transform var(--transition), opacity var(--transition); } .modal--center.is-open .modal-panel { transform: none; opacity: 1; } .modal-panel--form { max-width: 520px; background: #ecefea; } .modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; font-size: 26px; line-height: 1; color: var(--color-slate); background: none; border: none; cursor: pointer; } .modal-title { font-family: var(--font-display); font-size: 24px; color: var(--color-dark-green); margin-bottom: 24px; } .modal-contacts { display: flex; flex-direction: column; gap: 16px; font-size: 16px; color: var(--color-dark); } .modal-contacts li { display: flex; align-items: center; gap: 8px; } .modal-contacts a { color: inherit; } .modal-contacts a:hover { color: var(--color-hover); } .modal-msgr { display: flex; gap: 24px; margin: 24px 0; } .modal-msgr a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-dark); } .modal-cta { display: inline-flex; } /* ---- Дропдауни (телефони, мова) ---- */ .dropdown { position: relative; } .dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; /* браузерний дефолт для