/* ============================================ HenovaFresh — Central Design System public/css/henovafresh.css ============================================ */ /* --- CSS Variables (defaults — overridden by site_settings in ) --- */ :root { --hf-bg-page: #f9fbe7; /* alternating page/section bg */ --hf-bg-card: #ffffff; /* white section bg + cards */ --hf-bg-dark: #0D1F2D; /* dark sections (hero, CTA) */ --hf-green: #3DBF4A; /* primary green */ --hf-green-dark: #1a5c1a; /* dark green text */ --hf-green-mid: #2e7d32; /* medium green text */ --hf-orange: #e8800a; /* accent orange CTA */ --hf-blue: #1A8FE3; /* accent blue (UK) */ --hf-font-head: 'Syne', sans-serif; --hf-font-body: 'Onest', sans-serif; } /* --- Page section backgrounds --- */ .hf-bg-page { background: var(--hf-bg-page) !important; } .hf-bg-card { background: var(--hf-bg-card) !important; } .hf-bg-dark { background: var(--hf-bg-dark) !important; } /* --- Typography --- */ .hf-font-head { font-family: var(--hf-font-head); } .hf-font-body { font-family: var(--hf-font-body); } /* --- Buttons --- */ .hf-btn-green { display: inline-block; background: var(--hf-green); color: #fff; font-family: var(--hf-font-head); font-weight: 700; border-radius: 9999px; text-decoration: none; border: none; cursor: pointer; transition: all .22s; } .hf-btn-green:hover { background: #35ab40; transform: translateY(-2px); } .hf-btn-orange { display: inline-block; background: var(--hf-orange); color: #fff; font-family: var(--hf-font-head); font-weight: 700; border-radius: 9999px; text-decoration: none; border: none; cursor: pointer; transition: all .22s; } .hf-btn-orange:hover { background: #d0720a; transform: translateY(-2px); } /* --- Cards --- */ .hf-card { background: var(--hf-bg-card); border-radius: 20px; border: 1px solid rgba(61,191,74,0.10); box-shadow: 0 6px 28px rgba(13,31,45,0.09), 0 2px 8px rgba(13,31,45,0.05); overflow: hidden; transition: all .28s; } .hf-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(13,31,45,0.14), 0 4px 14px rgba(61,191,74,0.13); } /* --- Section divider lines --- */ .hf-divider-left { flex:1; max-width:120px; height:2px; background: linear-gradient(to right, transparent, var(--hf-green)); } .hf-divider-right { flex:1; max-width:120px; height:2px; background: linear-gradient(to left, transparent, var(--hf-green)); } /* --- Badge pill --- */ .hf-badge { display: inline-block; background: rgba(61,191,74,0.1); border: 1px solid rgba(61,191,74,0.28); border-radius: 9999px; padding: 6px 18px; font-size: 0.775rem; font-family: var(--hf-font-head); font-weight: 600; color: var(--hf-green-mid); letter-spacing: 0.05em; } /* --- Reveal animation --- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } /* --- Responsive contact/CTA grids --- */ @media(max-width:768px){ .hf-contact-grid { grid-template-columns: 1fr !important; } .hf-cta-grid { grid-template-columns: 1fr !important; } .hf-name-grid { grid-template-columns: 1fr !important; } } @media(max-width:480px){ .hf-cta-grid > div:last-child { grid-template-columns: 1fr !important; } }