/* ============================================================ BEST-DEAL.CSS - Best Deal page ------------------------------------------------------------ index.css ke BILKUL same design: background (neela sky + dark moving blobs + grain, safed clouds nahi), glass product cards, discount / out-of-stock badge, kati hui price, wishlist + add-to-cart glass buttons, mobile bag button, aur neele UBHRE hue Deals circles. Sirf header.css + footer.css ke saath chalta hai - kisi doosri page-CSS par depend nahi karta. 1. Colors / helpers 2. Heading + intro 3. Product card + grid 4. Mobile 5. Page ke apne hisse (loader / no products) 6. Background (moving dark blobs + grain; hover par product ke color me badalta hai) 7. Mobile / touch + bag button 8. Reduced motion 9. Deals section (Under QAR 49 / 99 / ... neele ubhre gol cards) ============================================================ */ /* ============================================================ 1. COLORS / HELPERS ============================================================ */ :root{ --sale-red:#d62839; --badge-red:rgba(160,18,34,.72); /* DISCOUNT + OUT OF STOCK dono badge ka same color - yahin se badlo */ /* WISHLIST + ADD TO CART button ka GLASS look (desktop + mobile dono par same) - yahin se badlo --glass-btn-bg : button ka glass background (zyada safed chahiye to .34 / .22 badhao) --glass-btn-border : kinara --glass-btn-shadow : andar ki chamak + bahar ki halki parchhai --glass-btn-blur : peeche ka blur (bada number = zyada dhundhla) */ --glass-btn-bg: radial-gradient(circle at 30% 22%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 58%), linear-gradient(150deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.24) 100%); --glass-btn-border:rgba(255,255,255,.75); --glass-btn-shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -6px 12px rgba(255,255,255,.12), 0 6px 16px rgba(0,40,90,.28); --glass-btn-blur:blur(10px) saturate(180%); /* ORIGINAL (kati hui) price ka rang - yahin se badlo */ --old-price-red:#ff3b4f; } .container{ max-width:1440px; margin:0 auto; padding:0 15px; } /* Is page me products ke neeche Deals section aata hai (uska apna margin hai), isliye container ka neeche ka gap chhota rakha hai. Footer se chipakne se bachane ki jagah Deals section ke neeche (section 9) di gayi hai. */ #main-content > .container{ padding-bottom:20px; } /* ============================================================ 2. HEADING + INTRO ------------------------------------------------------------ Heading header ke piche chhupe to .trending-header ka margin-top badhao. ============================================================ */ .trending-header{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:150px; margin-bottom:25px; padding:0 20px; } .main-trending-title{ font-size:2rem; font-weight:700; text-transform:uppercase; text-align:center; margin:0; color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); letter-spacing:3px; line-height:1.2; } /* Heading ke neeche decorative line */ .style-line{ width:70px; height:4px; border-radius:2px; margin:14px auto 6px; background:linear-gradient(90deg,#19c2ff,#7b3ff2); box-shadow:0 0 12px rgba(25,194,255,.6); } /* Heading ke neeche dynamic intro (SEO/GEO text) */ .collection-intro{ max-width:820px; margin:0 auto 24px; padding:0 15px; text-align:center; color:#e3f0fb; font-size:.92rem; line-height:1.7; text-shadow:0 1px 8px rgba(0,30,60,.45); } @media(max-width:768px){ .trending-header{ margin-top:120px; gap:0; } .main-trending-title{ font-size:1.5rem; letter-spacing:2px; } } /* ============================================================ 3. PRODUCT CARD (GLASS: image transparent PNG hai) + GRID ============================================================ */ .product-card{ position:relative; height:100%; overflow:hidden; isolation:isolate; 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; padding:8px; 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%); transition:transform .35s cubic-bezier(.25,1.25,.4,1), box-shadow .35s ease, border-color .3s ease, background .3s ease; } /* glass ki tirchhi chamak (shine) - hover par guzarti hai */ .product-card::before{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.32) 47%, rgba(255,255,255,.08) 53%, transparent 66%); transform:translateX(-130%); transition:transform .9s cubic-bezier(.2,.7,.2,1); } .product-card:hover::before{ transform:translateX(130%); } /* Card par koi grain nahi - clean transparent glass (grain sirf background me, card ke blur se halka dikhta hai) */ /* HOVER LIFT (upar uthna): transform card par nahi, uske PARENT (.grid-item / slider item) ke hover par lagta hai. Wajah: pehle card khud upar uthta tha -> mouse card ke kinare se bahar reh jata tha -> hover hat jata -> card wapas neeche aata -> phir hover -> bahut teji se kaampna (vibration). Parent apni jagah se hilta nahi, isliye ab stable hai. Uthne ki height badalni ho to sirf neeche translateY(-6px) badlo. */ @media (hover:hover){ .grid-item:hover .product-card, .trending-card-item:hover .product-card, .best-card-item:hover .product-card{ transform:translateY(-6px); } } .product-card:hover{ border-color:rgba(255,255,255,.65); background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.20) 100%); 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); } .main-link{ position:absolute; inset:0; z-index:5; } /* image ka tile: bilkul transparent, sirf halki parchhai se image tairti dikhe */ .img-box{ position:relative; background:transparent; border-radius:12px; overflow:hidden; border:1px solid transparent; transition:.3s; } .lazy-fade-img{ opacity:0; } .lazy-fade-img.loaded{ opacity:1; } /* ------------------------------------------------------------ BADGE (DISCOUNT / OUT OF STOCK) - left side, wishlist jaisa gol glass Color: dono ka SAME (--badge-red, section 1 me) Size badalna ho to width/height badlo (mobile me section 4 me alag size hai) index.css me bhi BILKUL yahi design hai (dono pages par ek jaisa) ------------------------------------------------------------ */ .product-card .badge{ position:absolute; top:12px; left:12px; z-index:6; isolation:isolate; width:48px; height:48px; padding:0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.1; color:#fff; letter-spacing:.2px; background:var(--badge-red); border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 4px 10px rgba(130,0,20,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); text-shadow:0 1px 3px rgba(90,0,10,.6); } /* 2 line FORCE: upar % / neeche OFF (header.css ya bootstrap ka .badge style override na kare isliye !important) */ .product-card .badge{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; } .product-card .badge b, .product-card .badge small{ display:block !important; width:100%; margin:0; padding:0; text-align:center; font-size:8px; font-weight:800; letter-spacing:.1px; line-height:1.15; white-space:nowrap; } /* OUT OF STOCK badge ka font: PERFECT hai, 10px (mobile me section 4 me 6.5px) - ise mat chhedo */ .product-card .badge.badge-oos b, .product-card .badge.badge-oos small{ font-size:8px; } /* DISCOUNT badge ka font: BADA kiya (sirf discount badge, OUT OF STOCK nahi) Desktop: % wala number = 16px, OFF = 10.5px | Mobile me section 4 me: 12.5px / 7.5px Aur bada / chhota karna ho to sirf yahan ke 2 numbers badlo */ .product-card .badge:not(.badge-oos) b{ font-size:13px; font-weight:900; line-height:1.05; letter-spacing:0; } .product-card .badge:not(.badge-oos) small{ font-size:8.5px; font-weight:800; line-height:1.1; letter-spacing:.3px; } /* Wishlist icon desktop par sirf card hover par dikhta hai */ .wishlist-btn{ position:absolute; top:12px; right:12px; width:35px; height:35px; z-index:6; isolation:isolate; background:var(--glass-btn-bg); border:1px solid var(--glass-btn-border); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; text-shadow:0 1px 4px rgba(0,30,60,.5); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); opacity:0; transition:opacity .3s, color .3s, transform .4s cubic-bezier(.25,1.25,.4,1); } .product-card:hover .wishlist-btn{ opacity:1; } .wishlist-btn:hover{ color:#ff5d73; transform:scale(1.1); } .wishlist-btn i.text-danger{ color:#d32f2f; } /* Dono images (main + hover) EXACT same tareeke se position hoti hain taaki framing match kare */ .product-img-container{ width:100%; height:340px; position:relative; overflow:hidden; } .product-img-container img{ position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; box-sizing:border-box; object-fit:contain; filter:drop-shadow(0 16px 16px rgba(0,25,55,.35)); transition:opacity .5s ease, transform .6s ease; } .product-img-container img.hover-img{ opacity:0 !important; } .product-card:hover .product-img-container img.main-img{ opacity:0; transform:scale(1.05); } .product-card:hover .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(1.05); } .add-cart-btn{ position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); isolation:isolate; width:90%; opacity:0; visibility:hidden; transition:all .3s ease; z-index:7; background:var(--glass-btn-bg); border:1px solid var(--glass-btn-border); color:#fff; text-shadow:0 1px 4px rgba(0,30,60,.5); box-shadow:var(--glass-btn-shadow); -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur); padding:10px; text-align:center; font-size:11px; font-weight:700; border-radius:25px; cursor:pointer; } .product-card:hover .add-cart-btn{ opacity:1; visibility:visible; bottom:15px; } .add-cart-btn.oos-btn{ background:#444 !important; color:#fff !important; border-color:#444 !important; cursor:not-allowed !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; } .add-cart-btn.oos-btn::before{ display:none; } /* hover par buttons me paani ka bubble */ .add-cart-btn::before, .wishlist-btn::before{ content:""; position:absolute; z-index:-1; pointer-events:none; opacity:0; transform:scale(.6); background: 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)); border:1px solid rgba(255,255,255,.5); box-shadow: 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); transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1); } .add-cart-btn::before{ inset:2px; border-radius:999px; } .wishlist-btn::before{ inset:0; border-radius:50%; } .add-cart-btn:not(.oos-btn):hover::before, .wishlist-btn:hover::before{ opacity:1; transform:scale(1); } /* naam / price ka glass patti */ .info{ padding:12px 8px; margin-top:5px; border-radius:16px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 1px rgba(255,255,255,.35); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.3s; } .product-card:hover .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); } .info .brand{ font-size:10px; color:rgba(255,255,255,.80); font-weight:700; text-transform:uppercase; margin-bottom:2px; letter-spacing:.5px; } .info .title{ font-size:14px; font-weight:600; color:#fff; height:38px; overflow:hidden; margin-bottom:5px; line-height:1.3; } .price-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .curr-price{ color:#fff; font-weight:700; font-size:15px; } /* KATI HUI (original) PRICE: bada + saaf (peeche halka safed pill, taaki red text neele background par dikhe) */ .old-price{ color:#c8102e; font-size:13px; font-weight:400; line-height:1.2; text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(200,16,46,.75); background:rgba(255,255,255,.88); padding:2px 8px; border-radius:10px; box-shadow:0 2px 8px rgba(0,40,90,.25); text-shadow:none; } .info .brand, .info .title, .curr-price{ text-shadow:0 1px 6px rgba(0,30,60,.45); } /* Static grid */ .product-grid{ display:flex; flex-wrap:wrap; gap:20px; padding:10px 0; } .grid-item{ width:calc(25% - 15px); flex-shrink:0; } /* ============================================================ 4. MOBILE (<=768px) ------------------------------------------------------------ Mobile view bigde to sabse pehle yahan height + padding check karo. ============================================================ */ @media(max-width:768px){ .product-grid{ gap:10px; } .grid-item{ width:calc(50% - 5px); } .product-card{ padding:4px; border-radius:16px; -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%); } .product-img-container{ height:170px; } .product-img-container img{ padding:6px; } .info .title{ font-size:12px; height:32px; } /* kati hui price mobile par */ .old-price{ font-size:11px; padding:1px 6px; } /* badge mobile par thoda chhota */ .product-card .badge{ width:40px; height:40px; } /* OUT OF STOCK: 6.5px (perfect, same rakha) */ .product-card .badge.badge-oos b, .product-card .badge.badge-oos small{ font-size:5.5px; letter-spacing:.1px; } /* DISCOUNT: mobile par bhi bada (% = 12.5px, OFF = 7.5px) */ .product-card .badge:not(.badge-oos) b{ font-size:10.5px; letter-spacing:0; } .product-card .badge:not(.badge-oos) small{ font-size:6.5px; letter-spacing:.2px; } } @media(max-width:400px){ .product-img-container{ height:140px; } .product-img-container img{ padding:4px; } } /* ============================================================ 5. PAGE KE APNE HISSE ============================================================ */ /* Koi product na mile to */ .no-products-msg{ width:100%; text-align:center; padding:40px 0; color:#e3f0fb; font-size:15px; text-shadow:0 1px 8px rgba(0,30,60,.45); } /* Infinite-scroll loader: gif + "Loading..." dono bilkul center me (JS isko display:block karta hai; img block hai to margin:auto se center rehta hai) */ .scroll-loader{ display:none; text-align:center; padding:20px; width:100%; } .scroll-loader img{ display:block; margin:0 auto; width:40px; height:auto; } .scroll-loader p{ text-align:center; color:#e3f0fb; font-size:13px; margin:5px 0 0; text-shadow:0 1px 6px rgba(0,30,60,.45); } /* ============================================================ 6. BACKGROUND: light sky-blue + gehre dark blue moving blobs + safed clouds + halka grain (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/best-deal.js rang us product ke color me badal deta hai; mouse hatne par wapas default. Default badalna ho to sirf html{ --bg1 --bg2 --bg3 } badlo. MOBILE FIX (important): Pehle blobs ka size "vmax" me tha. Laptop par vmax = width hota hai, lekin mobile (portrait) par vmax = HEIGHT hota hai -> blobs bahut bade ho jate the aur poori screen dark/alag dikhti thi. Ab sab size ek variable --u se bante hain: laptop / desktop : --u = 1vmax mobile (<=768px) : --u = .75vmax (proportion laptop jaisa dikhe) Mobile par blobs chhote / bade karne ho to sirf mobile wala --u badlo (bada number = bade blobs, chhota = chhote). Mobile par grain animation + moving blobs ab BAND NAHI hain - laptop jaisa hi chalta hai. 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) 1,2,3 = dark blobs, 4,5 = clouds Speed = html::after ke animation me 10s / 12s / 11s / 13s / 15s (number badhao = dheere, ghatao = tez) Dark kitna: html::after ke background me 92% / 92% / 85% (clouds: 70% / 60%) GRAIN: body::before ke SVG me baseFrequency='.5' (chhota number = bada dana; aur bada: .4) aur opacity .5 (halka: .35 | strong: .7). Cards par grain nahi hai (clean glass). Agar background na dikhe to header.css / footer.css me body ya html par solid background / z-index check karo. ============================================================ */ @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 badalta hai) */ --u:1vmax; /* blob size ki unit: laptop par 1vmax */ transition:--bg1 .3s ease, --bg1b .3s ease, --bg2 .3s ease, --bg3 .3s ease; /* fast: .3s -> aur kam = aur fast */ } @media(max-width:768px){ html{ --u:.75vmax; } /* mobile: blobs ka size laptop ke proportion me (bade = .9vmax, chhote = .6vmax) */ } 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. Cards par grain nahi hai (clean glass), grain sirf background me hai. Mobile par bhi laptop jaisa hi (animation band nahi kiya). */ 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; } /* ============================================================ 7. MOBILE / TOUCH ------------------------------------------------------------ a) .touch-active = ungli se touch / slide karne par card ka "hover" look (js/best-deal.js ye class lagata hai). b) Wishlist (heart) icon mobile / touch par hamesha dikhe. c) Mobile par ADD TO CART -> chhota gol BAG icon (neeche-right kone me). ============================================================ */ .product-card.touch-active::before{ transform:translateX(130%); } .product-card.touch-active{ transform:translateY(-4px); border-color:rgba(255,255,255,.65); background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 55%), linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.20) 100%); 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 .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); } .product-card.touch-active .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(1.05); } .product-card.touch-active .product-img-container:has(img.hover-img.loaded) img.main-img{ opacity:0; transform:scale(1.05); } @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; } } @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); } .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"; } .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; } } /* ============================================================ 8. REDUCED MOTION (animation kam karne wale users ke liye) ============================================================ */ @media(prefers-reduced-motion:reduce){ html{ transition:none; } html::after, body::before{ animation:none; } .product-card{ transition:none; } } /* ============================================================ 9. DEALS SECTION (Under QAR ... gol cards) - index.css jaisa ------------------------------------------------------------ Neela glass + ubhra hua (3D) circle, bahar ghoomti dotted ring. Jo price page par chal rahi hai uska card .active hota hai. margin-bottom = footer se chipakne se bachane ki jagah. ============================================================ */ .perfume-deals-section{ max-width:1200px; margin:60px auto 90px; padding:0 15px; text-align:center; } .deals-header{ text-align:center; margin-bottom:30px; } .deals-title{ font-size:1.6rem; font-weight:700; text-transform:uppercase; text-align:center; margin:0; color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55); letter-spacing:2px; line-height:1.3; } .deals-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; } /* Har card ka rang --deal-bg se aata hai (nth-child se alag alag) */ .deal-card{ --deal-bg:#e0f2e0; position:relative; display:block; width:160px; height:160px; text-decoration:none; color:#0b2540; transition:transform .35s cubic-bezier(.25,1.25,.4,1); } .deal-card:nth-child(1){ --deal-bg:#e0f2e0; } .deal-card:nth-child(2){ --deal-bg:#f9e1d1; } .deal-card:nth-child(3){ --deal-bg:#dcd1f9; } .deal-card:nth-child(4){ --deal-bg:#f9d1f0; } .deal-card:nth-child(5){ --deal-bg:#f6f9d1; } .deal-card:nth-child(6){ --deal-bg:#d1f9f2; } .deal-card:hover{ transform:translateY(-6px) scale(1.04); } /* bahar ki ghoomti dotted ring */ .dotted-border-layer{ position:absolute; inset:0; border-radius:50%; border:2px dotted rgba(255,255,255,.9); animation:alifDealSpin 26s linear infinite; transition:border-color .3s ease, box-shadow .3s ease; } /* andar ka circle: NEELA glass + UBHRA hua (3D raised / convex button jaisa) - upar-left se safed chamak, neeche gehra neela (gol ubhaar ka effect) - ::before = andar ki patli ubhri hui ring, ::after = hover par guzarti chamak Neela rang badalna ho to neeche ke 3 rang (#4cc3ff / #1b7fe0 / #0a3f9e) badlo */ .inner-circle{ position:absolute; inset:12px; border-radius:50%; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#fff; background: radial-gradient(75% 55% at 32% 18%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 70%), radial-gradient(90% 70% at 50% 108%, rgba(0,20,90,.55) 0%, rgba(0,20,90,0) 65%), linear-gradient(160deg, #4cc3ff 0%, #1b7fe0 52%, #0a3f9e 100%); border:1px solid rgba(255,255,255,.7); box-shadow: inset 0 3px 5px rgba(255,255,255,.75), inset 0 -9px 16px rgba(0,25,100,.55), inset 4px 0 8px rgba(255,255,255,.12), 0 14px 24px -8px rgba(0,30,90,.65), 0 3px 0 rgba(8,60,140,.55); -webkit-backdrop-filter:blur(8px) saturate(170%); backdrop-filter:blur(8px) saturate(170%); transition:box-shadow .3s ease, transform .3s ease; } /* andar ki patli ubhri hui ring (embossed kinara) */ .inner-circle::before{ content:""; position:absolute; inset:6px; z-index:-1; pointer-events:none; border-radius:50%; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 2px 3px rgba(0,30,110,.35), 0 1px 1px rgba(255,255,255,.25); } /* glass ki tirchhi chamak: hover par guzarti hai */ .inner-circle::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,.55) 48%, transparent 64%); transform:translateX(-130%); transition:transform .8s cubic-bezier(.2,.7,.2,1); } .deal-card:hover .inner-circle::after{ transform:translateX(130%); } .deal-card:hover .inner-circle{ box-shadow: inset 0 3px 5px rgba(255,255,255,.85), inset 0 -9px 16px rgba(0,25,100,.6), inset 4px 0 8px rgba(255,255,255,.16), 0 18px 30px -8px rgba(0,30,90,.7), 0 3px 0 rgba(8,60,140,.55), 0 0 20px rgba(25,194,255,.55); } .deal-card:hover .dotted-border-layer{ border-color:#19c2ff; box-shadow:0 0 14px rgba(25,194,255,.55); } .inner-circle .label{ font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(0,25,90,.6); } .inner-circle .price{ font-size:38px; font-weight:800; line-height:1; color:#fff; text-shadow:0 2px 4px rgba(0,25,90,.65), 0 -1px 0 rgba(255,255,255,.25); } .inner-circle .currency{ font-size:12px; font-weight:700; letter-spacing:1.5px; color:#fff; text-shadow:0 1px 3px rgba(0,25,90,.6); } @keyframes alifDealSpin{ to{ transform:rotate(360deg); } } @media(max-width:768px){ .perfume-deals-section{ margin:40px auto 70px; } .deals-title{ font-size:1.15rem; letter-spacing:1px; } .deals-container{ gap:14px; } .deal-card{ width:104px; height:104px; } .inner-circle{ inset:8px; } .inner-circle .label, .inner-circle .currency{ font-size:9px; } .inner-circle .price{ font-size:25px; } } /* Jo deal abhi khuli hai: ring solid sky-blue + glow */ .deal-card.active .dotted-border-layer{ border-color:#19c2ff; border-style:solid; animation:none; box-shadow:0 0 16px rgba(25,194,255,.65); } .deal-card.active .inner-circle{ border-color:#19c2ff; box-shadow:inset 0 3px 5px rgba(255,255,255,.85), inset 0 -9px 16px rgba(0,25,100,.6), 0 14px 24px -8px rgba(0,30,90,.65), 0 3px 0 rgba(8,60,140,.55), 0 0 20px rgba(25,194,255,.55); } @media(prefers-reduced-motion:reduce){ .dotted-border-layer{ animation:none; } .deal-card{ transition:none; } }