/* ==========================================================================
Hero — reference mechanics, new composition
--------------------------------------------------------------------------
Image sizing and scroll interaction are the original dsgnmate.webflow.io
hero, unchanged:
.header-component 300vh scroll runway (150vh below 768px)
.header-content-wrapper 100vh sticky viewport, clips overflow
.header-images-wrapper absolute, pinned left
.header-images-wrapper.right absolute, pinned right
.header-content the copy
.header-ix-trigger drives the scroll progress (js/scroll-effects.js)
Cards keep their vw widths, 120% padding-top ratio, 6px radius and the
growIn entrance. The lists still drift -85% / -60% as the section scrolls.
What changed for the new design is position only:
- copy is left-aligned and top-anchored, not centred
- card left/right offsets are shifted right so the cluster clears the
copy column instead of straddling it
========================================================================== */
/* --------------------------------------------------------------------------
Shell
-------------------------------------------------------------------------- */
.section-header {
position: relative;
}
.section-header .padding-global-2 {
padding-left: 5%;
padding-right: 5%;
}
/* 115vh runway on small screens, 300vh from tablet up */
.section-header .header-component {
position: relative;
height: 115vh;
}
.section-header .header-content-wrapper {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
/* Scroll-progress driver. Sized to define the 0% -> 100% range the parallax
is mapped onto. */
.section-header .header-ix-trigger {
position: absolute;
inset: 0;
z-index: -1;
margin-top: 35rem;
pointer-events: none;
}
/* --------------------------------------------------------------------------
Floating image columns — sizes and ratios exactly as the reference
-------------------------------------------------------------------------- */
.section-header .header-images-wrapper {
position: absolute;
inset: 0 auto 0 0;
z-index: 1;
}
.section-header .header-images-wrapper.images-wrapper-right {
inset: 0 0 0 auto;
z-index: 0;
}
.section-header .header-image-list {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
row-gap: 26vw;
padding-top: 70vh;
will-change: transform;
}
.section-header .header-image-wrapper {
position: relative;
width: 100%;
height: 35vw;
padding-top: 120%;
border-radius: 6px;
overflow: hidden;
}
.section-header .header-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 6px;
object-fit: cover;
}
/* Two columns of three. Card widths are the reference's; the offsets are what
the redesign changes.
Within a column each card is nudged a few vw sideways so the edge zigzags
rather than ruling straight. The vertical rhythm comes from the list's
26vw row-gap pulled back by margin-top, so cards sit ~4vw apart.
Column 2 is recessed to 75% opacity, as the reference's right column was. */
.section-header .header-image-wrapper.is-image-1 { width: 30vw; margin-top: 0; left: 2vw; }
.section-header .header-image-wrapper.is-image-2 { width: 28vw; margin-top: -22vw; left: 8vw; }
.section-header .header-image-wrapper.is-image-3 { width: 30vw; margin-top: -22vw; left: 0; }
.section-header .header-image-wrapper.is-image-4 { width: 28vw; margin-top: 10vw; right: 0; opacity: .75; }
.section-header .header-image-wrapper.is-image-5 { width: 26vw; margin-top: -22vw; right: 4vw; opacity: .75; }
.section-header .header-image-wrapper.is-image-6 { width: 28vw; margin-top: -22vw; right: 1vw; opacity: .75; }
/* --------------------------------------------------------------------------
Copy — left-aligned, top-anchored
-------------------------------------------------------------------------- */
.section-header .header-content {
position: relative;
z-index: 3;
display: flex;
align-items: flex-start;
height: 100%;
padding-top: 7rem;
padding-bottom: 4rem;
}
.section-header .header-copy {
/* Wide enough for "Design that Converts," to hold one line at the largest
type size, so the
is the only break. */
width: 100%;
max-width: 820px;
text-align: left;
}
.hero-eyebrow {
margin: 0 0 0.5rem;
color: var(--color-gray-darker);
font-family: var(--font-family-primary);
font-size: 17px;
font-weight: 500;
line-height: 1.5;
letter-spacing: .01em;
}
.hero-eyebrow-dot {
margin: 0 .55em;
color: var(--color-gray-warm);
font-size: .7em;
vertical-align: middle;
}
.hero-heading {
margin: 0 0 2.25rem;
color: var(--color-navy-primary);
font-family: var(--font-family-display);
font-size: clamp(2.25rem, 7vw, 3.25rem);
font-weight: 400;
line-height: 1.15;
letter-spacing: -.02em;
}
.hero-heading .highlight {
background: none;
padding: 0;
color: var(--color-orange-accent);
}
/* --------------------------------------------------------------------------
Load-in choreography — the reference's Webflow presets
growIn / slideInBottom / fadeIn, 1000ms outQuart
-------------------------------------------------------------------------- */
@keyframes hero-slide-in-bottom {
from { opacity: 0; transform: translateY(100px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-grow-in {
from { opacity: 0; transform: scale(.75); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hero-grow-in-muted {
from { opacity: 0; transform: scale(.75); }
to { opacity: .75; transform: scale(1); }
}
@keyframes hero-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.section-header [data-anim] {
opacity: 0;
animation-duration: 1000ms;
animation-timing-function: cubic-bezier(.165, .84, .44, 1);
animation-fill-mode: forwards;
}
.section-header [data-anim="slide-in-bottom"] { animation-name: hero-slide-in-bottom; }
.section-header [data-anim="grow-in"] { animation-name: hero-grow-in; }
.section-header [data-anim="fade-in"] { animation-name: hero-fade-in; }
/* Column 2 settles at 75% opacity, not 100% */
.section-header .is-image-4[data-anim="grow-in"],
.section-header .is-image-5[data-anim="grow-in"] {
animation-name: hero-grow-in-muted;
}
.section-header .hero-eyebrow[data-anim] { animation-delay: 300ms; }
.section-header .hero-heading[data-anim] { animation-delay: 400ms; }
.section-header .hero-actions[data-anim] { animation-delay: 900ms; }
.section-header .is-image-1[data-anim] { animation-delay: 400ms; }
.section-header .is-image-4[data-anim] { animation-delay: 450ms; }
.section-header .is-image-5[data-anim] { animation-delay: 500ms; }
.section-header .is-image-2[data-anim] { animation-delay: 600ms; }
/* --------------------------------------------------------------------------
Below 768px — the mobile parallax formula in js/scroll-effects.js already
has the columns partway through their travel at initial load (the trigger
isn't at viewport-top yet), so the reference's 70vh padding-top isn't
enough clearance any more and the first cards land on top of the button.
Pushed down further so the cards start below it. A direct user request.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.section-header .header-image-list { padding-top: 115vh; }
}
/* --------------------------------------------------------------------------
480px and up
-------------------------------------------------------------------------- */
@media (min-width: 480px) {
.section-header .header-image-wrapper { height: auto; }
}
/* --------------------------------------------------------------------------
768px and up
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.section-header .header-component { height: 300vh; }
.section-header .header-ix-trigger { margin-top: 100vh; }
.section-header .header-content {
padding-top: 9rem;
padding-bottom: 6rem;
}
.hero-heading { font-size: clamp(2.25rem, 4.6vw, 2.75rem); }
.section-header .header-image-wrapper.is-image-1 { width: 28vw; left: 16vw; }
.section-header .header-image-wrapper.is-image-2 { width: 26vw; left: 21vw; }
.section-header .header-image-wrapper.is-image-3 { width: 28vw; left: 14vw; }
.section-header .header-image-wrapper.is-image-4 { width: 26vw; right: 0; }
.section-header .header-image-wrapper.is-image-5 { width: 24vw; right: 4vw; }
.section-header .header-image-wrapper.is-image-6 { width: 26vw; right: 1vw; }
}
/* --------------------------------------------------------------------------
992px and up
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
.section-header .header-content { padding-top: 10rem; }
.hero-heading {
margin-bottom: 80px;
font-size: 104px;
}
/* Widened so "Design that Converts," still holds one line at 104px --
the
stays the only break. */
.section-header .header-copy { max-width: 980px; }
.section-header .header-image-wrapper.is-image-1 { width: 22vw; left: 22vw; }
.section-header .header-image-wrapper.is-image-2 { width: 20vw; left: 27vw; }
.section-header .header-image-wrapper.is-image-3 { width: 22vw; left: 20vw; }
.section-header .header-image-wrapper.is-image-4 { width: 22vw; right: 0; }
.section-header .header-image-wrapper.is-image-5 { width: 20vw; right: 4vw; }
.section-header .header-image-wrapper.is-image-6 { width: 22vw; right: 1vw; }
}
/* --------------------------------------------------------------------------
Below 480px — larger cards with a tighter column gap, and the compact
mobile type scale (a direct user request, not part of the Webflow port)
-------------------------------------------------------------------------- */
@media (max-width: 479px) {
.hero-eyebrow { font-size: 13px; }
.hero-heading {
margin-bottom: 32px;
font-size: 43px;
letter-spacing: -2px;
}
.section-header .header-image-wrapper.is-image-1 { width: 38vw; left: 2vw; }
.section-header .header-image-wrapper.is-image-2 { width: 36vw; left: 8vw; }
.section-header .header-image-wrapper.is-image-3 { width: 38vw; left: 0; }
.section-header .header-image-wrapper.is-image-4 { width: 36vw; right: 0; }
.section-header .header-image-wrapper.is-image-5 { width: 34vw; right: 4vw; }
.section-header .header-image-wrapper.is-image-6 { width: 36vw; right: 1vw; }
}
/* --------------------------------------------------------------------------
Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.section-header [data-anim] {
opacity: 1;
animation: none;
}
.section-header .is-image-4[data-anim],
.section-header .is-image-5[data-anim] { opacity: .75; }
.section-header .header-image-list { transition: none; }
}