) */ .seo-block{ max-width:1100px; margin:60px auto 40px; padding:30px 30px 24px; color:#d6e6f5; background:rgba(6,30,70,.55); border:1px solid rgba(120,200,255,.22); border-radius:18px; box-shadow:inset 0 1px 1px rgba(255,255,255,.18), 0 16px 40px -18px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(10px) saturate(150%); backdrop-filter:blur(10px) saturate(150%); } .seo-block h2{ font-size:1.6rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:#fff; margin-bottom:12px; } .seo-block .quick-answer{ line-height:1.8; font-size:.95rem; color:#b9cde0; margin:0; } .seo-block .quick-answer + .quick-answer{ margin-top:12px; } /* internal links (New Arrivals, Best Sellers, Attar ...) */ .seo-block .quick-answer a{ color:#6fd3ff; text-decoration:none; font-weight:600; border-bottom:1px solid rgba(111,211,255,.35); transition:color .25s ease, border-color .25s ease; } .seo-block .quick-answer a:hover{ color:#fff; border-color:#19c2ff; } @media(max-width:768px){ .seo-block{ padding:22px 16px 18px; margin-left:12px; margin-right:12px; } .seo-block h2{ font-size:1.15rem; letter-spacing:1px; } .seo-block .quick-answer{ font-size:.88rem; line-height:1.7; } } /* ============================================================ 5. BUTTONS: water-glass + hover par bubble ============================================================ */ .add-to-cart-btn::before, .arrow-btn::before, .view-all-btn::before, .add-cart-btn::before, .wishlist-btn::before{ content:""; position:absolute; z-index:-1; pointer-events:none; 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); } .add-to-cart-btn::before{ border-color:rgba(255,255,255,.55); } .add-to-cart-btn::before, .view-all-btn::before, .add-cart-btn::before{ inset:2px; border-radius:999px; } .arrow-btn::before, .wishlist-btn::before{ inset:0; border-radius:50%; } .add-to-cart-btn:hover::before, .arrow-btn:hover::before, .view-all-btn:hover::before, .add-cart-btn:not(.oos-btn):hover::before, .wishlist-btn:hover::before{ opacity:1; transform:scale(1); } /* ============================================================ 6. PAGE LOADER ------------------------------------------------------------ Markup: index.php (#alifLoader) | JS: js/index.js section 1 Size / colors badalne ho to yahin badlo (--sz = logo ka size). = loader chalte waqt scroll band. ============================================================ */ html.al-lock{ background:#84c0e5; animation:alUnlock .01s linear 12s forwards; /* safety: JS na chale to 12s baad scroll khul jaye */ } html.al-lock,html.al-lock body{ overflow:hidden; } @keyframes alUnlock{ to{ overflow:auto; } } #alifLoader{ --bg1:#84c0e5; --bg2:#021a2b; --bg3:#d3dce1; position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; overflow:hidden; font-family:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif; color:#fff; background: radial-gradient(65% 48% at 100% 100%,var(--bg3) 0%,transparent 78%), var(--bg1); transition:opacity .75s ease .05s, visibility 0s linear .8s; animation:alAutoHide .3s ease 12s forwards; /* safety: JS na chale to 12s baad loader hat jaye */ } @keyframes alAutoHide{ to{ opacity:0; visibility:hidden; pointer-events:none; } } #alifLoader.al-done{ opacity:0; visibility:hidden; pointer-events:none; } :where(#alifLoader) *{ box-sizing:border-box; margin:0; padding:0; } #alifLoader:not(.al-ready) *{ animation-play-state:paused !important; } #alifLoader:not(.al-ready) .al-logo{ visibility:hidden; } /* ---- peeche ka background (website jaisa) ---- */ .al-blob{ position:absolute; inset:-25%; pointer-events:none; will-change:transform; background:radial-gradient(78% 70% at 10% 100%,var(--bg2) 0%,var(--bg2) 22%,transparent 82%); animation:alBlob 16s ease-in-out infinite; } @keyframes alBlob{ 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(22vw,-6vh,0) scale(1.14); } 100%{ transform:translate3d(0,0,0) scale(1); } } .al-grain{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } /* ---- upar uthte bubbles ---- */ .al-bub{ position:absolute; bottom:-70px; width:var(--s); height:var(--s); border-radius:50%; background:var(--bubbg); border:1px solid rgba(255,255,255,.5); box-shadow:var(--bubsh); opacity:0; animation:alRise linear infinite; pointer-events:none; } .al-bub:nth-of-type(1){ left:7%; --s:22px; animation-duration:9s; animation-delay:.2s; } .al-bub:nth-of-type(2){ left:19%; --s:34px; animation-duration:12s; animation-delay:1.4s; } .al-bub:nth-of-type(3){ left:31%; --s:16px; animation-duration:8s; animation-delay:.8s; } .al-bub:nth-of-type(4){ left:46%; --s:26px; animation-duration:11s; animation-delay:2.2s; } .al-bub:nth-of-type(5){ left:61%; --s:18px; animation-duration:9.5s; animation-delay:.5s; } .al-bub:nth-of-type(6){ left:74%; --s:38px; animation-duration:13s; animation-delay:1.8s; } .al-bub:nth-of-type(7){ left:88%; --s:24px; animation-duration:10s; animation-delay:1s; } @keyframes alRise{ 0% { transform:translate3d(0,0,0) scale(.7); opacity:0; } 12% { opacity:.95; } 50% { transform:translate3d(20px,-55vh,0) scale(.95); } 100%{ transform:translate3d(-16px,-118vh,0) scale(1.05); opacity:0; } } /* ---- beech ka hissa ---- */ .al-stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; } .al-logo{ --sz:min(150px,40vw,22vh); /* LOGO SIZE (desktop) - chota/bada karna ho to yahan badlo */ position:relative; width:var(--sz); height:var(--sz); display:grid; place-items:center; } .al-logo>*{ position:absolute; } /* halka glow */ .al-glow{ inset:-30%; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(120,220,255,.28) 38%,rgba(120,220,255,0) 68%); opacity:0; animation:alFade .9s ease .2s forwards, alGlow 3.4s ease-in-out 1.1s infinite; } @keyframes alGlow{ 0%,100%{ transform:scale(.92); opacity:.7; } 50%{ transform:scale(1.08); opacity:1; } } @keyframes alFade{ to{ opacity:1; } } /* paani ki lehren (ripples) */ .al-ripple{ inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); box-shadow:0 0 18px rgba(120,220,255,.35), inset 0 0 14px rgba(255,255,255,.18); opacity:0; animation:alRipple 3.3s cubic-bezier(.2,.6,.3,1) infinite backwards; pointer-events:none; } .al-ripple:nth-of-type(1){ animation-delay:.9s; } .al-ripple:nth-of-type(2){ animation-delay:2s; } .al-ripple:nth-of-type(3){ animation-delay:3.1s; } @keyframes alRipple{ 0% { transform:scale(.8); opacity:0; } 15% { opacity:.85; } 100%{ transform:scale(1.9); opacity:0; } } /* ghoomti hui roshni ki ring */ .al-spin{ inset:-6%; border-radius:50%; pointer-events:none; opacity:0; background:conic-gradient(from 0deg,rgba(255,255,255,0) 0 52%,rgba(120,220,255,.55) 78%,#fff 100%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); animation:alFade .6s ease .45s forwards, alSpin 2.4s linear infinite; } @keyframes alSpin{ to{ transform:rotate(360deg); } } /* chamakte dots ki orbit */ .al-orbit{ inset:0; pointer-events:none; animation:alSpinRev 18s linear infinite; } @keyframes alSpinRev{ to{ transform:rotate(-360deg); } } .al-orbit i{ position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff, 0 0 16px #19c2ff; transform:rotate(var(--a)) translateY(calc(var(--sz) * -.64)); opacity:0; animation:alTwinkle 2.2s ease-in-out infinite; animation-delay:calc(1.2s + var(--n) * .17s); } .al-orbit i:nth-child(odd){ width:4px; height:4px; margin:-2px; } .al-orbit i:nth-child(1) { --a:0deg; --n:0; } .al-orbit i:nth-child(2) { --a:36deg; --n:1; } .al-orbit i:nth-child(3) { --a:72deg; --n:2; } .al-orbit i:nth-child(4) { --a:108deg; --n:3; } .al-orbit i:nth-child(5) { --a:144deg; --n:4; } .al-orbit i:nth-child(6) { --a:180deg; --n:5; } .al-orbit i:nth-child(7) { --a:216deg; --n:6; } .al-orbit i:nth-child(8) { --a:252deg; --n:7; } .al-orbit i:nth-child(9) { --a:288deg; --n:8; } .al-orbit i:nth-child(10){ --a:324deg; --n:9; } @keyframes alTwinkle{ 0%,100%{ opacity:.15; scale:.7; } 50%{ opacity:1; scale:1.25; } } /* glass disc jis par logo hai */ .al-disc{ inset:0; border-radius:50%; background:radial-gradient(circle at 30% 22%,#fff 0%,rgba(255,255,255,.94) 45%,rgba(214,236,249,.9) 100%); box-shadow: inset 0 2px 3px #fff, inset 0 -16px 28px rgba(0,130,210,.18), 0 26px 60px -16px rgba(0,25,55,.6), 0 0 44px rgba(120,220,255,.5); animation:alDiscIn 1.05s cubic-bezier(.2,.9,.25,1.15) both; } @keyframes alDiscIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } } /* logo (safed background ho to bhi disc me mil jata hai) */ .al-img{ left:6%; top:6%; width:88%; height:88%; object-fit:contain; display:block; mix-blend-mode:multiply; user-select:none; -webkit-user-drag:none; pointer-events:none; animation:alLogoIn 1.3s cubic-bezier(.2,.8,.2,1) .35s both, alFloat 4.2s ease-in-out 1.7s infinite alternate; } @keyframes alLogoIn{ from{ opacity:0; transform:scale(.6) rotate(-14deg); filter:blur(14px); } to { opacity:1; transform:none; filter:blur(0); } } @keyframes alFloat{ from{ transform:translateY(0) scale(1); } to{ transform:translateY(-2.2%) scale(1.02); } } /* glass par guzarti chamak (shine) */ .al-shine{ inset:0; border-radius:50%; overflow:hidden; pointer-events:none; } .al-shine::before{ content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:42%; background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%); transform:translateX(-160%) skewX(-12deg); animation:alShine 2.8s ease-in-out 1.7s infinite; } @keyframes alShine{ 0%{ transform:translateX(-160%) skewX(-12deg); } 55%,100%{ transform:translateX(330%) skewX(-12deg); } } /* ---- naam + tagline + progress ---- */ .al-text{ margin-top:38px; display:flex; flex-direction:column; align-items:center; } .al-name{ display:flex; justify-content:center; font-size:24px; font-weight:800; letter-spacing:.3em; padding-left:.3em; text-transform:uppercase; color:#fff; text-shadow:0 2px 16px rgba(0,50,120,.6); } .al-name span{ display:inline-block; opacity:0; animation:alLetter .8s cubic-bezier(.2,.8,.2,1) calc(.9s + var(--i) * .07s) both; } .al-name span:nth-child(1){ --i:0; } .al-name span:nth-child(2){ --i:1; } .al-name span:nth-child(3){ --i:2; } .al-name span:nth-child(4){ --i:3; } .al-name span:nth-child(5){ --i:4; } .al-name span:nth-child(6){ --i:5; } .al-name span:nth-child(7){ --i:6; } .al-name span:nth-child(8){ --i:7; } .al-name span:nth-child(9){ --i:8; } @keyframes alLetter{ from{ opacity:0; transform:translateY(16px) scale(.9); filter:blur(6px); } to { opacity:1; transform:none; filter:blur(0); } } .al-tag{ margin-top:10px; font-size:13px; letter-spacing:.12em; color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(0,40,90,.5); animation:alUp .9s ease 1.7s both; } @keyframes alUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .al-bar{ width:min(240px,62vw); height:7px; margin-top:26px; border-radius:7px; overflow:hidden; position:relative; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45); box-shadow:inset 0 1px 2px rgba(0,30,70,.25), 0 4px 12px -4px rgba(0,30,70,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:alUp .9s ease 1.9s both; } .al-bar i{ display:block; position:relative; width:0; height:100%; border-radius:7px; overflow:hidden; background:linear-gradient(90deg,#bff1ff,#19c2ff); box-shadow:0 0 10px rgba(25,194,255,.8); transition:width .45s ease; } .al-bar i::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); transform:translateX(-100%); animation:alBarShine 1.4s linear infinite; } @keyframes alBarShine{ to{ transform:translateX(100%); } } .al-pct{ margin-top:10px; font-size:12px; font-weight:600; letter-spacing:.2em; padding-left:.2em; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,40,90,.5); animation:alUp .9s ease 2s both; } /* ---- jaate waqt: logo bada hokar ghul jata hai ---- */ .al-leave .al-logo{ animation:alLogoOut .8s cubic-bezier(.5,0,.8,.3) forwards; } .al-leave .al-text{ opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; } @keyframes alLogoOut{ to{ opacity:0; transform:scale(1.35); filter:blur(10px); } } @media(max-width:600px){ .al-logo{ --sz:min(105px,30vw,16vh); } /* LOGO SIZE (mobile) */ .al-name{ font-size:17px; } .al-tag{ font-size:12px; } .al-text{ margin-top:26px; } } /* ============================================================ 7. BACKGROUND: light sky-blue + gehre dark blue moving blobs + safed clouds + halka grain (typical-section.css ke BILKUL same, LAPTOP + MOBILE DONO PAR SAME) ------------------------------------------------------------ 3 rang (variables): --bg1 = sky ka UPAR wala rang (neeche wala --bg1b isi se apne aap banta hai) --bg2 = gehre dark blobs (3) --bg3 = safed clouds (2) Product card par hover karte hi js/index.js rang us product ke color me (.3s) badal deta hai; mouse hatne par wapas default. Default badalna ho to sirf html{ --bg1 --bg2 --bg3 } badlo. MOBILE FIX: Blobs ka size "vmax" me tha: laptop par vmax = width, lekin mobile (portrait) par vmax = HEIGHT -> blobs bahut bade ho jate the. Ab sab size ek variable --u se bante hain: laptop / desktop : --u = 1vmax mobile (<=768px) : --u = .75vmax (proportion laptop jaisa) Layers: html::before -> sky gradient (upar --bg1, neeche --bg1b) html::after -> 3 dark blobs + 2 cloud blobs (poori screen me ghoomte hain) body::before -> grain (halka, overlay) Blobs ka size / position / speed: --bNx / --bNy = blob ka center, --bNr = blob ka radius (N = 1..5) Speed = html::after ke animation me 10s / 12s / 11s / 13s / 15s (number badhao = dheere, ghatao = tez) GRAIN: body::before ke SVG me baseFrequency='.5' aur opacity .5 SCROLL: scroll ke dauran blobs + grain pause (neeche .is-scrolling rule) ============================================================ */ @property --bg1 { syntax:''; inherits:true; initial-value:#bfe4fa; } @property --bg1b { syntax:''; inherits:true; initial-value:#4f8fc0; } @property --bg2 { syntax:''; inherits:true; initial-value:#03163b; } @property --bg3 { syntax:''; inherits:true; initial-value:#ffffff; } /* blobs ke center (x, y) aur radius (r) - animation inhe smooth badalta hai */ @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 (hover par bhi saath badlta hai) */ --u:1vmax; /* blob size ki unit: laptop par 1vmax */ transition:--bg1 .3s ease, --bg1b .3s ease, --bg2 .3s ease, --bg3 .3s ease; } @media(max-width:768px){ html{ --u:.75vmax; } /* mobile: blobs ka size laptop ke proportion me */ } 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; /* shuruaati position (animation inhe chalaata hai) - dark blobs (1,2,3) ka radius bada */ --b1x:calc(15 * var(--u)); --b1y:calc(15 * var(--u)); --b1r:calc(42 * var(--u)); --b2x:calc(100vw - 12.5 * var(--u)); --b2y:calc(100vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); --b3x:calc(12.5 * var(--u)); --b3y:calc(55vh + 22.5 * var(--u)); --b3r:calc(32 * var(--u)); --b4x:calc(40vw + 25 * var(--u)); --b4y:calc(10vh + 20 * var(--u)); --b4r:calc(22 * var(--u)); --b5x:calc(55vw + 22.5 * var(--u)); --b5y:calc(45vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); /* upar wali layer pehle: clouds sabse upar, dark blobs unke neeche */ background: 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 10s ease-in-out infinite alternate, alifB2 12s ease-in-out infinite alternate, alifB3 11s ease-in-out infinite alternate, alifB4 13s ease-in-out infinite alternate, alifB5 15s ease-in-out infinite alternate; } @keyframes alifB1{ 0% { --b1x:calc(15 * var(--u)); --b1y:calc(15 * var(--u)); --b1r:calc(42 * var(--u)); } 50% { --b1x:calc(15 * var(--u) + 60vw); --b1y:calc(15 * var(--u) + 30vh); --b1r:calc(50 * var(--u)); } 100% { --b1x:calc(15 * var(--u) + 20vw); --b1y:calc(15 * var(--u) + 70vh); --b1r:calc(38 * var(--u)); } } @keyframes alifB2{ 0% { --b2x:calc(100vw - 12.5 * var(--u)); --b2y:calc(100vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); } 50% { --b2x:calc(45vw - 12.5 * var(--u)); --b2y:calc(60vh - 12.5 * var(--u)); --b2r:calc(45 * var(--u)); } 100% { --b2x:calc(80vw - 12.5 * var(--u)); --b2y:calc(25vh - 12.5 * var(--u)); --b2r:calc(39 * var(--u)); } } @keyframes alifB3{ 0% { --b3x:calc(12.5 * var(--u)); --b3y:calc(55vh + 22.5 * var(--u)); --b3r:calc(32 * var(--u)); } 50% { --b3x:calc(12.5 * var(--u) + 70vw); --b3y:calc(25vh + 22.5 * var(--u)); --b3r:calc(38 * var(--u)); } 100% { --b3x:calc(12.5 * var(--u) + 90vw); --b3y:calc(75vh + 22.5 * var(--u)); --b3r:calc(29 * var(--u)); } } @keyframes alifB4{ 0% { --b4x:calc(40vw + 25 * var(--u)); --b4y:calc(10vh + 20 * var(--u)); --b4r:calc(22 * var(--u)); } 50% { --b4x:calc(-5vw + 25 * var(--u)); --b4y:calc(35vh + 20 * var(--u)); --b4r:calc(26.4 * var(--u)); } 100% { --b4x:calc(-30vw + 25 * var(--u)); --b4y:calc(60vh + 20 * var(--u)); --b4r:calc(20.9 * var(--u)); } } @keyframes alifB5{ 0% { --b5x:calc(55vw + 22.5 * var(--u)); --b5y:calc(45vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); } 50% { --b5x:calc(5vw + 22.5 * var(--u)); --b5y:calc(15vh + 17.5 * var(--u)); --b5r:calc(23 * var(--u)); } 100% { --b5x:calc(35vw + 22.5 * var(--u)); --b5y:calc(-5vh + 17.5 * var(--u)); --b5r:calc(20 * var(--u)); } } /* grain: overlay wala grayscale dana (baseFrequency .5) - light aur dark dono jagah dikhe. */ 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; } /* scroll ke dauran background blobs + grain pause (JS: html.is-scrolling) -> scroll bilkul smooth, scroll rukte hi wahin se wapas chalte hain */ html.is-scrolling::after, html.is-scrolling body::before{ animation-play-state:paused; } /* ============================================================ 8. THEME: sections ka koi background nahi (upar wala sky dikhe) ============================================================ */ .band, .perfume-deals-section{ background:none; } /* ============================================================ 9. MOBILE / TOUCH ------------------------------------------------------------ a) .touch-active = ungli se touch / slide karne par card ka "hover" look (js/index.js section 5 ye class lagata hai): ZOOM-IN + 2nd image crossfade, glass glow. b) Wishlist (heart) icon mobile / touch par hamesha dikhe. ============================================================ */ .product-card.touch-active{ border-color:rgba(255,255,255,.65); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 1px 0 2px rgba(255,255,255,.35), inset 0 -14px 28px rgba(255,255,255,.10); } .product-card.touch-active::after{ opacity:1; } .product-card.touch-active .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); } /* touch: dono images ZOOM-IN + smooth crossfade (1st image tabhi chhupti hai jab 2nd image load ho chuki ho) */ .product-card.touch-active .product-img-container img{ will-change:opacity,transform; } .product-card.touch-active .product-img-container img.main-img{ transform:scale(var(--img-zoom)); } .product-card.touch-active .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(var(--img-zoom)); } .product-card.touch-active .product-img-container:has(img.hover-img.loaded) img.main-img{ opacity:0; transition: opacity calc(var(--img-fade) * .8) var(--img-ease) calc(var(--img-fade) * .35), transform calc(var(--img-fade) + .5s) var(--img-ease); } @media (max-width:900px), (hover:none){ .product-card .wishlist-btn{ opacity:1 !important; visibility:visible !important; display:flex !important; z-index:9; width:34px; height:34px; top:8px; right:8px; background:var(--glass-btn-bg); color:#fff; border:1px solid var(--glass-btn-border); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); } .product-card .wishlist-btn i{ display:block; font-size:15px; line-height:1; color:inherit; text-shadow:0 1px 3px rgba(0,20,50,.6); } .product-card .wishlist-btn i.text-danger{ color:#ff5d73; } .product-card .badge{ top:8px; left:8px; } } /* ============================================================ 10. MOBILE: ADD TO CART -> chhota BAG icon button ------------------------------------------------------------ Sirf mobile (<=768px). Lamba "ADD TO CART" button hata kar image ke neeche-right kone me gol bag button (wishlist upar-right, bag neeche-right). Bag par tap = cart me add (onclick="addToCart(...)" pehle jaisa hi chalta hai). Size badalna ho to width/height (38px) badlo. ============================================================ */ @media (max-width:768px){ .product-card .add-cart-btn, .product-card:hover .add-cart-btn{ position:absolute; left:auto; top:auto; right:8px; bottom:8px; transform:none; width:38px; height:38px; margin:0; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0; line-height:1; /* "ADD TO CART" likha hua chhup jata hai, sirf icon */ opacity:1; visibility:visible; z-index:9; background:var(--glass-btn-bg); color:#fff; border:1px solid var(--glass-btn-border); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); text-shadow:0 1px 4px rgba(0,30,60,.5); transition:transform .2s ease, background .25s ease; } .product-card .add-cart-btn::before{ inset:0; border-radius:50%; } .product-card .add-cart-btn i{ font-size:16px; margin:0; display:block; line-height:1; text-shadow:0 1px 3px rgba(0,20,50,.6); } .product-card .add-cart-btn i::before{ content:"\f290"; } /* FontAwesome: bag-shopping */ .product-card .add-cart-btn:active{ transform:scale(.9); } /* add hone par 1 second ke liye tick */ .product-card .add-cart-btn.added{ background:linear-gradient(150deg, rgba(25,194,255,.85), rgba(25,194,255,.55)); } .product-card .add-cart-btn.added i::before{ content:"\f00c"; } /* Out of stock: card par pehle se "OUT OF STOCK" badge hai, isliye button ki jagah nahi chahiye */ .product-card .add-cart-btn.oos-btn{ display:none !important; } } @media (max-width:400px){ .product-card .add-cart-btn, .product-card:hover .add-cart-btn{ width:34px; height:34px; right:6px; bottom:6px; } .product-card .add-cart-btn i{ font-size:14px; } } /* ============================================================ 11. DELIVERY SECTION (Bike + Van, 4 steps) ------------------------------------------------------------ Sab classes "dl-" se shuru, site ke CSS se nahi takraengi. Markup: index.php (#dlRoot) | JS: js/index.js section 6 ============================================================ */ .dl-section{ --bg:#04191c; --ink:#f4efe6; --muted:#9db7b2; --gold:#e6c27a; --gold2:#b98f3e; --teal:#2f7f78; --line:rgba(230,194,122,.28); position:relative; color:var(--ink); padding:84px 20px 92px; background:radial-gradient(900px 420px at 88% 0%,rgba(230,194,122,.13),transparent 60%), radial-gradient(700px 400px at 0% 100%,rgba(47,127,120,.18),transparent 60%),var(--bg); font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } .dl-section *{ box-sizing:border-box; } .dl-wrap{ max-width:1120px; margin:0 auto; } .dl-head{ display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:end; margin-bottom:34px; } .dl-head h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(2.1rem,4.8vw,3.6rem); line-height:1.05; letter-spacing:-.015em; margin:0; } /* ----- scene ----- */ .dl-scene{ position:relative; border-radius:30px; overflow:hidden; background:#03141a; border:1px solid var(--line); box-shadow:0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 6px rgba(230,194,122,.05); } .dl-scene svg{ display:block; width:100%; height:auto; } .dl-glass{ position:absolute; background:rgba(4,25,28,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); border-radius:18px; color:var(--ink); } .dl-status{ left:18px; top:18px; padding:12px 16px 14px; min-width:250px; } .dl-status-top{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.92rem; } .dl-status-top i{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; box-shadow:0 0 0 0 rgba(230,194,122,.7); animation:dl-live 1.6s infinite; } .dl-bar{ height:4px; border-radius:4px; background:rgba(255,255,255,.12); margin-top:12px; overflow:hidden; } .dl-bar b{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--gold2),var(--gold)); transition:width .6s ease; } .dl-eta{ right:18px; top:18px; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 12px; } .dl-eta svg{ width:28px; height:28px; flex:none; } .dl-eta small{ display:block; font-size:.72rem; color:var(--muted); line-height:1.1; } .dl-eta strong{ display:block; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.15rem; line-height:1.2; color:var(--gold); font-variant-numeric:tabular-nums; } /* svg parts */ .dl-veh{ display:none; } .dl-veh.on{ display:block; } #dlVeh{ transform:translate(-260px,322px); } .dl-wheel{ transform-box:fill-box; transform-origin:center; animation:dl-spin .45s linear infinite; animation-play-state:paused; } .dl-scene.moving .dl-wheel{ animation-play-state:running; } .dl-lane{ stroke-dasharray:26 22; animation:dl-lane .8s linear infinite; animation-play-state:paused; } .dl-scene.moving .dl-lane{ animation-play-state:running; } .dl-layer{ animation:dl-layer 16s linear infinite; animation-play-state:paused; } .dl-layer.far{ animation-duration:42s; } .dl-scene.moving .dl-layer{ animation-play-state:running; } #dlTrail{ opacity:0; transition:opacity .5s; } .dl-scene.moving #dlTrail{ opacity:1; } .dl-star{ animation:dl-twinkle 3s ease-in-out infinite; } .dl-cargo{ opacity:0; transition:opacity .3s; } .dl-loaded .dl-cargo{ opacity:1; } .dl-pkg{ opacity:0; transform:scale(0); transform-box:fill-box; transform-origin:50% 100%; transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s; } .dl-pkg.show{ opacity:1; transform:scale(1); } .dl-pkg.load{ opacity:0; transform:translate(-40px,-34px) scale(.35); transition:transform .4s ease-in, opacity .4s; } #dlRouteDone, #dlRouteGlow{ stroke-dasharray:1; stroke-dashoffset:1; } .dl-pin{ transform-box:fill-box; transform-origin:50% 100%; } .dl-pin.bounce{ animation:dl-bounce .7s ease 2; } .dl-ring{ transform-box:fill-box; transform-origin:center; animation:dl-pulse 2.2s ease-out infinite; } .dl-ring.r2{ animation-delay:1.1s; } /* ----- tracker + vehicles ----- */ .dl-row{ display:grid; grid-template-columns:1.2fr 1fr; gap:30px; margin-top:30px; align-items:start; } .dl-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); position:relative; } .dl-steps::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:13px; height:2px; background:rgba(255,255,255,.14); } .dl-steps li{ position:relative; text-align:center; padding:0 8px; } .dl-steps li::before{ content:""; display:block; width:28px; height:28px; margin:0 auto 10px; border-radius:50%; background:var(--bg); border:2px solid rgba(255,255,255,.25); position:relative; z-index:1; transition:all .35s; } .dl-steps li.active::before{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 0 7px rgba(230,194,122,.18); } .dl-steps li.done::before{ border-color:var(--gold2); background:var(--gold2); } .dl-steps b{ display:block; font-size:1rem; } .dl-steps span{ display:block; font-size:.85rem; color:var(--muted); margin-top:2px; } .dl-vehicles{ display:grid; grid-template-columns:repeat(2,112px); gap:10px; justify-content:end; justify-self:end; } /* water-glass chip (site ke glass buttons jaisa) */ .dl-chip{ position:relative; isolation:isolate; overflow:hidden; padding:9px 12px 10px; border-radius:16px; text-align:left; background: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.10) 100%); border:1px solid rgba(255,255,255,.28); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.55), inset 0 -8px 14px rgba(25,194,255,.08), 0 8px 18px -10px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); transition:transform .4s cubic-bezier(.25,1.25,.4,1), border-color .3s, box-shadow .3s; } /* tirchhi chamak: active chip par guzarti rehti hai */ .dl-chip::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.30) 48%, transparent 64%); transform:translateX(-130%); } .dl-chip b{ display:block; font-size:.88rem; color:#fff; text-shadow:0 1px 6px rgba(0,30,60,.5); } .dl-chip span{ display:block; font-size:.72rem; color:rgba(255,255,255,.7); margin-top:1px; line-height:1.3; } .dl-chip.on{ transform:translateY(-2px); border-color:rgba(25,194,255,.85); background:var(--bubbg), linear-gradient(150deg, rgba(25,194,255,.22), rgba(255,255,255,.06)); box-shadow:var(--bubsh), 0 0 18px rgba(25,194,255,.35); } .dl-chip.on::after{ animation:dl-chipshine 2.8s ease-in-out infinite; } @keyframes dl-chipshine{ 0%{ transform:translateX(-130%); } 60%,100%{ transform:translateX(130%); } } /* ----- features ----- */ .dl-feats{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:50px; border-top:1px solid var(--line); } .dl-feat{ padding:28px 26px 0 0; } .dl-feat + .dl-feat{ padding-left:26px; border-left:1px solid rgba(255,255,255,.1); } .dl-feat svg{ width:34px; height:34px; margin-bottom:14px; } .dl-feat h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.4rem; margin:0 0 8px; } .dl-feat p{ margin:0; line-height:1.6; color:var(--muted); font-size:.96rem; } /* ----- keyframes ----- */ @keyframes dl-spin{ to{ transform:rotate(360deg); } } @keyframes dl-lane{ to{ stroke-dashoffset:48; } } @keyframes dl-layer{ to{ transform:translateX(-1000px); } } @keyframes dl-twinkle{ 50%{ opacity:.15; } } @keyframes dl-live{ 70%{ box-shadow:0 0 0 9px rgba(230,194,122,0); } 100%{ box-shadow:0 0 0 0 rgba(230,194,122,0); } } @keyframes dl-pulse{ 0%{ transform:scale(.3); opacity:.8; } 100%{ transform:scale(2.6); opacity:0; } } @keyframes dl-bounce{ 0%,100%{ transform:translateY(0); } 45%{ transform:translateY(-22px); } } /* ----- responsive ----- */ @media (max-width:860px){ .dl-head, .dl-row{ grid-template-columns:1fr; } .dl-feats{ grid-template-columns:1fr; } .dl-feat, .dl-feat + .dl-feat{ padding:22px 0; border-left:0; } .dl-feat + .dl-feat{ border-top:1px solid rgba(255,255,255,.1); } } @media (max-width:620px){ .dl-section{ padding:54px 14px 60px; } .dl-scene svg{ min-height:240px; } .dl-status{ left:10px; top:10px; min-width:0; max-width:62%; padding:9px 12px 11px; } .dl-status-top{ font-size:.76rem; } .dl-eta{ right:10px; top:10px; padding:8px 12px 8px 9px; } .dl-eta small{ display:none; } .dl-eta svg{ width:20px; height:20px; } .dl-eta strong{ font-size:.9rem; } .dl-vehicles{ grid-template-columns:repeat(2,104px); } .dl-steps li{ padding:0 3px; } .dl-steps b{ font-size:.82rem; } .dl-steps span{ font-size:.7rem; } } /* ============================================================ 12. REDUCED MOTION (animation kam karne wale users ke liye) ------------------------------------------------------------ Sabse neeche rakhna zaroori hai taaki upar ke rules ko override kar sake. ============================================================ */ @media(prefers-reduced-motion:reduce){ html{ transition:none; } html::after, body::before{ animation:none; } .product-card, .product-card::after{ transition:none; } /* image: sirf halka fade, zoom nahi */ .product-img-container img{ transition:opacity .15s linear; } .product-img-container img.hover-img, .product-card:hover .product-img-container img, .product-card.touch-active .product-img-container img{ transform:none !important; } /* loader */ #alifLoader *{ animation:none !important; transition:none !important; } #alifLoader .al-logo{ visibility:visible !important; } #alifLoader .al-glow, #alifLoader .al-spin, #alifLoader .al-orbit i, #alifLoader .al-name span, #alifLoader .al-tag, #alifLoader .al-bar, #alifLoader .al-pct{ opacity:1 !important; } /* delivery */ .dl-wheel, .dl-lane, .dl-layer, .dl-ring, .dl-star, .dl-status-top i, .dl-chip.on::after{ animation:none; } /* deals ring */ .dotted-border-layer{ animation:none; } .deal-card{ transition:none; } /* bubbles */ .bubbles{ display:none; } } /* ============================================================ 13. BUBBLES - SIRF banner (.hero) ke andar, neeche se upar uthte ------------------------------------------------------------ Markup: index.php (.bubbles,

ke andar sabse upar) .hero ka overflow:hidden hai, isliye bubbles banner ke bahar nahi jate. z-index 12: banner text (10) ke upar, dots (15) ke neeche. pointer-events:none hai, isliye click / swipe / hover par koi asar nahi. Har bubble ke numbers PHP se aate hain: --s size | --sx shuru ki jagah (beech se left/right) --x1 --x2 --x3 raaste me halka idhar-udhar (vw) | --h kitna upar tak (vh) --t speed (bada = dheema) | --d delay Bubbles kam / zyada: index.php me $bubbleCount (4 se 6). Look (glass): section 1 ke --bubbg / --bubsh. ============================================================ */ .bubbles{ position:absolute; inset:0; z-index:12; pointer-events:none; overflow:hidden; --k:1; } .bubble{ position:absolute; left:calc(50% + var(--sx,0vw)); bottom:-50px; width:var(--s,16px); height:var(--s,16px); margin-left:calc(var(--s,16px) / -2); border-radius:50%; background:var(--bubbg); border:1px solid rgba(255,255,255,.55); box-shadow:var(--bubsh); opacity:0; will-change:transform,opacity; animation:bubDrift var(--t,26s) linear var(--d,0s) infinite; } @keyframes bubDrift{ 0% { transform:translate3d(0,0,0) scale(.5); opacity:0; } 6% { opacity:.9; } 30% { transform:translate3d(calc(var(--x1) * var(--k)), calc(var(--h) * -.3), 0) scale(.85); } 60% { transform:translate3d(calc(var(--x2) * var(--k)), calc(var(--h) * -.6), 0) scale(1); } 85% { opacity:.8; } 100% { transform:translate3d(calc(var(--x3) * var(--k)), calc(var(--h) * -1), 0) scale(1.1); opacity:0; } } @media(max-width:768px){ .bubbles{ --k:.55; } .bubble:nth-child(n+5){ display:none; } /* mobile par 4 bubbles */ }