/* ============================================================ ABOUT.CSS - Alif Club about page ------------------------------------------------------------ 1. Colors / helpers 2. Background (best-sellers jaisa: sky-blue + dark moving blobs + clouds + grain) 3. Top banner (image, ~52vh) 4. Glass base + buttons 5. Story + stats 6. Values 7. Steps 8. Brands / collections 9. Contact panel (transparent grain glass) 10. Mobile 11. Reduced motion ============================================================ */ /* ============================================================ 1. COLORS / HELPERS ============================================================ */ :root{ --bubbg: radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%), radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%), linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10)); --bubsh: inset 0 2px 3px rgba(255,255,255,.7), inset 0 -8px 14px rgba(0,130,210,.18), inset 3px 0 6px rgba(255,255,255,.18), 0 8px 18px rgba(0,120,200,.18), 0 0 14px rgba(120,220,255,.25); --ab-hdr:90px; /* header ki height (fixed header ke piche content hide na ho). Zarurat ho to badlo */ } .container{ max-width:1440px; margin:0 auto; padding:0 15px; } .ab-band{ padding:6px 0 0; } /* ============================================================ 2. BACKGROUND (best-sellers.css section 6 ka same background) --bg1 = sky upar (neeche wala --bg1b isi se apne aap banta hai) --bg2 = dark blobs | --bg3 = clouds GRAIN: baseFrequency .5, opacity .5 (halka: .35 | strong: .7) ============================================================ */ @property --bg1 { syntax:''; inherits:true; initial-value:#bfe4fa; } @property --bg2 { syntax:''; inherits:true; initial-value:#03163b; } @property --bg3 { syntax:''; inherits:true; initial-value:#ffffff; } @property --b1x { syntax:''; inherits:false; initial-value:0px; } @property --b1y { syntax:''; inherits:false; initial-value:0px; } @property --b1r { syntax:''; inherits:false; initial-value:0px; } @property --b2x { syntax:''; inherits:false; initial-value:0px; } @property --b2y { syntax:''; inherits:false; initial-value:0px; } @property --b2r { syntax:''; inherits:false; initial-value:0px; } @property --b3x { syntax:''; inherits:false; initial-value:0px; } @property --b3y { syntax:''; inherits:false; initial-value:0px; } @property --b3r { syntax:''; inherits:false; initial-value:0px; } @property --b4x { syntax:''; inherits:false; initial-value:0px; } @property --b4y { syntax:''; inherits:false; initial-value:0px; } @property --b4r { syntax:''; inherits:false; initial-value:0px; } @property --b5x { syntax:''; inherits:false; initial-value:0px; } @property --b5y { syntax:''; inherits:false; initial-value:0px; } @property --b5r { syntax:''; inherits:false; initial-value:0px; } html{ --bg1:#bfe4fa; /* sky upar (light) */ --bg2:#03163b; /* gehra dark blue */ --bg3:#ffffff; /* safed clouds */ --bg1b:color-mix(in srgb, var(--bg1) 45%, #1a5a92); /* sky neeche: --bg1 se apne aap banta hai */ transition:--bg1 .3s ease, --bg2 .3s ease, --bg3 .3s ease; } html::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, var(--bg1), var(--bg1b)); } html::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; --b1x:15vmax; --b1y:15vmax; --b1r:30vmax; --b2x:calc(100vw - 12.5vmax); --b2y:calc(100vh - 12.5vmax); --b2r:27.5vmax; --b3x:12.5vmax; --b3y:calc(55vh + 22.5vmax); --b3r:22.5vmax; --b4x:calc(40vw + 25vmax); --b4y:calc(10vh + 20vmax); --b4r:22vmax; --b5x:calc(55vw + 22.5vmax); --b5y:calc(45vh + 17.5vmax); --b5r:20vmax; background: radial-gradient(circle var(--b5r) at var(--b5x) var(--b5y), color-mix(in srgb, var(--bg3) 60%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b4r) at var(--b4x) var(--b4y), color-mix(in srgb, var(--bg3) 70%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b3r) at var(--b3x) var(--b3y), color-mix(in srgb, var(--bg2) 85%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b2r) at var(--b2x) var(--b2y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%), radial-gradient(circle var(--b1r) at var(--b1x) var(--b1y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%); animation: alifB1 20s ease-in-out infinite alternate, alifB2 24s ease-in-out infinite alternate, alifB3 22s ease-in-out infinite alternate, alifB4 26s ease-in-out infinite alternate, alifB5 30s ease-in-out infinite alternate; } @keyframes alifB1{ 0% { --b1x:15vmax; --b1y:15vmax; --b1r:30vmax; } 50% { --b1x:calc(15vmax + 60vw); --b1y:calc(15vmax + 30vh); --b1r:36vmax; } 100% { --b1x:calc(15vmax + 20vw); --b1y:calc(15vmax + 70vh); --b1r:27vmax; } } @keyframes alifB2{ 0% { --b2x:calc(100vw - 12.5vmax); --b2y:calc(100vh - 12.5vmax); --b2r:27.5vmax; } 50% { --b2x:calc(45vw - 12.5vmax); --b2y:calc(60vh - 12.5vmax); --b2r:31.6vmax; } 100% { --b2x:calc(80vw - 12.5vmax); --b2y:calc(25vh - 12.5vmax); --b2r:27.5vmax; } } @keyframes alifB3{ 0% { --b3x:12.5vmax; --b3y:calc(55vh + 22.5vmax); --b3r:22.5vmax; } 50% { --b3x:calc(12.5vmax + 70vw); --b3y:calc(25vh + 22.5vmax); --b3r:27vmax; } 100% { --b3x:calc(12.5vmax + 90vw); --b3y:calc(75vh + 22.5vmax); --b3r:20.3vmax; } } @keyframes alifB4{ 0% { --b4x:calc(40vw + 25vmax); --b4y:calc(10vh + 20vmax); --b4r:22vmax; } 50% { --b4x:calc(-5vw + 25vmax); --b4y:calc(35vh + 20vmax); --b4r:26.4vmax; } 100% { --b4x:calc(-30vw + 25vmax); --b4y:calc(60vh + 20vmax); --b4r:20.9vmax; } } @keyframes alifB5{ 0% { --b5x:calc(55vw + 22.5vmax); --b5y:calc(45vh + 17.5vmax); --b5r:20vmax; } 50% { --b5x:calc(5vw + 22.5vmax); --b5y:calc(15vh + 17.5vmax); --b5r:23vmax; } 100% { --b5x:calc(35vw + 22.5vmax); --b5y:calc(-5vh + 17.5vmax); --b5r:20vmax; } } body::before{ content:""; position:fixed; inset:-80px; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; opacity:.5; mix-blend-mode:overlay; /* halka: .35 | strong: .7 ; dana bada: baseFrequency .5 -> .4 */ animation:alifGrain .8s steps(1) infinite; } @keyframes alifGrain{ 0% { transform:translate(0,0); } 25% { transform:translate(-30px,20px); } 50% { transform:translate(25px,-30px); } 75% { transform:translate(-15px,-35px); } 100%{ transform:translate(0,0); } } body::after{ display:none; } /* ============================================================ 3. TOP BANNER - image + height ~52vh (pehle 45vh tha, ab thoda bada) ------------------------------------------------------------ Height badalni ho to sirf neeche clamp(min, ideal, max) badlo. padding-top = header ki height + 16px, taaki text header ke piche hide na ho aur thoda neeche aaye. Image na mile to neeche ka gradient dikhta hai. ============================================================ */ .ab-hero{ position:relative; box-sizing:border-box; overflow:hidden; height:clamp(340px, 52vh, 520px); padding-top:calc(var(--ab-hdr) + 16px); display:flex; align-items:center; background:linear-gradient(135deg,#0b3a66 0%,#1a6aa8 55%,#4f8fc0 100%); } .ab-hero-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 78%,transparent 100%); /* neeche image sky me mil jaati hai */ } .ab-hero::before{ /* image ke upar halka dark overlay: text saaf dikhe */ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg,rgba(3,22,59,.62) 0%,rgba(3,22,59,.28) 55%,rgba(3,22,59,.10) 100%), linear-gradient(0deg,rgba(6,34,58,.30) 0%,rgba(6,34,58,0) 45%); } .ab-hero-in{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; gap:30px; } .ab-hero-text{ color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); max-width:640px; } .ab-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:10px; } .ab-crumbs a{ color:#fff; text-decoration:none; } .ab-crumbs a:hover{ text-decoration:underline; } .ab-hero h1{ font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 10px; } .ab-hero p{ margin:0; font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.5; color:rgba(255,255,255,.92); } /* Alif (ا) ka glass bubble */ .ab-seal{ position:relative; flex:none; width:clamp(120px,18vh,170px); aspect-ratio:1; display:grid; place-items:center; margin-right:4%; } .ab-seal > *{ position:absolute; } .ab-seal-disc{ inset:0; border-radius:50%; display:grid; place-items:center; background:var(--bubbg), radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,.12)); border:1.5px solid rgba(255,255,255,.65); box-shadow:var(--bubsh), 0 20px 40px -18px rgba(0,25,55,.6); -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%); animation:abFloat 5s ease-in-out infinite alternate; } .ab-seal-disc b{ font-family:'Amiri','Noto Naskh Arabic',serif; font-weight:700; font-size:clamp(4rem,8vh,6rem); line-height:1; color:#fff; text-shadow:0 4px 18px rgba(0,60,130,.55); } .ab-seal-ring{ inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.6); opacity:0; animation:abRipple 3.6s cubic-bezier(.2,.6,.3,1) infinite; } .ab-seal-ring.r2{ animation-delay:1.8s; } @keyframes abFloat{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } } @keyframes abRipple{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } } /* ============================================================ 4. GLASS BASE + BUTTONS (index.css ke product-card / view-all-btn jaisa) ============================================================ */ .ab-glass{ position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%); border:1px solid rgba(255,255,255,.38); border-radius:22px; box-shadow: inset 0 1.5px 1px rgba(255,255,255,.75), inset 1px 0 2px rgba(255,255,255,.25), inset 0 -14px 28px rgba(255,255,255,.06); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.4); } .ab-head{ display:flex; justify-content:center; margin:56px 0 28px; padding:0 20px; } .ab-title{ position:relative; margin:0; padding-bottom:16px; color:#fff; text-align:center; font-size:2rem; font-weight:700; text-transform:uppercase; letter-spacing:3px; line-height:1.2; text-shadow:0 2px 14px rgba(0,50,120,.55); } .ab-title::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:70px; height:4px; border-radius:2px; background:linear-gradient(90deg,#19c2ff,#7b3ff2); box-shadow:0 0 12px rgba(25,194,255,.6); } .ab-btn{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:10px; padding:12px 28px; border-radius:30px; color:#fff; text-decoration:none; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45); box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 6px 16px -8px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%); text-shadow:0 1px 4px rgba(0,20,40,.6); transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s ease; } .ab-btn::before{ content:""; position:absolute; inset:2px; z-index:-1; pointer-events:none; border-radius:999px; opacity:0; transform:scale(.6); background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh); transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1); } .ab-btn:hover{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); } .ab-btn:hover::before{ opacity:1; transform:scale(1); } .ab-btn i{ transition:transform .3s ease; } .ab-btn:hover i.fa-arrow-right{ transform:translateX(4px); } .ab-btn.ghost{ background:rgba(6,30,70,.35); } /* ============================================================ 5. STORY + STATS ============================================================ */ .ab-story{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:stretch; margin-top:46px; } .ab-story-text{ padding:34px 36px 36px; } .ab-h{ margin:0 0 14px; font-size:1.7rem; font-weight:700; letter-spacing:.5px; } .ab-story-text p{ margin:0 0 14px; line-height:1.8; font-size:1rem; color:rgba(255,255,255,.95); max-width:68ch; } .ab-story-text .ab-btn{ margin-top:8px; } .ab-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .ab-stat{ display:flex; flex-direction:column; justify-content:center; padding:22px 20px; border-radius:20px; } .ab-stat strong{ font-size:clamp(2rem,3.6vw,2.9rem); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; } .ab-stat span{ margin-top:8px; font-size:.88rem; font-weight:600; color:rgba(255,255,255,.88); } /* ============================================================ 6. VALUES ============================================================ */ .ab-values{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .ab-val{ padding:26px 22px 28px; transition:transform .35s cubic-bezier(.25,1.25,.4,1), border-color .3s ease; } .ab-val:hover, .ab-val.touch-active{ transform:translateY(-6px); border-color:rgba(255,255,255,.65); } .ab-find-box.touch-active{ border-color:rgba(255,255,255,.65); } .ab-ico{ display:grid; place-items:center; width:52px; height:52px; margin-bottom:16px; border-radius:50%; background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh); font-size:20px; color:#fff; } .ab-val h3{ margin:0 0 8px; font-size:1.1rem; font-weight:700; } .ab-val p{ margin:0; line-height:1.65; font-size:.92rem; color:rgba(255,255,255,.92); } /* ============================================================ 7. STEPS (store se door tak: sach me ek sequence) ============================================================ */ .ab-steps{ list-style:none; margin:0 auto; padding:0; max-width:1000px; display:grid; grid-template-columns:repeat(4,1fr); position:relative; } .ab-steps::before, .ab-steps::after{ content:""; position:absolute; left:12.5%; top:15px; height:3px; border-radius:3px; } .ab-steps::before{ right:12.5%; background:rgba(255,255,255,.28); } .ab-steps::after{ width:0; background:linear-gradient(90deg,#bff1ff,#19c2ff); box-shadow:0 0 10px rgba(25,194,255,.8); transition:width 1.8s cubic-bezier(.4,0,.2,1); } .ab-steps.is-in::after{ width:75%; } .ab-steps li{ position:relative; text-align:center; padding:0 10px; color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.45); } .ab-steps li::before{ content:""; display:block; width:34px; height:34px; margin:0 auto 14px; border-radius:50%; position:relative; z-index:1; background:rgba(6,30,70,.55); border:2px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.45); transition:background .4s ease, border-color .4s ease, box-shadow .4s ease; transition-delay:calc(var(--i) * .5s); } .ab-steps.is-in li::before{ background:#19c2ff; border-color:#fff; box-shadow:0 0 0 7px rgba(25,194,255,.22); } .ab-steps b{ display:block; font-size:1.05rem; } .ab-steps span{ display:block; margin-top:4px; font-size:.88rem; color:rgba(255,255,255,.88); } /* ============================================================ 8. BRANDS / COLLECTIONS ============================================================ */ .ab-find{ display:grid; grid-template-columns:1fr 1.4fr; gap:20px; } .ab-find-box{ padding:26px 26px 28px; } .ab-find-box h3{ margin:0 0 16px; font-size:1.1rem; font-weight:700; } .ab-chips{ display:flex; flex-wrap:wrap; gap:10px; } .ab-chip{ padding:8px 16px; border-radius:999px; font-size:.85rem; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); box-shadow:inset 0 1px 1px rgba(255,255,255,.4); } .ab-chip.more{ background:rgba(6,30,70,.45); } /* ============================================================ 9. CONTACT PANEL - transparent glass + halka grain ------------------------------------------------------------ Background transparent hai (peeche ka sky/blobs dikhta hai), ::before me halka noise grain, upar se blur + shine. ============================================================ */ .ab-contact{ position:relative; isolation:isolate; overflow:hidden; max-width:1100px; margin:70px auto 50px; padding:32px 34px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; background: radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.10) 100%); border:1px solid rgba(255,255,255,.38); border-radius:22px; box-shadow: inset 0 1.5px 1px rgba(255,255,255,.65), inset 0 -14px 28px rgba(255,255,255,.05), 0 16px 40px -22px rgba(0,30,70,.55); -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); text-shadow:0 1px 6px rgba(0,30,60,.4); } .ab-contact::before{ /* grain layer */ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; opacity:.22; mix-blend-mode:overlay; } .ab-contact-text{ flex:1 1 360px; } .ab-contact h2{ margin:0 0 10px; font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:.5px; } .ab-contact p{ margin:0 0 16px; line-height:1.7; font-size:.95rem; color:rgba(255,255,255,.92); max-width:60ch; } .ab-contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.92rem; } .ab-contact-list i{ width:20px; color:#fff; } .ab-contact-list a{ color:#fff; text-decoration:none; font-weight:600; } .ab-contact-list a:hover{ text-decoration:underline; } .ab-contact-btns{ display:flex; flex-direction:column; gap:12px; align-items:stretch; } .ab-contact-btns .ab-btn{ justify-content:center; } /* ============================================================ 10. MOBILE ============================================================ */ @media (max-width:1100px){ .ab-values{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ :root{ --ab-hdr:72px; } .ab-story, .ab-find{ grid-template-columns:1fr; } .ab-hero{ height:clamp(320px, 48vh, 440px); } .ab-seal{ width:96px; margin-right:0; } .ab-seal-disc b{ font-size:3.2rem; } } @media (max-width:768px){ .ab-head{ margin:40px 0 22px; } .ab-title{ font-size:1.4rem; letter-spacing:2px; } .ab-story-text{ padding:24px 20px 26px; } .ab-h{ font-size:1.35rem; } .ab-values{ grid-template-columns:1fr; gap:14px; } .ab-find-box{ padding:22px 18px 24px; } .ab-contact{ margin:50px 12px 36px; padding:24px 18px; } .ab-contact h2{ font-size:1.3rem; } .ab-contact-btns{ width:100%; } body::before{ animation:none; } /* mobile par grain static (smooth rehne ke liye) */ } @media (max-width:560px){ .ab-steps{ grid-template-columns:1fr; gap:22px; justify-items:start; } .ab-steps::before, .ab-steps::after{ left:16px; right:auto; top:16px; bottom:16px; width:3px; height:auto; } .ab-steps::after{ height:0; width:3px; transition:height 1.8s cubic-bezier(.4,0,.2,1); } .ab-steps.is-in::after{ width:3px; height:calc(100% - 32px); } .ab-steps li{ text-align:left; padding:0 0 0 52px; } .ab-steps li::before{ position:absolute; left:0; top:-2px; margin:0; width:32px; height:32px; } } /* ============================================================ 11. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ transition:none; } html::after, body::before{ animation:none; } .ab-seal-disc, .ab-seal-ring{ animation:none; } .ab-seal-ring{ display:none; } .ab-steps::after, .ab-steps li::before{ transition:none; } .ab-val{ transition:none; } }