, or into a single Embed element on the page. Build the section with NATIVE Webflow elements using the class names below (see ati-fan-structure.html for the exact tree). Cards are native Link Blocks: pick each card's page in Webflow's link settings. No JavaScript. All text stays in the DOM at all times; hover and entrance are CSS transform/opacity only. Fonts: add "Archivo Black" and "Inter" in Site settings > Fonts. ============================================================ */ /* ---------- section shell (base = desktop, 1290 page) ---------- */ .fan-section{background:#0F2440;padding:88px 0 104px;overflow:hidden;} .fan-container{max-width:1290px;margin:0 auto;padding:0 40px;} /* ---------- header ---------- */ .fan-header{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;} .fan-eyebrow{display:flex;align-items:center;gap:10px;} .fan-eyebrow-dot{width:8px;height:8px;background:#C8102E;} .fan-eyebrow-text{font:500 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,244,236,.62);} .fan-h2{margin:0;font:400 44px/1.08 'Archivo Black',sans-serif;letter-spacing:0;color:#F7F4EC;max-width:700px;} .fan-support{margin:0;font:400 16px/1.6 Inter,sans-serif;color:rgba(247,244,236,.68);max-width:440px;} /* ---------- fan row ---------- */ .fan-row{margin-top:56px;display:flex;justify-content:center;align-items:stretch;gap:8px;padding:26px 48px 0;} /* ---------- card = native Webflow Link Block ---------- */ .fan-card{position:relative;display:block;width:168px;height:448px;flex:0 0 auto;transform:skewX(-12deg);transform-origin:50% 50%;overflow:hidden;background:#0B1B33;border-top:2px solid #C8102E;box-shadow:0 14px 30px -16px rgba(0,0,0,.5);text-decoration:none;transition:transform .55s cubic-bezier(.19,1,.22,1),box-shadow .55s cubic-bezier(.19,1,.22,1);} .fan-card:focus-visible{outline:3px solid #C8102E;outline-offset:4px;} /* hover: hovered card keeps its lean and grows 10% from center, the others ease back 10%. Order matters: grow rule comes last. */ .fan-row:hover .fan-card{transform:skewX(-12deg) scale(.9);} .fan-row .fan-card:hover{transform:skewX(-12deg) scale(1.1);z-index:6;box-shadow:0 44px 90px -18px rgba(2,8,18,.72);} /* ---------- photo: upright and undistorted inside the leaning frame ---------- */ .fan-photo{position:absolute;top:-10px;bottom:-10px;left:-100px;right:-100px;transform:skewX(12deg);transform-origin:50% 50%;background-color:#22385A;background-position:center;background-size:cover;background-repeat:no-repeat;filter:saturate(.28) brightness(.92) contrast(1.06);transition:filter .5s ease;} .fan-card:hover .fan-photo{filter:none;} .fan-tint{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(15,36,64,.42);transition:opacity .45s ease;} .fan-card:hover .fan-tint{opacity:.06;} .fan-shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(6,15,30,.97) 0%,rgba(6,15,30,.7) 24%,rgba(6,15,30,.24) 46%,rgba(6,15,30,0) 64%);} /* ---------- card text ---------- */ .fan-top{position:absolute;top:0;left:0;right:0;transform:skewX(12deg);transform-origin:50% 0%;padding:18px 24px 0;} .fan-num{font:500 11px/1 Inter,sans-serif;letter-spacing:.18em;color:rgba(247,244,236,.6);} .fan-body{position:absolute;left:0;right:0;bottom:0;transform:skewX(12deg);transform-origin:50% 100%;padding:0 18px 20px 46px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;} .fan-name{margin:0;font:600 18px/1.2 Inter,sans-serif;letter-spacing:-.01em;color:#F7F4EC;} .fan-desc{margin:0;font:400 12px/1.6 Inter,sans-serif;color:rgba(247,244,236,.8);} .fan-arrow{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-top:4px;background:#C8102E;color:#F7F4EC;font:600 15px/1 Inter,sans-serif;opacity:.5;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease;} .fan-card:hover .fan-arrow{opacity:1;transform:none;} /* ---------- default photos ---------- Upload your photos to Webflow Assets, then replace these URLs (right-click the asset > copy URL). is-05 (healthcare) is your own file: upload istockphoto-1290769186-612x612.jpg first. */ .fan-photo.is-01{background-image:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=900&h=1300&q=80');} .fan-photo.is-02{background-image:url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&w=900&h=1300&q=80');} .fan-photo.is-03{background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=900&h=1300&q=80');} .fan-photo.is-04{background-image:url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=900&h=1300&q=80');} .fan-photo.is-05{background-image:url('../uploads/istockphoto-1290769186-612x612.jpg');background-position:center 22%;} .fan-photo.is-06{background-image:url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=900&h=1300&q=80');} /* ---------- entrance (CSS only; header rises, cards fade in from the center outward). Delete this block if you rebuild the entrance with native scroll-into-view Interactions instead. ---------- */ @keyframes fanRise{from{opacity:0;transform:translate3d(0,36px,0);}to{opacity:1;transform:none;}} @keyframes fanFade{from{opacity:0;}to{opacity:1;}} .fan-header{animation:fanRise .6s cubic-bezier(.22,1,.36,1) both;} .fan-card{animation:fanFade .7s ease both;animation-delay:.6s;} .fan-card:nth-child(3),.fan-card:nth-child(4){animation-delay:.3s;} .fan-card:nth-child(2),.fan-card:nth-child(5){animation-delay:.45s;} /* ---------- tablet (Webflow breakpoint 991 and down): 3 x 2 grid, softer lean, same hover ---------- */ @media (max-width:991px){ .fan-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 26px;padding:16px 34px 0;margin-top:44px;justify-items:center;} .fan-card{width:100%;max-width:200px;height:400px;transform:skewX(-8deg);} .fan-row:hover .fan-card{transform:skewX(-8deg) scale(.94);} .fan-row .fan-card:hover{transform:skewX(-8deg) scale(1.06);} .fan-photo{left:-72px;right:-72px;transform:skewX(8deg);} .fan-top{transform:skewX(8deg);} .fan-body{transform:skewX(8deg);padding:0 18px 18px 40px;} .fan-h2{font-size:36px;} } /* ---------- mobile (767 and down): clean vertical stack, full-bleed photo rows, no skew, everything still visible ---------- */ @media (max-width:767px){ .fan-section{padding:64px 0 72px;} .fan-container{padding:0 20px;} .fan-header{align-items:flex-start;text-align:left;gap:14px;} .fan-h2{font-size:29px;line-height:1.12;} .fan-support{font-size:14.5px;} .fan-row{display:flex;flex-direction:column;gap:12px;padding:8px 0 0;margin-top:28px;} .fan-card{width:100%;max-width:none;height:auto;transform:none;} .fan-row:hover .fan-card{transform:none;} .fan-row .fan-card:hover{transform:none;box-shadow:0 20px 44px -18px rgba(2,8,18,.6);} .fan-photo{top:0;right:0;bottom:0;left:0;transform:none;} .fan-top{transform:none;padding:14px 18px 0;} .fan-body{position:relative;transform:none;padding:44px 18px 16px;gap:6px;} .fan-desc{font-size:12.5px;} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .fan-card,.fan-photo,.fan-tint,.fan-arrow{transition:none;} .fan-card,.fan-header{animation:none;} }