/* ============================================================ FinSmile — Світлі hero-блоки сторінок послуг Замінює темно-зелені hero на світлий градієнт і робить текст/картки контрастними. Підключається ОСТАННІМ у . Покриває: .pg-hero (сторінки послуг), .grant-hero, .dek-hero Світлий градієнт єдиний по сайту: linear-gradient(99deg,#E8F0EA 0%,#E8F0EA 40%,#A8C3B0 100%) ============================================================ */ /* ---------- Світлий фон ---------- */ .pg-hero, .grant-hero{ background: linear-gradient(99deg, #E8F0EA 0%, #E8F0EA 40%, #A8C3B0 100%) !important; } .dek-hero::before{ background: linear-gradient(99deg, #E8F0EA 0%, #E8F0EA 40%, #A8C3B0 100%) !important; } /* ============ PG-HERO (стандартний hero сторінок послуг) ============ */ .pg-hero h1{ color:#0F3D2E !important; } .pg-hero h1 em{ color:#2E6B57 !important; } /* акцентне слово */ .pg-hero .ph-sub{ color:#33433B !important; } .pg-hero .ph-tag{ background:rgba(46,107,87,.12) !important; border-color:rgba(46,107,87,.30) !important; color:#0F3D2E !important; } .pg-hero .ph-trust{ border-top-color:rgba(15,61,46,.15) !important; } .pg-hero .ph-trust-item{ color:#46594F !important; } .pg-hero .ph-price-badge{ background:rgba(46,107,87,.10) !important; border-color:rgba(46,107,87,.28) !important; } .pg-hero .ph-price-l{ color:#46594F !important; } /* .ph-price-n / акцентні цифри лишаються зеленими — добре читаються */ /* бічні картки (були напівпрозорі/білі під темний фон) → світлі */ .pg-hero .metric-card, .pg-hero .hi-card{ background:#ffffff !important; border-color:rgba(15,61,46,.12) !important; box-shadow:0 6px 22px rgba(15,61,46,.07) !important; } .pg-hero .mc-l, .pg-hero .hi-desc{ color:#46594F !important; } .pg-hero .hi-title{ color:#0F3D2E !important; } .pg-hero .mc-badge{ background:rgba(46,107,87,.12) !important; border-color:rgba(46,107,87,.30) !important; color:#0F3D2E !important; } /* ============ GRANT-HERO (сторінка супроводу грантів) ============ */ .grant-hero h1{ color:#0F3D2E !important; } .grant-hero h1 em{ color:#2E6B57 !important; } .grant-hero h1 small{ color:#46594F !important; } .grant-hero .gh-sub{ color:#33433B !important; } .grant-hero .gh-label{ background:rgba(46,107,87,.12) !important; border-color:rgba(46,107,87,.30) !important; color:#0F3D2E !important; } .grant-hero .gh-stat-row{ border-top-color:rgba(15,61,46,.15) !important; border-bottom-color:rgba(15,61,46,.15) !important; } .grant-hero .ghs{ border-right-color:rgba(15,61,46,.15) !important; } .grant-hero .ghs-l{ color:#46594F !important; } /* .ghs-n лишається зеленим */ /* ============ DEK-HERO (скісна панель «Декретні») ============ */ .dek-hero .dh-info-card{ background:#ffffff !important; border-color:rgba(15,61,46,.12) !important; box-shadow:0 6px 22px rgba(15,61,46,.08) !important; } .dek-hero .dh-info-card.highlight{ border-color:rgba(46,107,87,.35) !important; } .dek-hero .dh-info-label{ color:#46594F !important; } .dek-hero .dh-info-val{ color:#0F3D2E !important; } .dek-hero .dh-info-sub{ color:#5B6B62 !important; } .dek-hero .dh-info-tag{ background:rgba(46,107,87,.12) !important; border-color:rgba(46,107,87,.30) !important; color:#0F3D2E !important; } /* ============ PAGE-HERO (лише там, де підключено цей файл: сторінки «Відгуки» та «Відео») ============ */ .page-hero{ background: linear-gradient(99deg, #E8F0EA 0%, #E8F0EA 40%, #A8C3B0 100%) !important; border-bottom-color:rgba(15,61,46,.10) !important; } .page-hero h1{ color:#0F3D2E !important; } .page-hero h1 span, .page-hero h1 em{ color:#2E6B57 !important; } .page-hero p{ color:#33433B !important; } .page-hero .breadcrumb{ color:#46594F !important; } .page-hero .breadcrumb a{ color:#2E6B57 !important; } /* білий інлайн-текст у hero (напр. «5.0 · N відгуків») → темний */ .page-hero [style*="rgba(255,255,255"]{ color:#46594F !important; } /* ghost-кнопка (була білою під темний фон) → видима на світлому */ .page-hero .btn-gh, .page-hero .btn-ghost{ background:rgba(46,107,87,.08) !important; border-color:rgba(46,107,87,.40) !important; color:#0F3D2E !important; } /* ============ Мобільний: світліший фон hero (як на ПК) ============ На вузькому екрані горизонтальний градієнт заливався шавлієвим — робимо його переважно світлим мʼятним, щоб збігалось із виглядом на ПК. */ @media (max-width:768px){ .pg-hero, .grant-hero, .page-hero{ background: linear-gradient(165deg, #E8F0EA 0%, #E8F0EA 62%, #C9DCD0 100%) !important; } .dek-hero::before{ background: linear-gradient(165deg, #E8F0EA 0%, #E8F0EA 62%, #C9DCD0 100%) !important; } } /* ============ NP-HERO (статті блогу) — світлий, єдиний стиль ============ Фото лишається банером, а заголовок/опис — на світлій плашці з темним текстом (замість темного оверлею з білим текстом). */ .np-hero{ background:#ffffff !important; } .np-hero-content{ position:relative !important; bottom:auto !important; z-index:1 !important; background:linear-gradient(165deg, #E8F0EA 0%, #E8F0EA 62%, #C9DCD0 100%) !important; color:#0F3D2E !important; } .np-hero-overlay{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%) !important; } .np-hero h1{ color:#0F3D2E !important; } .np-hero-summary{ color:#33433B !important; }