, 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;}
}