.hero { background-image: var(--hero-bg); position: relative; min-height: clamp(360px, 100vh, 820px); overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50% calc(var(--parallaxY, 0px)); will-change: background-position; z-index: 0; } @supports not (overflow: clip) { .hero { overflow: hidden; } } .hero__bg { position: sticky; top: 0; height: 100vh; width: 100%; z-index: -1; pointer-events: none; background-image: var(--hero-bg); background-repeat: no-repeat; background-size: cover; background-position: 50% var(--parallaxY, 0px); will-change: transform, background-position; transform: translateZ(0); } .hero { isolation: isolate; } /* Grid */ .grid-container, .hero-logo, .text-container, .image-container, .ctas-grid, .login-box, .hero .hero-content .hs_cos_wrapper_type_cta { display: grid; } .grid-container { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-items: start; } .hero-logo { grid-column: 1 / 2; grid-row: 1 / 2; padding: 20px 0 0 40px; z-index: 3; max-width: 150px; } .text-container { grid-column: 1 / 2; grid-row: 2 / 3; padding: 40px; z-index: 3; } .image-container { grid-column: 2 / 3; grid-row: 1 / 3; position: relative; } /* Overlays */ .hero .wavy-overlay { background: url('../svg/wavy%20overlay.svg') no-repeat center center; transform: translateY(-35%) translateX(-35%); } .overlay, .full_overlay, .wavy-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; } /* PRODUCT IMAGE — sizing via CSS vars set from sliders */ .image-container .product-image { width: var(--img-w, auto); max-width: var(--img-max-w, 50vw); height: var(--img-h, auto); max-height: var(--img-max-h, none); object-fit: var(--img-fit, contain); z-index: 2; } /* Alignment positions (no hardcoded max-widths here) */ .product-image.Center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .product-image.bottom { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .product-image.Bottom-Right { position: absolute; right: 0; bottom: 0; } /* CTAs */ .ctas-grid { display: grid; grid-template-columns: 1fr; gap: 20px; justify-items: start; margin-top: 20px; } /* Typography spacing */ .hero-headline, .sub-headline, .hero-byline, .ctas { padding: 10px 0 0 0; } .hero-headline, .hero-subtitle, .hero-byline { color: inherit !important; } .hero .hero-headline, .hero .hero-subtitle, .hero .hero-byline { color: #ffffff !important; } /* Mobile */ @media screen and (max-width: 768px) { .grid-container { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .hero-logo, .text-container, .ctas-grid, .image-container { grid-column: 1 / -1; text-align: center; } .hero-logo { order: 1; z-index: 3; } .text-container { order: 2; } .ctas-grid { order: 3; gap: 10px; padding: 20px 0; align-items: center; justify-items: stretch; } .image-container { order: 4; grid-row: auto; position: relative; } .product-image.Center, .product-image.Bottom-Right, .product-image.bottom { position: static; transform: none; } /* Keep it sensible on phones even if sliders are large */ .image-container .product-image { max-width: min(var(--img-max-w, 90vw), 90vw); max-height: var(--img-max-h, none); } .product-image.bottom { transform: translate(0%, 20%); } } /* Animations */ @keyframes slide-in { from { right: -100%; } to { right: 0; } } @keyframes fly-in { 0% { opacity: 0; transform: translateY(-50%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fly-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fly-in { animation: fly-in 1s ease-out forwards; } .fly-in-right { animation: fly-in-right 1s ease-out; } .fadeIn { animation: fadeIn 2s ease-in-out 2s both; } .fadeIn.active { opacity: 1; } /* Modal */ .hero-modal { display: none; position: fixed; z-index: 9999; inset: 0; overflow: auto; background: rgba(0, 0, 0, 0.6); } .hero-modal-content { position: relative; background: #fff; margin: 10% auto; padding: 20px; max-width: 600px; border-radius: 4px; } .hero-modal-close { position: absolute; top: 10px; right: 15px; font-size: 30px; font-weight: bold; color: #414042; cursor: pointer; } .hero-modal-close:hover { color: #000; } /* Forms */ body form.hs-form fieldset[class*="form-columns"] .hs-input { border: 2px solid #414042; border-radius: 30px; }