/* ============================================================= FinSmile — Типографіка (єдине джерело правди) ------------------------------------------------------------- Заголовок H1 → Playfair Display 800 Заголовок H2 → Playfair Display 700 Заголовок H3 → Playfair Display 600 Основний текст → Inter 400 (Regular) / 500 (Medium) Малий текст → Inter 400 (Regular) ------------------------------------------------------------- Підключається ОСТАННІМ у , тому перемагає у каскаді. !important на заголовках — щоб перебити inline font-weight (на сторінках заголовки часто мають style="font-weight:900"). ============================================================= */ :root { --fh: 'Playfair Display', Georgia, serif; /* heading font */ --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* body font */ --fw-h1: 800; --fw-h2: 700; --fw-h3: 600; --fw-body: 400; --fw-body-medium: 500; --fw-small: 400; } /* ---------- Основний текст: Inter Regular ---------- */ body { font-family: var(--fb) !important; font-weight: var(--fw-body); } p, li, dd, dt, blockquote, figcaption, input, textarea, select, label, table, td, th { font-family: var(--fb); } /* Опційний помічник для тексту середньої жирності (Inter Medium) */ .text-medium { font-weight: var(--fw-body-medium) !important; } /* ---------- Заголовок H1 — Playfair Display 800 ---------- */ h1, .h1, .hero-title, .ph-title, .page-hero h1, .hero h1 { font-family: var(--fh) !important; font-weight: var(--fw-h1) !important; } /* ---------- Заголовок H2 — Playfair Display 700 ---------- */ h2, .h2, .s-title, .section-title, .cta-title { font-family: var(--fh) !important; font-weight: var(--fw-h2) !important; } /* ---------- Заголовок H3 — Playfair Display 600 ---------- */ h3, .h3 { font-family: var(--fh) !important; font-weight: var(--fw-h3) !important; } /* ---------- Малий текст — Inter Regular ---------- */ small, .small, .text-sm, .text-small, .hint, .caption, .fine-print, .footer-copy, .breadcrumb, .breadcrumbs { font-family: var(--fb) !important; font-weight: var(--fw-small) !important; } /* ============ Лінійні іконки (theme-patcher) ============ */ /* При наведенні кружечок стає зеленим — робимо іконку білою, щоб не зникала */ .feature-card:hover .feature-ico, .feature-card:hover .feature-icon, .svc-card:hover .svc-card-ico, .svc-card-v2:hover .svc-card-ico, .inc-card:hover .inc-ico, .why-card:hover .why-ico, .benefit-card:hover .benefit-card-ico, .lc-card:hover .lc-ico, .rich-item:hover .rich-item-ico, .vf-inc-card:hover .vf-inc-ico, .gc-card:hover .gc-ico, .process-card:hover .process-ico, .process-card-v2:hover .process-ico, .card:hover .hi-ico, .card:hover .mc-ico{ background:#2E6B57 !important; color:#fff !important; } .feature-ico .fs-ic, .inc-ico .fs-ic, .why-ico .fs-ic, .hi-ico .fs-ic, .svc-card-ico .fs-ic, .vf-inc-ico .fs-ic, .lc-ico .fs-ic, .rich-item-ico .fs-ic, .process-ico .fs-ic, .benefit-card-ico .fs-ic, .gc-ico .fs-ic{ width:28px; height:28px; } /* ===== Адаптивність під мобільну (універсальні безпечні правила) ===== */ img, video { max-width:100%; height:auto; } @media (max-width:768px){ html, body { overflow-x:hidden; } h1, h2, h3, .s-title, .hero h1, .page-hero h1, .pg-hero h1, .grant-hero h1, .dek-hero h1 { overflow-wrap:break-word; word-break:break-word; } table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* ============ Кнопка "Записатись" — ефект привернення уваги ============ */ @keyframes fsCtaPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,107,87,.45)}70%{box-shadow:0 0 0 10px rgba(46,107,87,0)}} .fs-cta-pulse{animation:fsCtaPulse 2.2s cubic-bezier(.4,0,.2,1) infinite} .fs-cta-pulse:hover{animation:none} .fs-ic-inline{flex:0 0 auto} /* ============ Фоновий візерунок сторінок (тонкий, за контентом) ============ Клас pat-* ставить JS залежно від сторінки — різний візерунок на різних сторінках. */ body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-repeat:repeat;} body.pat-dots::before{background-image:radial-gradient(rgba(46,107,87,.10) 1px,transparent 1.4px);background-size:22px 22px} body.pat-grid::before{background-image:linear-gradient(rgba(46,107,87,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(46,107,87,.06) 1px,transparent 1px);background-size:30px 30px} body.pat-diag::before{background-image:repeating-linear-gradient(45deg,rgba(46,107,87,.05) 0 1px,transparent 1px 16px)} body.pat-plus::before{background-image:radial-gradient(rgba(46,107,87,.12) 1.6px,transparent 1.8px);background-size:28px 28px} body.pat-cross::before{background-image:linear-gradient(rgba(46,107,87,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(46,107,87,.05) 1px,transparent 1px);background-size:26px 26px;background-position:center} /* ============ Менший відступ hero від шапки (моб/планшет/ПК) ============ */ @media (max-width:1024px){ .hero, .pg-hero, .page-hero, .open-hero, .vf-hero, .svc-hero, .svc-page-hero, .grant-hero, .dek-hero, .np-hero, .pr-hero, .blog-hero, .video-hero, .rev-hero, .about-hero, .legal-hero, .cab-hero { padding-top: calc(var(--hh) + 1rem) !important; min-height: 0 !important; } .hero { display:block !important; align-items:stretch !important; } } /* ПК: трохи менший відступ службових hero (без зміни повноекранної головної) */ @media (min-width:1025px){ .pg-hero, .page-hero, .open-hero, .vf-hero, .grant-hero, .dek-hero, .pr-hero { padding-top: calc(var(--hh) + 2.5rem) !important; } } /* ============ Планшет: сітки 2 колонки замість тісних 3-4 ============ */ @media (min-width:641px) and (max-width:1024px){ .grid-3, .grid-4, .feature-grid, .price-grid, .svc-grid, .gc-grid, .blog-grid, .rich-grid, .lc-grid, .why-grid { grid-template-columns:repeat(2,1fr) !important; } .pg-hero-inner, .open-hero-inner, .vf-hero-inner, .hero-inner { grid-template-columns:1fr !important; gap:2rem !important; } } /* ============ КРОС-ДЕВАЙС ПОЛІШ (вау на всіх пристроях) ============ */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } *{ min-width:0; } img,svg,video,iframe,canvas{ max-width:100%; } img,video{ height:auto; } /* плавність та легкий підйом — відчуття "живого" інтерфейсу */ .btn{ transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important; } .btn:hover{ transform:translateY(-2px); } .feature-card,.svc-card,.price-card,.inc-card,.lc-card,.rich-item,.gc-card, .benefit-card,.why-card,.case-card,[class*="-card"]{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .feature-card:hover,.svc-card:hover,.price-card:hover,.gc-card:hover, .benefit-card:hover,.why-card:hover,.case-card:hover{ transform:translateY(-4px); } .fs-ic,.fs-ic-inline{ transition:color .2s ease; } /* мобільний: зручні тап-таргети + без горизонтального скролу */ @media (max-width:768px){ .btn, a.btn, .fs-nav-link, .fs-drop-item, .mn-link, .mn-card, button{ min-height:44px; } .btn{ display:inline-flex; align-items:center; justify-content:center; } .btn:hover{ transform:none; } /* без зсуву на тач-екранах */ .feature-card:hover,.svc-card:hover,.price-card:hover,.gc-card:hover, .benefit-card:hover,.why-card:hover,.case-card:hover{ transform:none; } } @media (max-width:640px){ html,body{ overflow-x:hidden; } [style*="width:"]:not(img):not(svg):not(.fs-ic):not(.fs-ic-inline){ max-width:100% !important; } } /* читабельність довгого тексту на всіх екранах */ p, li, .ph-sub, .hero-sub, .s-sub{ overflow-wrap:break-word; } /* акуратний фокус для доступності (клавіатура) */ a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:2px solid #2E6B57; outline-offset:2px; border-radius:8px; }