/*! Copyright (c) 2026 InfoBeans | infobeans.ai | @InfoBeans */ @charset "UTF-8"; /** * Home 2026 dedicated style bundle. */ /* InfoBeans Web Concept Style Sheet */ /* ========================================== 0. Pin host guard — scroll-behavior ========================================== This page hosts three ScrollTrigger pins (#story, #what-we-ship, #video-fold). A pinned fold is only coherent while the scroll position can be read and written instantly: js/home.js parks the ship deck and the video sequence on band midpoints, and GSAP itself moves the scrollbar during pin setup and on every refresh. CSS smooth-scroll animates those writes, so progress and the rendered card disagree for the length of the animation and the stepper acts on the band being travelled THROUGH rather than the one it asked for — the fold steps a card and then walks it back. custom.css only ever REMOVED `scroll-behavior: smooth` (see the note in its `html, body` rule). Removing is not overriding. Standalone that is enough, because nothing else sets the property — but on WordPress every page's CSS is concatenated into one LiteSpeed bundle, and the investors page carries a bare `html { scroll-behavior: smooth }`. It is unscoped, so it applies to the homepage too: staging computes `smooth` on where the static build computes `auto`. That is the single environmental difference between the two builds on this page. GSAP then makes it worse — its refresh cycle restores the value it detected as an INLINE style, so after the first refresh carries `style="scroll-behavior: smooth"` and no ordinary rule can outrank it. Hence `!important`, and hence keying off the sections themselves rather than a `body.page-…` class: the WordPress build cannot be relied on to emit page classes, but the markup is always there. Same doctrine (and same reasoning) as the ib-pin-host mixin in assets/scss/pages/_utils.scss, which every other pinned page on the site already uses; the homepage predates it and was the one pinned page still relying on omission. Only the scroll-behavior assertion is taken from that mixin. Its other three (overflow-x/height/min-height) fix problems this page does not have — custom.css already sets overflow-x: clip and min-height: 100% on html/body, and the story fold's centring math is measured against those exact values. Explicit `behavior: 'smooth'` in a scrollIntoView/scrollTo call still wins over this rule (per CSSOM-View an explicit behavior overrides the computed property), so the indicator click handlers in js/home.js keep animating. */ html:has(#story), html:has(#what-we-ship), html:has(#video-fold) { scroll-behavior: auto !important; } /* Android-only page-scroll freeze while a pinned deck fold (What We Ship / Video) is on screen — toggled by js/home-smootheer-1.js (apSetDeckLock / apClearDeckLock). Android runs on native scroll, where a single hard fling would otherwise skip straight through the deck; frozen, its cards step by swipe instead. `!important` so it outranks the inline `overflow` the overlay scroll-locks (ship popup, mobile drawer) set and clear, and so it beats custom.css's `html { overflow-x: clip }`. Never added on desktop or iOS. */ html.ap-deck-locked, html.ap-deck-locked body { overflow: hidden !important; } /* ========================================== 6. Fold Structure (Full Viewport snap) ========================================== */ .folds-container { width: 100%; } .fold { width: 100%; height: 100vh; display: flex !important; /* added importamt to override wordpress style */ align-items: center; position: relative; overflow: hidden; padding-top: 84px; /* account for header and top bar */ /* Each fold paints its own background instead of letting the page show through. Identical to the colour already uses, so nothing changes visually — but a fold is no longer transparent, so while GSAP is still building its pins on a slow load (or a scroll lands mid-build) two folds that briefly overlap cover each other cleanly instead of rendering one section's text straight through the other's. */ background-color: var(--bg-primary); /* Confines every z-index inside a fold to that fold. Without a stacking context here, inner values escape to the root: .ship-carousel-wrapper (z-index 100) and .ship-slide (z-index 3) were competing page-wide, which is why the ship carousel painted ON TOP of the story fold's text rather than staying inside its own section. Folds now stack purely in source order, later over earlier. isolation (not contain/transform) on purpose: it creates a stacking context WITHOUT creating a containing block, so position:fixed children — the expanded ship slide, the mobile portal — still resolve against the viewport exactly as before. */ isolation: isolate; } .fold-content { max-width: 762px; margin: 0 auto; } @media (max-width: 1024px) { .fold { padding-top: 96px; } } /* ========================================== 7. Typography Play (Selfless Act / Diwali story) ========================================== */ /* Story section: 100vh, clipped. The fold's own box does the initial vertical centering (see .story-parent .custom-container below), so the block renders in its final position on the very first paint with no script involved. GSAP y on fold-content takes over once js/home.js runs (it adds .is-js-fitted) and adjusts as content grows — content then extends downward, never upward. padding-bottom MUST equal FOLD_BOTTOM_RESERVE in js/home.js. That constant is the only slice of this padding js/home.js reserves for the "WHAT WE DO" indicator — the rest it lends to the content — so any other value here makes the CSS centering box and the JS availH disagree, and the block jumps by half the difference the moment home.js re-measures. The indicator itself is absolutely positioned (.indicators-wrapper), so it is unaffected by this. */ .story-parent { padding-bottom: 56px; overflow: hidden !important; align-items: flex-start; /* Fades from the section's own peach into the next section's cream so the handoff to .who-we-are-parent (plain --bg-primary) reads as one continuous surface instead of a hard seam. Start stop moved from 76.96% to 65.85% — roughly 100px earlier on the ~900px fold this was tuned for — to stretch the fade over a longer run instead of compressing it into the last stretch of the section. */ background: linear-gradient(180deg, #ffefd1 65.85%, #fff9ed 100%); } /* Height is deliberately NOT !important, and carries the extra .folds-container specificity instead. GSAP pins this fold by writing the measured height as an INLINE style on the section; an !important declaration beats inline, so the box kept rendering at 100vh while its pin-spacer only reserved the measured height. On mobile those two are not the same number — 100vh resolves against the large viewport (address bar hidden) while GSAP measures the current one — and the difference showed up as blank space above the pinned story. The ancestor selector still outranks anything the WordPress theme sets on `section`, which is why the !important was there in the first place. */ .folds-container .story-parent { height: 100vh; /* dvh, not vh, is what the CSS centring below has to measure against: 100vh resolves to the LARGE viewport (address bar hidden) while js/home.js sizes everything from window.innerHeight — the current one. On a phone at load those differ by the height of the address bar, and centring in a box that much too tall drops the block half that distance below where home.js then puts it. dvh tracks innerHeight exactly, so both agree on first paint. Once GSAP pins the section it writes its own measured height inline, which wins over this — so the value only governs the pre-pin frames. vh above stays as the fallback for browsers without dvh support. */ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ height: 100dvh; } /* CSS-only first-paint layout. The container is exactly availH tall (fold height − padding-top − the 56px reserve above), which is the same box js/home.js measures against, and it centres fold-content inside it. That is byte-for-byte the position fitFoldContent() computes, so when home.js runs there is nothing to correct: no jump, and if home.js never loads at all (or a CMS strips inline scripts) the fold still renders centred instead of top-anchored. `safe center` keeps overflow spilling downward only, so a viewport too short for the block never clips the title off the top. */ .story-parent .custom-container { height: 100%; display: flex; flex-direction: column; justify-content: center; /* `safe center` is the progressive-enhancement pass: browsers that don't parse the safe keyword drop this line and keep plain `center` above. Not a real duplicate — the pair is the fallback. */ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ justify-content: safe center; } /* Handoff: js/home.js adds .is-js-fitted the moment it takes ownership of the vertical position. From then on the GSAP y transform is the single source of truth — leaving the CSS centring on would stack on top of it and offset the block by half the free space. */ .story-parent.is-js-fitted .custom-container { justify-content: flex-start; } /* Bounds fold-content at availH before any measurement runs: the scroll-body is the only child allowed to give (min-height: 0 + overflow: hidden), so long opening paragraphs clip inside the reading window instead of pushing story-meta past the fold. Same guarantee js/home.js's max-height cap provides — the cap it computes later equals what this layout already produced, so it lands as a no-op. */ .story-parent .fold-content { display: flex; flex-direction: column; max-height: 100%; min-height: 0; /* As a flex item its `margin: 0 auto` (css above) would otherwise size it to fit-content instead of filling up to max-width — keeps the 762px column identical to the block-layout version. */ width: 100%; } /* story-scroll-body clips the paragraphs — story-meta lives below it so the avatar's negative margin-left is never clipped by overflow-x. max-height is set by JS to keep fold-content bounded at availH, ensuring story-meta is always fully visible. overflow is HIDDEN, not auto: as a native scroll container it swallowed wheel and touch gestures over the paragraphs, so the pinned section's own scroll (which drives the reveal) fought it. Hidden still leaves the element programmatically scrollable, which is all js/home.js needs — it tweens scrollTop itself after each para is revealed. */ .story-scroll-body { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; /* Shrink-only (never auto-grow): at rest the reading window keeps its natural height, so the opening block stays a compact, centred group and story-meta is not pushed to the fold's bottom edge before the reader has scrolled. It only gives when fold-content would otherwise exceed availH, which is what makes the max-height: 100% above bite here rather than overflowing. js/home.js does grow it, once, on the first reveal — via an explicit height (frozenH, sized against the fold so short paragraphs still get a full-height reading band), which the transition below carries. flex-grow stays 0 so that step is the script's decision alone and never happens implicitly. */ flex: 0 1 auto; min-height: 0; /* spacing between the last para and Ritesh below */ margin-bottom: 12px; /* The one step this box takes — js/home.js pins it to an explicit height on the first reveal, and that used to land in a single frame, so story-meta (Ritesh + the caption underneath) teleported down. Transitioning it makes the box grow into its new size instead, and because home.js kicks off its fold-content re-centre on the same frame with a matching 0.6s, the two read as one motion rather than a jump plus a correction. Animating height is normally off-limits here — it costs a layout pass per frame — but this fires exactly twice in the fold's life (once on the way down, once on the way back), never per scroll frame. The curve is GSAP's power2.out expressed as a bezier, deliberately: that is the ease fitFoldContent() tweens fold-content with, and the two run together. On different curves they drift apart mid-flight and you see two motions; on the same one they read as a single move. */ transition: height 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .story-scroll-body::-webkit-scrollbar { display: none; } /* Touch: the height step is applied instantly (js/home-smootheer-1.js passes IS_COARSE_POINTER through fitFoldContent). This kills the matching 0.6s CSS height tween so it can't run WHILE the pinned scroll is still scrubbing .story-desc-wrapper — the two motions overlapping is the "jerks while reading" on iOS. Desktop keeps the eased grow. */ @media (pointer: coarse) { .story-scroll-body { transition: none; } } /* Mobile uses the same pinned scroll reveal as desktop, and the same padding-bottom: js/home.js reserves FOLD_BOTTOM_RESERVE (56px) at every breakpoint, so a larger value here would only desync the CSS centring box from the JS availH — see the .story-parent rule above. */ .story-parent .story-title { font-size: clamp(28px, 2.78vw, 48px); font-weight: 300; line-height: clamp(38px, 3.7vw, 64px); letter-spacing: 0; max-width: 900px; margin-bottom: 24px; /* Gradient Text Styling from Figma */ background: linear-gradient(90.03deg, #284cba 0%, #ea1b3d 56.87%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Strikethrough Play Styling */ .title-strike { position: relative; display: inline-block; color: #eb2c00; -webkit-text-fill-color: #eb2c00; font-weight: 300; white-space: nowrap; background: none; background-clip: unset; } .strike-line { position: absolute; left: 0; top: 52%; width: 0; height: 4px; background-color: #eb2c00; border-radius: 2px; } .title-highlight { color: var(--accent-red); -webkit-text-fill-color: #eb2c00; display: inline-block; background: none; background-clip: unset; opacity: 0; } /* ========================================== 7b. Who We Are Statement fold ========================================== */ /* Carries the extra .folds-container specificity (same trick as .folds-container .story-parent above) instead of !important. This fold is never pinned, so nothing writes an inline height here — the only thing that can resurrect .fold's `height: 100vh` is source order: a partially-downloaded stylesheet that parsed `.fold` but not this rule yet, or the WordPress build concatenating this file ahead of the base `.fold` block. On mobile that rendered a full viewport of empty peach above the heading. The ancestor selector wins regardless of order, and still outranks any bare `section` rule the theme sets. */ .folds-container .who-we-are-parent { background: var(--bg-primary); /* Overrides .fold's 100vh — this is a short statement block, not a full-screen fold, so it should size to its own content instead of forcing a full viewport of empty space above/below the heading. */ height: auto; min-height: 0; padding-top: 0; padding-bottom: 0; } .who-we-are-title { font-family: var(--font-primary); font-weight: 300; font-size: clamp(18px, 4vw, 28px); line-height: clamp(26px, 5.5vw, 38px); letter-spacing: 0; text-align: left; color: var(--text-primary); max-width: 680px; position: relative; /* Same left shift as .story-meta's margin-left (the avatar row above) — both computed from the shared .fold-content edge, so the TEXT lands exactly under the avatar photo's own left edge instead of guessing at a fixed offset. The accent line sits further left, off the text's own box (see ::before below), so it doesn't push the text off that alignment. */ margin-left: clamp(-48px, -2.78vw, -28px); } .who-we-are-title::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 1px; background-color: #eddab8; } .who-we-are-title .gradient-text { background: linear-gradient(90.03deg, #284cba 0%, #ea1b3d 56.87%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* js/home.js travels the story by transforming THIS element, not by setting scrollTop on .story-scroll-body above it — text is not layer-backed, so scrolling it repaints every line, once per frame, for the whole length of the pin. will-change keeps the wrapper on its own compositor layer so that per-frame move is a composite instead. The clipping still comes from .story-scroll-body's overflow: hidden, exactly as before. */ .story-desc-wrapper { will-change: transform; /* Pin the wrapper to its own compositor layer from first paint, not only once JS starts transforming it. On iOS Safari a will-change hint alone can leave the layer un-promoted until the first transform lands, and the promotion itself — mid-scroll — is a visible hitch. translateZ(0) forces it up front; backface-visibility:hidden stops the sub-pixel text re-rasterisation that reads as the story "shivering" while being read. js/home-smootheer-1.js overwrites transform with its translate3d each frame, so this is only the resting value. */ transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* --story-desc-gap is the ONE definition of the space between paragraphs. The hidden / revealed / measuring states below all resolve their margin from it, so what js/home.js measures is always what the browser renders. Hardcoding 12px in those states meant mobile (15px here) rendered gaps the measuring pass never saw, and the scrub ended short — clipping the last line. */ .story-desc { --story-desc-gap: 12px; font-size: clamp(16px, 1.39vw, 24px); font-weight: 250; line-height: 1.66; color: #000; max-width: 760px; margin-bottom: var(--story-desc-gap); } /* Paras 3+ are hidden on load — height:0 reserves no space. NOTE: the number 3 must equal INITIAL_VISIBLE_PARAS + 1 in home.js. */ .story-desc-wrapper .story-desc:nth-child(n+3) { height: 0; overflow: hidden; opacity: 0; transform: translateY(24px); margin-top: 0; margin-bottom: 0; /* Matched to the box's height transition and fitFoldContent()'s tween — same 0.6s, same curve — so the paragraph arriving, the box growing and the block re-centring are one motion. At 0.7s on a different ease the paragraph was still settling after the other two had stopped, which is what made the third one feel like it landed separately. */ transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } /* Scroll-revealed — same specificity, placed after :nth-child so it wins on source order. */ .story-desc-wrapper .story-desc.is-visible { height: auto; overflow: visible; opacity: 1; transform: translateY(0); margin-top: 0; margin-bottom: var(--story-desc-gap); } /* Measurement pass (js/home.js): every para is briefly laid out at the height it will have once revealed, so the reveal points and scroll travel can be read in one batch. Geometry only — opacity and transform are left alone, so nothing animates and the pass, reverted in the same frame, is never painted. Last of the three rules, so it wins on source order. */ .story-desc-wrapper.is-measuring .story-desc { height: auto; overflow: visible; margin-top: 0; margin-bottom: var(--story-desc-gap); } /* Cue for the paras hidden by :nth-child(n+3) above — without it, nothing signals there's more of the story to reveal by scrolling. Hidden by default; js/home.js adds .is-visible only while text remains to reveal. */ /* The cue's line box and bottom margin are reserved at all times — it fades and slides, but never collapses. It used to toggle height 0 <-> auto and margin 0 <-> clamp(), so hiding it at the end of the story shrank .fold-content and dragged .story-meta up with it. Space stays claimed; only opacity/transform animate (composite-only, no reflow). */ .story-scroll-cue { font-weight: 300; font-size: 12px; line-height: 18px; color: #eb4c5e; /* Gap down to .story-meta (the avatar row). Reserved at all times — see the note above — so shrinking it does not just tighten the visual spacing, it hands the difference back to the reading window: storyAvailH() measures fold-content, and a shorter cue margin means more room for story lines. */ margin: 0 0 32px; opacity: 0; transform: translateY(10px); will-change: transform, opacity; transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .story-scroll-cue.is-visible { opacity: 1; transform: translateY(0); } /* Story Metadata & Author Details */ .story-meta { display: flex; align-items: center; gap: clamp(10px, 0.93vw, 16px); position: relative; padding-top: 2px; margin-left: clamp(-48px, -2.78vw, -28px); max-width: 300px; cursor: pointer; } .story-meta::before { content: ""; position: absolute; top: 0; left: 49px; width: 44px; height: 1.5px; background-color: #ffefd1; } .avatar-wrapper { width: 32px; height: 34px; border-radius: 50% 50% 0 0; overflow: hidden; background-color: #0b1415; } .avatar-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .story-author-details { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; font-weight: 300; text-transform: uppercase; color: #676775; margin-top: clamp(10px, 0.93vw, 16px); } .story-dot { color: #676775; font-size: clamp(11px, 1.04vw, 18px); } /* Avatar Expanded Overlay CSS */ .avatar-expanded-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; pointer-events: none; overflow: hidden; } .avatar-expanded-overlay.is-open { pointer-events: auto; } .avatar-expanded-overlay .expanded-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0b1415; transform: scaleX(0); transform-origin: center center; opacity: 0; z-index: 1; /* Close: bg fades out after avatar collapses, then strip snaps away */ transition: opacity 0.4s ease 0.3s, transform 0s linear 0.7s; } .avatar-expanded-overlay.is-open .expanded-bg { transform: scaleX(1); opacity: 1; /* Open: avatar expands first, then bg fades + expands in behind it */ transition: opacity 0.5s ease 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } .expanded-avatar-container { /* Fixed at final size and position; JS sets transform-origin to the avatar location so scale(0)→scale(1) appears to grow from the avatar. */ position: fixed; left: 50%; top: 50%; /* width: min(80vw, 712px); */ width: 100%; height: 100%; /* border-radius: 300px 300px 0 0; */ overflow: hidden; z-index: 2; transform: translate(-50%, -50%) scale(0); will-change: transform; /* Close: spring collapse — mirrors the open spring expansion */ transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.55s cubic-bezier(0.16, 1, 0.3, 1); } /* Left-side scrim over the photo — keeps expanded-avatar-text legible regardless of the underlying image, without flattening the portrait on the right where the subject sits. Paints above .expanded-avatar-img (later in the container's own stacking context) but stays below the text/close button, which are separate siblings with higher z-index. */ .expanded-avatar-container::after { content: ""; position: absolute; inset: 0; /* background: linear-gradient( to right, rgba(16, 26, 27, .75) 0%, rgba(16, 26, 27, .55) 35%, rgba(16, 26, 27, 0) 60% ); */ background: #101a1b; opacity: 0.3; pointer-events: none; } .avatar-expanded-overlay.is-open .expanded-avatar-container { transform: translate(-50%, -50%) scale(1); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.65s cubic-bezier(0.16, 1, 0.3, 1); background: #0b1415; } /* Hard-capped to the right 60% of the viewport — NOT left to fill the full width and rely on object-position/letterboxing to keep clear of the text. That was aspect-ratio-dependent: whenever the viewport's aspect ratio is narrower than the photo's own (true for most window shapes, since the source photos are landscape), object-fit:contain has no horizontal slack to push around and the image fills 100% width regardless of object-position — so the subject's on-screen position drifted with the viewport's height (bottom-anchored image + a vertically-centered text block), and on short/squat windows the text could end up level with a wide part of the face. Confining the image to a fixed column removes that height-dependency; 60% keeps the photo at a natural size on real laptop/desktop widths (which run wide, not short) while still leaving the text column (max ~43% of viewport, see .expanded-avatar-text) guaranteed clearance down to ~1200px. Narrower desktop widths (1025-1199px, e.g. a deliberately shrunk browser) get a tighter margin here — acceptable since that's not a realistic laptop viewport. */ .expanded-avatar-img { position: absolute; top: 0; right: 0; width: 60%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: right bottom; object-position: right bottom; transform: scale(1.1); transform-origin: right center; transition: transform 0.4s ease; } .avatar-expanded-overlay.is-open .expanded-avatar-img { transform: scale(1); } .expanded-avatar-text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-align: left; z-index: 3; color: #fff; opacity: 0; width: clamp(260px, 38vw, 591px); margin-left: clamp(24px, 5vw, 96px); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); transition: opacity 0.2s ease 0s; /* close: fast, no delay */ } .avatar-expanded-overlay.is-open .expanded-avatar-text { opacity: 1; transition: opacity 0.4s ease 0.8s; /* open: after bg has expanded */ } .expanded-name { font-size: 72px; line-height: 88px; font-weight: 250; margin-bottom: 8px; letter-spacing: 2.88px; } .expanded-role { margin-bottom: 40px; font-size: 24px; font-weight: 500; line-height: 40px; } .expanded-quote { font-size: 24px; font-weight: 500; line-height: 40px; max-width: 590px; } .expanded-close { position: absolute; top: 48px; right: 48px; width: 40px; height: 40px; z-index: 10; cursor: pointer; opacity: 0; transition: opacity 0.2s ease 0s; /* close: fast, no delay */ display: flex; align-items: center; justify-content: center; } .expanded-close i { font-size: 24px; color: #fff; transition: transform 0.3s ease; } .expanded-close .ib-icon { width: 24px; height: 24px; color: #fff; transition: transform 0.3s ease; } .expanded-close:hover i, .expanded-close:hover .ib-icon { transform: scale(1.1); } .avatar-expanded-overlay.is-open .expanded-close { opacity: 1; transition: opacity 0.3s ease 0.8s; /* open: after bg has expanded */ } @media (max-width: 1024px) { .expanded-avatar-container { width: 100vw; height: 100vh; border-radius: 0; top: auto; bottom: 0; left: 50%; transform: translate(-50%, 0%) scale(0); } /* Open order is reversed on mobile: the bg must be in place before the avatar (object-fit:contain, bottom-anchored — see base rule) scales up over it, so there's no flash of the container's own background. */ .avatar-expanded-overlay.is-open .expanded-bg { transition: opacity 0.35s ease 0s, transform 0s linear 0s; /* pure fade — no scaleX strip on mobile */ } .avatar-expanded-overlay.is-open .expanded-avatar-container { transform: translate(-50%, 0%) scale(1); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, border-radius 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; } /* Stacked layout: the photo is pinned to a hard vh-capped band at the bottom (not left to float at whatever height object-fit:contain happens to land on) so its visible top edge can never climb into the text zone above it — this holds regardless of the viewport's aspect ratio (tall phone vs. near-square tablet window), unlike the previous approach which relied on aspect-ratio-dependent transform percentages and broke on wider/shorter windows (e.g. 1010x980). */ .expanded-avatar-img { position: absolute; top: auto; right: auto; left: 0; bottom: 0; width: 100%; height: 60vh; -o-object-position: center bottom; object-position: center bottom; transform: scale(1.08); transform-origin: center bottom; } .avatar-expanded-overlay.is-open .expanded-avatar-img { transform: scale(1.15); } /* Text owns the guaranteed-clear band above the photo's 60vh cap — centered within it via flex instead of the old percentage-transform guesswork, so it can't drift into the photo's territory. */ .expanded-avatar-text { left: 50%; top: 0; width: 100%; height: 40vh; max-width: none; padding: 0 24px; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transform: translateX(-50%); } .expanded-name { font-size: 48px; line-height: 52px; letter-spacing: 1.92px; } .expanded-role { margin-bottom: 28px; font-size: 16px; line-height: 26px; text-transform: uppercase; } .expanded-quote { font-size: 16px; font-weight: 300; line-height: 26px; max-width: 290px; margin: 0 auto; } .expanded-close { inset: auto auto 24px 50%; transform: translateX(-50%); width: 48px; height: 48px; } .expanded-close i { font-size: 48px; } .expanded-close .ib-icon { width: 32px; height: 32px; } } /* Responsive Typography Adjustments */ @media (min-width: 769px) and (max-width: 1024px) { .story-title { font-size: 60px; letter-spacing: -2px; } .story-desc { font-size: 18px; } } @media (max-width: 768px) { .fold.active .story-title { font-size: 32px; line-height: 43px; letter-spacing: -1px; margin-bottom: 24px; } .story-desc { /* Set the token, not margin-bottom — every paragraph state reads it, so the measuring pass in js/home.js picks up the mobile gap too. */ --story-desc-gap: 15px; font-size: 16px; } .strike-line { height: 3px; } .story-desc-wrapper { margin-bottom: 0; } } /* ========================================== 8. Scroll Indicator ========================================== */ .indicators-wrapper { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--container-width-padd); /* mirrors .custom-container */ padding: 0 40px; /* mirrors .custom-container */ box-sizing: border-box; display: flex; align-items: center; z-index: 10; transition: opacity 0.25s ease; } /* Indicators are only meaningful while their own fold is the active one — once ScrollTrigger moves past it (fold loses .active), hide them instantly instead of letting them ride along as the fold scrolls out of view. !important is required because GSAP sets an inline opacity/visibility style on .what-we-do-indicator for the timed reveal. */ .fold:not(.active) .indicators-wrapper { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .what-we-do-indicator { margin-left: auto; /* pushes to container right edge */ display: flex; flex-direction: row; align-items: center; gap: 10px; padding-right: 5px; opacity: 0; visibility: hidden; cursor: pointer; } .what-we-do-indicator .ib-icon, .what-we-ship-indicator .ib-icon { color: var(--accent-red); } @media (max-width: 768px) { .indicators-wrapper { padding: 0 24px; } } @media (max-width: 768px) { .what-we-do-indicator { display: none; } } .what-we-ship-indicator { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 10px; padding-right: 5px; text-decoration: none; color: inherit; cursor: pointer; } @media (max-width: 1024px) { .what-we-ship-indicator { display: none; } } /* 4th Tab More Dots */ .what-we-ship-parent .more-dots { display: flex; gap: 6px; align-items: center; justify-content: center; height: 25px; } .what-we-ship-parent .more-dots .dot { width: 6px; height: 6px; background-color: #969696; } /* .what-we-ship-parent .more-dots .dot { background-color: var(--accent-red); } */ .what-we-ship-parent .ship-tab.active .dot { background-color: var(--accent-red); } .what-we-ship-parent .red-arrow { color: var(--accent-red); font-size: 14px; } @keyframes fade-in { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } .scroll-icon { animation: bounce-up-down 2s ease-in-out infinite; } @keyframes bounce-up-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } .scroll-text { font-size: 14px; line-height: 18px; color: #969696; font-weight: 300; } /* ========================================== 9. Scroll Animations & Transitions ========================================== */ /* Animations Triggered When Section is Active */ .fold.active .story-title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } /* No `animation` here, deliberately — that is what made the avatar row blink two or three times on load. .story-meta has no hidden base state, so the fade-in keyframes were the only thing that ever took it to opacity 0, and a CSS animation restarts from 0% every time its element is re-inserted into the DOM. #story is re-inserted repeatedly during startup: ScrollTrigger wraps the section in a .pin-spacer when the pin is created (js/home.js, initAllScrollTriggers on document.fonts.ready), and swaps it in and out of that spacer again on each refresh as the later pins are built. Every one of those replayed the 0.2s fade — read as a flash, because the row was already on screen. Same class of bug as the strike-line/highlight note below: anything inside a pinned section that must animate exactly once belongs on a GSAP timeline (which writes inline styles and is indifferent to re-parenting), never on a CSS animation. The two declarations left are the .active pair kept for symmetry with .story-title above; both are no-ops against the base state. */ .fold.active .story-meta { opacity: 1; transform: translateY(0); } /* NOTE: the strike-line draw + "lives" highlight reveal are now driven by a GSAP timeline (storyTitleTl in js/app.js) that replays each time the story fold becomes active. This fixes the load case where #story already carries .active, so the old CSS transition never replayed on first paint. */ @media (max-width: 1024px) { .story-meta { margin-left: 0; } .story-meta::before { background-color: #9797a4; left: 44px; height: 1px; } /* Matches .story-meta's own reset above — same shared-edge reasoning. */ .who-we-are-title { margin-left: 0; } } @media (max-width: 768px) { /* Desktop's -24px pulls the line out to the left of the text box, which is fine against the desktop container's wide side padding but runs the line straight into (and past) the narrower mobile container padding, clipping it out of view. Pinning it to the box's own edge lands it on the same spot .who-we-are-title's text (and the avatar photo above) already sit at on mobile — see the margin-left: 0 reset above — so it stays visible instead of disappearing off-container. */ .who-we-are-title::before { left: 0; } /* The line landing flush on the text's own edge (left: 0 above) means the text needs its own gap now, since desktop got its gap for free from the line sitting off-box at -24px instead. */ .who-we-are-title { padding-left: 12px; } } /* ========================================== 10. Enterprise Partner Fold ========================================== */ .enterprize-partner-parent .partner-container { position: relative; height: 100%; display: flex !important; align-items: center; justify-content: space-between; } /* partner-content and badge-ribbon reveal is driven by GSAP in home.js */ .enterprize-partner-parent .partner-content { max-width: 1000px; margin: 0; } .partner-tags { display: flex; gap: 40px; margin-bottom: 24px; font-size: 18px; font-weight: 300; color: var(--text-secondary); letter-spacing: 0.5px; text-transform: uppercase; } .enterprize-partner-parent .partner-title { font-size: clamp(43px, 4.17vw, 72px); font-weight: 250; line-height: clamp(52px, 5.09vw, 88px); letter-spacing: -2px; margin-bottom: 64px; } .enterprize-partner-parent .partner-title .gradient-text { background: linear-gradient(90deg, #284cba 0%, #7b4397 30%, #ea1b3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: block; } .enterprize-partner-parent .partner-title .dark-text { color: var(--font-primary); font-size: clamp(66px, 6.48vw, 112px); font-weight: 400; line-height: clamp(69px, 6.71vw, 116px); display: block; margin-top: 16px; } .enterprize-partner-parent .challenge-input-container { position: relative; max-width: 800px; margin-top: 40px; } .enterprize-partner-parent .challenge-input { width: 100%; border: none; background: transparent; font-size: 24px; font-family: var(--font-primary); color: var(--text-primary); padding: 16px 40px 16px 0; outline: none; font-weight: 300; } .enterprize-partner-parent .challenge-input::-moz-placeholder { color: var(--text-secondary); opacity: 0.7; } .enterprize-partner-parent .challenge-input::placeholder { color: var(--text-secondary); opacity: 0.7; } .enterprize-partner-parent textarea.challenge-input { display: block; resize: none; overflow: hidden; line-height: 1.4; height: calc(1.4em + 32px); /* one text line + vertical padding */ } .enterprize-partner-parent .challenge-submit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .enterprize-partner-parent .challenge-submit:hover { opacity: 0.8; } .enterprize-partner-parent .gradient-line { height: 4px; width: 100%; background: linear-gradient(90deg, #284cba 0%, #ea1b3d 100%); margin-top: 8px; } /* Outer mask — the ONLY thing that animates for the "unroll" reveal. badge-ribbon inside it never transforms or clips dynamically, so its permanent notch silhouette + content render as ONE static banner; the wrap just reveals more of that static banner top-down via clip-path. This is deliberately a single combined effect (one clip, one thing moving) — an earlier version animated the ribbon's own scaleY *and* an inner content clip-path separately, which visibly read as two overlapping layers instead of one unroll. */ .enterprize-partner-parent .award-badge-wrap { position: relative; overflow: hidden; margin-top: -28px; /* hangs higher from top — was on .badge-ribbon */ } .enterprize-partner-parent .badge-ribbon { position: relative; width: 280px; background-color: #faebd2; /* yellowish background matching screenshot */ border-top: 3px solid #c99b40; /* Golden line at the very top */ display: flex; flex-direction: column; align-items: center; padding: clamp(47px, 4.63vw, 80px) clamp(18px, 1.74vw, 30px) clamp(80px, 8.1vw, 140px); z-index: 5; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 25px), 0 100%); } /* Tracks the current unrolled edge — fades in as it leaves the fixed top axle (the gold border-top), fades out again once fully revealed. */ .enterprize-partner-parent .ribbon-edge-shadow { position: absolute; left: 0; top: 0; width: 100%; height: 22px; background: linear-gradient(to bottom, rgba(32, 20, 4, 0.3), rgba(32, 20, 4, 0)); opacity: 0; pointer-events: none; z-index: 6; } .enterprize-partner-parent .wow-moment-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; } .enterprize-partner-parent .gold-line { width: 40px; height: 1px; background-color: #bf8208; margin-bottom: 12px; } .enterprize-partner-parent .wow-moment-text { color: #bf8208; font-size: 13px; font-weight: 600; letter-spacing: 2px; } .enterprize-partner-parent .award-badge-icon { width: 100%; max-width: clamp(107px, 10.42vw, 180px); height: auto; -o-object-fit: contain; object-fit: contain; margin-bottom: clamp(14px, 1.39vw, 24px); } .enterprize-partner-parent .award-badge-text { text-align: center; } .enterprize-partner-parent .award-badge-text p { color: #a41f35; /* dark red */ font-size: 18px; line-height: 1.5; font-weight: 500; } /* Responsive */ @media (max-width: 1024px) { .enterprize-partner-parent .partner-container { flex-direction: column; padding: 40px 20px; align-items: flex-start; } .enterprize-partner-parent .award-badge-wrap { width: 100%; margin-top: 40px; margin-right: 0; } .enterprize-partner-parent .badge-ribbon { width: 100%; max-width: none; margin-right: 0; clip-path: none; border-radius: 8px; border-top: none; display: grid; grid-template-areas: "header header" "icon text"; grid-template-columns: 70px 1fr; gap: 16px 5px; padding: 24px 20px; } .enterprize-partner-parent .wow-moment-header { grid-area: header; flex-direction: row; justify-content: flex-start; margin-bottom: 0; } .enterprize-partner-parent .gold-line { margin-bottom: 0; margin-right: 16px; width: 42px; height: 2px; } .enterprize-partner-parent .award-badge-icon { grid-area: icon; max-width: 90%; margin-bottom: 0; } } @media (min-width: 769px) and (max-width: 1024px) { .enterprize-partner-parent .partner-title { font-size: 42px; line-height: 50px; letter-spacing: 1px; } .enterprize-partner-parent .partner-title .dark-text { font-size: 80px; line-height: 84px; } .enterprize-partner-parent .badge-ribbon { grid-template-columns: 175px 1fr; gap: 16px 5px; } .enterprize-partner-parent .award-badge-text p { font-size: 32px; line-height: 1.4; text-align: left; } .enterprize-partner-parent .award-badge-text p br { display: none; } } @media (max-width: 768px) { /* Phone only — tablet (769-1024px) is left on the base .fold `height: 100vh`, which fits there. On a phone that fixed height + .fold's `overflow: hidden` clips: the column (tags + two-line title + challenge field + WOW banner) can run taller than the visible viewport, and on iOS 100vh is the LARGE viewport on top of that, so the bottom of the banner is cut off. Fix: drop the fixed height for a 100dvh floor so the section can grow to its content and the page just scrolls — nothing clipped. The layout the design wants is kept: copy pinned to the top, banner to the bottom. That is `space-between` (inherited from the base .partner-container rule), and it needs a container taller than its content to open that gap — so .partner-container keeps a viewport-tall min-height (was height: 100%, which no longer resolves once the section is auto-height) but switches to height: auto so it can still grow past that when the content is long, with the banner riding the bottom edge the whole way. Extra .folds-container specificity, no !important — same reasoning as .story-parent. */ .folds-container .enterprize-partner-parent { height: auto; min-height: 100vh; /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ min-height: 100svh; } .enterprize-partner-parent .partner-container { height: auto; /* 84px = .fold's padding-top (header clearance); the rest of the fold's height is this container's to fill. */ min-height: calc(100vh - 84px); /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ min-height: calc(100svh - 84px); } .enterprize-partner-parent .partner-title { font-size: 32px; line-height: 40px; letter-spacing: 1px; margin-bottom: 24px; } .enterprize-partner-parent .partner-tags { gap: 16px; font-size: 12px; flex-wrap: wrap; margin-bottom: 16px; } .enterprize-partner-parent .challenge-input { font-size: 16px; padding: 12px 40px 12px 0; } .enterprize-partner-parent textarea.challenge-input { height: calc(1.4em + 24px); } .enterprize-partner-parent .partner-title .dark-text { font-size: 40px; line-height: 44px; } .enterprize-partner-parent .challenge-input-container { margin-top: 10px; } .enterprize-partner-parent .award-badge-wrap { margin-top: 20px; } .enterprize-partner-parent .badge-ribbon { padding: 16px; gap: 12px 5px; } .enterprize-partner-parent .award-badge-text { grid-area: text; text-align: left; display: flex; align-items: center; margin-left: -5px; } .enterprize-partner-parent .award-badge-text p { font-size: 15px; line-height: 1.3; } .enterprize-partner-parent .award-badge-text p br { display: none; } } @media (max-width: 400px) { .enterprize-partner-parent .partner-tags { gap: 16px; font-size: 11px; } } /* Short viewport, tablet + desktop (>=769px) — same clip that the <=768px block above fixes for phones: .fold's fixed `height: 100vh` + `overflow: hidden` chops the top of the partner column / WOW banner whenever the content is taller than a stubby laptop or split-screen window. Gated on `max-height` (not width) so a normal-height desktop is never touched — the common case keeps byte-for-byte its current pinned behaviour. When it does apply: let the section grow to its content and the page scroll. 769-1024px has no pin (syncEpPin only builds it >=1025px), so this is purely CSS there. At >=1025px GSAP's pin measures the taller height and `pinSpacing` reserves it; the reveal timeline fires once on entry off its own clock and doesn't care about the pin distance, so nothing desyncs. `min-height` keeps the container viewport-tall so `space-between` still opens the copy-top / banner-bottom gap; `height: auto` lets it grow past that for long content. */ @media (min-width: 769px) and (max-height: 900px) { .folds-container .enterprize-partner-parent { height: auto; min-height: 100vh; } .enterprize-partner-parent .partner-container { height: auto; min-height: calc(100vh - 84px); padding-top: 40px; padding-bottom: 40px; } } /* ========================================== 10.5. Ship Fold ========================================== */ .what-we-ship-parent .ship-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; /* padding-top: 40px; */ } .what-we-ship-parent .ship-title { color: var(--accent-red); font-size: 32px; font-weight: 300; margin-bottom: 40px; } .what-we-ship-parent .ship-carousel-wrapper { position: relative; width: 100%; max-width: 1300px; height: min(540px, 100svh - 270px); flex-shrink: 0; margin-bottom: 60px; z-index: 100; } /* Horizontal swipe (js/home.js, ≤1023px) is ours; vertical panning stays the browser's — it is what drives the pin. Without this declaration the browser has to assume a touch MIGHT pan in any direction, so it starts a scroll as soon as the finger moves and every touchmove after that is cancelable: false. The swipe handler's preventDefault() then arrives too late to stop the page moving and Chrome logs "[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false". Declaring pan-y up front removes the ambiguity: a horizontal-dominant gesture is never claimed for scrolling, so it stays cancelable and the swipe wins cleanly. pinch-zoom is listed so the declaration does not cost the user zoom on the card; the bare pan-y line above is the fallback for browsers that don't parse the two-value form. */ @media (max-width: 1024px) { .what-we-ship-parent .ship-carousel-wrapper { touch-action: pan-y; /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ touch-action: pan-y pinch-zoom; } } .what-we-ship-parent .ship-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; overflow: hidden; z-index: 3; display: flex; flex-direction: column; padding: 0; border-radius: 0; /* One duration + one curve for every animated property, so a step reads identically whichever direction it is played in. The old split (transform 1.5s / opacity 1s) made a card finish fading 500ms before it finished moving, and box-shadow — untransitioned — snapped on the first frame. This is the shared baseline. Two states override it with a curve suited to what that direction actually shows on screen — the departing card's exit and the arriving card's entry, both further down and both desktop-scoped. Every duration here must stay <= SHIP_SLIDE_TRANSITION_MS in js/home.js (1300), which is the hold between steps; anything longer has its tail cut off by the next step during a continuous walk. */ transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.2s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translate3d(0, 100%, 0); pointer-events: none; will-change: transform, opacity; } /* Suppresses the transition above for the deck's very first paint at page load (js/home-smootheer-1.js) — see the comment at that call site for why the reveal it would otherwise play is a real animation racing the clock from page load, not from arrival at this fold. */ .what-we-ship-parent.is-first-paint .ship-slide { transition: none; } /* Applied briefly by js/home-smootheer-1.js when a fast wheel/trackpad gesture snaps the deck straight to the edge card, skipping every card in between — the full 1.2s above is tuned for a single-card step and reads as laggy for a jump that can cross several cards' worth of visual distance in one go. Overriding only transition-duration (not the full shorthand) keeps the shared curve/property list above untouched — see its comment for why they're unified. */ .what-we-ship-parent.is-fast-transition .ship-slide { transition-duration: 0.3s; } .what-we-ship-parent .ship-slide.discover-slide { /* background: linear-gradient( 61.8705deg, #462f82 0.31813%, #b5418b 56.31%, #f16f58 92.454% ); */ background: linear-gradient(95.64deg, #462f82 5.86%, #b5418b 53%, #f16f58 96.65%); display: flex; align-items: center; justify-content: center; } .what-we-ship-parent .ship-discover-content { text-align: center; color: #fff; width: 100%; max-width: 800px; padding: 40px; } .what-we-ship-parent .discover-title { font-size: 20px; font-weight: 400; margin-bottom: 24px; } .what-we-ship-parent .discover-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .what-we-ship-parent .discover-tag { background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: 0; font-size: 16px; line-height: 1; font-weight: 300; gap: 10px; cursor: pointer; transition: background 0.3s ease, backdrop-filter 0.3s ease; } /* hover: hover only — on touch (iPhone/Safari) :hover sticks to the last-tapped element until the next tap elsewhere, which left one discover-tag on the final ship card wearing the notched clip-path while its siblings stayed rectangular. */ @media (hover: hover) { .what-we-ship-parent .discover-tag:hover { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } } .what-we-ship-parent .discover-tag i { font-size: 12px; } .what-we-ship-parent .view-all-stories, .what-we-ship-parent .ship-view-story { color: #fff; font-size: 16px; line-height: 26px; font-weight: 500; display: inline-flex; align-items: center; gap: 24px; text-transform: uppercase; text-decoration: underline; } .what-we-ship-parent .view-all-stories .ib-icon, .what-we-ship-parent .ship-view-story .ib-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .what-we-ship-parent .view-all-stories:hover .ib-icon, .what-we-ship-parent .ship-view-story:hover .ib-icon { transform: translateX(4px); } /* Every deck state below is keyed off data-pos — each card's index MINUS the active card's index, written by renderShipStack() in js/home.js and clamped to the range the stylesheet knows about: -2 already gone -1 the card just left 0 active 1 first card peeking out below it 2 second card peeking out 3 everything further back, parked on the last visible stack slot That is what makes the deck length a property of the markup: six rules cover four cards and forty alike, and adding a .ship-slide needs no CSS at all. */ .what-we-ship-parent .ship-slide[data-pos="0"] { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; z-index: 4; } .what-we-ship-parent .ship-slide[data-pos="-1"], .what-we-ship-parent .ship-slide[data-pos="-2"] { opacity: 1; transform: translate3d(0, -100vh, 0); box-shadow: none; /* Above the card that just took its place (active is z-index 4). This is what makes a downward step read as smoothly as an upward one. A departing card carries the whole 100vh of the motion, but without a z-index of its own it fell back to .ship-slide's base z-index: 3 — i.e. BEHIND the newly-active card, which is opaque and very nearly the same size (stack pos 1 rests at scale(0.967) translate3d(0,26px,0)). So the only moving element was occluded for the first stretch of its travel and appeared to pop out from behind the deck rather than fly off it. Going the other way the moving card IS the active one, so it was always on top and always fully visible — which is the whole of why up felt smooth and down did not. Exiting over the deck mirrors that. */ z-index: 5; } /* Exit curve for the departing card — desktop deck only. Scoped to ≥1024px because below that the carousel is a horizontal swipe deck: the same "past" selectors above are re-pointed to translateX and their feel is driven by the gesture, so they keep the shared curve. A transition is read from the state being animated TO, so this governs only the downward step (active → past). Going back up the card animates into the ACTIVE state and keeps the shared curve — that direction already reads well and is deliberately left alone. Why it needs its own curve: the card travels 100vh (~900px) but the frame it leaves is only 540px, so it is out of sight after 60% of the distance. The shared cubic-bezier(0.16, 1, 0.3, 1) is an expo-out — it covers 445px in the first 120ms and clears the frame in ~159ms, spending the remaining ~87% of the 1.2s travelling where nobody can see it. The duration was never the problem; almost none of it was on screen, which is why the step read as a snap however long it was made. cubic-bezier(0.37, 0, 0.63, 1) is easeInOutSine — symmetric, no front loading. It clears the frame at 56% of whatever duration it is given, so the time actually spent on screen scales with the number below instead of being swallowed by the off-screen tail. All three properties are re-declared because `transition` is a shorthand: naming only transform here would drop the other two and let box-shadow snap on the first frame, which is the bug the shared rule calls out. 1s, trimmed from the 1.2s this started at: that is ~563ms of visible exit (against ~159ms before any of this) with a ~31px lift-off in the first 120ms. Shorter than the shared 1.2s on .ship-slide on purpose — the exit carries essentially all of a downward step's motion, while the arriving card only moves 26px, so the two do not need to finish together and the exit reads better slightly tighter. SHIP_SLIDE_TRANSITION_MS in js/home.js (1300) is the ceiling, not a target: it paces steps, and an exit longer than that dwell would let a second card start leaving while this one is still on its way out. Anything at or below it is safe to set here alone; going above it means raising the JS constant too. */ @media (min-width: 1025px) { .what-we-ship-parent .ship-slide[data-pos="-1"], .what-we-ship-parent .ship-slide[data-pos="-2"] { transition: transform 1s cubic-bezier(0.37, 0, 0.63, 1), opacity 1s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 1s cubic-bezier(0.37, 0, 0.63, 1); } } /* Entry curve for the arriving card — desktop deck only, and the mirror of the exit block above. This governs everything animating INTO the active state: the upward step's 100vh drop from -100vh, and the downward step's 26px settle as the next card is promoted out of the deck. NOT given the exit's easeInOutSine, deliberately. An entry has the opposite geometry to an exit: the card starts 100vh above and is off screen for the first 40% of its travel, so a symmetric curve holds it out of frame for ~568ms and the step reads as lag rather than smoothness. An arriving card has to appear promptly and then settle. Measured over the 900px drop at this duration: expo-out (0.16, 1, 0.3, 1) appears 99ms, but lunges 419px in 120ms easeOutCubic (0.33, 1, .68) appears 203ms, lunges 228px in 120ms easeInOutSine (exit curve) appears 568ms <- the lag case easeOutCubic keeps the prompt arrival that made this direction read well already, while halving the opening lunge that made it feel thrown rather than placed. 1.3s, up from the shared 1.2s, spreads the settle further. All three properties re-declared — `transition` is a shorthand, and naming only transform would drop the others and let box-shadow snap. */ @media (min-width: 1025px) { .what-we-ship-parent .ship-slide[data-pos="0"] { transition: transform 1.3s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.3s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 1.3s cubic-bezier(0.33, 1, 0.68, 1); } } .what-we-ship-parent .ship-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; opacity: 0.8; /* Background decoration only — never a tap target. Without this, iOS Safari routes the first tap on a card to the video's native play/pause instead of the card's expand handler ("hard to click / first tap plays / second tap flickers"). */ pointer-events: none; transform: scale(1); transform-origin: right top; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .what-we-ship-parent .ship-slide.expanded .ship-video-bg { transform: scale(2.8); transform-origin: right bottom; } .what-we-ship-parent .ship-slide-content { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: row; } .what-we-ship-parent .ship-expanded-overlay { position: absolute; inset: 0; background: linear-gradient(-105.89deg, #462f82 -0.32%, #b5418b 56.31%, #f16f58 92.45%); background-blend-mode: screen, normal; opacity: 1; pointer-events: none; z-index: 0; /* Slight delay so the panel slides in first */ transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; } /* Desktop: rest the overlay at .85 so the video reads through the tint. Mobile keeps the full opacity 1. */ @media (min-width: 1025px) { .what-we-ship-parent .ship-expanded-overlay { opacity: 0.85; } } .what-we-ship-parent .ship-slide.expanded { z-index: 100; } .what-we-ship-parent .ship-content-left { padding: 40px; display: flex; flex-direction: column; width: 100%; height: 100%; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), padding 0.8s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .what-we-ship-parent .ship-slide.expanded .ship-content-left { /* width: 30%; */ width: 286px; padding-right: 40px; } .what-we-ship-parent .ship-content-expanded { position: absolute; top: 0; right: 0; display: flex; flex-direction: row; width: calc(100% - 285px); height: 100%; /* transform: translate3d(100%, 0, 0); */ transform: translate3d(calc(100% - 19px), 0, 0); transition: transform 0.6s ease-in-out; padding: 40px 30px 40px 60px; } .what-we-ship-parent .ship-slide.expanded .ship-content-expanded { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-in-out; } .what-we-ship-parent .ship-col-middle, .what-we-ship-parent .ship-col-right { display: flex; flex-direction: column; width: 50%; padding-right: 30px; color: #fff; position: relative; z-index: 1; } .what-we-ship-parent .ship-col-right { position: relative; } .what-we-ship-parent .ship-detail-section { margin-bottom: 16px; } .what-we-ship-parent .ship-detail-section h4 { font-size: 24px; font-weight: 600; margin-bottom: 10px; } .what-we-ship-parent .ship-detail-section p { font-size: 13px; font-weight: 300; line-height: 1.5; margin-bottom: 12px; opacity: 0.9; } .what-we-ship-parent .ship-arrow-btn { position: absolute; bottom: 0; right: 0; font-size: 32px; color: #fff; cursor: pointer; } /* Text badge variant — glass chip with notched corners instead of a logo image */ .what-we-ship-parent .ship-client-logo { display: flex; align-self: flex-start; width: auto; height: 40px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9490196078); backdrop-filter: blur(12px); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); font-family: var(--font-heading); font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: -0.02em; text-align: center; text-transform: uppercase; color: #373742; padding: 8px 16px; } .what-we-ship-parent .ship-slide.expanded .ship-client-logo { font-size: 14px; } .what-we-ship-parent .ship-main-text { margin-top: auto; transition: opacity 0.18s ease; } .what-we-ship-parent .ship-main-text.ship-fade-out, .what-we-ship-parent .ship-tags.ship-fade-out { opacity: 0; } .ship-close-mobile { display: none; color: #e6e6ed; } /* Desktop close button — top-right of the slide, shown only while expanded. .ship-arrow-btn is no longer a close trigger (it's the "View True Story" nav link now), so desktop needs its own explicit close affordance. */ .ship-close-desktop { display: none; color: #e6e6ed; } @media (min-width: 1025px) { .what-we-ship-parent .ship-slide.expanded .ship-close-desktop { display: flex; align-items: center; justify-content: center; position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; gap: 8px; padding: 12px; box-sizing: border-box; background: transparent; border: none; box-shadow: 0 0 2px 0 rgba(47, 47, 57, 0.2); cursor: pointer; z-index: 5; } } .what-we-ship-parent .ship-main-text h3 { color: #fff; font-size: 36px; font-weight: 600; line-height: 1.2; margin-bottom: 16px; max-width: 886px; transition: opacity 0.18s ease; } .what-we-ship-parent .ship-slide.expanded .ship-main-text h3 { font-size: 20px; } .what-we-ship-parent .ship-slide.expanded .ship-main-text h3 br { display: none; } .what-we-ship-parent .ship-tags { display: flex; gap: 16px; transition: opacity 0.18s ease; } .what-we-ship-parent .ship-slide.expanded .ship-tags { flex-direction: column; align-items: flex-start; gap: 10px; } .what-we-ship-parent .ship-tag { background: rgba(255, 255, 255, 0.2); color: #fff; padding: 2px 8px; font-size: 12px; } /* ============================================================ SHIP SLIDE — EXPAND CHOREOGRAPHY (desktop only, >= 1024px) Timed against the click handler in js/home.js (section 8): t=0ms .ship-fade-out added → title + tags fade out (0.18s) t=180ms .expanded toggled → layout snaps while text is invisible t=380ms .ship-fade-out removed → title + tags fade back in The logo is the one piece NOT covered by that fade window — it stays visible the whole way through — so nothing here may start it (or the column that carries it) from an offset state at t=180ms. Every keyframe below either begins at rest or begins while its element is invisible. Layout is untouched — only transform/opacity animate. ============================================================ */ @media (min-width: 1025px) { .what-we-ship-parent .ship-slide { /* Shared with the width/padding transition on .ship-content-left, so the content motion and the panel expansion always run on the same curve. */ --ship-expand-dur: .8s; --ship-expand-ease: cubic-bezier(.16, 1, .3, 1); } /* --- Left column: drifts with the panel as it narrows and returns to rest. Starts and ends at translate zero, so the still-visible logo it carries is never snapped to an offset when .expanded lands. --- */ .what-we-ship-parent .ship-content-left { will-change: transform; } .what-we-ship-parent .ship-slide.expanded .ship-content-left { animation: ship-left-settle var(--ship-expand-dur) cubic-bezier(0.45, 0, 0.55, 1) both; } @keyframes ship-left-settle { 0% { transform: translate3d(0, 0, 0); } 45% { transform: translate3d(-10px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } /* --- Client logo: no keyframe. It is visible across the whole toggle, so any animation with a `from` state would read as a jump at t=180ms. Instead its 16px → 14px type change simply interpolates on the expansion duration and curve — continuous from wherever it is. --- */ .what-we-ship-parent .ship-client-logo { transition: font-size var(--ship-expand-dur) var(--ship-expand-ease), padding var(--ship-expand-dur) var(--ship-expand-ease); } /* --- Headline: fade only. The fast 0.18s fade-out is kept exactly as it was; the fade back in at t=380ms runs long and soft so the title resolves into the narrowed column instead of blinking on. --- */ .what-we-ship-parent .ship-main-text { will-change: opacity; transition: opacity 0.65s var(--ship-expand-ease) 0.05s; } .what-we-ship-parent .ship-main-text.ship-fade-out { transition: opacity 0.18s ease; } /* --- Tags: row folding into a stack. flex-direction can't tween, so the snap is left where it already is (hidden behind the fade) and the motion is rebuilt as a FLIP: each chip starts offset to roughly where it sat in the row — up and to the right of its new slot — and travels into the column. Chip 1 barely moves, which is exactly what a folding row does. Offsets scale off the chip's own index, so the count is free to change. --- */ .what-we-ship-parent .ship-slide.expanded .ship-tag { --ship-tag-i: 0; will-change: transform, opacity; animation: ship-tag-fold 0.6s var(--ship-expand-ease) both; /* 0.2s = the moment .ship-fade-out lifts and the row becomes visible */ animation-delay: calc(0.2s + var(--ship-tag-i) * 0.06s); } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(2) { --ship-tag-i: 1; } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(3) { --ship-tag-i: 2; } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(4) { --ship-tag-i: 3; } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(5) { --ship-tag-i: 4; } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(6) { --ship-tag-i: 5; } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(7) { --ship-tag-i: 6; } .what-we-ship-parent .ship-slide.expanded .ship-tag:nth-child(8) { --ship-tag-i: 7; } @keyframes ship-tag-fold { from { opacity: 0; /* ~90px = average chip width + the 16px row gap it used to sit behind; ~28px = stacked row pitch (12px chip + 10px column gap). */ transform: translate3d(calc(var(--ship-tag-i) * 90px), calc(var(--ship-tag-i) * -28px), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } } .what-we-ship-parent .ship-right-strip { position: absolute; right: 0; top: 0; height: 100%; width: 19px; z-index: 4; cursor: pointer; /* Centres the label instead of nudging it with a hardcoded offset, so the copy inside is free to get longer or shorter without drifting out of the 19px strip. */ display: flex; align-items: center; justify-content: center; transition: transform 0.9s ease-in-out; /* transition: all .5s cubic-bezier(.16, 1, .3, 1); background: linear-gradient( 105.09deg, rgb(70, 47, 130, .5) -.32%, rgb(181, 65, 139, .5) 56.31%, rgb(241, 111, 88, .5) 92.45% ); */ } .what-we-ship-parent .ship-slide.expanded .ship-right-strip { opacity: 0; visibility: hidden; transform: translateX(20px); } .what-we-ship-parent .ship-vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-size: 12px; letter-spacing: 1px; white-space: nowrap; /* Last-resort guard: copy longer than the strip is tall trims instead of bleeding past the card edges. */ max-height: 100%; overflow: hidden; text-overflow: ellipsis; } /* dynamic stack effect handled below in @media (min-width: 1024px) */ .what-we-ship-parent .ship-tabs { display: flex; /* Wraps rather than overflowing once the deck carries more tabs than fit on one row. A four-card deck still renders on a single line, so this costs nothing today and stops a longer one pushing the strip off the container. */ flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; width: 100%; margin-bottom: 24px; } #what-we-ship { height: auto; min-height: 100vh; overflow: hidden; margin-bottom: 0; padding-bottom: 0; } .what-we-ship-parent .ship-tab { color: #676775; font-size: 16px; font-weight: 300; cursor: pointer; position: relative; transition: all 0.3s ease; } /* The strip used to name every tab index against every deck index, which is why a fifth card meant new CSS. renderShipStack() in js/home.js now marks the one tab that matches the rendered card, so the pairing lives where the deck length already does. */ .what-we-ship-parent .ship-tab.active { color: var(--accent-red); font-weight: 600; } .what-we-ship-parent .ship-tab.active .tab-dots, .what-we-ship-parent .ship-tab.active .more-dots { opacity: 1; visibility: visible; } .what-we-ship-parent .tab-dots { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); color: var(--accent-red); font-size: 24px; line-height: 10px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } /* ── Card stack: the active card plus the next two peek out below it ── Exactly three cards are ever on screen, however many the deck holds. The fourth position (data-pos="3") is where every remaining card waits, parked on the last visible slot and invisible, so it RISES into the stack as the deck walks forward rather than fading in from nowhere. Geometry is per stack position, never per card index. */ @media (min-width: 1025px) { /* Stack pos 1 — the card directly behind the active one */ .what-we-ship-parent .ship-slide[data-pos="1"] { opacity: 0.5; z-index: 3; pointer-events: none; /* Deliberately the original deck geometry — the look was signed off as-is. Worth knowing when touching it: this resting offset doubles as the arriving card's travel distance, since a card promoted to active animates from here to translate3d(0,0,0). At 26px that is a very small move spread over the full transition, so on a downward step essentially all of the motion belongs to the DEPARTING card and its 100vh exit. That asymmetry is fine in itself — the up step is the mirror image, with all the motion on the arriving card. What used to break it was stacking, not geometry: the departing card had no z-index of its own and sat behind this one while it moved. It now exits above the deck (see z-index on the -100vh rule above), so both directions show their moving card in full. Timing is shared: the unified 1.2s transition on .ship-slide and SHIP_SLIDE_TRANSITION_MS in js/home.js — change one, change the other. */ transform: scale(0.967) translate3d(0, 26px, 0); } /* Stack pos 2 — second and last card visible behind the active one. SHIP_STACK_DEPTH in js/home.js is 2 because of this rule; raising one means raising the other and adding the matching step here. */ .what-we-ship-parent .ship-slide[data-pos="2"] { opacity: 0.5; transform: scale(0.935) translate3d(0, 50px, 0); z-index: 2; pointer-events: none; } /* The waiting room — every card further back than the visible stack. It sits ON pos 2's geometry rather than at translate3d(0,0,0) so that being promoted into the deck is a 24px rise like every other step, not a travel-free cross-fade. Nothing here is per-card, so a deck of twenty renders exactly like a deck of three. */ .what-we-ship-parent .ship-slide[data-pos="3"] { opacity: 0; transform: scale(0.935) translate3d(0, 50px, 0); z-index: 1; pointer-events: none; } /* The closing gradient card is a full-bleed panel, not a case-study card, so it never peeks out of the stack — but it still TRAVELS like one, keeping whatever geometry its stack position gives it, so it rises into place on the same motion as the rest. Written against the card's own class rather than its index, which is what keeps it correct wherever it sits in the deck. */ .what-we-ship-parent .ship-slide.discover-slide[data-pos="1"], .what-we-ship-parent .ship-slide.discover-slide[data-pos="2"], .what-we-ship-parent .ship-slide.discover-slide[data-pos="3"] { opacity: 0; } } @media (max-width: 1440px) { #what-we-ship { margin-bottom: 0; padding-bottom: 0; } .what-we-ship-parent .ship-container { /* padding-top: 20px; */ } .what-we-ship-parent .ship-title { margin-bottom: 20px; } } /* ========================================== RESPONSIVE — Ship Fold (Mobile ≤ 1023px) ========================================== */ @media (max-width: 1024px) { #what-we-ship { /* dvh, not vh — same reason as .story-parent above. On iOS 100vh resolves to the LARGE viewport (address bar hidden), so on a phone with the bar showing the section runs ~110px taller than what's on screen. Centred content (see .ship-container) then sits that much too low and the tab strip below the card falls behind the browser's bottom toolbar — "the nav is gone and the section is stuck". dvh tracks the current viewport, so the strip stays on screen. GSAP writes its own measured height inline once the fold pins, so this only governs the pre-pin frames. vh stays as the fallback for browsers without dvh. */ height: 100vh; /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ height: 100dvh; overflow: hidden; margin-bottom: 0; padding-top: 110px; padding-bottom: 25px; } .what-we-ship-parent .ship-container { align-items: flex-start; /* Centred while pinned — but `safe`, so it only centres while the title + card + tab strip actually fit. If they'd total more than the visible height (short phone, browser chrome showing) the safe keyword falls back to start alignment instead of splitting the overflow top AND bottom, which is what used to push the tab strip off screen. Lowering the card floor to 380px (see .ship-carousel-wrapper below) is what buys the slack to centre on a normal handset in the first place. Progressive-enhancement pair, same as .story-parent .custom-container: browsers that don't parse `safe` drop the second line and keep plain `center`. */ justify-content: center; /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ justify-content: safe center; padding: 0; } .what-we-ship-parent .ship-title { font-size: 28px; line-height: 38px; padding-left: 24px; padding-right: 24px; margin-bottom: 20px; } /* Carousel: taller card, overflow hidden so peek stays inside. clamp, not max: the viewport term is what sizes the card on a normal handset, the 435px floor stops it collapsing on a short one, and the 540px ceiling is the same cap desktop carries. Without that ceiling the card kept growing on a tall tablet, which is the one viewport where 100svh - 280px clears 540 on its own. Mobile overrides the ceiling below. */ .what-we-ship-parent .ship-carousel-wrapper { height: clamp(435px, 100svh - 280px, 540px); margin-bottom: 0; overflow: hidden; /* Vertical pans stay native — the pin's own scroll must keep working untouched. Horizontal is handed to the swipe handler in home.js, which is what stops the browser from committing to a diagonal drag as a page scroll before the gesture's axis has been resolved. */ touch-action: pan-y; } /* All slides: 24px inset each side creates the peek gaps. Left gap (0→24px) = prev card peeks. Right gap (n-24px→n) = next card peeks. Default (not-yet-seen) state uses translateX so all transitions are horizontal. */ .what-we-ship-parent .ship-slide { left: 24px; width: calc(100% - 48px); padding: 20px 30px 20px 20px; border-radius: 0; box-shadow: none; opacity: 0; transform: translateX(calc(100% + 2px)) scale(0.95); /* Mobile is a single horizontal translateX slide, not the desktop stack with its matched departing/arriving curves (those are min-width: 1025px scoped). 0.5s is plenty for that one move and lets the touch step dwell in js/home-smootheer-1.js (SHIP_SLIDE_TRANSITION_MS = 620 on coarse pointers) come down with it — which is what stops the deck feeling stuck / still walking after the finger lifts. Stays under that 620ms ceiling. */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* iOS: keep each slide on its own stable GPU layer through the translateX. Without this the layer is re-promoted per step and Safari flashes the whole card (worse with the