/* =========================================================
HPS — Modern Theme (v2 — SaaS / Clean)
Aplica-se quando está presente.
Sobrepõe o style.css antigo para header/footer/home.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root {
--hps-green: #8BBC38;
--hps-green-600: #6FA124;
--hps-green-700: #588019;
--hps-green-50: #F1F8E4;
--hps-green-100: #E2F0CB;
--hps-ink: #0E1726;
--hps-ink-700: #1F2A44;
--hps-ink-500: #4B5772;
--hps-ink-400: #6B7693;
--hps-ink-300: #9AA3BC;
--hps-line: #E7EBF0;
--hps-line-soft: #F0F3F7;
--hps-bg: #FFFFFF;
--hps-bg-soft: #F7F9FB;
--hps-shadow-xs: 0 1px 2px rgba(14, 23, 38, .04);
--hps-shadow-sm: 0 2px 8px rgba(14, 23, 38, .05), 0 1px 2px rgba(14, 23, 38, .04);
--hps-shadow: 0 8px 30px -10px rgba(14, 23, 38, .12), 0 2px 6px rgba(14, 23, 38, .06);
--hps-shadow-lg: 0 24px 50px -14px rgba(14, 23, 38, .18);
--hps-shadow-green: 0 12px 28px -8px rgba(139, 188, 56, .5);
--hps-radius-xs: 8px;
--hps-radius-sm: 12px;
--hps-radius: 16px;
--hps-radius-lg: 24px;
--hps-radius-xl: 28px;
--hps-font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
--hps-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
/* =========================================================
GLOBAL OVERRIDES (apenas com body.hps-page)
========================================================= */
html:has(body.hps-page) {
scroll-padding-top: 90px;
}
body.hps-page {
font-family: var(--hps-font);
color: var(--hps-ink);
background: var(--hps-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.hps-page h1,
body.hps-page h2,
body.hps-page h3,
body.hps-page h4,
body.hps-page h5,
body.hps-page h6 {
font-family: var(--hps-font-display);
color: var(--hps-ink);
letter-spacing: -0.025em;
line-height: 1.08;
font-weight: 800;
margin: 0;
}
body.hps-page strong { font-weight: 700; color: inherit; }
body.hps-page p {
color: var(--hps-ink-500);
line-height: 1.65;
margin: 0;
font-family: var(--hps-font);
}
/* =========================================================
HEADER — clean modern (constrained width, dark sticky)
========================================================= */
body.hps-page .header--sticky.header-one {
background: transparent !important;
box-shadow: none !important;
transition: background .35s ease, box-shadow .35s ease;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
/* Default: clean white with subtle separator from hero — compact */
body.hps-page .header-main-one {
padding: 8px 0;
background: #ffffff !important;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(231, 235, 240, .9);
box-shadow: 0 4px 18px -8px rgba(14, 23, 38, .08);
transition: background .35s ease, border-color .35s ease, padding .35s ease, box-shadow .35s ease;
position: relative;
}
/* Decorative green hairline at the very bottom of the header */
body.hps-page .header-main-one::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(139, 188, 56, 0) 15%,
rgba(139, 188, 56, .55) 50%,
rgba(139, 188, 56, 0) 85%,
transparent 100%);
pointer-events: none;
opacity: .8;
}
/* Logo (single image — colorful, with text inside) */
body.hps-page .hps-logo-link {
display: inline-flex;
align-items: center;
text-decoration: none !important;
}
body.hps-page .hps-logo-img {
max-height: 42px;
width: auto;
transition: max-height .25s ease, filter .25s ease;
display: block;
}
/* On the green sticky header — slightly smaller still */
body.hps-page .header--sticky.header-one.sticky .hps-logo-img {
max-height: 36px !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)) brightness(1.05);
}
@media (max-width: 768px) {
body.hps-page .hps-logo-img { max-height: 36px; }
}
/* Constrain header content max-width so it doesn't stretch edge-to-edge */
body.hps-page .header-main-one .container,
body.hps-page .header-main-one .container.container-fluid {
max-width: 1200px !important;
margin: 0 auto !important;
padding-left: 28px !important;
padding-right: 28px !important;
}
/* ===== Flex layout for header — kill the Bootstrap col stretching ===== */
body.hps-page .header-main-one .row {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 !important;
--bs-gutter-x: 0;
--bs-gutter-y: 0;
padding: 0 !important;
min-height: 0;
}
body.hps-page .header-main-one .row > [class*="col-"] {
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
padding: 0 !important;
}
/* Logo: fixed natural width, hugs left */
body.hps-page .header-main-one .row > [class*="col-"]:first-child {
margin-right: auto !important;
}
/* Nav + actions container fills remaining */
body.hps-page .header-main-one .row > [class*="col-"]:last-child {
flex: 0 0 auto !important;
}
/* The inner main-header gets compact flex layout */
body.hps-page .header-main-one .main-header {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 28px !important;
}
/* Menu: compact, items glued together, not stretched */
body.hps-page .mainmenu {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 4px;
}
/* Remove the empty first li that had #banner anchor */
body.hps-page .mainmenu > li:first-child:empty,
body.hps-page .mainmenu > li.\# { display: none !important; }
body.hps-page .mainmenu > li {
margin: 0 !important;
padding: 0 !important;
}
body.hps-page .mainmenu > li > a {
margin: 0 !important;
padding: 10px 14px !important;
display: inline-flex !important;
align-items: center !important;
}
/* Action buttons cluster — tight grouping */
body.hps-page .header-main-one .button-area {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
body.hps-page .header-main-one .button-area #search,
body.hps-page .header-main-one .button-area #menu-btn {
margin: 0 !important;
}
body.hps-page .header-main-one .button-area .quote-btn {
margin: 0 !important;
}
body.hps-page .hps-header-phone {
margin: 0 !important;
}
/* Compact dropdown chevron (SVG, no font dependency) */
body.hps-page .mainmenu > li.has-droupdown > a {
padding-right: 26px !important;
}
body.hps-page .mainmenu > li.has-droupdown > a::before {
content: '';
position: absolute;
right: 10px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.8px solid currentColor;
border-bottom: 1.8px solid currentColor;
transform: translateY(-70%) rotate(45deg);
opacity: .55;
transition: transform .25s ease, opacity .25s ease;
}
body.hps-page .mainmenu > li.has-droupdown:hover > a::before {
transform: translateY(-30%) rotate(-135deg);
opacity: 1;
}
@media (max-width: 1199px) {
body.hps-page .header-main-one .main-header { gap: 12px !important; }
body.hps-page .mainmenu > li > a { padding: 10px 10px !important; }
body.hps-page .mainmenu > li.has-droupdown > a { padding-right: 22px !important; }
}
/* Hide ugly top bar (mail/social on dark green) */
body.hps-page .header-top-one { display: none !important; }
/* ===== STICKY: green brand theme transformation ===== */
body.hps-page .header--sticky.header-one.sticky .header-main-one {
background:
linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 50%),
linear-gradient(135deg, #A3CE52 0%, #8BBC38 100%) !important;
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom-color: rgba(255, 255, 255, .2);
box-shadow: 0 10px 30px -10px rgba(139, 188, 56, .45);
padding: 5px 0 !important;
}
body.hps-page .header--sticky.header-one.sticky .mainmenu > li > a {
color: rgba(255, 255, 255, .9) !important;
}
body.hps-page .header--sticky.header-one.sticky .mainmenu > li > a::after {
background: #fff !important;
}
body.hps-page .header--sticky.header-one.sticky .mainmenu > li > a:hover,
body.hps-page .header--sticky.header-one.sticky .mainmenu > li:hover > a,
body.hps-page .header--sticky.header-one.sticky .mainmenu > li.is-active > a {
color: #fff !important;
}
/* Submenus on sticky stay light for readability */
body.hps-page .header--sticky.header-one.sticky .mainmenu .submenu {
background: #fff !important;
border-color: rgba(255, 255, 255, .9) !important;
}
body.hps-page .header--sticky.header-one.sticky #search,
body.hps-page .header--sticky.header-one.sticky #menu-btn {
background: rgba(255, 255, 255, .15) !important;
border-color: rgba(255, 255, 255, .2) !important;
color: #fff !important;
}
body.hps-page .header--sticky.header-one.sticky #search:hover,
body.hps-page .header--sticky.header-one.sticky #menu-btn:hover {
background: #fff !important;
border-color: #fff !important;
color: var(--hps-green-700) !important;
}
/* Phone button on green: invert to white with green icon */
body.hps-page .header--sticky.header-one.sticky .hps-header-phone {
background: #fff !important;
color: var(--hps-green-700) !important;
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .15) !important;
}
body.hps-page .header--sticky.header-one.sticky .hps-header-phone::before,
body.hps-page .header--sticky.header-one.sticky .hps-header-phone::after {
border-color: rgba(255, 255, 255, .8) !important;
}
/* Cotação button on green: switch to white background */
body.hps-page .header--sticky.header-one.sticky .button-area .quote-btn {
background: #fff !important;
color: var(--hps-green-700) !important;
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .15) !important;
}
body.hps-page .header--sticky.header-one.sticky .button-area .quote-btn:hover {
background: var(--hps-ink) !important;
color: #fff !important;
}
body.hps-page .header--sticky.header-one.sticky .mainmenu .lang_selected {
background: rgba(255, 255, 255, .15) !important;
border-color: rgba(255, 255, 255, .25) !important;
}
body.hps-page .header--sticky.header-one.sticky .header-main-one .thumbnail img {
filter: brightness(0) invert(1);
max-height: 40px !important;
}
body.hps-page .header-main-one .thumbnail img {
max-height: 56px;
width: auto;
}
body.hps-page .mainmenu > li > a {
font-family: var(--hps-font) !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--hps-ink-700) !important;
padding: 10px 4px !important;
margin: 0 12px !important;
transition: color .2s ease !important;
position: relative !important;
}
/* Animated underline reveal on hover */
body.hps-page .mainmenu > li > a::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: 4px;
height: 2px;
background: var(--hps-green);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
body.hps-page .mainmenu > li:hover > a::after,
body.hps-page .mainmenu > li.is-active > a::after {
transform: scaleX(1);
}
body.hps-page .mainmenu > li > a:hover,
body.hps-page .mainmenu > li:hover > a {
color: var(--hps-green-700) !important;
}
/* Header shrink-on-scroll */
body.hps-page .header--sticky.header-one.sticky .header-main-one {
padding: 8px 0 !important;
}
body.hps-page .header--sticky.header-one.sticky .thumbnail img {
max-height: 44px !important;
transition: max-height .25s ease;
}
body.hps-page .header-main-one .thumbnail img {
transition: max-height .25s ease, transform .3s ease;
}
body.hps-page .header-main-one .thumbnail a:hover img {
transform: scale(1.04);
}
body.hps-page .mainmenu .submenu {
border-radius: var(--hps-radius-sm) !important;
box-shadow: var(--hps-shadow-lg) !important;
border: 1px solid var(--hps-line) !important;
padding: 8px !important;
background: #fff !important;
}
body.hps-page .mainmenu .submenu li a {
border-radius: var(--hps-radius-xs) !important;
padding: 10px 14px !important;
font-weight: 500 !important;
color: var(--hps-ink-700) !important;
transition: background .2s ease, color .2s ease !important;
}
body.hps-page .mainmenu .submenu li a:hover {
background: var(--hps-green-50) !important;
color: var(--hps-green-700) !important;
}
body.hps-page .header-main-one .button-area .quote-btn,
body.hps-page .header-main-one .button-area .rts-btn.btn-primary {
background: var(--hps-green) !important;
border-radius: 999px !important;
padding: 9px 20px !important;
font-family: var(--hps-font) !important;
font-weight: 600 !important;
font-size: 13px !important;
color: #fff !important;
border: 0 !important;
box-shadow: var(--hps-shadow-green) !important;
transition: transform .2s ease, box-shadow .2s ease !important;
position: relative !important;
overflow: hidden;
}
body.hps-page .header-main-one .button-area .quote-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .8s ease;
}
body.hps-page .header-main-one .button-area .quote-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px -8px rgba(139, 188, 56, .55) !important;
}
body.hps-page .header-main-one .button-area .quote-btn:hover::before {
transform: translateX(100%);
}
/* Quick phone — icon-only with tooltip */
.hps-header-phone {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--hps-green);
color: #fff !important;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin-right: 10px;
margin-left: 10px;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
position: relative;
box-shadow: 0 8px 18px -6px rgba(139, 188, 56, .55);
}
.hps-header-phone i {
font-size: 14px;
transform: rotate(-12deg);
transition: transform .3s ease;
}
.hps-header-phone:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 14px 24px -6px rgba(139, 188, 56, .65);
color: #fff !important;
}
.hps-header-phone:hover i { transform: rotate(0deg); }
/* Pulse rings */
.hps-header-phone::before,
.hps-header-phone::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--hps-green);
animation: hps-pulse 2s ease-out infinite;
pointer-events: none;
}
.hps-header-phone::after { animation-delay: 1s; }
/* Tooltip */
.hps-header-phone .tip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
background: var(--hps-ink);
color: #fff;
font-family: var(--hps-font);
font-weight: 600;
font-size: 12px;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 100;
}
.hps-header-phone .tip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: var(--hps-ink);
}
.hps-header-phone:hover .tip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@keyframes hps-pulse {
0% { transform: scale(1); opacity: .6; }
100% { transform: scale(1.8); opacity: 0; }
}
@media (max-width: 991px) {
.hps-header-phone { display: none; }
}
body.hps-page .header-main-one .button-area #search,
body.hps-page .header-main-one .button-area #menu-btn {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: var(--hps-bg-soft) !important;
color: var(--hps-ink) !important;
border: 1px solid var(--hps-line) !important;
padding: 0 !important;
margin-left: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.hps-page .header-main-one .button-area #search:hover,
body.hps-page .header-main-one .button-area #menu-btn:hover {
background: var(--hps-green-50) !important;
border-color: var(--hps-green-100) !important;
color: var(--hps-green-700) !important;
}
/* Language switcher */
body.hps-page .mainmenu .lang_selected {
padding: 8px 12px !important;
border-radius: 999px !important;
background: var(--hps-bg-soft) !important;
border: 1px solid var(--hps-line) !important;
}
/* =========================================================
FOOTER — light modern
========================================================= */
body.hps-page .rts-footer-area.footer-one {
background: #ffffff !important;
color: var(--hps-ink-500) !important;
margin-top: 0 !important;
padding-top: 60px !important;
border-top: 1px solid var(--hps-line);
}
body.hps-page .rts-footer-area .bg-shape-f1 { background: none !important; }
/* Newsletter CTA — keep colorful but compact */
body.hps-page .rts-footer-area .rts-cta-wrapper {
margin-top: 0;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
/* =========================================================
NEWSLETTER — premium, with icon + trust signal
========================================================= */
body.hps-page .rts-footer-area .background-cta.hps-newsletter-wrap {
background:
radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .15) 0%, transparent 50%),
radial-gradient(circle at 0% 100%, rgba(0, 0, 0, .08) 0%, transparent 50%),
linear-gradient(135deg, #8BBC38 0%, #6FA124 60%, #5F8A1A 100%) !important;
border-radius: var(--hps-radius-xl) !important;
padding: 48px 56px !important;
color: #fff !important;
box-shadow: 0 30px 60px -20px rgba(95, 138, 26, .45) !important;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
position: relative;
overflow: hidden;
}
@media (max-width: 991px) {
body.hps-page .rts-footer-area .background-cta.hps-newsletter-wrap {
grid-template-columns: 1fr;
padding: 36px 28px !important;
gap: 28px;
}
}
/* Decorative animated blobs */
.hps-newsletter-blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hps-newsletter-blob-1 {
top: -120px;
right: -120px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255, 255, 255, .25) 0%, transparent 70%);
animation: hps-blob-drift 12s ease-in-out infinite;
}
.hps-newsletter-blob-2 {
bottom: -100px;
left: -80px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, transparent 70%);
animation: hps-blob-drift 14s ease-in-out infinite reverse;
}
@keyframes hps-blob-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, 30px); }
}
/* Content — left side */
.hps-newsletter-content {
display: flex;
align-items: flex-start;
gap: 18px;
position: relative;
z-index: 2;
}
.hps-newsletter-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(255, 255, 255, .2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hps-newsletter-icon .hps-svg { display: block; }
.hps-newsletter-text { flex: 1; }
.hps-newsletter-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff !important;
background: rgba(255, 255, 255, .18) !important;
font-family: var(--hps-font) !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
padding: 6px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, .28);
margin: 0 0 12px !important;
}
.hps-newsletter-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
animation: hps-cta-dot 2s ease-out infinite;
}
.hps-newsletter-title {
color: #fff !important;
font-family: var(--hps-font-display) !important;
font-weight: 800 !important;
font-size: clamp(22px, 2.5vw, 30px) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
margin: 0 0 8px !important;
}
.hps-newsletter-disc {
color: rgba(255, 255, 255, .9) !important;
font-family: var(--hps-font) !important;
font-size: 14px !important;
line-height: 1.55 !important;
margin: 0 !important;
max-width: 420px;
}
/* Form — right side */
.hps-newsletter-form {
position: relative;
z-index: 2;
}
.hps-newsletter-trust {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .85) !important;
font-size: 12px !important;
margin: 14px 0 0 !important;
justify-content: flex-end;
}
.hps-newsletter-trust .hps-svg { color: rgba(255, 255, 255, .85); }
@media (max-width: 991px) {
.hps-newsletter-trust { justify-content: flex-start; }
}
/* Column titles */
body.hps-page .rts-footer-area .footer-one-single-wized .title {
color: var(--hps-ink) !important;
font-family: var(--hps-font-display) !important;
font-weight: 700 !important;
font-size: 16px !important;
margin-bottom: 18px !important;
}
body.hps-page .rts-footer-area .footer-one-single-wized .links li a,
body.hps-page .rts-footer-area .footer-one-single-wized .day,
body.hps-page .rts-footer-area .footer-one-single-wized .time,
body.hps-page .rts-footer-area .footer-one-single-wized .post-right p,
body.hps-page .rts-footer-area .footer-one-single-wized .post-right .title,
body.hps-page .rts-footer-area .footer-one-single-wized .post-right .red-more {
color: var(--hps-ink-500) !important;
font-family: var(--hps-font) !important;
font-size: 14px !important;
transition: color .2s ease;
}
body.hps-page .rts-footer-area .footer-one-single-wized .links li a:hover { color: var(--hps-green-700) !important; }
body.hps-page .rts-footer-area .footer-one-single-wized .post-right .title { color: var(--hps-ink) !important; font-weight: 600 !important; }
body.hps-page .rts-footer-area .footer-one-single-wized .post-right .red-more {
color: var(--hps-green-700) !important;
font-weight: 600 !important;
}
body.hps-page .rts-footer-area .wized-title { border: 0 !important; }
body.hps-page .rts-footer-area .wized-title img { display: none !important; }
body.hps-page .rts-footer-area .contact-us {
background: var(--hps-green) !important;
border-radius: 999px !important;
padding: 12px 24px !important;
font-weight: 600 !important;
color: #fff !important;
}
body.hps-page .rts-copyright-area {
background:
linear-gradient(135deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 50%),
linear-gradient(135deg, #A3CE52 0%, #8BBC38 100%) !important;
border-top: 1px solid rgba(255, 255, 255, .2) !important;
padding: 20px 0 !important;
margin-top: 50px !important;
}
body.hps-page .rts-copyright-area p {
color: rgba(255, 255, 255, .95) !important;
font-family: var(--hps-font) !important;
font-size: 13px !important;
margin: 0 !important;
font-weight: 500;
}
/* Newsletter input — premium glass design with icon */
.hps-newsletter-input {
display: flex;
align-items: center;
background: rgba(255, 255, 255, .15);
border-radius: 999px;
padding: 6px 6px 6px 18px;
max-width: 480px;
margin-left: auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .25);
transition: background .2s ease, border-color .2s ease;
gap: 10px;
}
.hps-newsletter-input:focus-within {
background: rgba(255, 255, 255, .22);
border-color: rgba(255, 255, 255, .5);
}
.hps-newsletter-input > .hps-svg {
color: rgba(255, 255, 255, .8);
flex-shrink: 0;
}
.hps-newsletter-input input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
padding: 12px 4px;
font-size: 14px;
color: #fff;
outline: none;
font-family: var(--hps-font);
font-weight: 500;
}
.hps-newsletter-input input::placeholder { color: rgba(255, 255, 255, .75); }
.hps-newsletter-input button {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: var(--hps-green-700);
border: 0;
border-radius: 999px;
padding: 11px 22px;
font-weight: 700;
cursor: pointer;
font-family: var(--hps-font);
font-size: 14px;
transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .15);
white-space: nowrap;
}
.hps-newsletter-input button .hps-svg { transition: transform .25s ease; }
.hps-newsletter-input button:hover .hps-svg { transform: translateX(3px); }
.hps-newsletter-input button:hover {
background: var(--hps-ink);
color: #fff;
box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .3);
}
@media (max-width: 991px) {
.hps-newsletter-input { margin-left: 0; max-width: 100%; }
}
/* =========================================================
FOOTER GRID — 5 columns (brand wider, platforms wider)
========================================================= */
body.hps-page .hps-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1.2fr;
gap: 40px;
padding: 60px 0 50px;
}
@media (max-width: 1199px) {
body.hps-page .hps-footer-grid {
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 36px;
}
body.hps-page .hps-footer-grid > :last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
body.hps-page .hps-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
body.hps-page .hps-footer-brand,
body.hps-page .hps-footer-grid > :last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
body.hps-page .hps-footer-grid { grid-template-columns: 1fr; }
body.hps-page .hps-footer-brand,
body.hps-page .hps-footer-grid > * { grid-column: auto; }
}
/* Brand column */
.hps-footer-brand .hps-footer-logo {
display: inline-block;
margin-bottom: 18px;
}
.hps-footer-brand .hps-footer-logo img {
max-height: 54px;
width: auto;
display: block;
}
.hps-footer-tagline {
color: var(--hps-ink-500) !important;
font-size: 14px !important;
line-height: 1.65 !important;
margin: 0 0 22px !important;
max-width: 340px;
}
.hps-footer-social {
display: flex;
gap: 8px;
}
.hps-footer-social a {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--hps-bg-soft);
border: 1px solid var(--hps-line);
color: var(--hps-ink) !important;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.hps-footer-social a:hover {
background: var(--hps-green);
border-color: var(--hps-green);
color: #fff !important;
transform: translateY(-2px);
}
/* Column titles */
body.hps-page .hps-footer-title {
color: var(--hps-ink) !important;
font-family: var(--hps-font-display) !important;
font-weight: 700 !important;
font-size: 15px !important;
margin: 0 0 18px !important;
padding-bottom: 12px;
border-bottom: 1px solid var(--hps-line);
position: relative;
}
body.hps-page .hps-footer-title::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 28px;
height: 2px;
background: var(--hps-green);
}
/* Footer link lists */
body.hps-page .hps-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
body.hps-page .hps-footer-links li { margin: 0 0 10px; }
body.hps-page .hps-footer-links a {
color: var(--hps-ink-500) !important;
font-family: var(--hps-font) !important;
font-size: 14px !important;
text-decoration: none !important;
transition: color .2s ease, transform .2s ease;
display: inline-block;
position: relative;
}
body.hps-page .hps-footer-links a::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hps-green);
display: inline-block;
margin-right: 8px;
opacity: 0;
transform: scale(0);
transition: opacity .2s ease, transform .2s ease;
}
body.hps-page .hps-footer-links a:hover {
color: var(--hps-green-700) !important;
transform: translateX(4px);
}
body.hps-page .hps-footer-links a:hover::before {
opacity: 1;
transform: scale(1);
}
/* Contact list with icons */
body.hps-page .hps-footer-contacts {
list-style: none;
margin: 0;
padding: 0;
}
body.hps-page .hps-footer-contacts li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
color: var(--hps-ink-500);
font-size: 14px;
font-family: var(--hps-font);
}
body.hps-page .hps-footer-contacts li .hps-svg {
color: var(--hps-green-700);
flex-shrink: 0;
width: 18px;
height: 18px;
padding: 4px;
background: var(--hps-green-50);
border-radius: 8px;
box-sizing: content-box;
}
body.hps-page .hps-footer-contacts a,
body.hps-page .hps-footer-contacts span {
color: var(--hps-ink) !important;
text-decoration: none !important;
font-weight: 500;
transition: color .2s ease;
}
body.hps-page .hps-footer-contacts a:hover {
color: var(--hps-green-700) !important;
}
/* Mini platform cards in footer */
.hps-footer-platforms {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 8px;
}
.hps-footer-platform {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 10px;
background: var(--hps-bg-soft);
border: 1px solid var(--hps-line);
border-radius: var(--hps-radius);
text-decoration: none;
color: var(--hps-ink) !important;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hps-footer-platform:hover {
transform: translateY(-2px);
border-color: rgba(139, 188, 56, .4);
background: #fff;
}
.hps-footer-platform i {
font-size: 22px;
color: var(--hps-green);
}
.hps-footer-platform-logo {
height: 36px;
max-width: 90px;
width: auto;
object-fit: contain;
display: block;
}
.hps-footer-platform span {
font-family: var(--hps-font);
font-weight: 600;
font-size: 11px;
color: var(--hps-ink) !important;
}
/* =========================================================
PAGE LAYOUT
========================================================= */
.hps-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
.hps-section { padding: 100px 0; position: relative; }
.hps-section-sm { padding: 60px 0; }
@media (max-width: 768px) {
.hps-section { padding: 64px 0; }
}
.hps-section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.hps-section-head p { margin-top: 14px; font-size: 17px; }
.hps-eyebrow {
display: inline-block;
font-family: var(--hps-font);
font-weight: 700;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hps-green-700);
margin: 0 0 16px;
}
.hps-h1 {
font-family: var(--hps-font-display);
font-size: clamp(42px, 6.2vw, 78px);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.04em;
color: var(--hps-ink);
}
.hps-h2 {
font-family: var(--hps-font-display);
font-size: clamp(30px, 4vw, 50px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--hps-ink);
}
.hps-h3 {
font-family: var(--hps-font-display);
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 700;
color: var(--hps-ink);
}
.hps-lead { font-size: 18px; line-height: 1.65; color: var(--hps-ink-500); }
.hps-accent { color: var(--hps-green); }
/* =========================================================
BUTTONS
========================================================= */
.hps-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
border-radius: 999px;
font-family: var(--hps-font);
font-weight: 600;
font-size: 15px;
text-decoration: none;
border: 0;
cursor: pointer;
line-height: 1;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
white-space: nowrap;
}
.hps-btn i, .hps-btn svg { font-size: 13px; transition: transform .25s ease; }
.hps-btn:hover i, .hps-btn:hover svg { transform: translateX(3px); }
.hps-btn-primary {
background: var(--hps-green);
color: #fff;
box-shadow: var(--hps-shadow-green);
}
.hps-btn-primary:hover {
color: #fff;
background: var(--hps-green-600);
transform: translateY(-1px);
box-shadow: 0 18px 36px -10px rgba(139, 188, 56, .6);
}
.hps-btn-ghost {
background: #fff;
color: var(--hps-ink);
border: 1px solid var(--hps-line);
}
.hps-btn-ghost:hover {
color: var(--hps-ink);
background: var(--hps-bg-soft);
transform: translateY(-1px);
border-color: var(--hps-ink-300);
}
.hps-btn-dark {
background: var(--hps-ink);
color: #fff;
}
.hps-btn-dark:hover {
color: #fff;
background: var(--hps-ink-700);
}
.hps-btn-link {
color: var(--hps-green-700);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap .2s ease;
}
.hps-btn-link:hover { color: var(--hps-green-700); gap: 12px; }
/* =========================================================
HERO
========================================================= */
.hps-hero {
position: relative;
padding: 150px 0 90px;
overflow: hidden;
background: #ffffff;
}
@media (max-width: 768px) { .hps-hero { padding: 115px 0 60px; } }
/* ---- Hero entrance animations (one-shot, on load) ---- */
.hps-hero-badge,
.hps-hero-disc,
.hps-hero-ctas,
.hps-hero-pills {
opacity: 0;
transform: translateY(16px);
animation: hps-rise .8s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hps-hero-badge { animation-delay: .05s; }
.hps-hero-disc { animation-delay: .85s; }
.hps-hero-ctas { animation-delay: 1s; }
.hps-hero-pills { animation-delay: 1.15s; }
@keyframes hps-rise {
to { opacity: 1; transform: translateY(0); }
}
/* ---- Hero image gentle float (infinite, very subtle) ---- */
.hps-hero-visual img {
animation: hps-hero-float 7s ease-in-out infinite;
}
@keyframes hps-hero-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* ---- Hero image entrance (fade + scale up) ---- */
.hps-hero-visual {
opacity: 0;
transform: scale(.96);
animation: hps-hero-in 1.1s cubic-bezier(.2, .8, .2, 1) .25s forwards;
}
@keyframes hps-hero-in {
to { opacity: 1; transform: scale(1); }
}
/* ---- Badge subtle shine sweep ---- */
.hps-hero-badge {
position: relative;
overflow: hidden;
}
.hps-hero-badge::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%);
animation: hps-shine 5s ease-in-out 2s infinite;
}
@keyframes hps-shine {
0%, 30% { left: -100%; }
60%, 100% { left: 200%; }
}
/* ---- Primary CTA — gentle pulse (very subtle) ---- */
.hps-hero-ctas .hps-btn-primary {
animation: hps-cta-pulse 3.5s ease-in-out 2s infinite;
}
@keyframes hps-cta-pulse {
0%, 100% { box-shadow: var(--hps-shadow-green); }
50% { box-shadow: 0 16px 36px -8px rgba(139, 188, 56, .65); }
}
/* ---- Reduce motion: disable everything ---- */
@media (prefers-reduced-motion: reduce) {
.hps-hero-badge,
.hps-hero-disc,
.hps-hero-ctas,
.hps-hero-pills,
.hps-hero-visual,
.hps-hero-visual img,
.hps-hero-title .word {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.hps-hero-badge::after,
.hps-hero-ctas .hps-btn-primary {
animation: none !important;
}
}
.hps-hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
position: relative;
z-index: 3;
}
.hps-hero-content { position: relative; z-index: 4; }
@media (max-width: 991px) { .hps-hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hps-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--hps-green-50);
color: var(--hps-green-700);
font-weight: 700;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 999px;
margin-bottom: 24px;
border: 1px solid var(--hps-green-100);
}
.hps-hero-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hps-green);
box-shadow: 0 0 0 4px rgba(139, 188, 56, .22);
}
.hps-hero-title {
margin-bottom: 22px;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.98;
}
/* Accent word stays green */
.hps-hero-title .accent {
color: var(--hps-green);
display: inline-block;
position: relative;
}
/* Underline brush under accent word — triggered after typewriter finishes */
.hps-hero-title .accent::after {
content: '';
position: absolute;
left: 4%;
right: 4%;
bottom: -6px;
height: 10px;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
transform: scaleX(0);
transform-origin: left;
transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.hps-hero-title.is-typed .accent::after {
transform: scaleX(1);
}
/* =========================================================
TYPEWRITER — char-by-char reveal + blinking caret
========================================================= */
.hps-hero-title[data-typewriter] .hps-tw-char {
opacity: 0;
transition: opacity .04s linear;
}
.hps-hero-title[data-typewriter] .hps-tw-char.is-visible {
opacity: 1;
}
/* Blinking caret at the end while typing */
.hps-hero-title[data-typewriter]::after {
content: '';
display: inline-block;
width: 4px;
height: 0.85em;
background: var(--hps-green);
margin-left: 6px;
vertical-align: -10%;
border-radius: 1px;
animation: hps-caret-blink .8s steps(1) infinite;
box-shadow: 0 0 12px rgba(139, 188, 56, .5);
}
/* After typing finishes, caret blinks twice then fades */
.hps-hero-title[data-typewriter].is-typed::after {
animation: hps-caret-fade 1.8s ease-out forwards;
}
@keyframes hps-caret-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes hps-caret-fade {
0% { opacity: 1; }
20% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 0; }
80% { opacity: 1; }
100% { opacity: 0; }
}
/* Reduced motion — show all text immediately, no caret */
@media (prefers-reduced-motion: reduce) {
.hps-hero-title[data-typewriter] .hps-tw-char {
opacity: 1 !important;
}
.hps-hero-title[data-typewriter]::after {
display: none;
}
}
/* =========================================================
HERO — Floating cards & visual
========================================================= */
.hps-hero-visual { position: relative; transform-style: preserve-3d; }
/* Subtle parallax tilt (controlled via JS variables) */
.hps-hero-visual-inner {
width: 100%;
height: 100%;
border-radius: var(--hps-radius-lg);
overflow: hidden;
box-shadow: var(--hps-shadow-lg);
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.hps-hero-visual-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Floating cards on hero image */
.hps-hero-float-card {
position: absolute;
background: #fff;
padding: 14px 18px;
border-radius: var(--hps-radius);
box-shadow: var(--hps-shadow-lg);
display: flex;
align-items: center;
gap: 12px;
z-index: 4;
animation: hps-float 5s ease-in-out infinite;
border: 1px solid var(--hps-line);
}
.hps-hero-float-card.tl { top: 8%; left: -8%; animation-delay: 0s; }
.hps-hero-float-card.br { bottom: 14%; right: -10%; animation-delay: 1.8s; }
@keyframes hps-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.hps-hero-float-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--hps-green-50);
color: var(--hps-green-700);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.hps-hero-float-card.is-dark .hps-hero-float-icon {
background: #FFF4E0;
color: #B57A1B;
}
.hps-hero-float-text strong {
display: block;
font-family: var(--hps-font-display);
color: var(--hps-ink);
font-weight: 800;
font-size: 15px;
line-height: 1.15;
}
.hps-hero-float-text span {
display: block;
font-size: 11px;
color: var(--hps-ink-400);
line-height: 1.3;
}
@media (max-width: 991px) {
.hps-hero-float-card.tl { left: 4%; }
.hps-hero-float-card.br { right: 4%; }
}
/* Live indicator dot */
.hps-hero-live {
position: absolute;
top: 18px;
right: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(10px);
font-family: var(--hps-font);
font-weight: 600;
font-size: 12px;
color: var(--hps-ink);
box-shadow: var(--hps-shadow-sm);
}
.hps-hero-live .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #22c55e;
position: relative;
}
.hps-hero-live .dot::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid #22c55e;
animation: hps-pulse 1.8s ease-out infinite;
}
/* =========================================================
HERO — Marquee trust strip
========================================================= */
.hps-hero-marquee {
position: relative;
z-index: 2;
margin-top: 90px;
padding: 22px 0;
border-top: 1px solid rgba(231, 235, 240, .8);
border-bottom: 1px solid rgba(231, 235, 240, .8);
overflow: hidden;
background: rgba(255, 255, 255, .55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hps-hero-marquee-track {
display: flex;
gap: 56px;
width: max-content;
animation: hps-marquee 30s linear infinite;
}
.hps-hero-marquee:hover .hps-hero-marquee-track { animation-play-state: paused; }
.hps-hero-marquee-item {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--hps-font);
font-weight: 600;
font-size: 15px;
color: var(--hps-ink-500);
white-space: nowrap;
}
.hps-hero-marquee-item i {
font-size: 18px;
color: var(--hps-green-700);
}
.hps-hero-marquee-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--hps-ink-300);
}
@keyframes hps-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hps-hero-disc {
font-size: 17px;
line-height: 1.65;
color: var(--hps-ink-500);
max-width: 520px;
margin-bottom: 36px;
font-weight: 400;
}
.hps-hero-ctas {
display: flex;
flex-wrap: nowrap;
gap: 14px;
margin-bottom: 44px;
}
@media (max-width: 380px) {
.hps-hero-ctas { flex-wrap: wrap; }
}
/* Hero stats — horizontal pills */
.hps-hero-pills {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 12px;
max-width: 640px;
justify-content: start;
}
@media (max-width: 600px) {
.hps-hero-pills { grid-template-columns: 1fr; }
}
.hps-hero-pill {
display: inline-flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid var(--hps-line);
padding: 10px 18px 10px 10px;
border-radius: 14px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hps-hero-pill:hover {
transform: translateY(-2px);
box-shadow: var(--hps-shadow);
border-color: rgba(139, 188, 56, .35);
}
.hps-hero-pill .ico {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--hps-green-50);
color: var(--hps-green-700);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.hps-hero-pill strong {
display: block;
font-family: var(--hps-font-display);
color: var(--hps-ink);
font-weight: 800;
font-size: 17px;
line-height: 1.1;
}
.hps-hero-pill span {
display: block;
font-size: 11px;
color: var(--hps-ink-400);
line-height: 1.3;
}
/* Hero image — blended into the page with feathered edges */
.hps-hero-visual {
position: relative;
aspect-ratio: 3 / 2;
overflow: visible;
}
.hps-hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
position: relative;
z-index: 2;
/* Feather the edges so the image blends into the white page.
Left and bottom fade strongest (where image meets content);
Top fades softly; Right barely fades (strokes integrate there). */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, #000 14%, #000 100%),
linear-gradient(to top, transparent 0%, #000 10%, #000 100%),
linear-gradient(to bottom,transparent 0%, #000 6%, #000 100%);
-webkit-mask-composite: source-in;
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image:
linear-gradient(to right, transparent 0%, #000 14%, #000 100%),
linear-gradient(to top, transparent 0%, #000 10%, #000 100%),
linear-gradient(to bottom,transparent 0%, #000 6%, #000 100%);
mask-composite: intersect;
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
/* Soft white wash blob beneath the image — mimics natural lighting/transition */
.hps-hero-visual::before {
content: '';
position: absolute;
inset: -20px -10px -10px -10px;
background: radial-gradient(ellipse 75% 80% at 50% 50%, rgba(255, 255, 255, 0) 55%, #FFFFFF 92%);
pointer-events: none;
z-index: 3;
}
@media (max-width: 991px) {
.hps-hero-visual { aspect-ratio: 4 / 3; }
}
/* Green flowing strokes — float around the image, not on top */
.hps-hero-deco {
position: absolute;
pointer-events: none;
z-index: 1;
overflow: visible;
}
.hps-hero-deco--tr {
top: -20px;
right: -50px;
width: 240px;
height: 200px;
animation: hps-deco-float-1 6s ease-in-out infinite;
}
.hps-hero-deco--br {
bottom: -30px;
right: -40px;
width: 260px;
height: 220px;
animation: hps-deco-float-2 7s ease-in-out infinite;
}
.hps-hero-deco path {
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: hps-draw 1.4s cubic-bezier(.55, 0, .25, 1) forwards;
}
.hps-hero-deco--tr path:nth-child(1) { animation-delay: .2s; }
.hps-hero-deco--tr path:nth-child(2) { animation-delay: .35s; }
.hps-hero-deco--tr path:nth-child(3) { animation-delay: .5s; }
.hps-hero-deco--tr path:nth-child(4) { animation-delay: .65s; }
.hps-hero-deco--br path:nth-child(1) { animation-delay: .8s; }
.hps-hero-deco--br path:nth-child(2) { animation-delay: .95s; }
.hps-hero-deco--br path:nth-child(3) { animation-delay: 1.1s; }
.hps-hero-deco--br path:nth-child(4) { animation-delay: 1.25s; }
@keyframes hps-draw {
to { stroke-dashoffset: 0; }
}
@keyframes hps-deco-float-1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-8px, 6px); }
}
@keyframes hps-deco-float-2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(8px, -6px); }
}
@media (max-width: 991px) {
.hps-hero-deco--tr,
.hps-hero-deco--br {
width: 160px;
height: 140px;
}
.hps-hero-deco--tr { right: -20px; }
.hps-hero-deco--br { right: -20px; }
}
@media (prefers-reduced-motion: reduce) {
.hps-hero-deco--tr,
.hps-hero-deco--br { animation: none; }
.hps-hero-deco path { animation: none; stroke-dashoffset: 0; }
}
/* Decorative green strokes on hero visual */
.hps-hero-strokes {
position: absolute;
right: -40px;
top: -40px;
width: 240px;
height: 240px;
z-index: 1;
pointer-events: none;
opacity: .85;
}
.hps-hero-strokes svg { width: 100%; height: 100%; }
/* =========================================================
PLATFORM SHOWCASE — 3 cards
========================================================= */
.hps-platforms {
background: var(--hps-bg-soft);
padding: 100px 0;
}
.hps-platforms-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 991px) { .hps-platforms-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
.hps-platform-card {
background: #fff;
border: 1px solid var(--hps-line);
border-radius: var(--hps-radius-lg);
padding: 32px 28px;
display: flex;
flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
position: relative;
overflow: hidden;
}
.hps-platform-card:hover {
transform: translateY(-4px);
box-shadow: var(--hps-shadow);
border-color: rgba(139, 188, 56, .35);
}
.hps-platform-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
justify-content: center;
text-align: center;
flex-direction: column;
}
.hps-platform-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--hps-green-50);
color: var(--hps-green-700);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
/* Icon-only logo (MIF) — keep the pill background */
.hps-platform-card.has-icon-logo .hps-platform-icon {
background: var(--hps-green-50);
padding: 8px;
}
.hps-platform-card.has-icon-logo .hps-platform-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Wordmark logos (MozJobs / Mozlead) — no pill background, full logo shown */
.hps-platform-card.has-wordmark .hps-platform-icon {
width: auto;
min-width: 0;
height: 64px;
border-radius: 0;
background: transparent;
padding: 0;
}
.hps-platform-card.has-wordmark .hps-platform-icon img {
max-height: 64px;
width: auto;
object-fit: contain;
display: block;
}
/* Wordmark cards have no separate name div — the head needs different layout */
.hps-platform-card.has-wordmark .hps-platform-head {
justify-content: center;
min-height: 64px;
}
.hps-platform-name {
font-family: var(--hps-font-display);
font-weight: 800;
color: var(--hps-ink);
font-size: 26px;
letter-spacing: -0.025em;
}
.hps-platform-name .accent { color: var(--hps-green); }
.hps-platform-card > p {
font-size: 14px;
line-height: 1.55;
text-align: center;
margin-bottom: 18px;
color: var(--hps-ink-500);
}
.hps-platform-visual {
background: linear-gradient(135deg, #F1F8E4 0%, #FFFFFF 100%);
border-radius: var(--hps-radius);
padding: 14px;
margin-bottom: 18px;
border: 1px solid var(--hps-line-soft);
}
.hps-platform-mockup {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--hps-radius-sm);
box-shadow: var(--hps-shadow-sm);
background: #fff;
display: block;
overflow: hidden;
}
.hps-platform-mockup svg {
width: 100%;
height: 100%;
display: block;
}
.hps-platform-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: auto;
}
.hps-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--hps-green-50);
color: var(--hps-green-700);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--hps-green-100);
}
.hps-tag i { font-size: 10px; }
/* Coming soon badge */
.hps-platform-badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--hps-ink);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
z-index: 2;
}
.hps-platform-card.is-soon { background: var(--hps-bg-soft); }
.hps-platform-card.is-soon .hps-platform-visual { opacity: .85; }
/* =========================================================
BRAND PILLARS (Missão / Valores / Visão)
========================================================= */
.hps-pillars { padding: 100px 0; background: #fff; }
.hps-pillar {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 0;
background: #fff;
border: 1px solid var(--hps-line);
border-radius: var(--hps-radius-lg);
overflow: hidden;
margin-bottom: 18px;
transition: box-shadow .25s ease, transform .25s ease;
}
.hps-pillar:hover { box-shadow: var(--hps-shadow); transform: translateY(-2px); }
.hps-pillar.is-reverse { grid-template-columns: 1.2fr 1fr; }
.hps-pillar.is-reverse .hps-pillar-image { order: 2; }
.hps-pillar.is-reverse .hps-pillar-body { order: 1; }
@media (max-width: 768px) {
.hps-pillar, .hps-pillar.is-reverse { grid-template-columns: 1fr; }
.hps-pillar.is-reverse .hps-pillar-image { order: 0; }
.hps-pillar.is-reverse .hps-pillar-body { order: 0; }
}
.hps-pillar-image {
position: relative;
min-height: 280px;
overflow: hidden;
background: var(--hps-green-50);
}
.hps-pillar-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.hps-pillar:hover .hps-pillar-image img {
transform: scale(1.04);
}
/* Soft white feathered edge on the side facing content — blends image into card */
.hps-pillar-image::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
/* Normal pillar (image-left, content-right): fade the RIGHT edge into white */
.hps-pillar:not(.is-reverse) .hps-pillar-image::after {
background: linear-gradient(90deg, transparent 75%, rgba(255, 255, 255, .9) 100%);
}
/* Reverse pillar (image-right, content-left): fade the LEFT edge into white */
.hps-pillar.is-reverse .hps-pillar-image::after {
background: linear-gradient(270deg, transparent 75%, rgba(255, 255, 255, .9) 100%);
}
.hps-pillar { position: relative; }
.hps-pillar-image { overflow: hidden; }
.hps-pillar-body {
padding: 36px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 768px) { .hps-pillar-body { padding: 28px; } }
.hps-pillar-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--hps-green-50);
color: var(--hps-green-700);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 16px;
}
.hps-pillar-body h3 { font-size: 22px; margin-bottom: 10px; }
.hps-pillar-body p { font-size: 15px; line-height: 1.65; }
/* =========================================================
SERVICES GRID
========================================================= */
.hps-services { padding: 100px 0; background: var(--hps-bg-soft); }
/* Flexbox so orphan cards center naturally instead of left-aligning */
.hps-services-grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
}
.hps-services-grid > .hps-service-card {
/* 4 per row at desktop: 25% minus shared gap distribution */
flex: 0 0 calc(25% - 14px);
max-width: calc(25% - 14px);
}
@media (max-width: 1199px) {
.hps-services-grid > .hps-service-card {
flex-basis: calc(33.333% - 12px);
max-width: calc(33.333% - 12px);
}
}
@media (max-width: 768px) {
.hps-services-grid > .hps-service-card {
flex-basis: calc(50% - 9px);
max-width: calc(50% - 9px);
}
}
@media (max-width: 480px) {
.hps-services-grid > .hps-service-card {
flex-basis: 100%;
max-width: 100%;
}
}
/* Platform cards (.is-platform) — subtle green tint to distinguish */
.hps-service-card.is-platform {
background:
radial-gradient(circle at 100% 0%, rgba(139, 188, 56, .14) 0%, transparent 60%),
linear-gradient(180deg, #F8FCEF 0%, #FFFFFF 100%);
border-color: rgba(139, 188, 56, .25);
}
.hps-service-card.is-platform h4 {
letter-spacing: -0.025em;
}
/* Platform logo container (replaces .hps-service-icon for platforms) */
.hps-platform-logo {
display: flex;
align-items: center;
height: 56px;
margin-bottom: 18px;
}
.hps-platform-logo img {
max-height: 56px;
max-width: 180px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* Cards with wordmark logos (Mozlead, MozJobs) — hide H4 since logo has text */
.hps-service-card.has-wordmark h4 {
display: none;
}
.hps-service-card.has-wordmark .hps-platform-logo {
height: 64px;
margin-bottom: 14px;
}
.hps-service-card.has-wordmark .hps-platform-logo img {
max-height: 64px;
max-width: 200px;
}
/* Icon-only logo (MIF — just folder, no text) — smaller */
.hps-service-card.has-icon-logo .hps-platform-logo {
height: 44px;
}
.hps-service-card.has-icon-logo .hps-platform-logo img {
max-height: 44px;
max-width: 56px;
}
.hps-service-card {
background: #fff;
border: 1px solid var(--hps-line);
border-radius: var(--hps-radius-lg);
padding: 28px;
text-decoration: none;
display: block;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
position: relative;
overflow: hidden;
}
.hps-service-card::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 100px; height: 100px;
background: radial-gradient(circle at top right, rgba(139, 188, 56, .12), transparent 60%);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.hps-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--hps-shadow);
border-color: rgba(139, 188, 56, .35);
}
.hps-service-card:hover::after { opacity: 1; }
.hps-service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: var(--hps-green);
margin-bottom: 16px;
width: auto;
height: auto;
background: transparent;
}
.hps-service-card h4 {
font-family: var(--hps-font-display);
font-size: 17px;
font-weight: 700;
color: var(--hps-ink);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.hps-service-card p {
font-size: 14px;
color: var(--hps-ink-500);
line-height: 1.55;
margin: 0;
}
/* =========================================================
HISTORY + WHY US (two columns)
========================================================= */
.hps-twocol { padding: 100px 0; background: #fff; }
.hps-twocol-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 991px) { .hps-twocol-grid { grid-template-columns: 1fr; } }
.hps-card {
background: var(--hps-bg-soft);
border: 1px solid var(--hps-line);
border-radius: var(--hps-radius-lg);
padding: 40px;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) { .hps-card { padding: 28px; } }
.hps-card-deco {
position: absolute;
right: 24px;
bottom: 24px;
width: 240px;
height: 180px;
opacity: .25;
pointer-events: none;
color: var(--hps-green-700);
transition: opacity .4s ease, transform .6s ease;
z-index: 0;
}
.hps-card:hover .hps-card-deco {
opacity: .4;
transform: translateY(-6px);
}
/* On smaller cards, reposition the decoration */
@media (max-width: 768px) {
.hps-card-deco { width: 160px; height: 120px; opacity: .18; }
}
.hps-card-deco svg { width: 100%; height: 100%; display: block; }
/* Eyebrow + visual treatment for these cards */
.hps-card {
overflow: hidden;
background: linear-gradient(180deg, #FFFFFF 0%, var(--hps-bg-soft) 100%);
border: 1px solid var(--hps-line);
position: relative;
z-index: 1;
}
.hps-card::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 70%;
height: 70%;
background: radial-gradient(circle, rgba(139, 188, 56, .14), transparent 65%);
pointer-events: none;
z-index: 0;
}
.hps-card > * { position: relative; z-index: 2; }
.hps-card .hps-eyebrow {
margin-bottom: 14px;
display: inline-block;
}
/* Title with leading bar (template-style detail) */
.hps-card h3 {
position: relative;
padding-left: 18px;
}
.hps-card h3::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 4px;
background: linear-gradient(180deg, var(--hps-green), var(--hps-green-700));
border-radius: 2px;
}
.hps-card h3 { font-size: 26px; margin-bottom: 16px; }
.hps-card p { font-size: 15px; line-height: 1.65; margin-bottom: 14px; }
.hps-card .hps-btn { margin-top: 18px; }
.hps-check-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.hps-check-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--hps-ink-700);
font-weight: 500;
line-height: 1.5;
}
.hps-check-list li i {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--hps-green);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
margin-top: 2px;
}
/* =========================================================
TEAM
========================================================= */
.hps-team { padding: 100px 0; background: var(--hps-bg-soft); }
.hps-team-swiper { padding: 12px 4px 60px !important; }
.hps-team-card {
background: #fff;
border-radius: var(--hps-radius-lg);
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
border: 1px solid var(--hps-line);
position: relative;
}
.hps-team-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--hps-green) 0%, var(--hps-green-700) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s cubic-bezier(.2, .8, .2, 1);
z-index: 3;
}
.hps-team-card:hover {
transform: translateY(-6px);
box-shadow: var(--hps-shadow-lg);
border-color: rgba(139, 188, 56, .35);
}
.hps-team-card:hover::before { transform: scaleX(1); }
.hps-team-photo {
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
background: var(--hps-green-50);
}
.hps-team-photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.hps-team-card:hover .hps-team-photo img { transform: scale(1.05); }
.hps-team-info { padding: 20px 22px; text-align: center; }
.hps-team-info h5 { font-size: 16px; margin-bottom: 4px; font-weight: 700; }
.hps-team-info span { font-size: 13px; color: var(--hps-green-700); font-weight: 600; }
/* =========================================================
BLOG
========================================================= */
.hps-blog { padding: 100px 0; background: #fff; }
.hps-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 991px) { .hps-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hps-blog-grid { grid-template-columns: 1fr; } }
.hps-blog-card {
background: #fff;
border-radius: var(--hps-radius-lg);
overflow: hidden;
border: 1px solid var(--hps-line);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
display: flex;
flex-direction: column;
position: relative;
}
.hps-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--hps-shadow-lg);
border-color: rgba(139, 188, 56, .35);
}
/* Category badge inside the date pill area — adds template-like detail */
.hps-blog-cat {
position: absolute;
top: 16px;
right: 16px;
background: var(--hps-green);
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 5px 10px;
border-radius: 999px;
z-index: 2;
box-shadow: 0 4px 14px -4px rgba(139, 188, 56, .55);
}
.hps-blog-thumb {
aspect-ratio: 16 / 10;
overflow: hidden;
position: relative;
display: block;
}
.hps-blog-thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.hps-blog-card:hover .hps-blog-thumb img { transform: scale(1.05); }
.hps-blog-date {
position: absolute;
top: 16px; left: 16px;
background: #fff;
color: var(--hps-ink);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
box-shadow: var(--hps-shadow-xs);
display: inline-flex;
align-items: center;
gap: 6px;
}
.hps-blog-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.hps-blog-body h4 { font-size: 17px; margin-bottom: 10px; line-height: 1.35; font-weight: 700; }
.hps-blog-body h4 a { color: var(--hps-ink); text-decoration: none; transition: color .2s ease; }
.hps-blog-body h4 a:hover { color: var(--hps-green-700); }
.hps-blog-body p { font-size: 14px; margin-bottom: 16px; flex: 1; }
/* =========================================================
CTA
========================================================= */
.hps-cta { padding: 60px 0 100px; background: #fff; }
.hps-cta-wrap {
background:
radial-gradient(ellipse 80% 80% at 90% 100%, rgba(255, 255, 255, .18) 0%, transparent 55%),
radial-gradient(ellipse 60% 60% at 10% 0%, rgba(255, 255, 255, .12) 0%, transparent 60%),
linear-gradient(135deg, var(--hps-green) 0%, var(--hps-green-600) 50%, var(--hps-green-700) 100%);
border-radius: var(--hps-radius-xl);
padding: 60px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px -20px rgba(95, 138, 26, .5);
}
@media (max-width: 768px) {
.hps-cta-wrap { padding: 40px 28px; }
}
/* Decorative drifting shapes */
.hps-cta-shape {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hps-cta-shape-1 {
top: -160px; right: -160px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 70%);
animation: hps-cta-orb 10s ease-in-out infinite;
}
.hps-cta-shape-2 {
bottom: -100px; left: -50px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 70%);
animation: hps-cta-orb 12s ease-in-out infinite reverse;
}
.hps-cta-shape-3 {
top: 40%; left: 45%;
width: 6px; height: 6px;
background: rgba(255, 255, 255, .5);
box-shadow:
80px -30px 0 rgba(255, 255, 255, .35),
160px 20px 0 rgba(255, 255, 255, .4),
-100px 50px 0 rgba(255, 255, 255, .3),
-180px -20px 0 rgba(255, 255, 255, .35),
120px 80px 0 rgba(255, 255, 255, .3);
border-radius: 50%;
animation: hps-cta-twinkle 3s ease-in-out infinite;
}
@keyframes hps-cta-orb {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, 20px); }
}
@keyframes hps-cta-twinkle {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
/* CTA grid layout — content + aside */
.hps-cta-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 2;
}
@media (max-width: 991px) {
.hps-cta-grid { grid-template-columns: 1fr; gap: 36px; }
}
/* Title with underline accent on the keyword */
.hps-cta-underline {
position: relative;
white-space: nowrap;
color: #fff;
}
.hps-cta-underline::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 10px;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
z-index: -1;
}
/* CTA actions — two buttons side by side */
.hps-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.hps-btn-light {
background: #fff !important;
color: var(--hps-ink) !important;
box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .25);
}
.hps-btn-light:hover {
background: var(--hps-ink) !important;
color: #fff !important;
transform: translateY(-2px);
}
.hps-btn-outline-light {
background: transparent;
color: #fff !important;
border: 1.5px solid rgba(255, 255, 255, .4);
}
.hps-btn-outline-light:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff !important;
transform: translateY(-2px);
}
/* CTA aside — stats + trust signal */
.hps-cta-aside {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.hps-cta-stat {
background: rgba(255, 255, 255, .15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: var(--hps-radius);
padding: 18px 14px;
text-align: center;
transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.hps-cta-stat:hover {
background: rgba(255, 255, 255, .22);
border-color: rgba(255, 255, 255, .4);
transform: translateY(-3px);
}
.hps-cta-stat-num {
font-family: var(--hps-font-display);
font-weight: 800;
font-size: clamp(24px, 3vw, 30px);
color: #fff;
line-height: 1;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.hps-cta-stat-label {
font-family: var(--hps-font);
font-size: 11px;
color: rgba(255, 255, 255, .85);
letter-spacing: .04em;
line-height: 1.3;
}
.hps-cta-quote {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, .12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--hps-radius);
padding: 14px 18px;
margin-top: 4px;
}
.hps-cta-quote .hps-svg {
color: #fff;
flex-shrink: 0;
width: 22px;
height: 22px;
padding: 6px;
background: rgba(255, 255, 255, .18);
border-radius: 8px;
box-sizing: content-box;
}
.hps-cta-quote strong {
display: block;
color: #fff;
font-family: var(--hps-font);
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.hps-cta-quote span {
display: block;
color: rgba(255, 255, 255, .8);
font-size: 12px;
margin-top: 2px;
}
@media (max-width: 768px) { .hps-cta-wrap { padding: 36px 28px; } }
.hps-cta-content { position: relative; z-index: 2; flex: 1; min-width: 280px; }
.hps-cta-content h2 { color: #fff; margin-bottom: 8px; font-size: clamp(24px, 3vw, 32px); }
.hps-cta-content p { color: rgba(255, 255, 255, .9); margin: 0; }
.hps-cta-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, .18);
color: #fff;
font-family: var(--hps-font);
font-weight: 600;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 999px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .25);
margin-bottom: 16px;
}
.hps-cta-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
position: relative;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
animation: hps-cta-dot 2s ease-out infinite;
}
@keyframes hps-cta-dot {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
.hps-cta-wrap .hps-btn-dark {
position: relative;
z-index: 2;
background: #fff;
color: var(--hps-ink);
}
.hps-cta-wrap .hps-btn-dark:hover { background: var(--hps-ink); color: #fff; }
/* =========================================================
MAP / CONTACT
========================================================= */
.hps-map { padding: 0; background: #fff; }
.hps-map-grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
}
@media (max-width: 991px) { .hps-map-grid { grid-template-columns: 1fr; } }
.hps-map-info {
background: var(--hps-ink);
color: #fff;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.hps-map-info::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 100%, rgba(139, 188, 56, .28), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(139, 188, 56, .08), transparent 60%);
}
/* Decorative geometric pattern in map info bg */
.hps-map-info::after {
content: '';
position: absolute;
top: 10%;
right: 10%;
width: 140px;
height: 140px;
background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1.5px, transparent 2px);
background-size: 16px 16px;
pointer-events: none;
opacity: .7;
}
.hps-map-info > * { position: relative; z-index: 2; }
@media (max-width: 768px) { .hps-map-info { padding: 48px 28px; } }
.hps-map-info h2 { color: #fff; margin-bottom: 14px; }
.hps-map-info p { color: rgba(255, 255, 255, .75); margin-bottom: 28px; }
.hps-map-contacts { display: grid; gap: 16px; margin-bottom: 28px; }
.hps-map-contact {
display: flex;
align-items: center;
gap: 14px;
color: #fff;
text-decoration: none;
padding: 12px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
a.hps-map-contact:hover {
background: rgba(139, 188, 56, .15);
border-color: rgba(139, 188, 56, .35);
transform: translateX(4px);
color: #fff;
}
.hps-map-contact .ico {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(139, 188, 56, .35), rgba(139, 188, 56, .15));
color: var(--hps-green);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
border: 1px solid rgba(139, 188, 56, .25);
}
.hps-map-contact .text { display: flex; flex-direction: column; }
.hps-map-contact .text span:first-child {
font-size: 11px;
color: rgba(255, 255, 255, .5);
letter-spacing: .08em;
text-transform: uppercase;
}
.hps-map-contact .text span:last-child {
font-family: var(--hps-font-display);
font-weight: 600;
color: #fff;
font-size: 15px;
}
.hps-map-embed { position: relative; min-height: 400px; }
.hps-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* =========================================================
SCROLL REVEAL — smooth & natural (Vercel/Linear style)
========================================================= */
.hps-reveal {
opacity: 0;
transform: translateY(32px);
transition:
opacity 1.2s cubic-bezier(.16, 1, .3, 1),
transform 1.2s cubic-bezier(.16, 1, .3, 1);
will-change: opacity, transform;
}
.hps-reveal.is-visible {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
/* Direction variants — override the initial transform */
.hps-reveal[data-anim="left"] { transform: translateX(-32px); }
.hps-reveal[data-anim="right"] { transform: translateX(32px); }
.hps-reveal[data-anim="scale"] { transform: scale(.94); }
.hps-reveal[data-anim="up"] { transform: translateY(48px); }
.hps-reveal[data-anim="fade"] { transform: none; }
/* Manual delays */
.hps-reveal[data-delay="50"] { transition-delay: .05s; }
.hps-reveal[data-delay="100"] { transition-delay: .1s; }
.hps-reveal[data-delay="150"] { transition-delay: .15s; }
.hps-reveal[data-delay="200"] { transition-delay: .2s; }
.hps-reveal[data-delay="250"] { transition-delay: .25s; }
.hps-reveal[data-delay="300"] { transition-delay: .3s; }
.hps-reveal[data-delay="400"] { transition-delay: .4s; }
.hps-reveal[data-delay="500"] { transition-delay: .5s; }
.hps-reveal[data-delay="600"] { transition-delay: .6s; }
/* Stagger children — slower, more breathing room */
.hps-stagger > * {
opacity: 0;
transform: translateY(28px);
transition:
opacity 1.1s cubic-bezier(.16, 1, .3, 1),
transform 1.1s cubic-bezier(.16, 1, .3, 1);
will-change: opacity, transform;
}
.hps-stagger.is-visible > * {
opacity: 1;
transform: translateY(0);
}
/* Larger gaps between staggered children — feels less rushed.
For longer lists (9-13+), use shorter increments to keep total cascade tight. */
.hps-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.hps-stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
.hps-stagger.is-visible > *:nth-child(3) { transition-delay: .20s; }
.hps-stagger.is-visible > *:nth-child(4) { transition-delay: .30s; }
.hps-stagger.is-visible > *:nth-child(5) { transition-delay: .40s; }
.hps-stagger.is-visible > *:nth-child(6) { transition-delay: .50s; }
.hps-stagger.is-visible > *:nth-child(7) { transition-delay: .58s; }
.hps-stagger.is-visible > *:nth-child(8) { transition-delay: .66s; }
.hps-stagger.is-visible > *:nth-child(9) { transition-delay: .74s; }
.hps-stagger.is-visible > *:nth-child(10) { transition-delay: .82s; }
.hps-stagger.is-visible > *:nth-child(11) { transition-delay: .90s; }
.hps-stagger.is-visible > *:nth-child(12) { transition-delay: .98s; }
.hps-stagger.is-visible > *:nth-child(13) { transition-delay: 1.06s; }
.hps-stagger.is-visible > *:nth-child(n+14) { transition-delay: 1.14s; }
@media (prefers-reduced-motion: reduce) {
.hps-reveal,
.hps-stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =========================================================
ACCESSIBILITY — WCAG AA focus + skip link + reduced motion
========================================================= */
/* Visible keyboard focus on all interactive elements */
body.hps-page a:focus-visible,
body.hps-page button:focus-visible,
body.hps-page input:focus-visible,
body.hps-page textarea:focus-visible,
body.hps-page select:focus-visible,
body.hps-page [tabindex]:focus-visible {
outline: 3px solid var(--hps-green) !important;
outline-offset: 3px !important;
border-radius: 6px;
}
/* Special focus for buttons (already have radius) */
body.hps-page .hps-btn:focus-visible,
body.hps-page .rts-btn:focus-visible,
body.hps-page .hps-header-phone:focus-visible {
outline: 3px solid var(--hps-green) !important;
outline-offset: 3px !important;
}
/* Skip link — visually hidden until focused */
.hps-skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--hps-ink);
color: #fff !important;
padding: 12px 20px;
border-radius: 8px;
font-family: var(--hps-font);
font-weight: 600;
text-decoration: none !important;
z-index: 100000;
transition: top .2s ease;
}
.hps-skip-link:focus {
top: 16px;
outline: 3px solid var(--hps-green);
outline-offset: 3px;
}
/* Ensure sufficient contrast on links inside body text */
body.hps-page a:not([class]):not(.hps-btn) {
color: var(--hps-green-700);
text-decoration: underline;
text-underline-offset: 2px;
}
body.hps-page a:not([class]):not(.hps-btn):hover {
color: var(--hps-green);
}
/* =========================================================
INLINE SVG ICONS
========================================================= */
.hps-svg {
display: inline-block;
vertical-align: -3px;
flex-shrink: 0;
}
/* Button SVG shifts on hover */
.hps-btn .hps-svg { transition: transform .25s ease; }
.hps-btn:hover .hps-svg { transform: translateX(3px); }
/* Service icon — slightly thicker stroke for visual weight */
.hps-service-card .hps-service-icon .hps-svg { stroke-width: 1.5; }
/* Pillar, hero pill, map: block-level inside ico containers */
.hps-pillar-icon .hps-svg,
.hps-hero-pill .ico .hps-svg,
.hps-map-contact .ico .hps-svg,
.hps-platform-icon .hps-svg { display: block; }
/* Check icons — solid heavier strokes */
.hps-tag .hps-svg,
.hps-check-list .hps-svg { stroke-width: 2.4; }
.hps-blog-date .hps-svg { vertical-align: -2px; }
/* =========================================================
CURSOR FOLLOWER — dot + lagging ring
========================================================= */
.hps-cursor-dot,
.hps-cursor-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999;
opacity: 0;
transform: translate3d(-50%, -50%, 0);
will-change: transform, width, height, opacity;
}
/* The inner dot — small, precise, follows mouse exactly */
.hps-cursor-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--hps-green);
transition: opacity .25s ease, width .25s ease, height .25s ease, background .25s ease;
box-shadow: 0 0 12px rgba(139, 188, 56, .5);
}
/* The outer ring — larger, lags behind smoothly */
.hps-cursor-ring {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--hps-green);
background: rgba(139, 188, 56, .08);
transition: opacity .3s ease, width .3s ease, height .3s ease, border-color .3s ease, background .3s ease, border-width .3s ease;
}
/* Visible state (set by JS after first mouse move) */
.hps-cursor-dot.is-visible { opacity: 1; }
.hps-cursor-ring.is-visible { opacity: 1; }
/* Hover state — on links, buttons, cards */
.hps-cursor-dot.is-hover {
width: 6px;
height: 6px;
background: var(--hps-green-700);
}
.hps-cursor-ring.is-hover {
width: 56px;
height: 56px;
border-color: var(--hps-green-700);
background: rgba(139, 188, 56, .14);
border-width: 2px;
}
/* Click state — squish */
.hps-cursor-dot.is-down { transform: translate3d(-50%, -50%, 0) scale(.7); }
.hps-cursor-ring.is-down { transform: translate3d(-50%, -50%, 0) scale(.85); }
/* Hide on touch devices & when reduced motion is preferred */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
.hps-cursor-dot, .hps-cursor-ring { display: none !important; }
}
/* Keep system cursor — don't hide it (better accessibility + fail-safe) */
/* =========================================================
UTILITIES
========================================================= */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}