/* ========================================================================== SHAHAZ.COM — Homepage Layout CSS ফাইল: assets/css/shahaz-homepage.css 0. HomepageContainer 1. HeroBanner 2. BrandBanner (thin marquee) 3. BrandSlider (auto logos) 4. SectionHeader (shared by all sections) 5. Categories 6. ProductRow wrapper + ViewAllButton 7. BenefitsStrip 8. VendorCollections 9. TopBrands 10. Newsletter 11. Animations 12. Responsive Fine-tuning ========================================================================== */ /* ========================================================================== COMPONENT 0: HomepageContainer ========================================================================== */ .shahaz-homepage { background: var(--shahaz-offwhite); overflow-x: hidden; /* কোনো হরাইজন্টাল স্ক্রল না হওয়া নিশ্চিত করতে */ } .shahaz-sec { /* ⚠️ Prompt 04: ব্যবহারকারীর স্পষ্ট নির্দেশে সর্বোচ্চ ১-২px গ্যাপ — top/bottom padding এখন 2px (আগে 8px/12px ছিল)। এই ক্লাস ১০টা হোমপেজ সেকশন শেয়ার করে (01-live-ticker, 03-stories, 04-brand-banner, 05-brand-slider, 06-voucher-section, 07-categories, 07b-section-nav, 11-vendor-spotlight, 14-top-brands, 15-recently-viewed — 10-delivery-tracking ২০২৬-০৮-১৮-এ সম্পূর্ণ DELETE হয়েছে) — তাই এই একটা পরিবর্তনেই এই সবগুলো সেকশনের মধ্যেকার গ্যাপ একসাথে কমে যায়। Left/Right padding অপরিবর্তিত (এটা কনটেন্টের নিজস্ব পাশের মার্জিন, সেকশনের মধ্যেকার ভার্টিক্যাল গ্যাপের সাথে সম্পর্কিত না)। */ padding: 2px 12px; max-width: 1280px; margin: 0 auto; } @media (min-width: 768px) { .shahaz-sec { padding: 2px 24px; } } /* ========================================================================== COMPONENT 2: SHAHAZ Discovery Rail — compact five-item marketplace bar ========================================================================== */ .shahaz-brand-banner.shahaz-discovery-rail { width: 100%; max-width: 100%; padding: 3px 0; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #f00087 0%, #e0007a 100%); } /* Phase 176: remove the separate footer-top magenta separator on the homepage * when the Discovery rail is present. This targets the rail-to-footer seam only; * footer links, buttons, and their own styling remain untouched. */ body.home:has(.shahaz-discovery-rail) .shahaz-footer { border-top: 0; } .shahaz-discovery-rail__inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 14px; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 10px; } .shahaz-discovery-rail__item { min-width: 0; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: stretch; gap: 5px; padding: 4px 8px; border: 1px solid rgba(245, 223, 138, .95); border-radius: 10px; background: linear-gradient(110deg, #6f2a9d 0%, #f00087 100%); color: #fff; font: inherit; font-size: 10px; font-weight: 800; line-height: 1.05; white-space: nowrap; overflow: hidden; box-shadow: 0 3px 0 rgba(111, 16, 78, .92), 0 4px 8px rgba(75, 10, 61, .16); cursor: default; -webkit-tap-highlight-color: transparent; } .shahaz-discovery-rail__item:focus-visible { outline: 2px solid #f5df8a; outline-offset: 2px; } .shahaz-discovery-rail__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .95); border-radius: 7px; background: linear-gradient(145deg, #fffdf4 0%, #f5df8a 100%); color: #6f2a9d; font-size: 13px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(128, 79, 0, .65); } .shahaz-discovery-rail__label { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } @media (min-width: 768px) { .shahaz-brand-banner.shahaz-discovery-rail { padding: 3px 0; } .shahaz-discovery-rail__inner { gap: 18px; padding: 0 18px; } .shahaz-discovery-rail__item { gap: 6px; padding: 3px 10px; font-size: 11px; } } @media (max-width: 767px) { .shahaz-brand-banner.shahaz-discovery-rail { padding: 3px 0; } .shahaz-discovery-rail__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 5px; } .shahaz-discovery-rail__item { grid-template-columns: auto minmax(0, 1fr); gap: 3px; padding: 1px 3px; min-width: 0; min-height: 24px; height: 24px; border-radius: 8px; font-size: clamp(7px, 2.25vw, 9px); line-height: 1; text-align: left; } .shahaz-discovery-rail__icon { width: 16px; height: 16px; min-width: 16px; border-radius: 5px; font-size: 10px; } .shahaz-discovery-rail__label { min-width: 0; max-width: 100%; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } /* ========================================================================== COMPONENT 3: BrandSlider — অসীম অটো-স্ক্রল লোগো ========================================================================== */ .shahaz-brand-slider { padding: 14px 0; max-width: 100%; overflow: hidden; } .shahaz-brand-slider-track { display: flex; align-items: center; width: max-content; animation: shahaz-marquee 34s linear infinite; } .shahaz-brand-slider-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 96px; height: 48px; margin: 0 16px; opacity: 0.75; transition: opacity 0.25s ease; } .shahaz-brand-slider-item:hover { opacity: 1; } .shahaz-brand-slider-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(15%); } .shahaz-brand-slider-track:hover { animation-play-state: paused; } /* ========================================================================== COMPONENT 4: SectionHeader — সব সেকশনে শেয়ার করা (Center, Serif, Animated Gold Underline, Subtitle, Soft entrance animation) ========================================================================== */ .shahaz-sec-header { text-align: center; margin-bottom: 16px; opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .shahaz-sec-header.shahaz-in-view { opacity: 1; transform: translateY(0); } .shahaz-sec-subtitle { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shahaz-magenta); margin-bottom: 4px; } .shahaz-sec-title { position: relative; display: inline-block; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(18px, 4vw, 26px); font-weight: 800; color: var(--shahaz-ink); margin: 0 0 10px; padding-bottom: 8px; } .shahaz-sec-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3.5px; /* ব্যবহারকারীর নির্দেশে: সম্পূর্ণ সলিড গোল্ড (আগে হালকা-থেকে-গাঢ় গ্র্যাডিয়েন্ট ছিল) */ background: var(--shahaz-gold); border-radius: 999px; transform: translateX(-50%); transition: width 0.6s ease 0.15s; } .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after { width: 72px; } /* ========================================================================== COMPONENT 5: Premium Category Section (২০২৬-০৮-১২, Unified Merge) পূর্বে দুটি আলাদা সেকশন ছিল — "Premium Category Drawer" (Hero Banner-এর নিচে, বড় Double-Layer Card, Horizontal Scroll) এবং "সকল ক্যাটাগরি" (এই জায়গায়, ছোট Single-Layer Card, Horizontal Scroll) — দুটোই একই shahaz_get_top_categories() হেল্পার কল করত, ফলে একই ক্যাটাগরি দুই জায়গায় দেখাত। এখন একটাই সেকশন: ছোট Card-এর Minimal Style (শুধু ছবি, কোনো টেক্সট/ব্যাজ/আইকন নেই) কিন্তু বড় Card-এর সমান সাইজে, ফিক্সড ২-রো Responsive Grid-এ (Mobile 4×2=8, Tablet 6×2=12, Desktop 8×2=16) — আর কোনো Horizontal Scroll নেই। ডেটা একবারই ফেচ হয় (৩৬০ ডিগ্রি ডুপ্লিকেট-মুক্ত), অতিরিক্ত আইটেম CSS দিয়ে হাইড করা থাকে (nth-child) — কোনো Layout Shift ছাড়াই ব্রেকপয়েন্ট বদলায়। */ .shahaz-cat-unified-grid { display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 3); gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shahaz-cat-unified-grid::-webkit-scrollbar { display: none; } @media (min-width: 768px) and (max-width: 1199px) { .shahaz-cat-unified-grid { grid-auto-columns: calc((100% - 30px) / 4); gap: 10px; } } @media (min-width: 1200px) { .shahaz-cat-unified-grid { grid-auto-columns: calc((100% - 60px) / 6); gap: 12px; } } .shahaz-cat-unified-card { display: block; aspect-ratio: 1 / 1; border-radius: 14px; /* ব্যবহারকারীর নির্দেশে: Ultra Thin Luxury Magenta Border */ border: 1px solid var(--shahaz-magenta); box-shadow: var(--shahaz-shadow-soft); overflow: hidden; background: #fff; transition: box-shadow 0.25s ease, border-color 0.25s ease; } .shahaz-cat-unified-card:hover, .shahaz-cat-unified-card:focus-visible { border-color: var(--shahaz-magenta-deep); box-shadow: 0 10px 24px -8px rgba(107, 15, 85, 0.32); } .shahaz-cat-unified-img { width: 100%; height: 100%; /* ব্যবহারকারীর নির্দেশে: Image Crop/Stretch হবে না — cover-এর বদলে contain, পুরো ছবি অনুপাত ঠিক রেখে ফ্রেমের ভেতরে দেখাবে */ object-fit: contain; display: block; transition: transform 0.3s ease; } .shahaz-cat-unified-card:hover .shahaz-cat-unified-img { transform: scale(1.05); } /* ========================================================================== COMPONENT 5b: Quick-Actions Grid — ৮ বাটন, সবসময় ২ সারি x ৪ কলাম (মোবাইল/ট্যাবলেট/ডেস্কটপ সব জায়গায় একই গ্রিড, কখনো Wrap/Scroll হয় না — ব্যবহারকারীর রেফারেন্স ছবি অনুযায়ী সম্পূর্ণ নতুন) ========================================================================== */ /************************************************************* * COMPONENT NAME: Luxury Promotion Section (২০২৬-০৮-১৭, reference * image অনুযায়ী) * Purpose: template-parts/home/07c-luxury-promo.php-এর ৩-স্লট * লে-আউট — উপরে ১টা বড় Main Banner (ফুল-উইথ), নিচে ২টা ছোট * কলাম (Small Banner + Advertisement, সমান প্রস্থ)। কার্ড- * স্টাইল: গোলাকার কোণা, নরম শ্যাডো, hover-এ হালকা স্কেল — * .shahaz-hero-right-has-campaign (hero-banner.css)-এর একই * ভিজ্যুয়াল ভাষা, কিন্তু এই ফাইলের বিদ্যমান গ্লোবাল টোকেন * (--shahaz-radius-*/--shahaz-shadow-*/--shahaz-magenta/ * --shahaz-gold) ব্যবহার করে — কোনো নতুন রং/শ্যাডো সিস্টেম * তৈরি হয়নি। * CSS Dependency: assets/css/shahaz-tokens.css (গ্লোবাল ভ্যারিয়েবল) * WooCommerce Dependency: None * Future AI Modification Notes: bottom row-এ যদি Small/Ad-এর একটাই * কনফিগার করা থাকে, PHP `shahaz-luxury-promo-bottom-row--single` * মডিফায়ার ক্লাস যোগ করে — CSS grid-template-columns:1fr * দিয়ে সেই একটা আইটেম পুরো সারির প্রস্থ নেয়, কোনো ভাঙা/ * অসম্পূর্ণ লে-আউট দেখায় না। *************************************************************/ .shahaz-luxury-promo-sec { margin-top: 6px; margin-bottom: 6px; } .shahaz-luxury-promo-desc { display: block; font-size: 12px; color: var(--shahaz-gray); margin: -6px 0 0; } /* ---------- PRIMARY LUXURY PROMOTION HEADING ---------- * শুধুমাত্র প্রথম “লাক্সারি প্রোমোশন” সেকশনের জন্য। * Banner + দুইটি Ads সম্পূর্ণ অপরিবর্তিত থাকে। */ .shahaz-luxury-promo-sec--primary .shahaz-sec-header { margin-bottom: 5px; } .shahaz-luxury-promo-sec--primary .shahaz-luxury-promo-title { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; box-sizing: border-box; margin: 0; padding: 5px 24px 6px; border: 1px solid var(--shahaz-gold, #D4AF37); border-radius: 999px; background: linear-gradient(180deg, #ff1493 0%, #f00078 52%, #d90069 100%); color: #ffffff; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(16px, 3.8vw, 23px); font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 2px 0 #a47a05, 0 4px 9px rgba(194, 24, 91, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 4px rgba(70, 0, 35, 0.22); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 -1px 0 rgba(93, 0, 45, 0.48); } /* আগের shared SectionHeader-এর Gold underline সম্পূর্ণ বন্ধ */ .shahaz-luxury-promo-sec--primary .shahaz-sec-title::after { display: none; } /* ---------- SECONDARY LUXURY PROMOTION HEADING ---------- * দ্বিতীয় “লাক্সারি প্রোমোশন ২” সেকশনের জন্য। * প্রথম Luxury Promotion-এর approved button/header treatment-ই পুনঃব্যবহার * করা হচ্ছে; LP1-এর media/layout বা shared component পরিবর্তন করা হয়নি। */ .shahaz-luxury-promo-sec--secondary .shahaz-sec-header { margin-bottom: 5px; } .shahaz-luxury-promo-sec--secondary .shahaz-luxury-promo-title { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; box-sizing: border-box; margin: 0; padding: 5px 24px 6px; border: 1px solid var(--shahaz-gold, #D4AF37); border-radius: 999px; background: linear-gradient(180deg, #ff1493 0%, #f00078 52%, #d90069 100%); color: #ffffff; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(16px, 3.8vw, 23px); font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 2px 0 #a47a05, 0 4px 9px rgba(194, 24, 91, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 4px rgba(70, 0, 35, 0.22); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 -1px 0 rgba(93, 0, 45, 0.48); } .shahaz-luxury-promo-sec--secondary .shahaz-sec-title::after { display: none; } .shahaz-luxury-promo-sec--secondary .shahaz-luxury-promo-desc { display: none; } .shahaz-luxury-promo-sec--secondary .shahaz-luxury-promo-main-wrap { margin-top: 0; margin-bottom: 8px; } /* পুরোনো subtitle/description দৃশ্যমান থাকবে না */ .shahaz-luxury-promo-sec--primary .shahaz-luxury-promo-desc { display: none; } /* Capsule-এর নিচ থেকে Main Banner-এর gap = ঠিক 5px */ .shahaz-luxury-promo-sec--primary .shahaz-luxury-promo-main-wrap { margin-top: 0; margin-bottom: 8px; } .shahaz-luxury-promo-main-wrap { margin-bottom: 8px; } .shahaz-luxury-promo-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shahaz-luxury-promo-bottom-row--single { grid-template-columns: 1fr; } /* ---------- শেয়ার্ড কার্ড স্টাইল (Main/Small/Ad — তিনটাই) ---------- */ .shahaz-luxury-promo-link { position: relative; display: block; overflow: hidden; border-radius: var(--shahaz-radius-lg); box-shadow: var(--shahaz-shadow-card); text-decoration: none; color: inherit; transform: translateZ(0); transition: transform 0.14s ease, box-shadow 0.14s ease; } .shahaz-luxury-promo-link:hover, .shahaz-luxury-promo-link:focus-visible { transform: scale(1.01); box-shadow: var(--shahaz-shadow-lift); } .shahaz-luxury-promo-img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: inherit; transition: transform 500ms ease-in-out; } .shahaz-luxury-promo-link:hover .shahaz-luxury-promo-img { transform: scale(1.03); } /* Main Banner — চওড়া, রেফারেন্স ইমেজের মতো (৩:১-এর কাছাকাছি) */ .shahaz-luxury-promo-main { aspect-ratio: 3 / 1; } .shahaz-luxury-promo-main .shahaz-luxury-promo-img { aspect-ratio: 3 / 1; } /* Small Banner/Advertisement — নিচের দুই কলাম, একটু কম চওড়া (~2:1) */ .shahaz-luxury-promo-small, .shahaz-luxury-promo-ad { aspect-ratio: 2 / 1; } .shahaz-luxury-promo-small .shahaz-luxury-promo-img, .shahaz-luxury-promo-ad .shahaz-luxury-promo-img { aspect-ratio: 2 / 1; } .shahaz-luxury-promo-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--shahaz-magenta); color: var(--shahaz-white); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--shahaz-gold); } .shahaz-top-brands-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:8px; border-radius:50%; background:linear-gradient(145deg,#fff1b8 0%,#d4af37 58%,#9f7618 100%); color:#7a4f00; font-size:16px; line-height:1; text-shadow:0 1px 0 rgba(255,255,255,.65); box-shadow:0 2px 0 #8f6815,0 3px 6px rgba(120,75,0,.22),inset 0 1px 0 rgba(255,255,255,.75); flex:0 0 auto; } @media (max-width: 480px) { /* ছোট মোবাইলে Main Banner একটু কম চওড়া-অনুপাত (কনটেন্ট বেশি ভার্টিক্যাল স্পেস পায়, খুব চিকন/অস্পষ্ট দেখায় না) */ .shahaz-luxury-promo-main, .shahaz-luxury-promo-main .shahaz-luxury-promo-img { aspect-ratio: 2 / 1; } } /* ---------- সেকশন থিম রং (subtle background tint) ---------- */ /* ২০২৬-০৮-১২ রিভিশন: ব্যবহারকারীর নতুন নির্দেশে Flash Sale ও Hot Sale আবার ২টা আলাদা সেকশন — তাই আবার ২টা আলাদা টিন্ট। */ .shahaz-p-row-flash { background: linear-gradient(180deg, rgba(194,24,91,0.04), transparent); } .shahaz-p-row-hot { background: linear-gradient(180deg, rgba(212,175,55,0.06), transparent); } /* ⚠️ ব্যবহারকারীর নির্দেশে (২০২৬-০৮-১৮) COMPONENT 7: DeliveryTrackingBar সম্পূর্ণ DELETE করা হলো (.shahaz-delivery-tracking, .shahaz-dt-* ক্লাসের সব CSS) — এই কম্পোনেন্টের PHP টেমপ্লেট ফাইল (template-parts/home/10-delivery-tracking.php) এবং হোমপেজ অ্যাসেম্বলারের কলও সম্পূর্ণ সরানো হয়েছে (দেখুন inc/shahaz- homepage-assembler.php-এর কমেন্ট) — শুধু CSS দিয়ে hide করা হয়নি। /* ========================================================================== COMPONENT 9: TopBrands ========================================================================== */ .shahaz-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 640px) { .shahaz-brand-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .shahaz-brand-grid { grid-template-columns: repeat(6, 1fr); } } .shahaz-brand-card { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; background: var(--shahaz-white); border: 0.5px solid var(--shahaz-border-pearl); border-radius: var(--shahaz-radius-md); padding: 0; margin: 0; text-decoration: none; overflow: hidden; box-shadow: var(--shahaz-shadow-soft); transition: transform 0.2s ease; } .shahaz-brand-card:hover { transform: translateY(-3px); } .shahaz-brand-card img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; margin: 0; } /* ========================================================================== NEW COMPONENT 12: SHAHAZ Announcement Bar Rebuilt from scratch. No dependency on the previous ticker engine. ========================================================================== */ .shahaz-announcement-v2{width:100%;height:32px;display:flex;align-items:stretch;overflow:hidden;box-sizing:border-box;background:#3b0a2b;border:0;border-radius:0;box-shadow:none;color:#fff;position:relative;isolation:isolate}.shahaz-announcement-v2__badge{flex:0 0 auto;min-width:max-content;height:100%;display:flex;align-items:center;gap:5px;padding:0 10px;box-sizing:border-box;background:#b40068;border-right:1px solid rgba(245,223,138,.55);z-index:3;font-size:10px;font-weight:900}.shahaz-announcement-v2__speaker{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;filter:none}.shahaz-announcement-v2__speaker svg{width:100%;height:100%;display:block}.shahaz-announcement-v2__badge i{width:5px;height:5px;border-radius:50%;background:#f5df8a;display:block;box-shadow:none;animation:none}.shahaz-announcement-v2__viewport{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center;perspective:none}.shahaz-announcement-v2__track{display:flex;align-items:center;width:max-content;height:100%;white-space:nowrap;will-change:transform;animation:shzAnnouncementMarquee 34s linear infinite}.shahaz-announcement-v2__item{display:inline-flex;align-items:center;gap:10px;height:100%;padding:0 15px;color:#fff8fc;font-size:10.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;text-shadow:none;animation:none;transform:none;filter:none;opacity:1}.shahaz-announcement-v2__item b{color:#f5df8a;font-size:11px;text-shadow:none}@keyframes shzAnnouncementMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.shahaz-announcement-v2:hover .shahaz-announcement-v2__track{animation-play-state:paused}@media (max-width:767px){.shahaz-announcement-v2{height:30px}.shahaz-announcement-v2__badge{padding:0 8px;gap:4px;font-size:9px}.shahaz-announcement-v2__speaker{width:17px;height:17px}.shahaz-announcement-v2__item{font-size:9.5px;padding:0 12px;gap:7px}.shahaz-announcement-v2__track{animation-duration:34s}}@media (prefers-reduced-motion:reduce){.shahaz-announcement-v2__track{animation:none;transform:none}} /* ========================================================================== COMPONENT 13: Stories — Instagram-স্টাইল গোল স্টোরি বাবল + লাইটবক্স ========================================================================== */ .shahaz-stories { /* ⚠️ বাগ-প্রতিরোধ (Prompt 09) — এই একটাই Hero Banner-এর ঠিক পরের সেকশন (Assembler-এ 02-hero-banner-এর পরেই 03-stories), তাই এই 12px override-ই স্ক্রিনশটে দেখা "Hero Banner-এর নিচে বড় সাদা গ্যাপ"-এর মূল, প্রকৃত কারণ ছিল — .shahaz-sec-এর Prompt 04-এ ঠিক করা 2px, CSS ফাইলে পরে আসা এই 12px রুলের কাছে হেরে যাচ্ছিল (same specificity, source-order জেতে)। সরিয়ে ফেলা হয়েছে। */ } /* ========================================================================== SHAHAZ Signature Story Visual System (Task 2) - 5 recurring asymmetric premium shape variations, cycling per card - animated luminous conic-gradient border (light-trail), no flat white ring - image and video share one presentation wrapper (.shahaz-story-frame-media) - object-fit:cover + centered object-position — never distorts uploaded media ========================================================================== */ /* ========================================================================== COMPONENT 13: SHAHAZ SIGNATURE STORIES ========================================================================== */ .shahaz-stories{--shz-story-gap:5px} .shahaz-stories-track{display:flex;gap:var(--shz-story-gap);overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:5px 2px 8px;overscroll-behavior-x:contain;touch-action:pan-x} .shahaz-stories-track::-webkit-scrollbar{display:none} .shahaz-story-bubble{flex:0 0 calc((100% - 16px)/5);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;padding:0;min-width:0;color:inherit} .shahaz-story-ring{--shz-story-radius:24% 68% 30% 58% / 58% 30% 68% 24%;position:relative;width:100%;aspect-ratio:1;isolation:isolate;overflow:visible;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease} .shahaz-story-bubble:nth-of-type(5n+1) .shahaz-story-ring{--shz-story-radius:24% 68% 30% 58% / 58% 30% 68% 24%} .shahaz-story-bubble:nth-of-type(5n+2) .shahaz-story-ring{--shz-story-radius:62% 24% 52% 34% / 28% 58% 36% 64%} .shahaz-story-bubble:nth-of-type(5n+3) .shahaz-story-ring{--shz-story-radius:34% 58% 22% 66% / 62% 30% 68% 24%} .shahaz-story-bubble:nth-of-type(5n+4) .shahaz-story-ring{--shz-story-radius:70% 30% 60% 40% / 38% 70% 30% 62%} .shahaz-story-bubble:nth-of-type(5n+5) .shahaz-story-ring{--shz-story-radius:48% 22% 64% 34% / 24% 62% 30% 72%} .shahaz-story-bubble:nth-of-type(5n+1){--shz-story-light-a:#ff2aa6;--shz-story-light-b:#ffd34f;--shz-story-light-c:#43d9ff;--shz-story-light-d:#9a6cff} .shahaz-story-bubble:nth-of-type(5n+2){--shz-story-light-a:#37c8ff;--shz-story-light-b:#6e7bff;--shz-story-light-c:#ff4fd8;--shz-story-light-d:#ffe36b} .shahaz-story-bubble:nth-of-type(5n+3){--shz-story-light-a:#36e58f;--shz-story-light-b:#8be85b;--shz-story-light-c:#ffd84d;--shz-story-light-d:#ff5d86} .shahaz-story-bubble:nth-of-type(5n+4){--shz-story-light-a:#ff4d62;--shz-story-light-b:#ff9f3f;--shz-story-light-c:#c86cff;--shz-story-light-d:#43d9ff} .shahaz-story-bubble:nth-of-type(5n+5){--shz-story-light-a:#49e7dc;--shz-story-light-b:#4b8dff;--shz-story-light-c:#ff5dbd;--shz-story-light-d:#ffd35b} .shahaz-story-ring::before{content:"";position:absolute;inset:-2px;border-radius:var(--shz-story-radius);background:conic-gradient(from 0deg,var(--shz-story-light-a) 0deg,var(--shz-story-light-b) 72deg,var(--shz-story-light-c) 148deg,var(--shz-story-light-d) 224deg,var(--shz-story-light-a) 292deg,var(--shz-story-light-b) 360deg);animation:shz-story-light-trail 5.2s linear infinite;z-index:0;filter:saturate(1.45);opacity:.98;will-change:transform} .shahaz-story-bubble:nth-of-type(5n+2) .shahaz-story-ring::before{animation-duration:5.8s;animation-direction:reverse}.shahaz-story-bubble:nth-of-type(5n+3) .shahaz-story-ring::before{animation-duration:4.7s}.shahaz-story-bubble:nth-of-type(5n+4) .shahaz-story-ring::before{animation-duration:6.1s;animation-direction:reverse}.shahaz-story-bubble:nth-of-type(5n+5) .shahaz-story-ring::before{animation-duration:5.5s} @keyframes shz-story-light-trail{to{transform:rotate(360deg)}} .shahaz-story-frame-media{position:absolute;inset:2px;display:block;border-radius:var(--shz-story-radius);overflow:hidden;background:#171018;z-index:1;box-shadow:0 5px 16px rgba(35,0,45,.18);isolation:isolate} .shahaz-story-ring::after{content:"";position:absolute;inset:-1px;border-radius:var(--shz-story-radius);background:conic-gradient(from 180deg,var(--shz-story-light-a),var(--shz-story-light-c),var(--shz-story-light-d),var(--shz-story-light-b),var(--shz-story-light-a));animation:shz-story-light-trail 5.2s linear infinite reverse;z-index:0;filter:blur(3.8px) saturate(1.35);opacity:.48;will-change:transform} .shahaz-story-frame-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 32%,transparent 72%,rgba(255,215,90,.08));mix-blend-mode:screen;z-index:2} .shahaz-story-frame-media img,.shahaz-story-frame-media video,.shahaz-story-frame-media .shahaz-homepage-media{display:block;position:absolute;inset:0;cursor:pointer;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:50% 50%;vertical-align:middle;border:0;margin:0;padding:0} .shahaz-story-ring video{background:var(--shahaz-gradient-magenta-gold)} .shahaz-story-bubble:hover .shahaz-story-ring,.shahaz-story-bubble:focus-visible .shahaz-story-ring{transform:translateY(-2px) scale(1.035);filter:drop-shadow(0 7px 10px rgba(35,0,45,.16))} .shahaz-story-bubble:active .shahaz-story-ring{transform:scale(.96)} .shahaz-story-bubble:focus{outline:none}.shahaz-story-bubble:focus-visible{outline:2px solid var(--shahaz-gold);outline-offset:3px;border-radius:12px} .shahaz-story-label{display:block;width:100%;font-size:10px;font-weight:700;color:var(--shahaz-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center} .shahaz-story-bubble .shahaz-story-sound-toggle,.shahaz-story-bubble .shahaz-video-sound-toggle{display:none!important} .shahaz-video-sound-toggle,.shahaz-story-sound-toggle{display:none!important} .shahaz-video-tap-feedback{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%) scale(.82);padding:7px 10px;border-radius:999px;background:rgba(20,8,24,.84);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap;opacity:0;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1);box-sizing:border-box;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis} .shahaz-video-tap-feedback.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)} .shahaz-video-tap-feedback.is-on{box-shadow:0 8px 28px rgba(255,20,145,.25),0 0 0 1px rgba(255,215,90,.32) inset} .shahaz-video-tap-feedback.is-off{box-shadow:0 8px 28px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.12) inset} .shahaz-hero-right-slide .shahaz-video-tap-feedback{left:50%;top:50%;width:max-content;max-width:calc(100% - 10px);margin:0;padding:5px 8px;font-size:8px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transform:translate(-50%,-50%) scale(.82)}.shahaz-hero-right-slide .shahaz-video-tap-feedback.is-visible{transform:translate(-50%,-50%) scale(1)} .shahaz-story-bubble .shahaz-video-tap-feedback{font-size:8px;font-weight:800;padding:4px 6px;max-width:calc(100% - 6px);box-shadow:0 4px 12px rgba(0,0,0,.24)} @media(prefers-reduced-motion:reduce){.shahaz-video-tap-feedback{transition:none}} .shahaz-homepage-video-media-wrap{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.shahaz-homepage-video-media-wrap > .shahaz-homepage-media{width:100%;height:100%;object-fit:cover}.shahaz-homepage-video-cta{position:absolute;left:50%;bottom:10px;z-index:20;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:3px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(135deg,var(--shahaz-magenta),#ff2b9f);color:#fff;text-decoration:none;font-size:10px;font-weight:800;line-height:1;letter-spacing:.02em;white-space:nowrap;box-shadow:0 3px 0 rgba(120,0,70,.38),0 6px 16px rgba(255,20,145,.18),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .16s ease,filter .16s ease}.shahaz-homepage-video-cta:hover{filter:brightness(1.08);transform:translateX(-50%) translateY(-1px)}.shahaz-homepage-video-cta:active{transform:translateX(-50%) translateY(2px)} html.shahaz-story-viewer-lock{overflow:hidden} .shahaz-story-viewer{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease} .shahaz-story-viewer.is-open{opacity:1;visibility:visible;pointer-events:auto} .shahaz-story-viewer-backdrop{position:absolute;inset:0;background:rgba(12,5,16,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .shahaz-story-viewer-shell{position:relative;z-index:1;width:min(100vw,520px);height:min(100vh,900px);display:flex;align-items:center;justify-content:center;overflow:hidden} .shahaz-story-viewer-media{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:48px 34px 56px} .shahaz-story-viewer-image,.shahaz-story-viewer-video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:22px;box-shadow:0 18px 55px rgba(0,0,0,.42);background:#111} .shahaz-story-viewer-video{cursor:pointer} .shahaz-story-viewer-progress{position:absolute;top:18px;left:18px;right:18px;z-index:5;display:flex;gap:4px} .shahaz-story-progress-segment{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.32)}.shahaz-story-progress-segment.is-current{background:linear-gradient(90deg,var(--shahaz-gold),var(--shahaz-magenta))} .shahaz-story-viewer-close,.shahaz-story-viewer-nav{position:absolute;z-index:6;border:0;cursor:pointer;appearance:none;color:var(--shahaz-magenta);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;font-weight:900} .shahaz-story-viewer-close{top:26px;right:14px;width:38px;height:38px;border-radius:50%;font-size:32px;line-height:1;color:#fff;background:var(--shahaz-magenta);border:1px solid rgba(255,255,255,.72);box-shadow:0 4px 0 rgba(120,0,70,.48),0 8px 18px rgba(194,24,91,.28),inset 0 1px 0 rgba(255,255,255,.48);display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box} .shahaz-story-viewer-nav{top:50%;width:42px;height:60px;transform:translateY(-50%);border-radius:50%;font-size:42px;line-height:1;color:var(--shahaz-magenta);display:flex;align-items:center;justify-content:center;text-shadow:0 1px 0 rgba(255,255,255,.55)}.shahaz-story-viewer-prev{left:6px}.shahaz-story-viewer-next{right:6px} .shahaz-story-viewer-close:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(120,0,70,.45),0 6px 14px rgba(194,24,91,.22),inset 0 2px 0 rgba(0,0,0,.10)} .shahaz-story-viewer-caption{position:absolute;left:18px;right:18px;bottom:14px;z-index:8;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;font-size:12px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}.shahaz-story-viewer-caption-title{max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shahaz-story-viewer-cta{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(135deg,var(--shahaz-magenta),#ff2b9f);color:#fff;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.02em;box-shadow:0 3px 0 rgba(120,0,70,.4),0 7px 18px rgba(255,20,145,.2),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s ease,filter .16s ease}.shahaz-story-viewer-cta:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(120,0,70,.35),0 4px 10px rgba(255,20,145,.18)} @media(min-width:768px){.shahaz-story-bubble{flex-basis:82px}.shahaz-story-ring{width:82px}.shahaz-story-viewer-shell{width:min(92vw,520px)}} @media(prefers-reduced-motion:reduce){.shahaz-story-ring::before,.shahaz-story-ring::after{animation:none}.shahaz-story-ring,.shahaz-story-viewer{transition:none}} /* ========================================================================== COMPONENT 14: VoucherSection — টিকিট-স্টাইল কুপন কার্ড ========================================================================== */ .shahaz-voucher-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .shahaz-voucher-track::-webkit-scrollbar { display: none; } .shahaz-voucher-card { flex: 0 0 auto; scroll-snap-align: start; width: 260px; display: flex; align-items: stretch; background: var(--shahaz-white); border: 1px dashed var(--shahaz-gold); border-radius: var(--shahaz-radius-md); overflow: hidden; box-shadow: var(--shahaz-shadow-soft); position: relative; } .shahaz-voucher-card::before, .shahaz-voucher-card::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--shahaz-offwhite); border-radius: 50%; top: 50%; transform: translateY(-50%); } .shahaz-voucher-card::before { left: -7px; } .shahaz-voucher-card::after { right: -7px; } .shahaz-voucher-left { flex: 1; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; background: var(--shahaz-gradient-magenta-gold); color: var(--shahaz-white); } .shahaz-voucher-amount { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 800; } .shahaz-voucher-desc { font-size: 10px; opacity: 0.9; } .shahaz-voucher-right { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-left: 1px dashed var(--shahaz-gold); } .shahaz-voucher-code { font-size: 11px; font-weight: 800; color: var(--shahaz-magenta-deep); letter-spacing: 0.03em; } .shahaz-voucher-copy-btn { font-size: 9px; font-weight: 700; color: var(--shahaz-white); background: var(--shahaz-magenta); border: none; padding: 5px 8px; border-radius: 999px; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.2s ease; } .shahaz-voucher-copy-btn:hover { background: var(--shahaz-gold-deep); } .shahaz-voucher-copy-btn.shahaz-voucher-copied { background: var(--shahaz-success); } /* ========================================================================== COMPONENT 15: VendorSpotlight ========================================================================== */ .shahaz-spotlight-track { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .shahaz-spotlight-track { grid-template-columns: repeat(3, 1fr); } } .shahaz-spotlight-card { background: var(--shahaz-white); border: 0.5px solid var(--shahaz-border-pearl); border-radius: var(--shahaz-radius-md); overflow: hidden; box-shadow: var(--shahaz-shadow-card); } .shahaz-spotlight-banner { position: relative; display: block; width: 100%; aspect-ratio: 16 / 6; background: var(--shahaz-gradient-magenta-gold); overflow: hidden; } .shahaz-spotlight-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .shahaz-spotlight-logo { position: absolute; left: 14px; bottom: -20px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 3px solid var(--shahaz-white); box-shadow: var(--shahaz-shadow-soft); background: var(--shahaz-white); } .shahaz-spotlight-logo img { width: 100%; height: 100%; object-fit: cover; } .shahaz-spotlight-info { padding: 28px 14px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .shahaz-spotlight-name { font-family: 'Playfair Display', Georgia, serif; font-size: 15px; font-weight: 700; color: var(--shahaz-ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shahaz-spotlight-rating { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--shahaz-star); flex: 0 0 auto; } .shahaz-spotlight-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 10px 10px; } .shahaz-spotlight-cta { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 10px 12px; padding: 8px; background: var(--shahaz-softpink); color: var(--shahaz-magenta); font-size: 12px; font-weight: 700; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .shahaz-spotlight-cta:hover { background: var(--shahaz-gradient-magenta-gold); color: var(--shahaz-white); } .shahaz-spotlight-cta svg { width: 14px; height: 14px; } /* ========================================================================== COMPONENT 18: Responsive Fine-tuning ========================================================================== */ @media (max-width: 360px) { .shahaz-cat-unified-grid { grid-auto-columns: calc((100% - 10px) / 3); gap: 5px; } } /* ---------- FEATURED COLLECTION — USER REVISION ---------- * Gold underline removed; heading-to-product-grid gap = 10px. * Pink capsule heading; product data/cards remain untouched. */ .shahaz-p-row-featured .shahaz-sec-header { margin-bottom: 10px; text-align: center; } .shahaz-p-row-featured .shahaz-sec-title { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 7px 22px 8px; border: 1px solid var(--shahaz-gold, #D4AF37); border-radius: 999px; background: linear-gradient(145deg, #ff4aa8 0%, #ff1493 52%, #d90069 100%); color: #fff8ed; font-size: clamp(16px, 3.8vw, 23px); font-weight: 900; line-height: 1.05; box-shadow: 0 2px 0 #b88e27, 0 4px 8px rgba(194,24,91,.18), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(70,0,35,.2); text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(93,0,45,.45); } .shahaz-p-row-featured .shahaz-sec-title::after, .shahaz-p-row-featured .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after { display: none; width: 0; } /* ---------- TOP BRANDS — FULL-BLEED LOGO CARDS ---------- * Brand cards use zero padding and contain only the brand logo. * Brand names/text are intentionally removed from the card UI. */ .shahaz-top-brands .shahaz-brand-grid { gap: 10px; } .shahaz-top-brands .shahaz-brand-card { padding: 0; margin: 0; gap: 0; align-items: stretch; justify-content: center; overflow: hidden; } .shahaz-top-brands .shahaz-brand-card img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; object-fit: contain; } /* ---------- TOP BRANDS HEADING — USER REVISION ---------- * Gold underline removed; heading-to-content gap = 10px. * Adds a horizontal cream layer with a Hot Magenta 3D "টপ ব্র্যান্ড" capsule with a premium crown icon. * Product/brand data and grid remain untouched. */ .shahaz-top-brands .shahaz-sec-header { display: none; } .shahaz-top-brands .shahaz-sec-title { padding-bottom: 0; margin-bottom: 0; } .shahaz-top-brands .shahaz-sec-title::after, .shahaz-top-brands .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after { display: none; width: 0; } .shahaz-top-brands-heading-wrap { width:100%; margin:0 0 10px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; box-shadow:none; } .shahaz-top-brands-hot-sale-capsule { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 7px 38px; border-radius: 999px; background: linear-gradient(145deg, #ff1493 0%, #ff007f 55%, #d90068 100%); border: 1px solid var(--shahaz-gold, #D4AF37); color: #fff8ed; font-size: 18px; font-weight: 950; letter-spacing: .08em; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.24), 0 2px 1px rgba(90,0,45,.42); box-shadow: 0 2px 0 #b88e27, 0 4px 8px rgba(194,24,91,.22), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 3px rgba(100,0,45,.25); transform: translateZ(0); } .shahaz-top-brands-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:8px; border-radius:50%; background:linear-gradient(145deg,#fff1b8 0%,#d4af37 58%,#9f7618 100%); color:#7a4f00; font-size:16px; line-height:1; text-shadow:0 1px 0 rgba(255,255,255,.65); box-shadow:0 2px 0 #8f6815,0 3px 6px rgba(120,75,0,.22),inset 0 1px 0 rgba(255,255,255,.75); flex:0 0 auto; } @media (max-width: 480px) { .shahaz-top-brands-heading-wrap { margin-bottom: 10px; } .shahaz-top-brands-hot-sale-capsule { min-height: 34px; padding: 6px 30px; font-size: 16px; } } /* ---------- FLASH SALE HEADING — USER REVISION ---------- * Flash Sale heading-এর নিচের Gold underline সম্পূর্ণ সরানো। * Heading থেকে product grid-এর gap ঠিক 5px রাখা। * Flash Sale-এর product/card content অপরিবর্তিত। */ .shahaz-p-row-flash .shahaz-sec-header { margin-bottom: 5px; } .shahaz-p-row-flash .shahaz-sec-title { padding-bottom: 0; margin-bottom: 0; } .shahaz-p-row-flash .shahaz-sec-title::after, .shahaz-p-row-flash .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after { display: none; width: 0; } /* ---------- HOT SALE HEADING — USER REVISION ---------- * Hot Sale-এর নিচের Gold underline সম্পূর্ণ সরানো। * Heading থেকে product grid-এর gap ঠিক 5px রাখা। * Fire icon-কে cream 3D circular badge-এর মধ্যে রাখা। * শুধুমাত্র Hot Sale section scoped — অন্য heading untouched। */ .shahaz-p-row-hot .shahaz-sec-header { margin-bottom: 5px; } .shahaz-p-row-hot .shahaz-sec-title { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding-bottom: 0; margin-bottom: 0; } .shahaz-p-row-hot .shahaz-sec-title::after, .shahaz-p-row-hot .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after { display: none; width: 0; } .shahaz-p-row-hot .shahaz-hot-sale-fire { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: linear-gradient(145deg, #fffdf7 0%, #f5ead4 58%, #e8d5ae 100%); border: 1px solid var(--shahaz-gold, #D4AF37); box-shadow: 0 2px 0 #c7a64a, 0 4px 8px rgba(166,124,61,.22), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(166,124,61,.16); font-size: 17px; line-height: 1; transform: translateZ(0); } .shahaz-p-row-hot .shahaz-hot-sale-label { display: inline-block; } .shahaz-top-brands-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:8px; border-radius:50%; background:linear-gradient(145deg,#fff1b8 0%,#d4af37 58%,#9f7618 100%); color:#7a4f00; font-size:16px; line-height:1; text-shadow:0 1px 0 rgba(255,255,255,.65); box-shadow:0 2px 0 #8f6815,0 3px 6px rgba(120,75,0,.22),inset 0 1px 0 rgba(255,255,255,.75); flex:0 0 auto; } @media (max-width: 480px) { .shahaz-p-row-hot .shahaz-hot-sale-fire { width: 28px; height: 28px; flex-basis: 28px; font-size: 16px; } .shahaz-p-row-hot .shahaz-sec-title { gap: 6px; } } /* ---------- SUGGESTED PRODUCTS HEADING — USER REVISION ---------- * Gold underline removed. Heading-to-product-grid gap = 15px. * Long, slightly-flat Hot Magenta 3D capsule with cart + purse icons. * Scoped only to Suggested Products section. .shahaz-p-row-suggested .shahaz-sec-header { margin-bottom: 4px; text-align: center; } .shahaz-p-row-suggested .shahaz-sec-title { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 7px 18px 8px; border: 1px solid var(--shahaz-gold, #D4AF37); border-radius: 999px; background: linear-gradient(180deg, #ff1493 0%, #f00078 55%, #d90069 100%); color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(16px, 3.7vw, 23px); font-weight: 900; line-height: 1.05; letter-spacing: .015em; white-space: nowrap; box-shadow: 0 2px 0 #a47a05, 0 4px 8px rgba(194,24,91,.22), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(70,0,35,.22); text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(93,0,45,.5); } .shahaz-p-row-suggested .shahaz-sec-title::after, .shahaz-p-row-suggested .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after { display: none; width: 0; } @media (max-width: 520px) { .shahaz-p-row-suggested .shahaz-sec-title { padding-left: 12px; padding-right: 12px; font-size: clamp(14px, 4vw, 18px); } } /* SHAHAZ non-destructive campaign crop rendering */ .shahaz-luxury-promo-link .shahaz-crop-controlled { transform: translate(var(--shahaz-crop-x, 0%), var(--shahaz-crop-y, 0%)) scale(var(--shahaz-crop-zoom, 1)); transform-origin: center center; } .shahaz-luxury-promo-link:hover .shahaz-crop-controlled { transform: translate(var(--shahaz-crop-x, 0%), var(--shahaz-crop-y, 0%)) scale(calc(var(--shahaz-crop-zoom, 1) * 1.03)); } /* ========================================================================== SHZ HOME — LUXURY WORLD LIVE ENTRANCE PORTAL Full-width, transparent, mobile-first promotional gateway. ========================================================================== */ .shz-home-luxury-entry{ position:relative; width:100%; margin:0; overflow:visible; isolation:isolate; } .shz-home-luxury-entry__link{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(14px,2.4vw,30px); min-height:clamp(132px,14vw,184px); padding:clamp(18px,2.5vw,32px) clamp(18px,3.2vw,44px); border:1px solid rgba(190,18,111,.30); border-radius:clamp(18px,2.2vw,30px); text-decoration:none!important; color:#241d2d!important; overflow:hidden; isolation:isolate; background: radial-gradient(circle at 86% 24%,rgba(255,0,143,.24),transparent 30%), radial-gradient(circle at 15% 78%,rgba(255,188,80,.20),transparent 32%), linear-gradient(115deg,rgba(255,255,255,.82),rgba(255,235,246,.60) 46%,rgba(255,214,235,.48)); box-shadow: 0 16px 38px rgba(122,0,77,.15), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(190,18,111,.10); backdrop-filter:blur(3px) saturate(1.08); -webkit-backdrop-filter:blur(3px) saturate(1.08); transform:translate3d(0,10px,0) scale(.985); opacity:.96; transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,border-color .35s ease; } .shz-home-luxury-entry.is-visible .shz-home-luxury-entry__link, .shz-home-luxury-entry__link:focus-visible{ transform:translate3d(0,0,0) scale(1); opacity:1; } .shz-home-luxury-entry__link:hover{ transform:translate3d(0,-2px,0) scale(1.002); border-color:rgba(190,18,111,.48); box-shadow: 0 22px 48px rgba(122,0,77,.21), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(190,18,111,.13); } .shz-home-luxury-entry__link:focus-visible{ outline:3px solid #d91b8c; outline-offset:3px; } .shz-home-luxury-entry__link::before{ content:""; position:absolute; inset:1px; z-index:0; border-radius:inherit; pointer-events:none; background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,.38) 46%,transparent 62%); background-size:220% 100%; animation:shzLuxuryEntryBreath 7.5s ease-in-out infinite; } .shz-home-luxury-entry__link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:5; background:linear-gradient(90deg,transparent,#f00091,#ffd45f,#f00091,transparent); background-size:220% 100%; animation:shzLuxuryEntryEdge 4.8s linear infinite; pointer-events:none; } .shz-home-luxury-entry__copy{ position:relative; z-index:4; display:grid; gap:clamp(5px,.55vw,8px); min-width:0; } .shz-home-luxury-entry__eyebrow{ font-size:clamp(.62rem,.78vw,.76rem); font-weight:900; letter-spacing:.22em; line-height:1.2; color:#a80a65; text-transform:uppercase; } .shz-home-luxury-entry__copy strong{ font-size:clamp(1.45rem,3.25vw,3rem); line-height:1.02; font-weight:900; letter-spacing:-.035em; color:#241d2d; text-wrap:balance; text-shadow:0 2px 12px rgba(255,255,255,.55); } .shz-home-luxury-entry__copy strong em{ font-style:normal; color:#d4007e; } .shz-home-luxury-entry__subtitle{ max-width:64rem; font-size:clamp(.78rem,1.12vw,1rem); line-height:1.45; font-weight:650; color:#4d4051; } .shz-home-luxury-entry__portal{ position:relative; z-index:5; display:inline-flex; align-items:center; justify-content:center; gap:clamp(9px,1vw,14px); min-width:clamp(178px,17vw,236px); padding:clamp(13px,1.25vw,17px) clamp(16px,1.8vw,24px); border:1px solid rgba(255,255,255,.72); border-radius:999px; background: linear-gradient(135deg,rgba(91,0,67,.96),rgba(205,0,121,.96) 55%,rgba(245,49,151,.94)); box-shadow: 0 10px 24px rgba(146,0,90,.22), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -2px 5px rgba(69,0,43,.18); color:#fff!important; font-size:clamp(.68rem,.9vw,.82rem); font-weight:900; letter-spacing:.10em; text-align:center; white-space:nowrap; transform:translateZ(0); transition:transform .3s ease,box-shadow .3s ease; } .shz-home-luxury-entry__portal::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; border:1px solid rgba(255,209,103,.62); pointer-events:none; animation:shzLuxuryEntryPulse 2.8s ease-in-out infinite; } .shz-home-luxury-entry__portal-label{position:relative;z-index:2} .shz-home-luxury-entry__portal-line{ position:relative; width:clamp(18px,2vw,28px); height:1px; background:rgba(255,255,255,.86); box-shadow:0 0 8px rgba(255,255,255,.65); transition:width .3s ease; } .shz-home-luxury-entry__link:hover .shz-home-luxury-entry__portal{ transform:translateY(-2px) scale(1.015); box-shadow: 0 15px 30px rgba(146,0,90,.28), inset 0 1px 0 rgba(255,255,255,.62), inset 0 -2px 5px rgba(69,0,43,.20); } .shz-home-luxury-entry__link:hover .shz-home-luxury-entry__portal-line{width:clamp(24px,2.7vw,36px)} .shz-home-luxury-entry__aurora{ position:absolute; z-index:1; width:clamp(120px,18vw,250px); aspect-ratio:1; border-radius:50%; pointer-events:none; filter:blur(2px); will-change:transform,opacity; animation:shzLuxuryEntryAurora 7s ease-in-out infinite; } .shz-home-luxury-entry__aurora--one{ right:5%; top:-72%; background:radial-gradient(circle,rgba(255,255,255,.86) 0 4%,rgba(255,118,202,.68) 14%,rgba(240,0,145,.30) 40%,transparent 70%); } .shz-home-luxury-entry__aurora--two{ left:28%; bottom:-82%; background:radial-gradient(circle,rgba(255,235,154,.78) 0 5%,rgba(255,118,0,.26) 20%,rgba(240,0,145,.26) 42%,transparent 70%); animation-delay:-3.2s; } .shz-home-luxury-entry__ring{ position:absolute; z-index:2; width:clamp(180px,25vw,360px); aspect-ratio:1; border:1px solid rgba(217,27,140,.17); border-radius:50%; pointer-events:none; transform:rotate(-14deg); animation:shzLuxuryEntryRing 9s ease-in-out infinite; } .shz-home-luxury-entry__ring--one{right:-8%;top:-68%} .shz-home-luxury-entry__ring--two{left:-9%;bottom:-78%;animation-delay:-4.2s} .shz-home-luxury-entry__sheen{ position:absolute; z-index:3; top:-30%; bottom:-30%; left:-24%; width:18%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.58),transparent); filter:blur(3px); transform:skewX(-18deg) translateX(-150%); animation:shzLuxuryEntrySheen 5.8s ease-in-out infinite; pointer-events:none; } .shz-home-luxury-entry__sparkfield{position:absolute;inset:0;z-index:3;pointer-events:none} .shz-home-luxury-entry__sparkfield i{ position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 7px rgba(255,255,255,.95),0 0 14px rgba(238,0,137,.58); opacity:0; animation:shzLuxuryEntrySpark 3.6s ease-in-out infinite; } .shz-home-luxury-entry__sparkfield i:nth-child(1){left:12%;top:24%;animation-delay:-.3s} .shz-home-luxury-entry__sparkfield i:nth-child(2){left:32%;top:78%;animation-delay:-1.7s} .shz-home-luxury-entry__sparkfield i:nth-child(3){left:47%;top:18%;animation-delay:-2.4s} .shz-home-luxury-entry__sparkfield i:nth-child(4){left:63%;top:70%;animation-delay:-.9s} .shz-home-luxury-entry__sparkfield i:nth-child(5){right:25%;top:20%;animation-delay:-2.9s} .shz-home-luxury-entry__sparkfield i:nth-child(6){right:12%;top:76%;animation-delay:-1.2s} .shz-home-luxury-entry__sparkfield i:nth-child(7){left:7%;top:63%;animation-delay:-3.1s} .shz-home-luxury-entry__sparkfield i:nth-child(8){right:42%;top:86%;animation-delay:-2s} @keyframes shzLuxuryEntryBreath{ 0%,100%{background-position:100% 0;opacity:.35} 50%{background-position:0 0;opacity:.82} } @keyframes shzLuxuryEntryEdge{ 0%{background-position:100% 0} 100%{background-position:-100% 0} } @keyframes shzLuxuryEntryPulse{ 0%,100%{opacity:.45;transform:scale(.985)} 50%{opacity:.95;transform:scale(1.008)} } @keyframes shzLuxuryEntryAurora{ 0%,100%{transform:translate3d(-10px,0,0) scale(.88);opacity:.42} 50%{transform:translate3d(18px,12px,0) scale(1.12);opacity:.72} } @keyframes shzLuxuryEntryRing{ 0%,100%{transform:rotate(-14deg) scale(.96);opacity:.42} 50%{transform:rotate(3deg) scale(1.04);opacity:.78} } @keyframes shzLuxuryEntrySheen{ 0%,58%{transform:skewX(-18deg) translateX(-150%);opacity:0} 68%{opacity:.85} 84%,100%{transform:skewX(-18deg) translateX(720%);opacity:0} } @keyframes shzLuxuryEntrySpark{ 0%,100%{opacity:0;transform:scale(.35)} 35%{opacity:.92;transform:scale(1.25)} 62%{opacity:.28;transform:scale(.72)} } @media (max-width:700px){ /* PHASE 141: Mobile-only compact Luxury World entrance. Desktop untouched. */ .shz-home-luxury-entry{padding-inline:0 !important} .shz-home-luxury-entry__link{ grid-template-columns:1fr; gap:0; min-height:0; padding:0; border-radius:22px; backdrop-filter:blur(1px) saturate(1.04); -webkit-backdrop-filter:blur(1px) saturate(1.04); } .shz-home-luxury-entry__copy{gap:0} .shz-home-luxury-entry__subtitle{display:none !important} .shz-home-luxury-entry__eyebrow{font-size:.60rem;letter-spacing:.18em} .shz-home-luxury-entry__copy strong{font-size:clamp(1.65rem,8.5vw,2.35rem);line-height:1.02} .shz-home-luxury-entry__subtitle{font-size:.82rem;line-height:1.48;max-width:none} .shz-home-luxury-entry__portal{ width:100%; min-width:0; min-height:48px; padding:13px 16px; } .shz-home-luxury-entry__portal-line{width:24px} .shz-home-luxury-entry__aurora--one{right:-12%;top:-38%} .shz-home-luxury-entry__aurora--two{left:15%;bottom:-56%} .shz-home-luxury-entry__ring--one{right:-22%;top:-32%} .shz-home-luxury-entry__ring--two{left:-24%;bottom:-42%} .shz-home-luxury-entry__sheen{width:28%;animation-duration:6.8s} } @media (max-width:390px){ .shz-home-luxury-entry{padding-inline:0 !important} .shz-home-luxury-entry__link{padding:0} .shz-home-luxury-entry__copy strong{font-size:1.55rem} .shz-home-luxury-entry__subtitle{font-size:.78rem} .shz-home-luxury-entry__portal{font-size:.66rem;letter-spacing:.08em} } @media (prefers-reduced-motion:reduce){ .shz-home-luxury-entry__link, .shz-home-luxury-entry__link:hover, .shz-home-luxury-entry.is-visible .shz-home-luxury-entry__link{transform:none;transition:none} .shz-home-luxury-entry__link::before, .shz-home-luxury-entry__link::after, .shz-home-luxury-entry__aurora, .shz-home-luxury-entry__ring, .shz-home-luxury-entry__sheen, .shz-home-luxury-entry__sparkfield i, .shz-home-luxury-entry__portal::before{animation:none!important} } /* SHAHAZ HOMEPAGE — PHASE 36 PORTAL LAYER VISIBILITY HARDENING * Keep the new Luxury World entrance luminous without turning it into an opaque * slab that hides decorative artwork behind the section. Text and CTA remain * fully readable; decorative pseudo-layers remain non-interactive. */ .shz-home-luxury-entry__link{ background: radial-gradient(circle at 86% 24%,rgba(255,0,143,.16),transparent 30%), radial-gradient(circle at 15% 78%,rgba(255,188,80,.12),transparent 32%), linear-gradient(115deg,rgba(255,255,255,.62),rgba(255,235,246,.46) 46%,rgba(255,214,235,.34)); backdrop-filter:blur(1px) saturate(1.04); -webkit-backdrop-filter:blur(1px) saturate(1.04); } .shz-home-luxury-entry__link::before, .shz-home-luxury-entry__link::after, .shz-home-luxury-entry__aurora, .shz-home-luxury-entry__ring, .shz-home-luxury-entry__sheen, .shz-home-luxury-entry__sparkfield{ pointer-events:none !important; } @media (max-width:700px){ .shz-home-luxury-entry__link{ backdrop-filter:blur(.5px) saturate(1.03); -webkit-backdrop-filter:blur(.5px) saturate(1.03); } } /* ========================================================================== SHAHAZ.COM — Animated Micro Navigation Bloom System Purpose: turn selected whitespace between homepage sections into thin, section-aware navigation blooms. Each variant has its own motion language. No icon/SVG library is used; all decoration is CSS geometry. ========================================================================== */ .shahaz-micro-nav, .shahaz-micro-nav * { box-sizing: border-box; } .shahaz-micro-nav { position: relative; width: 100%; max-width: 1280px; margin: 3px auto; padding: 0 12px; isolation: isolate; contain: layout style; } .shahaz-micro-nav__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 52px; width: 100%; text-decoration: none; color: var(--shahaz-ink); overflow: hidden; isolation: isolate; border: 1px solid rgba(212,175,55,.62); border-radius: 999px; background: radial-gradient(circle at 18% 50%, rgba(255,255,255,.9), transparent 30%), linear-gradient(100deg, rgba(255,240,246,.94), rgba(255,251,247,.97) 52%, rgba(244,227,161,.24)); box-shadow: 0 5px 16px rgba(107,15,85,.11), inset 0 1px 0 rgba(255,255,255,.95); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .shahaz-micro-nav__link::before, .shahaz-micro-nav__link::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; } .shahaz-micro-nav__link::before { z-index: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,20,147,.12), transparent 54%); } .shahaz-micro-nav__link::after { z-index: 0; border: 1px solid rgba(255,255,255,.65); opacity: .85; } .shahaz-micro-nav__field { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .shahaz-micro-nav__copy { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 7px 14px; } .shahaz-micro-nav__eyebrow { font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--shahaz-magenta); white-space: nowrap; } .shahaz-micro-nav__title { font-size: clamp(13px, 2.4vw, 18px); line-height: 1.15; font-weight: 900; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.8); } .shahaz-micro-nav__hint { font-size: 9px; font-weight: 700; color: var(--shahaz-gray); white-space: nowrap; } .shahaz-micro-nav__cta { position: relative; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 0 16px; font-size: 9px; font-weight: 900; color: var(--shahaz-magenta-deep); white-space: nowrap; } .shahaz-micro-nav__cta-line { display: block; width: 22px; height: 2px; border-radius: 999px; background: var(--shahaz-gold); transform-origin: left center; transition: transform .35s ease, width .35s ease; } .shahaz-micro-nav__petal { position: absolute; display: block; width: 22px; height: 9px; border-radius: 999px 999px 999px 3px; background: linear-gradient(90deg, rgba(255,20,147,.08), rgba(255,20,147,.44), rgba(212,175,55,.18)); filter: drop-shadow(0 2px 7px rgba(255,20,147,.18)); opacity: .9; transform-origin: 100% 50%; } .shahaz-micro-nav__petal--a { left: 9%; top: 22%; transform: rotate(20deg); animation: shahaz-mnb-petal-a 5.5s ease-in-out infinite; } .shahaz-micro-nav__petal--b { left: 17%; top: 58%; transform: rotate(-22deg) scale(.78); animation: shahaz-mnb-petal-b 6.2s ease-in-out infinite; } .shahaz-micro-nav__petal--c { right: 17%; top: 22%; transform: rotate(158deg) scale(.72); animation: shahaz-mnb-petal-c 5.9s ease-in-out infinite; } .shahaz-micro-nav__petal--d { right: 8%; top: 62%; transform: rotate(188deg) scale(.9); animation: shahaz-mnb-petal-d 6.4s ease-in-out infinite; } .shahaz-micro-nav__orbit { position: absolute; border: 1px solid rgba(212,175,55,.48); border-radius: 50%; width: 40px; height: 18px; opacity: .7; } .shahaz-micro-nav__orbit--a { left: 29%; top: 17%; transform: rotate(18deg); animation: shahaz-mnb-orbit-a 7s linear infinite; } .shahaz-micro-nav__orbit--b { right: 29%; bottom: 15%; transform: rotate(-24deg); animation: shahaz-mnb-orbit-b 8s linear infinite reverse; } .shahaz-micro-nav__spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--shahaz-gold); box-shadow: 0 0 9px var(--shahaz-glow-gold); opacity: 0; } .shahaz-micro-nav__spark--a { left: 38%; top: 30%; animation: shahaz-mnb-spark 3.8s ease-in-out infinite; } .shahaz-micro-nav__spark--b { right: 38%; top: 62%; animation: shahaz-mnb-spark 4.6s ease-in-out .7s infinite; } .shahaz-micro-nav__spark--c { right: 22%; top: 28%; animation: shahaz-mnb-spark 4.2s ease-in-out 1.4s infinite; } .shahaz-micro-nav__sheen { position: absolute; top: -20%; left: -28%; width: 18%; height: 140%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg) translateX(0); opacity: .6; animation: shahaz-mnb-sheen 7.5s ease-in-out infinite; } /* Variant identity — intentionally different motion/composition per location. */ .shahaz-micro-nav--silk .shahaz-micro-nav__link { background: linear-gradient(100deg, rgba(255,251,247,.98), rgba(255,240,246,.92), rgba(244,227,161,.28)); } .shahaz-micro-nav--silk .shahaz-micro-nav__petal { border-radius: 70% 30% 70% 30%; transform-origin: 50% 50%; } .shahaz-micro-nav--silk .shahaz-micro-nav__petal--a { animation: shahaz-mnb-silk-a 6s ease-in-out infinite; } .shahaz-micro-nav--silk .shahaz-micro-nav__petal--b { animation: shahaz-mnb-silk-b 6.8s ease-in-out infinite; } .shahaz-micro-nav--silk .shahaz-micro-nav__sheen { animation-duration: 9s; } .shahaz-micro-nav--prism .shahaz-micro-nav__link { background: linear-gradient(100deg, rgba(255,240,246,.94), rgba(255,251,247,.98), rgba(255,224,236,.75)); } .shahaz-micro-nav--prism .shahaz-micro-nav__orbit { border-radius: 12%; transform-origin: center; } .shahaz-micro-nav--prism .shahaz-micro-nav__orbit--a { animation: shahaz-mnb-prism 5.8s ease-in-out infinite; } .shahaz-micro-nav--prism .shahaz-micro-nav__orbit--b { animation: shahaz-mnb-prism 6.6s ease-in-out .4s infinite reverse; } .shahaz-micro-nav--ember .shahaz-micro-nav__link { background: linear-gradient(100deg, rgba(255,240,246,.96), rgba(255,251,247,.96), rgba(212,175,55,.2)); } .shahaz-micro-nav--ember .shahaz-micro-nav__field::before { content: ""; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,20,147,.16), transparent 65%); animation: shahaz-mnb-ember 4.8s ease-in-out infinite; } .shahaz-micro-nav--orbit .shahaz-micro-nav__orbit--a { width: 58px; height: 22px; left: 14%; animation: shahaz-mnb-wide-orbit 6s linear infinite; } .shahaz-micro-nav--orbit .shahaz-micro-nav__orbit--b { width: 76px; height: 26px; right: 14%; animation: shahaz-mnb-wide-orbit 7s linear infinite reverse; } .shahaz-micro-nav--orbit .shahaz-micro-nav__petal { animation-duration: 7.5s; } .shahaz-micro-nav--pearl .shahaz-micro-nav__link { background: linear-gradient(100deg, rgba(255,251,247,.98), rgba(255,240,246,.94), rgba(255,251,247,.98)); } .shahaz-micro-nav--pearl .shahaz-micro-nav__link::before { background: radial-gradient(circle at 50% 50%, rgba(212,175,55,.18), transparent 38%); animation: shahaz-mnb-pearl 5s ease-in-out infinite; } .shahaz-micro-nav--pearl .shahaz-micro-nav__spark { width: 5px; height: 5px; } .shahaz-micro-nav--aurora .shahaz-micro-nav__link { background: linear-gradient(100deg, rgba(255,240,246,.95), rgba(255,251,247,.96), rgba(244,227,161,.24)); } .shahaz-micro-nav--aurora .shahaz-micro-nav__field::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(194,24,91,.35), rgba(212,175,55,.7), rgba(194,24,91,.35), transparent); transform: scaleX(.55); animation: shahaz-mnb-aurora 5.8s ease-in-out infinite; } .shahaz-micro-nav--ripple .shahaz-micro-nav__field::before, .shahaz-micro-nav--ripple .shahaz-micro-nav__field::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border: 1px solid rgba(194,24,91,.28); border-radius: 50%; transform: translate(-50%,-50%) scale(.25); animation: shahaz-mnb-ripple 4.8s ease-out infinite; } .shahaz-micro-nav--ripple .shahaz-micro-nav__field::after { animation-delay: 2.4s; } .shahaz-micro-nav__link { opacity: .96; transform: translateY(4px); } .shahaz-micro-nav--visible .shahaz-micro-nav__link { opacity: 1; transform: translateY(0); transition-delay: .03s; } .shahaz-micro-nav__link:hover, .shahaz-micro-nav__link:focus-visible { transform: translateY(-1px); border-color: var(--shahaz-gold); box-shadow: 0 9px 22px rgba(107,15,85,.16), 0 0 0 1px rgba(255,255,255,.7) inset; } .shahaz-micro-nav__link:hover .shahaz-micro-nav__cta-line, .shahaz-micro-nav__link:focus-visible .shahaz-micro-nav__cta-line { width: 34px; transform: scaleX(1.05); } .shahaz-micro-nav__link:active { transform: translateY(1px) scale(.998); } .shahaz-micro-nav__link:focus-visible { outline: 2px solid var(--shahaz-magenta); outline-offset: 3px; } @keyframes shahaz-mnb-petal-a { 0%,100%{translate:0 0;rotate:0deg;scale:1} 50%{translate:8px -3px;rotate:10deg;scale:1.08} } @keyframes shahaz-mnb-petal-b { 0%,100%{translate:0 0;rotate:0deg} 50%{translate:-6px 3px;rotate:-12deg} } @keyframes shahaz-mnb-petal-c { 0%,100%{translate:0 0;rotate:158deg} 50%{translate:-7px -4px;rotate:170deg} } @keyframes shahaz-mnb-petal-d { 0%,100%{translate:0 0;rotate:188deg} 50%{translate:7px 3px;rotate:200deg} } @keyframes shahaz-mnb-orbit-a { 0%{rotate:18deg;translate:0 0} 50%{rotate:32deg;translate:12px -2px} 100%{rotate:18deg;translate:0 0} } @keyframes shahaz-mnb-orbit-b { 0%{rotate:-24deg;translate:0 0} 50%{rotate:-8deg;translate:-10px 2px} 100%{rotate:-24deg;translate:0 0} } @keyframes shahaz-mnb-spark { 0%,100%{opacity:0;scale:.4} 35%,65%{opacity:.9;scale:1} } @keyframes shahaz-mnb-sheen { 0%,55%{translate:0 0;opacity:0} 65%{opacity:.65} 85%,100%{translate:720% 0;opacity:0} } @keyframes shahaz-mnb-silk-a { 0%,100%{translate:0 0;scale:.8;rotate:0deg} 50%{translate:18px -2px;scale:1.15;rotate:28deg} } @keyframes shahaz-mnb-silk-b { 0%,100%{translate:0 0;scale:.8;rotate:0deg} 50%{translate:-15px 2px;scale:1.1;rotate:-32deg} } @keyframes shahaz-mnb-prism { 0%,100%{rotate:0deg;scale:1} 50%{rotate:22deg;scale:1.08} } @keyframes shahaz-mnb-ember { 0%,100%{scale:.55;opacity:.25} 50%{scale:1.2;opacity:.7} } @keyframes shahaz-mnb-wide-orbit { 0%{translate:0 0;rotate:0deg} 25%{translate:14px -2px;rotate:8deg} 50%{translate:0 2px;rotate:16deg} 75%{translate:-14px -1px;rotate:8deg} 100%{translate:0 0;rotate:0deg} } @keyframes shahaz-mnb-pearl { 0%,100%{opacity:.35;scale:.85} 50%{opacity:.8;scale:1.2} } @keyframes shahaz-mnb-aurora { 0%,100%{scaleX(.55);opacity:.3} 50%{scaleX(1);opacity:.85} } @keyframes shahaz-mnb-ripple { 0%{opacity:0;scale:.25} 15%{opacity:.55} 75%{opacity:.12} 100%{opacity:0;scale:4.5} } @media (min-width: 768px) { .shahaz-micro-nav { padding: 0 24px; margin-top: 4px; margin-bottom: 4px; } .shahaz-micro-nav__link { min-height: 58px; } .shahaz-micro-nav__copy { gap: 12px; padding: 8px 22px; } .shahaz-micro-nav__eyebrow { font-size: 9px; } .shahaz-micro-nav__hint { font-size: 10px; } .shahaz-micro-nav__cta { font-size: 10px; padding-right: 22px; } } @media (max-width: 479px) { .shahaz-micro-nav { padding: 0 8px; margin: 3px auto; } .shahaz-micro-nav__link { min-height: 48px; } .shahaz-micro-nav__copy { gap: 6px; padding: 6px 10px; } .shahaz-micro-nav__eyebrow { display: none; } .shahaz-micro-nav__title { font-size: 12px; } .shahaz-micro-nav__hint { display: none; } .shahaz-micro-nav__cta { gap: 5px; font-size: 8px; padding: 0 10px; } .shahaz-micro-nav__cta-line { width: 16px; } .shahaz-micro-nav__petal { width: 18px; height: 7px; } } @media (prefers-reduced-motion: reduce) { .shahaz-micro-nav *, .shahaz-micro-nav::before, .shahaz-micro-nav::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================================== SHAHAZ.COM — MICRO NAV LUXURY BLOOM / PHASE 42 Rich homepage micro-navigation: uncommon hot color families, custom CSS totem art, floating product messages, and distinct variant identities. No external icon library is used. ========================================================================== */ .shahaz-micro-nav{--mna:#ff087f;--mnb:#7a08ff;--mnc:#ff173d;--mng:#ffd66b;--mnd:#24001f;position:relative;z-index:4;margin:clamp(5px,1vw,12px) auto; padding-inline:clamp(8px,2vw,24px);} .shahaz-micro-nav__link{min-height:clamp(64px,7vw,86px);grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(8px,1.5vw,18px);border:1px solid rgba(255,255,255,.72);border-radius:24px;background:linear-gradient(110deg,var(--mnd),var(--mna) 38%,var(--mnb) 74%,var(--mnc));box-shadow:0 12px 30px color-mix(in srgb,var(--mna) 25%,transparent),0 0 0 1px color-mix(in srgb,var(--mng) 55%,transparent) inset,0 0 26px color-mix(in srgb,var(--mnb) 28%,transparent);overflow:visible;} .shahaz-micro-nav__link::before{inset:-1px;background:radial-gradient(circle at 12% 50%,rgba(255,255,255,.32),transparent 20%),radial-gradient(circle at 82% 30%,rgba(255,255,255,.2),transparent 24%),linear-gradient(90deg,transparent 0 28%,rgba(255,255,255,.1) 50%,transparent 72%);mix-blend-mode:screen;} .shahaz-micro-nav__link::after{inset:3px;border-color:rgba(255,232,170,.65);opacity:.85;} .shahaz-micro-nav__field{z-index:1;inset:-12%;overflow:visible;} .shahaz-micro-nav__copy{z-index:8;justify-content:flex-start;align-items:center;gap:clamp(6px,1vw,12px);padding:8px 4px;flex-wrap:wrap;} .shahaz-micro-nav__eyebrow{color:#ffe9a6;text-shadow:0 0 10px rgba(255,214,107,.55);} .shahaz-micro-nav__title{color:#fff;font-size:clamp(14px,2.5vw,21px);text-shadow:0 2px 10px rgba(35,0,31,.45);} .shahaz-micro-nav__hint{color:rgba(255,255,255,.82);} .shahaz-micro-nav__cta{z-index:9;min-height:44px;padding-inline:clamp(10px,1.8vw,20px);border:1px solid rgba(255,226,133,.88);border-radius:16px;background:linear-gradient(145deg,#ffef9b,#ff7bca 35%,#ff087f 68%,#6d00d8);color:#fff;box-shadow:0 7px 16px rgba(34,0,39,.25),inset 0 1px 0 rgba(255,255,255,.8);text-shadow:0 1px 4px rgba(50,0,40,.4);} .shahaz-micro-nav__cta-line{background:#fff4b2;box-shadow:0 0 10px rgba(255,241,166,.9);} .shahaz-micro-nav__totem{position:relative;z-index:9;display:block;flex:0 0 clamp(44px,5vw,62px);width:clamp(44px,5vw,62px);height:clamp(54px,6vw,72px);margin-left:clamp(6px,1vw,12px);filter:drop-shadow(0 6px 12px rgba(26,0,35,.35));transform:translateY(0) rotate(-2deg);animation:shzTotemFloat 4.8s ease-in-out infinite;} .shahaz-micro-nav__totem-core{position:absolute;left:50%;top:18%;width:38%;height:38%;transform:translateX(-50%) rotate(45deg);border-radius:10px;background:linear-gradient(145deg,#fff3a7,#ff59bb 45%,#7000db);border:1px solid rgba(255,255,255,.85);box-shadow:0 0 18px rgba(255,218,102,.75),inset 0 0 8px rgba(255,255,255,.65);} .shahaz-micro-nav__totem-ring{position:absolute;left:50%;top:14%;width:72%;height:52%;transform:translateX(-50%) rotate(18deg);border:2px solid rgba(255,231,148,.86);border-radius:48% 52% 42% 58%;animation:shzTotemRing 4s linear infinite;} .shahaz-micro-nav__totem-wing{position:absolute;top:28%;width:28%;height:18%;background:linear-gradient(90deg,#ffea9a,#ff2c91);border:1px solid rgba(255,255,255,.7);border-radius:70% 25% 70% 25%;} .shahaz-micro-nav__totem-wing--l{left:3%;transform:rotate(24deg);}.shahaz-micro-nav__totem-wing--r{right:3%;transform:rotate(-24deg);} .shahaz-micro-nav__totem-stem{position:absolute;left:50%;bottom:6%;width:12%;height:42%;transform:translateX(-50%);border-radius:999px;background:linear-gradient(#ffd96a,#ff2c91,#7b00df);box-shadow:0 0 10px rgba(255,221,106,.6);} .shahaz-micro-nav__message-stack{position:absolute;z-index:10;right:clamp(95px,13vw,190px);top:-14px;width:clamp(145px,20vw,230px);height:30px;pointer-events:none;} .shahaz-micro-nav__message{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;min-height:28px;padding:5px 12px;border:1px solid rgba(255,234,160,.9);border-radius:999px;background:linear-gradient(135deg,rgba(45,0,52,.96),color-mix(in srgb,var(--mna) 76%,#3b0065));color:#fff;font-size:10px;font-weight:900;white-space:nowrap;box-shadow:0 8px 18px rgba(35,0,40,.28),0 0 14px color-mix(in srgb,var(--mna) 38%,transparent);opacity:0;transform:translateY(9px) scale(.86);animation:shzMessageBloom 8.4s ease-in-out infinite;} .shahaz-micro-nav__message--2{animation-delay:2.8s;background:linear-gradient(135deg,rgba(74,0,77,.96),color-mix(in srgb,var(--mnb) 76%,#ff0b83));}.shahaz-micro-nav__message--3{animation-delay:5.6s;background:linear-gradient(135deg,rgba(73,0,25,.96),color-mix(in srgb,var(--mnc) 74%,#7b00c8));} .shahaz-micro-nav__petal{background:linear-gradient(90deg,rgba(255,239,155,.08),rgba(255,44,145,.8),rgba(122,0,255,.18));filter:drop-shadow(0 0 8px rgba(255,24,145,.48));} .shahaz-micro-nav__orbit{border-color:rgba(255,226,120,.72);box-shadow:0 0 10px rgba(255,226,120,.25);} .shahaz-micro-nav__spark{background:#fff1a2;box-shadow:0 0 12px #ff2e99,0 0 22px #7b00ff;} .shahaz-micro-nav__sheen{opacity:.75;background:linear-gradient(100deg,transparent,rgba(255,255,255,.88),rgba(255,225,133,.35),transparent);} /* Distinct visual identity per section — deliberately not one repeated skin. */ .shahaz-micro-nav--aurora{--mna:#ff1493;--mnb:#5a00ff;--mnc:#ff3355;--mnd:#21002d;} .shahaz-micro-nav--silk{--mna:#ff0f7b;--mnb:#8b00ff;--mnc:#ff5b00;--mnd:#36002d;}.shahaz-micro-nav--silk .shahaz-micro-nav__link{transform:skewX(-.8deg);border-radius:28px 14px 28px 14px;}.shahaz-micro-nav--silk .shahaz-micro-nav__totem{transform:translateY(0) rotate(8deg);} .shahaz-micro-nav--prism{--mna:#d600ff;--mnb:#2400ff;--mnc:#ff005d;--mnd:#16002f;}.shahaz-micro-nav--prism .shahaz-micro-nav__link{clip-path:polygon(0 12%,2% 4%,8% 0,92% 0,98% 5%,100% 18%,100% 82%,98% 95%,92% 100%,8% 100%,2% 95%,0 82%);border-radius:18px;}.shahaz-micro-nav--prism .shahaz-micro-nav__totem-ring{animation-duration:2.8s;} .shahaz-micro-nav--ember{--mna:#ff003c;--mnb:#7f00ff;--mnc:#ff6a00;--mnd:#33000d;}.shahaz-micro-nav--ember .shahaz-micro-nav__link{background:radial-gradient(circle at 48% 50%,rgba(255,102,0,.42),transparent 26%),linear-gradient(105deg,#2a0010,#ff003c 48%,#7f00ff);}.shahaz-micro-nav--ember .shahaz-micro-nav__message{animation-name:shzEmberMessage;} .shahaz-micro-nav--orbit{--mna:#ff008a;--mnb:#3d00ff;--mnc:#00d9ff;--mnd:#09002b;}.shahaz-micro-nav--orbit .shahaz-micro-nav__link{background:linear-gradient(110deg,#10002f,#ff008a 38%,#4c00ff 70%,#00c9e8);border-radius:999px 26px 999px 26px;}.shahaz-micro-nav--orbit .shahaz-micro-nav__totem-ring{width:90%;height:42%;transform:translateX(-50%) rotate(0deg);} .shahaz-micro-nav--pearl{--mna:#f40086;--mnb:#6b00ff;--mnc:#b600ff;--mnd:#1e0033;}.shahaz-micro-nav--pearl .shahaz-micro-nav__link{background:linear-gradient(105deg,#2c0038,#f40086 42%,#8d00ff 78%,#d400ff);}.shahaz-micro-nav--pearl .shahaz-micro-nav__totem-core{border-radius:50%;transform:translateX(-50%);} .shahaz-micro-nav--ripple{--mna:#ff006e;--mnb:#5400ff;--mnc:#ff00c8;--mnd:#13002e;}.shahaz-micro-nav--ripple .shahaz-micro-nav__link{background:radial-gradient(circle at 52% 50%,rgba(255,0,200,.4),transparent 22%),linear-gradient(105deg,#1a003b,#ff006e 44%,#5400ff 82%);}.shahaz-micro-nav--ripple .shahaz-micro-nav__totem{animation:shzTotemPulse 3.8s ease-in-out infinite;} .shahaz-micro-nav__link:hover .shahaz-micro-nav__totem{animation-duration:2.1s;transform:translateY(-3px) scale(1.05) rotate(2deg);} .shahaz-micro-nav__link:hover .shahaz-micro-nav__message--1{transform:translateY(-3px) scale(1.02);} @keyframes shzTotemFloat{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -5px;rotate:3deg}} @keyframes shzTotemPulse{0%,100%{scale:1;filter:drop-shadow(0 6px 12px rgba(26,0,35,.35))}50%{scale:1.08;filter:drop-shadow(0 0 18px rgba(255,22,157,.72))}} @keyframes shzTotemRing{to{rotate:360deg}} @keyframes shzMessageBloom{0%,8%{opacity:0;transform:translateY(10px) scale(.82)}14%,27%{opacity:1;transform:translateY(0) scale(1)}34%,100%{opacity:0;transform:translateY(-7px) scale(.92)}} @keyframes shzEmberMessage{0%,8%{opacity:0;transform:translateY(12px) scale(.8) rotate(-2deg)}14%,27%{opacity:1;transform:translateY(0) scale(1) rotate(0)}34%,100%{opacity:0;transform:translateY(-10px) scale(.9) rotate(2deg)}} @media(max-width:767px){ .shahaz-micro-nav{padding-inline:6px;margin-block:6px} .shahaz-micro-nav__link{min-height:62px;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;border-radius:18px} .shahaz-micro-nav__totem{flex-basis:43px;width:43px;height:55px;margin-left:3px} .shahaz-micro-nav__copy{gap:5px;padding:7px 0} .shahaz-micro-nav__eyebrow{display:block;font-size:7px;letter-spacing:.08em;flex-basis:100%} .shahaz-micro-nav__title{font-size:13px;max-width:100%;white-space:normal} .shahaz-micro-nav__hint{display:block;font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis} .shahaz-micro-nav__cta{min-height:38px;padding-inline:9px;border-radius:13px;font-size:8px;gap:4px} .shahaz-micro-nav__cta-line{width:14px} .shahaz-micro-nav__message-stack{right:58px;top:-12px;width:150px} .shahaz-micro-nav__message{font-size:8px;min-height:24px;padding:4px 8px;max-width:150px;overflow:hidden;text-overflow:ellipsis} } @media(max-width:390px){.shahaz-micro-nav__hint{display:none}.shahaz-micro-nav__message-stack{right:50px;width:130px}.shahaz-micro-nav__message{font-size:7px}.shahaz-micro-nav__cta-text{display:none}.shahaz-micro-nav__cta{min-width:32px;justify-content:center}.shahaz-micro-nav__cta-line{width:12px}} @media(prefers-reduced-motion:reduce){.shahaz-micro-nav__totem,.shahaz-micro-nav__message,.shahaz-micro-nav__totem-ring{animation:none!important}.shahaz-micro-nav__message--1{opacity:1;transform:none}} /* PHASE 42 — MICRO NAVIGATION READABILITY / BLOOM FINISH * Each ribbon keeps its own visual variant while the text remains clear on * bright animated surfaces. Mobile uses a stronger text treatment instead of * shrinking the message into an unreadable strip. */ .shahaz-micro-nav__eyebrow, .shahaz-micro-nav__title, .shahaz-micro-nav__hint, .shahaz-micro-nav__message, .shahaz-micro-nav__cta-text{ font-weight:900; text-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 10px rgba(80,0,55,.22); } .shahaz-micro-nav__title{color:#fff} .shahaz-micro-nav__eyebrow{color:#ffe77a} .shahaz-micro-nav__hint{color:#fff} .shahaz-micro-nav__message{color:#fff} .shahaz-micro-nav__cta-text{color:#fff} @media (max-width:760px){ .shahaz-micro-nav__eyebrow{font-size:10px !important;letter-spacing:.1em !important} .shahaz-micro-nav__title{font-size:14px !important;line-height:1.12 !important} .shahaz-micro-nav__hint{font-size:10px !important;line-height:1.15 !important;max-width:170px !important} .shahaz-micro-nav__message{font-size:10px !important;font-weight:900 !important} .shahaz-micro-nav__cta-text{font-size:10px !important;font-weight:950 !important} } /* ===================================================================== * PHASE 42.1 — LUXURY WORLD HOMEPAGE PORTAL — 30% VERTICAL COMPRESSION * Surgical visual-only adjustment. The portal remains fully clickable and * its text/content stays intact; only vertical breathing room is reduced. * ===================================================================== */ .shz-home-luxury-entry__link{ /* Previous vertical sizing: clamp(132px,14vw,184px) + 18–32px vertical padding. * New target is approximately 70% of the previous vertical footprint. */ min-height:clamp(92px,9.8vw,129px); padding-top:clamp(13px,1.75vw,22px); padding-bottom:clamp(13px,1.75vw,22px); gap:clamp(10px,1.7vw,21px); } @media (max-width:700px){ .shz-home-luxury-entry__link{ gap:9px; padding-top:14px; padding-bottom:13px; } .shz-home-luxury-entry__copy{gap:5px} .shz-home-luxury-entry__copy strong{line-height:1.0} .shz-home-luxury-entry__subtitle{line-height:1.34} .shz-home-luxury-entry__portal{ min-height:38px; padding:9px 13px; } } @media (max-width:390px){ .shz-home-luxury-entry__link{ padding-top:12px; padding-bottom:11px; gap:8px; } .shz-home-luxury-entry__subtitle{line-height:1.30} .shz-home-luxury-entry__portal{min-height:36px;padding:8px 12px} } /* PHASE 44 — HOMEPAGE HERO MICRO-NAV COLOR CLARITY * Scope: ONLY the three homepage micro-navigation ribbons requested by the * user: Luxury World (aurora), Featured Collection (silk), and Flash Sale * (prism). Geometry, spacing, content, animation, imagery and all other * homepage sections remain untouched. Each ribbon gets a distinct hot * red/orange/magenta gradient with a high-contrast white type treatment. */ /* 01 — SHAHAZ LUXURY WORLD: hot red → hot orange → hot magenta */ .shahaz-micro-nav--aurora .shahaz-micro-nav__link { background: radial-gradient(circle at 18% 50%, rgba(255,255,255,.16), transparent 28%), linear-gradient(108deg, #d8002f 0%, #ff3b12 42%, #ff7a00 68%, #ff008f 100%); border-color: rgba(255,220,120,.95); box-shadow: 0 12px 28px rgba(214,0,47,.28), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 24px rgba(255,74,0,.18); } .shahaz-micro-nav--aurora .shahaz-micro-nav__title, .shahaz-micro-nav--aurora .shahaz-micro-nav__hint, .shahaz-micro-nav--aurora .shahaz-micro-nav__cta { color: #fff; } .shahaz-micro-nav--aurora .shahaz-micro-nav__eyebrow { color: #fff1a6; } .shahaz-micro-nav--aurora .shahaz-micro-nav__cta { background: linear-gradient(145deg, #ff1744 0%, #ff4b00 48%, #ff008f 100%); border-color: rgba(255,236,150,.95); box-shadow: 0 7px 16px rgba(85,0,25,.28), inset 0 1px 0 rgba(255,255,255,.65); } .shahaz-micro-nav--aurora .shahaz-micro-nav__cta-line { background: #fff2a8; box-shadow: 0 0 10px rgba(255,240,150,.95); } .shahaz-micro-nav--aurora .shahaz-micro-nav__petal { background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,151,0,.88), rgba(255,0,143,.72)); } /* 02 — FEATURED COLLECTION: hot orange → hot red → hot magenta */ .shahaz-micro-nav--silk .shahaz-micro-nav__link { background: radial-gradient(circle at 82% 30%, rgba(255,255,255,.18), transparent 26%), linear-gradient(112deg, #ff6a00 0%, #ff2d00 38%, #e9005f 70%, #ff008f 100%); border-color: rgba(255,224,120,.98); box-shadow: 0 12px 28px rgba(255,70,0,.28), 0 0 0 1px rgba(255,255,255,.2) inset, 0 0 24px rgba(255,0,143,.18); } .shahaz-micro-nav--silk .shahaz-micro-nav__title, .shahaz-micro-nav--silk .shahaz-micro-nav__hint, .shahaz-micro-nav--silk .shahaz-micro-nav__cta { color: #fff; } .shahaz-micro-nav--silk .shahaz-micro-nav__eyebrow { color: #fff4ad; } .shahaz-micro-nav--silk .shahaz-micro-nav__cta { background: linear-gradient(145deg, #ff8a00 0%, #ff1744 52%, #ff008f 100%); border-color: rgba(255,239,155,.96); box-shadow: 0 7px 16px rgba(92,0,28,.28), inset 0 1px 0 rgba(255,255,255,.7); } .shahaz-micro-nav--silk .shahaz-micro-nav__cta-line { background: #fff1a6; box-shadow: 0 0 10px rgba(255,240,150,.95); } .shahaz-micro-nav--silk .shahaz-micro-nav__petal { background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,111,0,.9), rgba(255,0,143,.75)); } /* 03 — FLASH SALE: hot magenta → hot red → hot orange */ .shahaz-micro-nav--prism .shahaz-micro-nav__link { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.13), transparent 30%), linear-gradient(108deg, #ff008f 0%, #ff006e 34%, #ff1744 68%, #ff6a00 100%); border-color: rgba(255,225,120,.98); box-shadow: 0 12px 28px rgba(255,0,110,.28), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 24px rgba(255,106,0,.2); } .shahaz-micro-nav--prism .shahaz-micro-nav__title, .shahaz-micro-nav--prism .shahaz-micro-nav__hint, .shahaz-micro-nav--prism .shahaz-micro-nav__cta { color: #fff; } .shahaz-micro-nav--prism .shahaz-micro-nav__eyebrow { color: #fff1a5; } .shahaz-micro-nav--prism .shahaz-micro-nav__cta { background: linear-gradient(145deg, #ff008f 0%, #ff1744 52%, #ff7a00 100%); border-color: rgba(255,239,155,.96); box-shadow: 0 7px 16px rgba(92,0,28,.28), inset 0 1px 0 rgba(255,255,255,.7); } .shahaz-micro-nav--prism .shahaz-micro-nav__cta-line { background: #fff1a6; box-shadow: 0 0 10px rgba(255,240,150,.95); } .shahaz-micro-nav--prism .shahaz-micro-nav__petal { background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,0,143,.9), rgba(255,106,0,.8)); } /* Keep the three requested ribbons readable on narrow screens too. */ @media (max-width: 767px) { .shahaz-micro-nav--aurora .shahaz-micro-nav__title, .shahaz-micro-nav--silk .shahaz-micro-nav__title, .shahaz-micro-nav--prism .shahaz-micro-nav__title, .shahaz-micro-nav--aurora .shahaz-micro-nav__hint, .shahaz-micro-nav--silk .shahaz-micro-nav__hint, .shahaz-micro-nav--prism .shahaz-micro-nav__hint, .shahaz-micro-nav--aurora .shahaz-micro-nav__cta, .shahaz-micro-nav--silk .shahaz-micro-nav__cta, .shahaz-micro-nav--prism .shahaz-micro-nav__cta { color: #fff; text-shadow: 0 1px 1px rgba(70,0,20,.55), 0 2px 8px rgba(70,0,20,.35); } } /* ========================================================================== * PHASE 45 — LUXURY WORLD HOMEPAGE PORTAL / THREE-PHOTO EDITORIAL PREVIEW * Adds only the three small Luxury World preview columns requested inside * the existing 07a portal. Existing portal copy/CTA and other sections remain * untouched. The whole portal remains one navigation target. * ========================================================================== */ .shz-home-luxury-entry__visuals{ position:absolute; right:clamp(22px,5vw,78px); top:50%; z-index:2; width:clamp(170px,18vw,230px); height:clamp(150px,17vw,210px); transform:translateY(-50%); pointer-events:none; filter:drop-shadow(0 16px 22px rgba(122,0,77,.16)); } .shz-home-luxury-entry__visual{ position:absolute; display:block; width:clamp(72px,7.2vw,96px); height:clamp(86px,8.8vw,116px); border:2px solid rgba(255,255,255,.92); border-radius:16px; overflow:hidden; background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%), var(--shz-lw-preview-image) center/cover no-repeat; box-shadow: 0 0 0 1px rgba(190,18,111,.34), 0 10px 24px rgba(122,0,77,.20), inset 0 1px 0 rgba(255,255,255,.95); transform-origin:center; transition:transform .35s ease,filter .35s ease; } .shz-home-luxury-entry__visual::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%,rgba(71,0,44,.24)), linear-gradient(135deg,rgba(255,0,143,.08),transparent 55%,rgba(255,180,55,.12)); } .shz-home-luxury-entry__visual--1{ left:8px; top:4px; transform:rotate(-7deg); } .shz-home-luxury-entry__visual--2{ left:46px; bottom:2px; transform:rotate(5deg); } .shz-home-luxury-entry__visual--3{ right:4px; top:34px; transform:rotate(8deg); } .shz-home-luxury-entry__link:hover .shz-home-luxury-entry__visual--1{ transform:translateY(-3px) rotate(-7deg) scale(1.025); } .shz-home-luxury-entry__link:hover .shz-home-luxury-entry__visual--2{ transform:translateY(3px) rotate(5deg) scale(1.025); } .shz-home-luxury-entry__link:hover .shz-home-luxury-entry__visual--3{ transform:translateY(-2px) rotate(8deg) scale(1.025); } /* Keep the editorial copy readable beside the photo cluster. */ @media (min-width:701px){ .shz-home-luxury-entry__copy{ padding-right:clamp(190px,20vw,250px); } } @media (max-width:700px){ .shz-home-luxury-entry__visuals{ right:10px; top:22px; width:142px; height:126px; transform:none; opacity:.92; } .shz-home-luxury-entry__visual{ width:58px; height:72px; border-radius:12px; } .shz-home-luxury-entry__visual--1{left:8px;top:0} .shz-home-luxury-entry__visual--2{left:38px;bottom:0} .shz-home-luxury-entry__visual--3{right:0;top:25px} .shz-home-luxury-entry__copy{ position:relative; z-index:4; padding-right:118px; } .shz-home-luxury-entry__copy strong{ max-width:72%; } } @media (max-width:390px){ .shz-home-luxury-entry__visuals{ right:6px; width:124px; height:112px; } .shz-home-luxury-entry__visual{ width:52px; height:64px; } .shz-home-luxury-entry__copy{ padding-right:103px; } } /* ========================================================================== SHAHAZ.COM — Homepage Micro Navigation Vertical Size Enhancement Phase 48: increase the existing micro-navigation ribbon height by ~30% while preserving its existing colors, artwork, typography, links and motion. ========================================================================== */ .shahaz-micro-nav { padding-inline: 0; width: 100%; } .shahaz-micro-nav__link { min-height: clamp(83px, 9.1vw, 112px); } .shahaz-micro-nav__copy { min-height: clamp(62px, 7vw, 86px); padding-block: 12px; } .shahaz-micro-nav__title { line-height: 1.2; } .shahaz-micro-nav__hint, .shahaz-micro-nav__eyebrow { line-height: 1.25; } .shahaz-micro-nav__cta { min-height: clamp(52px, 5.2vw, 60px); } @media (max-width: 479px) { .shahaz-micro-nav__link { min-height: 83px; } .shahaz-micro-nav__copy { min-height: 62px; padding-block: 10px; } .shahaz-micro-nav__cta { min-height: 52px; } } /* ======================================================================== PHASE 85 — LUXURY WORLD MICRO NAV: THREE DISTINCT BUTTONS The homepage Luxury World cluster now contains only Fashion, Beauty and the cluster does not repeat the same button style used elsewhere. ======================================================================== */ .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,1vw,12px); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(1){ --tile-a:#ff7a00;--tile-b:#ff1744;--tile-c:#ff008f; border-radius:18px 30px 16px 28px; transform:translateZ(8px) rotate(-.7deg); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(2){ --tile-a:#ff008f;--tile-b:#9a00ff;--tile-c:#ff3b30; border-radius:30px 16px 28px 18px; transform:translateZ(14px) rotate(.7deg); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(3){ --tile-a:#ff1744;--tile-b:#ff5a00;--tile-c:#d600ff; border-radius:14px 28px 20px 32px; transform:translateZ(10px) rotate(-.35deg); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(1)::after{ clip-path:polygon(0 8%,92% 0,100% 82%,88% 100%,7% 94%); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(2)::after{ clip-path:polygon(8% 0,100% 8%,94% 94%,0 100%); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(3)::after{ clip-path:polygon(0 16%,92% 0,100% 88%,8% 100%); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-label{ font-size:clamp(8px,1vw,11px); } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-code{ font-size:clamp(6px,.7vw,8px); letter-spacing:.08em; } @media (max-width:767px){ .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px!important; padding-inline:2px; } .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile{ min-width:0; min-height:62px!important; padding:6px 4px 5px!important; } } @media (max-width:390px){ .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{gap:4px!important;} .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-label{font-size:7px!important;} } /* ======================================================================== PHASE 49 — HOT SALE MICRO NAV 30% THINNER Only the Hot Sale "আরও দেখুন" micro-navigation is affected. The removed Recommended micro-navigation has no replacement gap. ======================================================================== */ .shahaz-micro-nav--orbit .shahaz-micro-nav__link { min-height: clamp(45px, 4.9vw, 60px); } .shahaz-micro-nav--orbit .shahaz-micro-nav__totem { flex-basis: clamp(32px, 3.5vw, 44px); width: clamp(32px, 3.5vw, 44px); height: clamp(40px, 4.2vw, 50px); } .shahaz-micro-nav--orbit .shahaz-micro-nav__copy { gap: clamp(4px, .8vw, 9px); padding-block: 4px; } .shahaz-micro-nav--orbit .shahaz-micro-nav__cta { min-height: clamp(31px, 3.2vw, 36px); } @media (max-width: 767px) { .shahaz-micro-nav--orbit .shahaz-micro-nav__link { min-height: 43px; gap: 5px; } .shahaz-micro-nav--orbit .shahaz-micro-nav__totem { flex-basis: 32px; width: 32px; height: 40px; margin-left: 2px; } .shahaz-micro-nav--orbit .shahaz-micro-nav__copy { gap: 3px; padding-block: 3px; } .shahaz-micro-nav--orbit .shahaz-micro-nav__title { font-size: 12px; } .shahaz-micro-nav--orbit .shahaz-micro-nav__hint { font-size: 7px; } .shahaz-micro-nav--orbit .shahaz-micro-nav__cta { min-height: 30px; padding-inline: 8px; font-size: 7px; } } /* ======================================================================== PHASE 50 — Micro Navigation Editorial Shape Collection Keeps the existing micro-nav content/links intact while giving each navigation ribbon a distinct compact silhouette. Homepage-only scope. ======================================================================== */ .shahaz-micro-nav--silk .shahaz-micro-nav__link { border-radius: 22px 22px 34px 12px; clip-path: polygon(0 0, 96% 0, 100% 32%, 98% 100%, 4% 100%, 0 68%); } .shahaz-micro-nav--silk .shahaz-micro-nav__link::after { border-radius: 18px 18px 30px 10px; border-top-color: rgba(255,255,255,.9); border-bottom-color: rgba(212,175,55,.45); } .shahaz-micro-nav--silk .shahaz-micro-nav__field::after { content: ""; position: absolute; left: 9%; bottom: -10px; width: 22%; height: 24px; border-radius: 50% 50% 0 0; background: linear-gradient(135deg, rgba(255,20,147,.18), rgba(212,175,55,.18)); transform: rotate(-3deg); animation: shahaz-micro-rise 5.8s ease-in-out infinite; } .shahaz-micro-nav--prism .shahaz-micro-nav__link { border-radius: 12px 30px 12px 30px; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%, 0 26%); } .shahaz-micro-nav--prism .shahaz-micro-nav__field::after { content: ""; position: absolute; right: 10%; top: -11px; width: 20%; height: 24px; border-radius: 0 0 50% 50%; background: linear-gradient(120deg, rgba(255,20,147,.18), rgba(255,102,0,.22)); transform: rotate(3deg); animation: shahaz-micro-drop 5.2s ease-in-out infinite; } .shahaz-micro-nav--ember .shahaz-micro-nav__link { border-radius: 14px 42px 14px 42px; clip-path: polygon(0 10%, 94% 0, 100% 50%, 94% 100%, 0 90%, 3% 50%); background: linear-gradient(100deg, rgba(255,59,0,.96), rgba(255,20,147,.9) 52%, rgba(255,126,0,.92)) !important; color: #fff; } .shahaz-micro-nav--ember .shahaz-micro-nav__title, .shahaz-micro-nav--ember .shahaz-micro-nav__hint, .shahaz-micro-nav--ember .shahaz-micro-nav__eyebrow, .shahaz-micro-nav--ember .shahaz-micro-nav__cta { color: #fff; text-shadow: 0 1px 2px rgba(82,0,25,.35); } .shahaz-micro-nav--ember .shahaz-micro-nav__cta-line { background: #ffd85a; } .shahaz-micro-nav--orbit .shahaz-micro-nav__link { width: calc(100% - 8%); margin-left: 8%; border-radius: 999px 18px 999px 18px; clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); background: linear-gradient(105deg, rgba(255,102,0,.96), rgba(255,20,147,.93), rgba(212,175,55,.3)) !important; color: #fff; } .shahaz-micro-nav--orbit .shahaz-micro-nav__title, .shahaz-micro-nav--orbit .shahaz-micro-nav__hint, .shahaz-micro-nav--orbit .shahaz-micro-nav__eyebrow, .shahaz-micro-nav--orbit .shahaz-micro-nav__cta { color: #fff; text-shadow: 0 1px 2px rgba(66,0,30,.4); } .shahaz-micro-nav--orbit .shahaz-micro-nav__cta-line { background: #ffe07a; } .shahaz-micro-nav--pearl .shahaz-micro-nav__link { border-radius: 999px 999px 24px 24px; clip-path: polygon(0 0, 100% 0, 96% 78%, 86% 100%, 14% 100%, 4% 78%); } .shahaz-micro-nav--pearl .shahaz-micro-nav__field::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 38%; height: 28px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,20,147,.16), transparent 68%); animation: shahaz-micro-pulse 4.8s ease-in-out infinite; } .shahaz-micro-nav--aurora .shahaz-micro-nav__link { border-radius: 10px 34px 10px 34px; clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%, 4% 50%); background: linear-gradient(112deg, rgba(255,20,147,.94), rgba(255,102,0,.9) 52%, rgba(255,20,147,.94)) !important; color: #fff; } .shahaz-micro-nav--aurora .shahaz-micro-nav__title, .shahaz-micro-nav--aurora .shahaz-micro-nav__hint, .shahaz-micro-nav--aurora .shahaz-micro-nav__eyebrow, .shahaz-micro-nav--aurora .shahaz-micro-nav__cta { color: #fff; text-shadow: 0 1px 2px rgba(66,0,30,.4); } .shahaz-micro-nav--aurora .shahaz-micro-nav__cta-line { background: #ffe07a; } .shahaz-micro-nav--aurora .shahaz-micro-nav__field::before { content: ""; position: absolute; left: 24%; top: -10px; width: 18%; height: 22px; border-radius: 0 0 60% 60%; background: rgba(255,255,255,.16); transform: rotate(-4deg); animation: shahaz-micro-drop 6s ease-in-out .8s infinite; } @keyframes shahaz-micro-rise { 0%,100% { transform: translateY(5px) rotate(-3deg); opacity: .35; } 50% { transform: translateY(-7px) rotate(3deg); opacity: .9; } } @keyframes shahaz-micro-drop { 0%,100% { transform: translateY(-4px) rotate(3deg); opacity: .35; } 50% { transform: translateY(7px) rotate(-2deg); opacity: .9; } } @keyframes shahaz-micro-pulse { 0%,100% { transform: translateX(-50%) scaleX(.72); opacity: .25; } 50% { transform: translateX(-50%) scaleX(1); opacity: .8; } } @media (max-width: 767px) { .shahaz-micro-nav--orbit .shahaz-micro-nav__link { width: 96%; margin-left: 4%; } .shahaz-micro-nav--silk .shahaz-micro-nav__field::after, .shahaz-micro-nav--prism .shahaz-micro-nav__field::after, .shahaz-micro-nav--aurora .shahaz-micro-nav__field::before { opacity: .65; } } /* ========================================================================== PHASE 50 — APP-STYLE 3D POP-OUT MICRO NAV The tile stays compact; its information bubbles appear to emerge from the tile in different directions, grow in 3D perspective, then dissolve. Desktop layout/content remains unchanged outside this component. ========================================================================== */ .shahaz-micro-nav__link{ overflow:visible; transform-style:preserve-3d; will-change:transform,box-shadow; box-shadow: 0 8px 0 rgba(82,0,58,.16), 0 13px 24px rgba(72,0,55,.18), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -3px 0 rgba(86,0,67,.16); transition:transform .22s cubic-bezier(.2,.85,.25,1), box-shadow .22s cubic-bezier(.2,.85,.25,1), filter .22s ease; } .shahaz-micro-nav__link::after{ box-shadow:inset 0 -2px 0 rgba(255,255,255,.18); } .shahaz-micro-nav__link:hover{ transform:translateY(-3px) translateZ(0) scale(1.004); box-shadow: 0 11px 0 rgba(82,0,58,.15), 0 18px 30px rgba(72,0,55,.22), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(86,0,67,.14); } .shahaz-micro-nav__link:active, .shahaz-micro-nav__link:focus-visible{ transform:translateY(5px) scale(.994); box-shadow: 0 2px 0 rgba(82,0,58,.20), 0 6px 13px rgba(72,0,55,.16), inset 0 2px 4px rgba(55,0,45,.14); } .shahaz-micro-nav__message-stack{ overflow:visible; perspective:700px; transform-style:preserve-3d; } .shahaz-micro-nav__message{ transform-origin:50% 100%; backface-visibility:hidden; transform-style:preserve-3d; will-change:transform,opacity,filter; animation-duration:8.8s; animation-timing-function:cubic-bezier(.18,.76,.2,1); animation-iteration-count:infinite; filter:drop-shadow(0 9px 10px rgba(38,0,38,.20)); } .shahaz-micro-nav__message::before{ content:""; position:absolute; inset:2px; border-radius:inherit; border:1px solid rgba(255,255,255,.26); pointer-events:none; } .shahaz-micro-nav__message--1{ animation-name:shzPopUp3D; } .shahaz-micro-nav__message--2{ animation-name:shzPopRight3D; } .shahaz-micro-nav__message--3{ animation-name:shzPopDown3D; } .shahaz-micro-nav--silk .shahaz-micro-nav__message--1{animation-name:shzPopDiagonal3D;} .shahaz-micro-nav--silk .shahaz-micro-nav__message--2{animation-name:shzPopUp3D;} .shahaz-micro-nav--silk .shahaz-micro-nav__message--3{animation-name:shzPopLeft3D;} .shahaz-micro-nav--prism .shahaz-micro-nav__message--1{animation-name:shzPopRight3D;} .shahaz-micro-nav--prism .shahaz-micro-nav__message--2{animation-name:shzPopDiagonal3D;} .shahaz-micro-nav--prism .shahaz-micro-nav__message--3{animation-name:shzPopUp3D;} .shahaz-micro-nav--ember .shahaz-micro-nav__message--1{animation-name:shzPopUp3D;} .shahaz-micro-nav--ember .shahaz-micro-nav__message--2{animation-name:shzPopDownRight3D;} .shahaz-micro-nav--ember .shahaz-micro-nav__message--3{animation-name:shzPopLeft3D;} .shahaz-micro-nav--orbit .shahaz-micro-nav__message--1{animation-name:shzPopRight3D;} .shahaz-micro-nav--orbit .shahaz-micro-nav__message--2{animation-name:shzPopUp3D;} .shahaz-micro-nav--orbit .shahaz-micro-nav__message--3{animation-name:shzPopDownLeft3D;} .shahaz-micro-nav--pearl .shahaz-micro-nav__message--1{animation-name:shzPopDiagonal3D;} .shahaz-micro-nav--pearl .shahaz-micro-nav__message--2{animation-name:shzPopDown3D;} .shahaz-micro-nav--pearl .shahaz-micro-nav__message--3{animation-name:shzPopRight3D;} .shahaz-micro-nav--ripple .shahaz-micro-nav__message--1{animation-name:shzPopDownLeft3D;} .shahaz-micro-nav--ripple .shahaz-micro-nav__message--2{animation-name:shzPopUp3D;} .shahaz-micro-nav--ripple .shahaz-micro-nav__message--3{animation-name:shzPopRight3D;} @keyframes shzPopUp3D{ 0%,7%{opacity:0;transform:translate3d(0,18px,0) rotateX(62deg) scale(.42);filter:blur(3px) drop-shadow(0 2px 3px rgba(38,0,38,.08))} 13%{opacity:1;transform:translate3d(0,4px,20px) rotateX(18deg) scale(.82);filter:blur(0) drop-shadow(0 8px 9px rgba(38,0,38,.22))} 22%,29%{opacity:1;transform:translate3d(0,-18px,42px) rotateX(0) scale(1.12);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(0,-52px,70px) rotateX(-10deg) scale(1.34);filter:blur(2px) drop-shadow(0 18px 18px rgba(38,0,38,.08))} 100%{opacity:0;transform:translate3d(0,-52px,70px) scale(1.34)} } @keyframes shzPopRight3D{ 0%,7%{opacity:0;transform:translate3d(-2px,14px,0) rotateY(-58deg) scale(.42);filter:blur(3px)} 13%{opacity:1;transform:translate3d(10px,3px,18px) rotateY(-18deg) scale(.82);filter:blur(0)} 22%,29%{opacity:1;transform:translate3d(48px,-5px,44px) rotateY(0) scale(1.12);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(92px,-17px,68px) rotateY(8deg) scale(1.34);filter:blur(2px)} 100%{opacity:0;transform:translate3d(92px,-17px,68px) scale(1.34)} } @keyframes shzPopDown3D{ 0%,7%{opacity:0;transform:translate3d(0,-16px,0) rotateX(-58deg) scale(.42);filter:blur(3px)} 13%{opacity:1;transform:translate3d(0,-2px,18px) rotateX(-18deg) scale(.82);filter:blur(0)} 22%,29%{opacity:1;transform:translate3d(0,22px,44px) rotateX(0) scale(1.10);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(0,58px,68px) rotateX(10deg) scale(1.32);filter:blur(2px)} 100%{opacity:0;transform:translate3d(0,58px,68px) scale(1.32)} } @keyframes shzPopLeft3D{ 0%,7%{opacity:0;transform:translate3d(16px,12px,0) rotateY(58deg) scale(.42);filter:blur(3px)} 13%{opacity:1;transform:translate3d(-8px,2px,18px) rotateY(18deg) scale(.82);filter:blur(0)} 22%,29%{opacity:1;transform:translate3d(-48px,-7px,44px) rotateY(0) scale(1.12);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(-92px,-19px,68px) rotateY(-8deg) scale(1.34);filter:blur(2px)} 100%{opacity:0;transform:translate3d(-92px,-19px,68px) scale(1.34)} } @keyframes shzPopDiagonal3D{ 0%,7%{opacity:0;transform:translate3d(-12px,15px,0) rotateX(48deg) rotateY(-48deg) scale(.4);filter:blur(3px)} 13%{opacity:1;transform:translate3d(8px,0,20px) rotateX(14deg) rotateY(-14deg) scale(.82);filter:blur(0)} 22%,29%{opacity:1;transform:translate3d(42px,-24px,46px) rotateX(0) rotateY(0) scale(1.13);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(78px,-60px,70px) rotateX(-8deg) rotateY(8deg) scale(1.35);filter:blur(2px)} 100%{opacity:0;transform:translate3d(78px,-60px,70px) scale(1.35)} } @keyframes shzPopDownRight3D{ 0%,7%{opacity:0;transform:translate3d(-10px,-14px,0) rotateX(-48deg) rotateY(-42deg) scale(.4);filter:blur(3px)} 13%{opacity:1;transform:translate3d(8px,1px,20px) rotateX(-12deg) rotateY(-12deg) scale(.82);filter:blur(0)} 22%,29%{opacity:1;transform:translate3d(40px,28px,46px) rotateX(0) rotateY(0) scale(1.12);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(78px,66px,70px) rotateX(8deg) rotateY(8deg) scale(1.34);filter:blur(2px)} 100%{opacity:0;transform:translate3d(78px,66px,70px) scale(1.34)} } @keyframes shzPopDownLeft3D{ 0%,7%{opacity:0;transform:translate3d(12px,-14px,0) rotateX(-48deg) rotateY(42deg) scale(.4);filter:blur(3px)} 13%{opacity:1;transform:translate3d(-8px,1px,20px) rotateX(-12deg) rotateY(12deg) scale(.82);filter:blur(0)} 22%,29%{opacity:1;transform:translate3d(-40px,28px,46px) rotateX(0) rotateY(0) scale(1.12);filter:blur(0) drop-shadow(0 15px 13px rgba(38,0,38,.25))} 37%{opacity:0;transform:translate3d(-78px,66px,70px) rotateX(8deg) rotateY(-8deg) scale(1.34);filter:blur(2px)} 100%{opacity:0;transform:translate3d(-78px,66px,70px) scale(1.34)} } @media (max-width:767px){ .shahaz-micro-nav{overflow:visible;z-index:2} .shahaz-micro-nav__link{ min-height:62px; overflow:visible; box-shadow: 0 6px 0 rgba(82,0,58,.17), 0 10px 18px rgba(72,0,55,.18), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -3px 0 rgba(86,0,67,.15); } .shahaz-micro-nav__message-stack{ right:58px; top:-8px; width:150px; height:58px; } .shahaz-micro-nav__message{ max-width:150px; white-space:nowrap; overflow:visible; } } @media(max-width:390px){ .shahaz-micro-nav__message-stack{right:50px;width:130px} .shahaz-micro-nav__message{max-width:130px;font-size:7px} } @media(prefers-reduced-motion:reduce){ .shahaz-micro-nav__link{transition:none} .shahaz-micro-nav__message{animation:none!important} .shahaz-micro-nav__message--1{opacity:1;transform:none} } /* ======================================================================== PHASE 53 — MICRO NAV APP-TILE COMPACT MODE Replace long horizontal ribbons with compact app-like tile clusters. The parent link remains the existing destination; no routes are changed. ======================================================================== */ .shahaz-micro-nav{ width:auto; max-width:min(100%, 760px); margin:clamp(8px,1.2vw,16px) auto; overflow:visible; } .shahaz-micro-nav__link{ width:auto; min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(8px,1vw,14px); padding:clamp(7px,1vw,11px); border-radius:18px; } .shahaz-micro-nav__totem{ width:clamp(32px,4vw,46px)!important; height:clamp(38px,4.6vw,54px)!important; flex:0 0 auto!important; } .shahaz-micro-nav__copy{ min-height:0!important; padding:0!important; gap:2px!important; } .shahaz-micro-nav__eyebrow{font-size:clamp(7px,.7vw,9px)!important;} .shahaz-micro-nav__title{font-size:clamp(12px,1.15vw,17px)!important;} .shahaz-micro-nav__hint{font-size:clamp(7px,.7vw,9px)!important;} .shahaz-micro-nav__cta{min-height:34px!important;padding-inline:10px!important;font-size:9px!important;} .shahaz-micro-nav__app-grid{ grid-column:1 / -1; display:grid; gap:6px; align-items:stretch; perspective:900px; } .shahaz-micro-nav--silk .shahaz-micro-nav__app-grid{grid-template-columns:repeat(5,minmax(0,1fr));} .shahaz-micro-nav--prism .shahaz-micro-nav__app-grid{grid-template-columns:repeat(4,minmax(0,1fr));} .shahaz-micro-nav--ember .shahaz-micro-nav__app-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .shahaz-micro-nav--orbit .shahaz-micro-nav__app-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .shahaz-micro-nav--pearl .shahaz-micro-nav__app-grid{grid-template-columns:repeat(4,minmax(0,1fr));} .shahaz-micro-nav--aurora .shahaz-micro-nav__app-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .shahaz-micro-nav__app-tile{ position:relative; min-width:0; min-height:42px; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; border:1px solid rgba(255,255,255,.42); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.08)); box-shadow:0 4px 0 rgba(64,0,45,.18),0 8px 14px rgba(64,0,45,.14),inset 0 1px 0 rgba(255,255,255,.7); transform:translateY(0) translateZ(0); transition:transform .22s cubic-bezier(.2,.85,.25,1),box-shadow .22s ease,filter .22s ease; overflow:hidden; } .shahaz-micro-nav__app-icon{width:11px;height:11px;border-radius:4px 7px 4px 7px;background:linear-gradient(135deg,#ff3b30,#ff8a00 55%,#e6007e);box-shadow:0 2px 4px rgba(70,0,50,.28);flex:0 0 auto;} .shahaz-micro-nav__app-label{font-size:8px;font-weight:800;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .shahaz-micro-nav__app-tile:nth-child(2) .shahaz-micro-nav__app-icon{transform:rotate(45deg);} .shahaz-micro-nav__app-tile:nth-child(3) .shahaz-micro-nav__app-icon{border-radius:50%;} .shahaz-micro-nav__app-tile:nth-child(4) .shahaz-micro-nav__app-icon{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);} .shahaz-micro-nav__app-tile:nth-child(5) .shahaz-micro-nav__app-icon{border-radius:2px 9px 2px 9px;} .shahaz-micro-nav__link:hover .shahaz-micro-nav__app-tile{transform:translateY(-3px) translateZ(8px);box-shadow:0 7px 0 rgba(64,0,45,.18),0 12px 18px rgba(64,0,45,.18),inset 0 1px 0 rgba(255,255,255,.82);} .shahaz-micro-nav__link:active .shahaz-micro-nav__app-tile{transform:translateY(3px) translateZ(-2px);box-shadow:0 2px 0 rgba(64,0,45,.2),0 5px 9px rgba(64,0,45,.12),inset 0 2px 4px rgba(55,0,45,.12);} @media(max-width:767px){ .shahaz-micro-nav{width:calc(100% - 18px);max-width:430px;margin:8px auto;} .shahaz-micro-nav__link{grid-template-columns:1fr;gap:6px;padding:7px;} .shahaz-micro-nav__totem{display:none!important;} .shahaz-micro-nav__copy{text-align:center;} .shahaz-micro-nav__cta{position:absolute;right:6px;top:6px;min-height:26px!important;padding-inline:7px!important;font-size:7px!important;} .shahaz-micro-nav__app-grid{gap:5px;} .shahaz-micro-nav__app-tile{min-height:36px;padding:5px 3px;border-radius:10px;gap:3px;} .shahaz-micro-nav__app-icon{width:9px;height:9px;} .shahaz-micro-nav__app-label{font-size:7px;} .shahaz-micro-nav__message-stack{right:24px;top:-10px;width:125px;height:48px;} .shahaz-micro-nav__message{max-width:125px;font-size:7px;} } @media(max-width:390px){ .shahaz-micro-nav{width:calc(100% - 12px);} .shahaz-micro-nav__app-grid{gap:4px;} .shahaz-micro-nav__app-tile{min-height:33px;padding-inline:2px;} .shahaz-micro-nav__app-label{font-size:6.5px;} } /* ======================================================================== SHAHAZ.COM — PHASE 54: TRUE APP-TILE MICRO NAVIGATION The old full-width ribbon is intentionally replaced. Each micro-nav is a compact marketplace app cluster with tiny internal promo banners and 3D/popup messaging. No horizontal sticky strip is used. ======================================================================== */ .shahaz-micro-nav.shahaz-micro-nav--app-cluster{ width:min(100%, 560px)!important; max-width:560px!important; margin:clamp(8px,1.4vw,16px) auto!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; contain:layout style paint; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:5px 8px; margin:0 0 7px; padding:0 6px; text-align:center; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head .shahaz-micro-nav__eyebrow{ display:inline-block!important; font-size:7px!important; line-height:1!important; letter-spacing:.14em; color:var(--shahaz-magenta,#ff1493)!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head .shahaz-micro-nav__title{ display:inline-block!important; font-size:12px!important; line-height:1.1!important; color:var(--shahaz-ink,#24101f)!important; text-shadow:none!important; white-space:nowrap; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head .shahaz-micro-nav__hint{ display:inline-block!important; font-size:7px!important; line-height:1.1!important; color:#7b536e!important; white-space:nowrap; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{ width:100%; display:grid!important; grid-template-columns:repeat(var(--mnav-count,5),minmax(0,1fr))!important; gap:7px!important; align-items:stretch; perspective:1000px; padding:2px 4px 6px; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile{ --tile-a:#ff1744; --tile-b:#ff7a00; --tile-c:#ff1493; position:relative!important; isolation:isolate; display:grid!important; grid-template-rows:auto auto 14px!important; align-content:center; justify-items:center; min-width:0!important; min-height:76px!important; padding:8px 5px 7px!important; border:1px solid rgba(255,255,255,.9)!important; border-radius:15px!important; text-decoration:none!important; color:#fff!important; background:linear-gradient(145deg,var(--tile-a),var(--tile-b) 52%,var(--tile-c))!important; box-shadow:0 4px 0 rgba(79,0,49,.32),0 9px 15px rgba(79,0,49,.16),inset 0 1px 0 rgba(255,255,255,.72)!important; transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg); transform-style:preserve-3d; transition:transform .28s cubic-bezier(.2,.8,.25,1),box-shadow .28s ease,filter .28s ease; overflow:visible!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(2){--tile-a:#ff4b00;--tile-b:#ff1744;--tile-c:#ff1493;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(3){--tile-a:#ff1493;--tile-b:#ff1744;--tile-c:#ff7a00;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(4){--tile-a:#ff7a00;--tile-b:#ff1493;--tile-c:#ff1744;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(5){--tile-a:#ff1744;--tile-b:#ff1493;--tile-c:#ff7a00;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile::before{ content:""; position:absolute; inset:1px; z-index:-1; border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.22),transparent 42%,rgba(90,0,60,.14)); pointer-events:none; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile::after{ content:""; position:absolute; left:12%; right:12%; bottom:-4px; height:5px; border-radius:50%; background:rgba(66,0,44,.18); filter:blur(4px); z-index:-2; transition:transform .28s ease,opacity .28s ease; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-icon{ width:17px!important; height:17px!important; margin:0 0 3px; border:1px solid rgba(255,255,255,.72); background:linear-gradient(145deg,#fff1a6,#ff5a9d 48%,#7b00e8)!important; box-shadow:0 3px 5px rgba(70,0,50,.28),inset 0 1px 0 rgba(255,255,255,.8)!important; transform:translateZ(10px) rotate(0deg)!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(2) .shahaz-micro-nav__app-icon{transform:translateZ(10px) rotate(45deg)!important;border-radius:5px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(3) .shahaz-micro-nav__app-icon{transform:translateZ(10px)!important;border-radius:50%!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(4) .shahaz-micro-nav__app-icon{transform:translateZ(10px)!important;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(5) .shahaz-micro-nav__app-icon{transform:translateZ(10px) rotate(-12deg)!important;border-radius:3px 9px 3px 9px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-code{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:6px; line-height:1; font-weight:900; letter-spacing:.1em; opacity:.82; transform:translateZ(9px); } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-label{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px!important; line-height:1.15!important; font-weight:900!important; color:#fff!important; text-shadow:0 1px 2px rgba(70,0,45,.45); transform:translateZ(12px); } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner{ position:relative; width:100%; min-width:0; height:14px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:1px solid rgba(255,255,255,.48); border-radius:999px; background:rgba(70,0,50,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); overflow:hidden; transform:translateZ(8px) rotateX(0deg); } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner span{ display:block; max-width:100%; font-size:6px; line-height:1; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:shahaz-mini-banner-drift 3.8s ease-in-out infinite; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__pop-message{ position:absolute; left:50%; bottom:58%; width:max-content; max-width:min(170px,42vw); padding:5px 8px; border:1px solid rgba(255,255,255,.82); border-radius:9px 9px 4px 9px; background:linear-gradient(135deg,#ff1744,#ff1493 55%,#ff7a00); color:#fff; font-size:7px; line-height:1.15; font-weight:900; text-align:center; box-shadow:0 7px 16px rgba(68,0,47,.25),inset 0 1px 0 rgba(255,255,255,.62); opacity:0; pointer-events:none; z-index:20; transform:translate3d(-50%,12px,0) scale(.55) rotateX(-18deg); transform-origin:50% 100%; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(2) .shahaz-micro-nav__pop-message{animation:shahaz-pop-right 5.8s ease-in-out 1.2s infinite;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(3) .shahaz-micro-nav__pop-message{animation:shahaz-pop-left 5.4s ease-in-out 2.1s infinite;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(4) .shahaz-micro-nav__pop-message{animation:shahaz-pop-down 5.9s ease-in-out .7s infinite;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(5) .shahaz-micro-nav__pop-message{animation:shahaz-pop-diagonal 6.2s ease-in-out 1.8s infinite;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__tile-arrow{ position:absolute; top:5px; right:6px; font-size:8px; font-weight:900; color:#fff4bc; opacity:.9; transform:translateZ(13px); } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:hover, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:focus-visible{ transform:translate3d(0,-5px,12px) rotateX(3deg) rotateY(-2deg)!important; filter:saturate(1.08) brightness(1.04); box-shadow:0 8px 0 rgba(79,0,49,.32),0 15px 22px rgba(79,0,49,.2),inset 0 1px 0 rgba(255,255,255,.82)!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:hover::after, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:focus-visible::after{transform:scale(.78);opacity:.55;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:active{ transform:translate3d(0,3px,0) scale(.985)!important; box-shadow:0 1px 0 rgba(79,0,49,.34),0 4px 8px rgba(79,0,49,.14),inset 0 2px 5px rgba(70,0,45,.18)!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:focus-visible{outline:2px solid #d4af37;outline-offset:3px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__field, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__petal, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__orbit, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__spark, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__sheen, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__totem, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__message-stack, .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cta{display:none!important;} .shahaz-micro-nav--silk.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:5;} .shahaz-micro-nav--prism.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:4;} .shahaz-micro-nav--ember.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:3;} .shahaz-micro-nav--orbit.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:2;} .shahaz-micro-nav--pearl.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:4;} .shahaz-micro-nav--aurora.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:3;} .shahaz-micro-nav--bloom.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:3;} .shahaz-micro-nav--ripple.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{--mnav-count:3;} @keyframes shahaz-mini-banner-drift{0%,100%{transform:translateX(0);opacity:.75}50%{transform:translateX(4px);opacity:1}} @keyframes shahaz-pop-right{0%,48%{opacity:0;transform:translate3d(-50%,12px,0) scale(.55) rotateX(-18deg)}58%{opacity:1;transform:translate3d(-8%,0,32px) scale(1.05) rotateX(0)}72%{opacity:1;transform:translate3d(24%, -4px,42px) scale(1.18) rotateX(0)}86%,100%{opacity:0;transform:translate3d(52%,-14px,52px) scale(1.35) rotateX(0)}} @keyframes shahaz-pop-left{0%,45%{opacity:0;transform:translate3d(-50%,10px,0) scale(.52) rotateY(18deg)}57%{opacity:1;transform:translate3d(-92%,0,34px) scale(1.04) rotateY(0)}72%{opacity:1;transform:translate3d(-128%,-6px,44px) scale(1.18) rotateY(0)}88%,100%{opacity:0;transform:translate3d(-166%,-18px,56px) scale(1.38) rotateY(0)}} @keyframes shahaz-pop-down{0%,48%{opacity:0;transform:translate3d(-50%,-8px,0) scale(.55) rotateX(18deg)}59%{opacity:1;transform:translate3d(-50%,12px,32px) scale(1.02) rotateX(0)}74%{opacity:1;transform:translate3d(-50%,25px,42px) scale(1.16) rotateX(0)}88%,100%{opacity:0;transform:translate3d(-50%,42px,52px) scale(1.34) rotateX(0)}} @keyframes shahaz-pop-diagonal{0%,46%{opacity:0;transform:translate3d(-50%,10px,0) scale(.5) rotateX(-16deg) rotateY(12deg)}58%{opacity:1;transform:translate3d(-20%,-4px,34px) scale(1.04) rotateX(0) rotateY(0)}73%{opacity:1;transform:translate3d(16%,-18px,46px) scale(1.18) rotateX(0) rotateY(0)}89%,100%{opacity:0;transform:translate3d(52%,-34px,58px) scale(1.38) rotateX(0) rotateY(0)}} @media(max-width:767px){ .shahaz-micro-nav.shahaz-micro-nav--app-cluster{width:min(100%,430px)!important;margin:7px auto!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head{margin-bottom:5px;gap:3px 6px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head .shahaz-micro-nav__title{font-size:10px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head .shahaz-micro-nav__eyebrow{font-size:6px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__cluster-head .shahaz-micro-nav__hint{font-size:6px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{gap:5px!important;padding-inline:3px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile{min-height:68px!important;padding:7px 4px 6px!important;border-radius:13px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-icon{width:15px!important;height:15px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-code{font-size:5.5px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-label{font-size:7px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner{height:13px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner span{font-size:5.5px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__pop-message{max-width:145px;font-size:6.5px;padding:4px 6px;} } @media(max-width:390px){ .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-grid{gap:4px!important;padding-inline:2px;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile{min-height:62px!important;padding:6px 3px 5px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-label{font-size:6.5px!important;} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner span{font-size:5px;} } /* Phase 57 — destination app tiles: bent micro-banners + marketplace entry motion. */ .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner{ transform:translateZ(8px) rotate(-2.5deg) skewX(-3deg)!important; transform-origin:center bottom; position:relative; overflow:visible!important; clip-path:polygon(4% 12%,96% 0,100% 78%,92% 100%,7% 88%,0 24%); background:linear-gradient(110deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 38%,rgba(255,219,102,.24) 70%,rgba(255,255,255,.12))!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner::before{ content:""; position:absolute; left:-8%; top:-35%; width:38%; height:170%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); transform:rotate(18deg); animation:shahaz-mini-banner-sheen 3.2s ease-in-out infinite; pointer-events:none; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(2) .shahaz-micro-nav__mini-banner{transform:translateZ(8px) rotate(3deg) skewX(4deg)!important;clip-path:polygon(0 8%,90% 0,100% 70%,91% 100%,8% 92%,2% 34%);} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(3) .shahaz-micro-nav__mini-banner{transform:translateZ(8px) rotate(-4deg) skewX(5deg)!important;clip-path:polygon(6% 0,100% 14%,94% 92%,12% 100%,0 42%);} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(4) .shahaz-micro-nav__mini-banner{transform:translateZ(8px) rotate(2deg) skewX(-5deg)!important;clip-path:polygon(0 20%,92% 0,100% 86%,12% 100%,3% 64%);} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile:nth-child(5) .shahaz-micro-nav__mini-banner{transform:translateZ(8px) rotate(-1.8deg) skewX(6deg)!important;clip-path:polygon(4% 0,100% 18%,94% 100%,0 82%);} .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile--target-mobile-marketplace{ --tile-a:#ff0f87;--tile-b:#ff4b00;--tile-c:#00c98b; animation:shahaz-market-entry-float 4.8s ease-in-out infinite; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile--target-mobile-marketplace .shahaz-micro-nav__mini-banner{ background:linear-gradient(110deg,rgba(255,15,135,.62),rgba(255,75,0,.46) 52%,rgba(0,201,139,.58))!important; box-shadow:0 3px 8px rgba(255,15,135,.24),inset 0 1px 0 rgba(255,255,255,.58)!important; } .shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile--target-mobile-marketplace .shahaz-micro-nav__app-label::after{ content:" • LIVE"; font-size:.72em; color:#fff5a6; animation:shahaz-live-label-pulse 1.8s ease-in-out infinite; } @keyframes shahaz-mini-banner-sheen{0%,55%{left:-45%;opacity:0}65%{opacity:1}88%,100%{left:120%;opacity:0}} @keyframes shahaz-market-entry-float{0%,100%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg)}25%{transform:translate3d(0,-2px,4px) rotateX(2deg) rotateY(-2deg)}50%{transform:translate3d(1px,-1px,6px) rotateX(-2deg) rotateY(2deg)}75%{transform:translate3d(-1px,-3px,4px) rotateX(1deg) rotateY(-1deg)}} @keyframes shahaz-live-label-pulse{0%,100%{opacity:.72}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.shahaz-micro-nav--app-cluster .shahaz-micro-nav__app-tile--target-mobile-marketplace,.shahaz-micro-nav--app-cluster .shahaz-micro-nav__mini-banner::before{animation:none!important}} /* ======================================================================== PHASE 102 — HOMEPAGE FASHION GENDER NAV The first micro-navigation under Luxury Promotion is now the dedicated Men's/Women's fashion gateway. Each tile carries a small dressed-person fashion portrait in its own corner column while keeping the existing app-tile interaction and animation system intact. ======================================================================== */ .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile{ grid-template-columns:minmax(0,1fr) 43%!important; grid-template-rows:auto auto 14px!important; justify-items:start!important; align-items:center!important; text-align:left; padding:8px 6px 7px 9px!important; overflow:hidden!important; } .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-icon, .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-code, .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-label, .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__mini-banner{ grid-column:1; justify-self:start; position:relative; z-index:6; } .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-icon{margin-left:1px;} .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-code{max-width:92%;} .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-label{ max-width:100%; font-size:clamp(8px,1.4vw,11px)!important; line-height:1.15!important; white-space:normal; } .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__mini-banner{ width:100%; max-width:100%; } .shahaz-fashion-gender-portrait{ position:absolute; z-index:4; right:-4px; bottom:-12px; width:48%; height:92%; display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none; filter:drop-shadow(0 6px 8px rgba(42,0,40,.28)); transition:transform .28s ease,filter .28s ease; } .shahaz-fashion-gender-portrait img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; } .shahaz-fashion-gender-tile--mens-fashion{--tile-a:#0e1839!important;--tile-b:#173e70!important;--tile-c:#d3a52f!important;} .shahaz-fashion-gender-tile--women-fashion{--tile-a:#64103f!important;--tile-b:#d71976!important;--tile-c:#ffb24b!important;} .shahaz-fashion-gender-tile:hover .shahaz-fashion-gender-portrait, .shahaz-fashion-gender-tile:focus-visible .shahaz-fashion-gender-portrait{ transform:translateY(-4px) scale(1.035) rotate(-1deg); filter:drop-shadow(0 10px 12px rgba(42,0,40,.34)); } .shahaz-fashion-gender-tile .shahaz-micro-nav__tile-arrow{z-index:9;} @media(max-width:767px){ .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile{min-height:76px!important;padding:7px 5px 6px 7px!important;} .shahaz-fashion-gender-portrait{width:46%;right:-3px;bottom:-9px;height:92%;} .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__app-label{font-size:8px!important;max-width:95%;} .shahaz-micro-nav--app-cluster .shahaz-fashion-gender-tile .shahaz-micro-nav__mini-banner{max-width:96%;} } /* ======================================================================== PHASE 127 — REAL DESTINATION CARDS Replaces the former animated micro-navigation app buttons with lightweight, real destination cards. No floating/rotating/popup animation is used. ======================================================================== */ .shahaz-micro-nav--destination-cards{ width:min(100%, 1120px)!important; max-width:1120px!important; margin:clamp(10px,1.5vw,18px) auto!important; padding:0 clamp(8px,1.5vw,18px)!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; contain:layout style paint; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__cluster-head{ display:flex!important; align-items:baseline!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:3px 9px!important; margin:0 0 8px!important; padding:0 3px!important; text-align:left!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__eyebrow{ display:inline-block!important; color:var(--shahaz-magenta,#ff1493)!important; font-size:clamp(9px,1.1vw,13px)!important; line-height:1.1!important; font-weight:900!important; letter-spacing:.08em!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__title{ display:inline-block!important; color:var(--shahaz-ink,#24101f)!important; font-size:clamp(16px,2.2vw,24px)!important; line-height:1.12!important; font-weight:900!important; white-space:normal!important; text-shadow:none!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__hint{ display:inline-block!important; color:#745d6e!important; font-size:clamp(9px,1vw,12px)!important; line-height:1.15!important; white-space:normal!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-grid{ width:100%; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:clamp(8px,1.2vw,14px)!important; align-items:stretch!important; padding:0!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card{ --dest-accent:var(--shahaz-magenta,#ff1493); --dest-soft:#fff5fb; position:relative!important; display:flex!important; flex-direction:column!important; min-width:0!important; overflow:hidden!important; text-decoration:none!important; color:var(--shahaz-ink,#24101f)!important; background:#fff!important; border:1px solid color-mix(in srgb,var(--dest-accent) 28%,#eadfe7)!important; border-radius:16px!important; box-shadow:0 4px 14px rgba(46,18,43,.09),0 0 0 1px rgba(255,255,255,.7) inset!important; transform:none!important; transition:none!important; animation:none!important; contain:layout paint style; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:hover, .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:focus-visible, .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:active{ transform:none!important; animation:none!important; filter:none!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:focus-visible{ outline:2px solid var(--dest-accent)!important; outline-offset:2px!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:nth-child(2){--dest-accent:#d4af37;--dest-soft:#fffaf0;border-radius:12px 18px 12px 18px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:nth-child(3){--dest-accent:#0aa889;--dest-soft:#effbf7;border-radius:18px 12px 18px 12px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:nth-child(4){--dest-accent:#176fd0;--dest-soft:#f1f7ff;border-radius:12px 18px 18px 12px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card:nth-child(5){--dest-accent:#c27a16;--dest-soft:#fff8ee;border-radius:18px 12px 12px 18px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-media{ position:relative!important; aspect-ratio:16/10!important; min-height:0!important; overflow:hidden!important; background:var(--dest-soft)!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-media img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; border:0!important; margin:0!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card--fashion .shahaz-micro-nav__destination-media img{ object-fit:contain!important; padding:4px!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-badge{ position:absolute!important; left:7px!important; bottom:7px!important; max-width:calc(100% - 14px)!important; padding:4px 8px!important; border-radius:999px!important; background:var(--dest-accent)!important; color:#fff!important; font-size:clamp(7px,.85vw,10px)!important; line-height:1!important; font-weight:900!important; letter-spacing:.03em!important; box-shadow:0 2px 5px rgba(30,10,30,.18)!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-body{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto auto!important; gap:3px 7px!important; padding:8px 9px 9px!important; background:linear-gradient(180deg,#fff,var(--dest-soft))!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-kicker{ grid-column:1/-1!important; color:var(--dest-accent)!important; font-size:clamp(7px,.8vw,9px)!important; line-height:1!important; font-weight:900!important; letter-spacing:.06em!important; text-transform:uppercase!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-title{ grid-column:1/-1!important; min-width:0!important; color:#24101f!important; font-size:clamp(12px,1.35vw,16px)!important; line-height:1.18!important; font-weight:900!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-description{ min-width:0!important; color:#6d5b67!important; font-size:clamp(8px,.9vw,11px)!important; line-height:1.25!important; font-weight:600!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-cta{ align-self:end!important; justify-self:end!important; display:inline-flex!important; align-items:center!important; gap:2px!important; padding:5px 7px!important; border-radius:7px!important; background:var(--dest-accent)!important; color:#fff!important; font-size:clamp(8px,.85vw,10px)!important; line-height:1!important; font-weight:900!important; white-space:nowrap!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-cta span{font-size:1.15em!important;line-height:1!important;} @media (max-width:900px){ .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;} } @media (max-width:640px){ .shahaz-micro-nav--destination-cards{width:100%!important;margin:8px auto!important;padding-inline:6px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__cluster-head{margin-bottom:7px!important;padding-inline:3px!important;gap:2px 7px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__eyebrow{font-size:8px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__title{font-size:16px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__hint{font-size:8px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card{border-radius:13px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-media{aspect-ratio:1.35/1!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-badge{left:5px!important;bottom:5px!important;padding:4px 6px!important;font-size:7px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-body{padding:7px 7px 8px!important;gap:3px 5px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-kicker{font-size:7px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-title{font-size:12px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-description{font-size:8px!important;line-height:1.2!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-cta{font-size:8px!important;padding:5px 6px!important;} } @media (max-width:390px){ .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-grid{gap:6px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-body{padding:6px!important;} .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-description{display:none!important;} } @media (prefers-reduced-motion:reduce){ .shahaz-micro-nav--destination-cards *{animation:none!important;transition:none!important;} } /* ======================================================================== * SHAHAZ.COM — PHASE 131: HOMEPAGE EDGE-TO-EDGE SECTION REFINEMENT * Purpose: Homepage sections must touch the viewport edges horizontally. * Scope: Homepage only. Internal card/grid gaps are preserved; only the * outer section gutters, wrapper padding and outer margins are removed. * ======================================================================== */ /* PHASE 150 — announcement-to-hero separation. * Keep the first homepage hero/advertisement row visually below the * homepage announcement bar instead of touching/overlapping it. * Scope is homepage-only; no other page layout is changed. */ .shahaz-homepage > .shahaz-hero-component { margin-top: 3px !important; } /* Shared homepage section shell: no left/right gutter. */ .shahaz-homepage > .shahaz-sec, .shahaz-homepage > .shahaz-micro-nav, .shahaz-homepage > .shz-home-luxury-entry, .shahaz-homepage > .shahaz-luxury-promo-sec, .shahaz-homepage > .shahaz-hero-component { width: 100%; max-width: none; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* All shared section wrappers become true viewport-edge containers. */ .shahaz-homepage > .shahaz-sec { padding-left: 0 !important; padding-right: 0 !important; } /* Hero: remove the last horizontal inset from the 12-column grid. */ .shahaz-homepage .shahaz-hero-grid { width: 100%; max-width: none; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } /* Destination micro-navigation must also touch both screen edges. */ .shahaz-homepage .shahaz-micro-nav { width: 100%; max-width: none; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } /* Luxury World gateway is already full-width; remove any outer gutter. */ .shahaz-homepage .shz-home-luxury-entry { width: 100%; max-width: none; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Both Luxury Promotion instances are full-bleed at the homepage level. */ .shahaz-homepage .shahaz-luxury-promo-sec { width: 100%; max-width: none; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Prevent an inner fixed-width shell from recreating the old side gutters. */ .shahaz-homepage .shahaz-luxury-promo-main-wrap, .shahaz-homepage .shahaz-luxury-promo-bottom-row { width: 100%; max-width: none; box-sizing: border-box; } /* Mobile/desktop: section content itself starts at the viewport edge. * Do not alter internal grid gaps between cards. */ .shahaz-homepage .shahaz-stories-track, .shahaz-homepage .shahaz-voucher-track, .shahaz-homepage .shahaz-spotlight-track, .shahaz-homepage .shahaz-brand-grid, .shahaz-homepage .shahaz-cat-unified-grid, .shahaz-homepage .shahaz-p-grid, .shahaz-homepage .shahaz-p-grid-dense { width: 100%; max-width: none; box-sizing: border-box; } /* PHASE 137 — Luxury World homepage portal edge-to-edge final override. */ @media (max-width:700px){ .shahaz-homepage .shz-home-luxury-entry{padding-left:0 !important;padding-right:0 !important;} } @media (max-width:390px){ .shahaz-homepage .shz-home-luxury-entry{padding-left:0 !important;padding-right:0 !important;} } /* PHASE 141 — Keep only a 2px separation below the compact mobile Luxury World banner. */ @media (max-width:700px){ .shahaz-homepage .shz-home-luxury-entry{margin-bottom:-2px !important;} } /* ======================================================================== * PHASE 147B — HOMEPAGE FASHION GATEWAY LIVE PRODUCT IMAGES * Men's/Women's gateway cards use real catalog product images instead of the * old cartoon artwork. Two stacked image layers cross-fade smoothly. * ======================================================================== */ .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card--fashion .shahaz-fashion-rotator-media{ position:relative!important; overflow:hidden!important; isolation:isolate; } .shahaz-micro-nav--destination-cards .shahaz-fashion-rotator-layer{ position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center!important; padding:0!important; margin:0!important; opacity:0; visibility:hidden; transition:opacity 1.15s ease-in-out!important; will-change:opacity; backface-visibility:hidden; } .shahaz-micro-nav--destination-cards .shahaz-fashion-rotator-layer.is-visible{ opacity:1!important; visibility:visible!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__destination-card--fashion .shahaz-micro-nav__destination-badge{ z-index:4; } /* Keep homepage section headings crisp. The previous entrance opacity, * transform and heavy text-shadow treatment could make headings look soft * on some mobile browsers. No layout or content change is made here. */ .shahaz-sec-header{ opacity:1!important; transform:none!important; transition:none!important; filter:none!important; } .shahaz-sec-header .shahaz-sec-title, .shahaz-sec-header .shahaz-sec-subtitle{ filter:none!important; text-shadow:none!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__cluster-head, .shahaz-micro-nav--destination-cards .shahaz-micro-nav__cluster-head *{ filter:none!important; text-shadow:none!important; } @media (prefers-reduced-motion:reduce){ .shahaz-micro-nav--destination-cards .shahaz-fashion-rotator-layer{ transition:none!important; } } /* ======================================================================== * PHASE 150 — LUXURY WORLD / SUGGESTED PRODUCT SPACING REFINEMENT * - Keep the Luxury World heading-side descriptor clean and readable. * - Remove the Suggested Products gold underline completely. * - Reduce the Suggested Products product-column gap to exactly 4px * across mobile, tablet and desktop without changing other product grids. * ======================================================================== */ .shahaz-micro-nav--destination-cards .shahaz-micro-nav__hint{ opacity:1!important; filter:none!important; text-shadow:none!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; min-width:0!important; line-height:1.2!important; } .shahaz-micro-nav--destination-cards .shahaz-micro-nav__cluster-head{ align-items:baseline!important; } .shahaz-p-row-suggested .shahaz-sec-title::after, .shahaz-p-row-suggested .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after{ content:none!important; display:none!important; width:0!important; height:0!important; margin:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; } .shahaz-p-row-suggested .shahaz-p-grid, .shahaz-p-row-suggested .shahaz-p-grid-dense{ gap:4px!important; } @media (min-width:481px) and (max-width:768px){ .shahaz-p-row-suggested .shahaz-p-grid, .shahaz-p-row-suggested .shahaz-p-grid-dense{gap:4px!important;} } @media (min-width:769px){ .shahaz-p-row-suggested .shahaz-p-grid, .shahaz-p-row-suggested .shahaz-p-grid-dense{gap:4px!important;} } /* ======================================================================== * PHASE 166 FINAL QA — RECENTLY VIEWED + SUGGESTED PRODUCT SPACING * - Recently Viewed keeps real product-card links and uses a 10px horizontal * card gap across breakpoints. * - Its generic gold heading underline is removed without replacement. * - Suggested Products keeps its existing card design; only the heading-to- * product spacing is normalized to 12px. * ======================================================================== */ .shahaz-recently-viewed .shahaz-sec-title::after, .shahaz-recently-viewed .shahaz-sec-header.shahaz-in-view .shahaz-sec-title::after{ content:none!important; display:none!important; width:0!important; height:0!important; margin:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; } .shahaz-recently-viewed .shahaz-p-grid, .shahaz-recently-viewed .shahaz-p-grid-dense{ column-gap:10px!important; } .shahaz-p-row-suggested .shahaz-sec-header{ margin-bottom:12px!important; } .shahaz-p-row-suggested .shahaz-sec-title{ margin-bottom:0!important; } /* SHAHAZ.COM — ANNOUNCEMENT FLOW SAFETY The announcement bar belongs directly below the homepage header row. It must occupy normal document space and must never cover the hero/banner. */ #shahaz-header .shahaz-announcement-v2{ position:relative!important; inset:auto!important; display:flex!important; width:100%!important; max-width:100%!important; margin:0!important; box-sizing:border-box!important; transform:none!important; clear:both!important; } #shahaz-header .shahaz-announcement-v2__viewport{ min-width:0!important; overflow:hidden!important; } #shahaz-header .shahaz-announcement-v2__track{ width:max-content!important; max-width:none!important; } @media (max-width:767px){ #shahaz-header .shahaz-announcement-v2{ height:30px!important; } } /* SHAHAZ.COM — MOBILE HEADER/TICKER CONTENT-FLOW SAFETY */ @media (max-width:767px){ #shahaz-header + .shahaz-global-market-header, #shahaz-header + .shahaz-global-market-header + *{ /* no forced overlap from the ticker/header stack */ } #shahaz-header ~ .shahaz-hero-component, #shahaz-header ~ .shahaz-homepage-main, #shahaz-header ~ main{ position:relative; } } /* ========================================================================== SHAHAZ.COM — ANNOUNCEMENT TEXT MOBILE FINAL FIX Keeps the ticker container in its corrected position while making the announcement text a single readable horizontal line on small screens. ========================================================================== */ @media (max-width:767px){ .shahaz-announcement-v2{ overflow:hidden!important; white-space:nowrap!important; box-sizing:border-box!important; } .shahaz-announcement-v2 *{ box-sizing:border-box; } .shahaz-announcement-v2 .shahaz-announcement-track, .shahaz-announcement-v2 .shahaz-announcement-items, .shahaz-announcement-v2 .shahaz-announcement-inner, .shahaz-announcement-v2 .shahaz-announcement-content, .shahaz-announcement-v2 .shahaz-ticker-track{ display:flex!important; align-items:center!important; flex-wrap:nowrap!important; white-space:nowrap!important; min-width:max-content!important; height:100%!important; } .shahaz-announcement-v2 .shahaz-announcement-item, .shahaz-announcement-v2 .shahaz-ticker-item, .shahaz-announcement-v2 a, .shahaz-announcement-v2 span{ white-space:nowrap!important; word-break:normal!important; overflow-wrap:normal!important; line-height:1!important; flex:0 0 auto!important; } /* Prevent long announcement text from wrapping into multiple rows. */ .shahaz-announcement-v2 p{ margin:0!important; padding:0!important; white-space:nowrap!important; line-height:1!important; } /* Keep ticker controls/icons vertically centered without changing content. */ .shahaz-announcement-v2 button{ flex:0 0 auto!important; } } /* ======================================================================== * SHAHAZ.COM — DIRECT DESTINATION DISCOVERY BANNER * Surgical homepage addition: 07b Quick Actions -> this banner -> 07c. * Five real visual links: 3 Grand Collection + 2 New User/Exclusive Offer. * The five visuals form one cohesive promotional collage, not a carousel. * ======================================================================== */ .shz-direct-discovery{ width:100%; max-width:none; margin:0; padding:clamp(7px,1.1vw,12px) 0; box-sizing:border-box; background:linear-gradient(180deg,var(--shahaz-softpink) 0%,var(--shahaz-offwhite) 100%); border-top:1px solid var(--shahaz-softpink-deep); border-bottom:1px solid var(--shahaz-softpink-deep); overflow:hidden; } .shz-direct-discovery__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 clamp(10px,2vw,22px) clamp(6px,1vw,9px); box-sizing:border-box; } .shz-direct-discovery__eyebrow{ display:block; margin:0 0 2px; color:var(--shahaz-magenta); font-size:clamp(8px,.8vw,11px); font-weight:900; letter-spacing:.14em; line-height:1.1; } .shz-direct-discovery__head h2{ margin:0; color:var(--shahaz-ink); font-size:clamp(15px,1.8vw,23px); font-weight:900; line-height:1.08; } .shz-direct-discovery__hint{ flex:0 0 auto; color:var(--shahaz-gray); font-size:clamp(9px,1vw,12px); font-weight:700; white-space:nowrap; } /* One banner canvas: 3 Grand Collection visuals on the upper row, * 2 New User visuals on the lower row. Every tile remains a real . */ .shz-direct-discovery__canvas{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:clamp(72px,7.5vw,102px) clamp(72px,7.5vw,102px); gap:clamp(3px,.55vw,7px); width:100%; padding:0 clamp(6px,1vw,12px); box-sizing:border-box; } .shz-direct-discovery__card{ position:relative; display:block; min-width:0; min-height:0; overflow:hidden; border:1px solid rgba(212,175,55,.58); border-radius:clamp(10px,1.2vw,18px); background:var(--shahaz-white); box-shadow:var(--shahaz-shadow-card); text-decoration:none!important; -webkit-tap-highlight-color:transparent; isolation:isolate; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; } /* Intentional promotional collage: three Grand Collection visuals above, * followed by two wider New User / Exclusive Offer visuals below. */ .shz-direct-discovery__card:nth-child(1){grid-column:1 / span 2;grid-row:1} .shz-direct-discovery__card:nth-child(2){grid-column:3 / span 2;grid-row:1} .shz-direct-discovery__card:nth-child(3){grid-column:5 / span 2;grid-row:1} .shz-direct-discovery__card:nth-child(4){grid-column:1 / span 3;grid-row:2} .shz-direct-discovery__card:nth-child(5){grid-column:4 / span 3;grid-row:2} .shz-direct-discovery__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .25s ease; } .shz-direct-discovery__wash{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(20,0,15,.02) 28%,rgba(20,0,15,.78) 100%); pointer-events:none; } .shz-direct-discovery__copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:2px; padding:clamp(5px,.7vw,8px) clamp(6px,.8vw,10px) clamp(6px,.8vw,9px); box-sizing:border-box; color:var(--shahaz-white); pointer-events:none; } .shz-direct-discovery__copy small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--shahaz-gold-light); font-size:clamp(6px,.62vw,9px); font-weight:900; letter-spacing:.05em; line-height:1.1; } .shz-direct-discovery__copy strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--shahaz-white); font-size:clamp(9px,1vw,13px); font-weight:900; line-height:1.1; } .shz-direct-discovery__copy strong span{color:var(--shahaz-gold-light)} .shz-direct-discovery__card--grand{ box-shadow:0 8px 22px -10px rgba(107,15,85,.28),0 0 0 1px rgba(255,20,147,.06) inset; } .shz-direct-discovery__card--new-user{ box-shadow:0 8px 22px -10px rgba(255,20,147,.34),0 0 0 1px rgba(212,175,55,.10) inset; } .shz-direct-discovery__card:hover, .shz-direct-discovery__card:focus-visible{ transform:translateY(-1px); box-shadow:var(--shahaz-shadow-lift); } .shz-direct-discovery__card:hover img, .shz-direct-discovery__card:focus-visible img{transform:scale(1.035);filter:saturate(1.05)} .shz-direct-discovery__card:focus-visible{ outline:2px solid var(--shahaz-gold); outline-offset:2px; } @media (max-width:767px){ .shz-direct-discovery{padding-block:7px} .shz-direct-discovery__head{align-items:center;gap:8px;padding-inline:10px} .shz-direct-discovery__head h2{font-size:15px} .shz-direct-discovery__hint{font-size:8px} .shz-direct-discovery__canvas{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:calc(clamp(64px,18vw,88px) + 30px) calc(clamp(64px,18vw,88px) + 30px); gap:4px; padding-inline:5px; } .shz-direct-discovery__card{border-radius:10px} .shz-direct-discovery__copy{padding:5px 6px 6px} .shz-direct-discovery__copy small{font-size:6px} .shz-direct-discovery__copy strong{font-size:9px} } /* Phase 51 correction: Direct Discovery growth follows the site's actual * desktop breakpoint. The increase is always added to the ZIP 49 baseline. * Tablet: 768–1023px => +40px per grid row. * Desktop: 1024px+ => +80px per grid row. */ @media (min-width:768px) and (max-width:1023px){ .shz-direct-discovery__canvas{ grid-template-rows:calc(clamp(72px,7.5vw,102px) + 40px) calc(clamp(72px,7.5vw,102px) + 40px); } } @media (min-width:1024px){ .shz-direct-discovery__canvas{ grid-template-rows:calc(clamp(72px,7.5vw,102px) + 80px) calc(clamp(72px,7.5vw,102px) + 80px); } } @media (max-width:390px){ .shz-direct-discovery__head{gap:6px} .shz-direct-discovery__hint{font-size:7px} .shz-direct-discovery__canvas{ grid-template-rows:92px 92px; gap:3px; } .shz-direct-discovery__card{border-radius:9px} .shz-direct-discovery__copy{padding:4px 5px 5px} .shz-direct-discovery__copy strong{font-size:8px} } @media (prefers-reduced-motion:reduce){ .shz-direct-discovery__card, .shz-direct-discovery__card img{transition:none} } /* Homepage edge-to-edge integration for the new isolated section. */ .shahaz-homepage > .shz-direct-discovery{ width:100%; max-width:none; margin-left:0!important; margin-right:0!important; box-sizing:border-box; } /* ======================================================================== * PHASE 52 — FASHION GATEWAY IMAGE FILL * Scope: homepage "ফ্যাশন বেছে নিন" Men's + Women's destination cards only. * The fashion destination image surface fills its complete media box across * mobile, tablet and desktop. * ======================================================================== */ .shahaz-micro-nav--destination-cards.shahaz-micro-nav--orbit .shahaz-micro-nav__destination-card--fashion .shahaz-micro-nav__destination-media img, .shahaz-micro-nav--destination-cards.shahaz-micro-nav--orbit .shahaz-micro-nav__destination-card--fashion .shahaz-fashion-rotator-layer{ width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center!important; padding:0!important; margin:0!important; border:0!important; } @media (max-width:640px){ .shahaz-micro-nav--destination-cards.shahaz-micro-nav--orbit .shahaz-micro-nav__destination-card--fashion .shahaz-micro-nav__destination-media img, .shahaz-micro-nav--destination-cards.shahaz-micro-nav--orbit .shahaz-micro-nav__destination-card--fashion .shahaz-fashion-rotator-layer{ object-fit:cover!important; object-position:center!important; padding:0!important; } } /* SHAHAZ Homepage Media Studio compatibility */ .shahaz-homepage-media-link{display:block;width:100%;height:100%;text-decoration:none}.shahaz-homepage-media{display:block;width:100%;height:100%;object-fit:cover}.shahaz-homepage-media--video{background:var(--shahaz-gradient-magenta-gold)}.shahaz-story-ring .shahaz-homepage-media,.shahaz-cat-unified-card .shahaz-homepage-media,.shahaz-brand-card .shahaz-homepage-media{width:100%;height:100%;object-fit:cover}shz-direct-discovery__media{width:100%;height:100%;object-fit:cover;display:block}.shahaz-spotlight-custom-media{width:100%;height:100%;object-fit:cover;display:block}.shahaz-brand-custom-media{width:100%;height:100%;object-fit:contain;display:block}.shz-home-luxury-entry__visual--custom-media{overflow:hidden}.shz-home-luxury-entry__visual--custom-media .shahaz-homepage-media{width:100%;height:100%;object-fit:cover}.shahaz-micro-nav__custom-media{width:100%;height:100%;object-fit:cover;display:block}.shz-dual-promo__video,.shz-dual-promo-2__video{width:100%;height:100%;object-fit:cover;display:block} .shzdp-preview video,.shzdp2-preview video{width:100%;height:100%;object-fit:cover} .shahaz-story-lightbox-video{display:none;max-width:100%;max-height:80vh;width:auto;height:auto;margin:auto;object-fit:contain} /* ======================================================================== * PHASE 80 — HOMEPAGE BANNER/ADVERTISEMENT MEDIA-AWARE ROTATION * Scope: Luxury Promotion 1 and Luxury Promotion 2 campaign * slots. Existing aspect ratios/layout remain authoritative; slides are * stacked inside the existing fixed card frame so rotation can never alter * section height, columns or surrounding layout. * ======================================================================== */ .shahaz-luxury-promo-rotator{ position:relative; overflow:hidden; } .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide{ position:absolute; inset:0; width:100%; height:100%; display:block; op:0; left:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateZ(0); transition:opacity 180ms ease; } .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide.is-active{ position:absolute; opacity:1; visibility:visible; pointer-events:auto; z-index:1; } .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide .shahaz-luxury-promo-img{ width:100%; height:100%; object-fit:cover; } .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide picture, .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide picture img{ display:block; width:100%; height:100%; } .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide .shahaz-luxury-promo-badge{ z-index:2; } @media (prefers-reduced-motion:reduce){ .shahaz-luxury-promo-rotator > .shahaz-luxury-promo-slide{transition:none} } /* ========================================================================== COMPONENT 2A: Latest Prices popup — Discovery rail only ========================================================================== */ .shahaz-discovery-rail__item[data-shahaz-discovery="latest-prices"] { cursor: pointer; } .shahaz-discovery-rail__item[data-shahaz-discovery="latest-prices"]:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(111, 16, 78, .92), 0 2px 5px rgba(75, 10, 61, .16); } .shahaz-latest-prices-popup[hidden] { display: none !important; } .shahaz-latest-prices-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 16px; box-sizing: border-box; } .shahaz-latest-prices-popup__backdrop { position: absolute; inset: 0; background: rgba(61, 21, 48, .34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .shahaz-latest-prices-popup__panel { position: relative; z-index: 1; width: min(100%, 660px); max-height: min(88vh, 820px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #fff3d6 0%, #fffaf0 100%); border: 2px solid #d4af37; border-radius: 24px; box-shadow: 0 18px 45px rgba(82, 40, 0, .28), 0 4px 0 rgba(212, 175, 55, .65); } .shahaz-latest-prices-popup__close { position: absolute; top: 12px; left: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid #d4af37; border-radius: 14px; background: linear-gradient(145deg, #ff0a8a 0%, #c6006e 100%); color: #fff; font: inherit; font-size: 30px; font-weight: 950; line-height: 1; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 #6f1050, 0 7px 12px rgba(111, 16, 80, .2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .shahaz-latest-prices-popup__close:hover { filter: brightness(1.05); } .shahaz-latest-prices-popup__close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 #6f1050, 0 3px 7px rgba(111, 16, 80, .16); } .shahaz-latest-prices-popup__close:focus-visible, .shahaz-latest-prices-popup__item:focus-visible, .shahaz-discovery-rail__item[data-shahaz-discovery="latest-prices"]:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; } .shahaz-latest-prices-popup__header { flex: 0 0 auto; padding: 42px 58px 14px; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, .42); } .shahaz-latest-prices-popup__eyebrow { display: block; margin-bottom: 7px; color: #9a7114; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .shahaz-latest-prices-popup__header h2 { margin: 0; color: #be0b70; font-size: clamp(23px, 4vw, 30px); line-height: 1.15; } .shahaz-latest-prices-popup__header p { margin: 5px 0 0; color: #765f66; font-size: 13px; line-height: 1.5; } .shahaz-latest-prices-popup__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 9px; padding: 14px; } .shahaz-latest-prices-popup__item { min-width: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .62); border-radius: 17px; background: rgba(255, 253, 246, .78); color: #64134c; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(212,175,55,.16); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .shahaz-latest-prices-popup__item:hover { transform: translateY(-1px); border-color: rgba(190, 11, 112, .45); box-shadow: 0 5px 12px rgba(103, 24, 77, .1); } .shahaz-latest-prices-popup__item:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(80, 24, 55, .12); } .shahaz-latest-prices-popup__image { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .48); border-radius: 13px; background: #fffdf6; } .shahaz-latest-prices-popup__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .shahaz-latest-prices-popup__details { min-width: 0; display: grid; gap: 4px; } .shahaz-latest-prices-popup__details strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3; } .shahaz-latest-prices-popup__price { display: block; color: #9a7114; font-size: 14px; font-weight: 900; line-height: 1.25; } .shahaz-latest-prices-popup__price .woocommerce-Price-currencySymbol { margin-right: 2px; } .shahaz-latest-prices-popup__empty { margin: 8px 0; padding: 24px 14px; text-align: center; color: #765f66; } body.shahaz-latest-prices-popup-open { overflow: hidden; } @media (max-width: 767px) { .shahaz-latest-prices-popup { padding: 10px; } .shahaz-latest-prices-popup__panel { width: 100%; max-height: 88vh; border-radius: 20px; } .shahaz-latest-prices-popup__close { top: 10px; left: 10px; width: 42px; height: 42px; } .shahaz-latest-prices-popup__header { padding: 39px 48px 12px; } .shahaz-latest-prices-popup__eyebrow { font-size: 10px; } .shahaz-latest-prices-popup__header p { font-size: 12px; } .shahaz-latest-prices-popup__body { gap: 8px; padding: 10px; } .shahaz-latest-prices-popup__item { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 8px 9px; border-radius: 15px; } .shahaz-latest-prices-popup__image { width: 58px; height: 58px; } .shahaz-latest-prices-popup__details strong, .shahaz-latest-prices-popup__price { font-size: 13px; } } /* ========================================================================== COMPONENT 3B: SHAHAZ Discovery — Seller Stores popup (Phase 2) Strictly scoped to Seller Stores only. ========================================================================== */ .shahaz-discovery-rail__item[data-shahaz-discovery="seller-stores"] { cursor: pointer; } .shahaz-discovery-rail__item[data-shahaz-discovery="seller-stores"]:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(111, 16, 78, .92), 0 2px 5px rgba(75, 10, 61, .16); } .shahaz-seller-stores-popup[hidden] { display: none !important; } .shahaz-seller-stores-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 16px; box-sizing: border-box; } .shahaz-seller-stores-popup__backdrop { position: absolute; inset: 0; background: rgba(61, 21, 48, .34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .shahaz-seller-stores-popup__panel { position: relative; z-index: 1; width: min(100%, 660px); max-height: min(88vh, 820px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #fff3d6 0%, #fffaf0 100%); border: 2px solid #d4af37; border-radius: 24px; box-shadow: 0 18px 45px rgba(82, 40, 0, .28), 0 4px 0 rgba(212, 175, 55, .65); } .shahaz-seller-stores-popup__close { position: absolute; top: 12px; left: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid #d4af37; border-radius: 14px; background: linear-gradient(145deg, #ff0a8a 0%, #c6006e 100%); color: #fff; font: inherit; font-size: 30px; font-weight: 950; line-height: 1; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 #6f1050, 0 7px 12px rgba(111, 16, 80, .2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .shahaz-seller-stores-popup__close:hover { filter: brightness(1.05); } .shahaz-seller-stores-popup__close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 #6f1050, 0 3px 7px rgba(111, 16, 80, .16); } .shahaz-seller-stores-popup__close:focus-visible, .shahaz-seller-stores-popup__item:focus-visible, .shahaz-discovery-rail__item[data-shahaz-discovery="seller-stores"]:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; } .shahaz-seller-stores-popup__header { flex: 0 0 auto; padding: 42px 58px 14px; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, .42); } .shahaz-seller-stores-popup__eyebrow { display: block; margin-bottom: 7px; color: #9a7114; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .shahaz-seller-stores-popup__header h2 { margin: 0; color: #be0b70; font-size: clamp(23px, 4vw, 30px); line-height: 1.15; } .shahaz-seller-stores-popup__header p { margin: 5px 0 0; color: #765f66; font-size: 13px; line-height: 1.5; } .shahaz-seller-stores-popup__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 9px; padding: 14px; } .shahaz-seller-stores-popup__item { min-width: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .62); border-radius: 17px; background: rgba(255, 253, 246, .78); color: #64134c; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(212,175,55,.16); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .shahaz-seller-stores-popup__item:hover { transform: translateY(-1px); border-color: rgba(190, 11, 112, .45); box-shadow: 0 5px 12px rgba(103, 24, 77, .1); } .shahaz-seller-stores-popup__item:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(80, 24, 55, .12); } .shahaz-seller-stores-popup__avatar { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .48); border-radius: 13px; background: #fffdf6; } .shahaz-seller-stores-popup__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .shahaz-seller-stores-popup__avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 27px; } .shahaz-seller-stores-popup__details { min-width: 0; display: grid; gap: 4px; } .shahaz-seller-stores-popup__details strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3; } .shahaz-seller-stores-popup__status { display: block; color: #9a7114; font-size: 12px; font-weight: 900; line-height: 1.25; } .shahaz-seller-stores-popup__arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(212, 175, 55, .55); border-radius: 50%; background: linear-gradient(145deg, #fffdf4 0%, #f5df8a 100%); color: #6f2a9d; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(128, 79, 0, .35); } .shahaz-seller-stores-popup__empty { margin: 8px 0; padding: 24px 14px; text-align: center; color: #765f66; } .shahaz-seller-stores-popup__empty strong { display: block; font-size: 14px; } .shahaz-seller-stores-popup__empty span { display: block; margin-top: 5px; font-size: 12px; } body.shahaz-seller-stores-popup-open { overflow: hidden; } @media (max-width: 767px) { .shahaz-seller-stores-popup { padding: 10px; } .shahaz-seller-stores-popup__panel { width: 100%; max-height: 88vh; border-radius: 20px; } .shahaz-seller-stores-popup__close { top: 10px; left: 10px; width: 42px; height: 42px; } .shahaz-seller-stores-popup__header { padding: 39px 48px 12px; } .shahaz-seller-stores-popup__eyebrow { font-size: 10px; } .shahaz-seller-stores-popup__header p { font-size: 12px; } .shahaz-seller-stores-popup__body { gap: 8px; padding: 10px; } .shahaz-seller-stores-popup__item { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; padding: 8px 9px; border-radius: 15px; } .shahaz-seller-stores-popup__avatar { width: 58px; height: 58px; } .shahaz-seller-stores-popup__details strong, .shahaz-seller-stores-popup__status { font-size: 13px; } .shahaz-seller-stores-popup__arrow { width: 27px; height: 27px; font-size: 21px; } } /* ======================================================================== COMPONENT 3C: SHAHAZ Discovery — Live Stock popup (Phase 3) Strictly scoped to Live Stock only. ======================================================================== */ .shahaz-discovery-rail__item[data-shahaz-discovery="live-stock"] { cursor: pointer; } .shahaz-discovery-rail__item[data-shahaz-discovery="live-stock"]:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(111, 16, 78, .92), 0 2px 5px rgba(75, 10, 61, .16); } .shahaz-live-stock-popup[hidden] { display: none !important; } .shahaz-live-stock-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 16px; box-sizing: border-box; } .shahaz-live-stock-popup__backdrop { position: absolute; inset: 0; background: rgba(61, 21, 48, .34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .shahaz-live-stock-popup__panel { position: relative; z-index: 1; width: min(100%, 660px); max-height: min(88vh, 820px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #fff3d6 0%, #fffaf0 100%); border: 2px solid #d4af37; border-radius: 24px; box-shadow: 0 18px 45px rgba(82, 40, 0, .28), 0 4px 0 rgba(212, 175, 55, .65); } .shahaz-live-stock-popup__close { position: absolute; top: 12px; left: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid #d4af37; border-radius: 14px; background: linear-gradient(145deg, #ff0a8a 0%, #c6006e 100%); color: #fff; font: inherit; font-size: 30px; font-weight: 950; line-height: 1; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 #6f1050, 0 7px 12px rgba(111, 16, 80, .2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .shahaz-live-stock-popup__close:hover { filter: brightness(1.05); } .shahaz-live-stock-popup__close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 #6f1050, 0 3px 7px rgba(111, 16, 80, .16); } .shahaz-live-stock-popup__close:focus-visible, .shahaz-live-stock-popup__item:focus-visible, .shahaz-discovery-rail__item[data-shahaz-discovery="live-stock"]:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; } .shahaz-live-stock-popup__header { flex: 0 0 auto; padding: 42px 58px 14px; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, .42); } .shahaz-live-stock-popup__eyebrow { display: block; margin-bottom: 7px; color: #9a7114; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .shahaz-live-stock-popup__header h2 { margin: 0; color: #be0b70; font-size: clamp(23px, 4vw, 30px); line-height: 1.15; } .shahaz-live-stock-popup__header p { margin: 5px 0 0; color: #765f66; font-size: 13px; line-height: 1.5; } .shahaz-live-stock-popup__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 9px; padding: 14px; } .shahaz-live-stock-popup__item { min-width: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .62); border-radius: 17px; background: rgba(255, 253, 246, .78); color: #64134c; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(212,175,55,.16); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .shahaz-live-stock-popup__item:hover { transform: translateY(-1px); border-color: rgba(190, 11, 112, .45); box-shadow: 0 5px 12px rgba(103, 24, 77, .1); } .shahaz-live-stock-popup__item:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(80, 24, 55, .12); } .shahaz-live-stock-popup__image { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(212, 175, 55, .48); border-radius: 13px; background: #fffdf6; } .shahaz-live-stock-popup__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .shahaz-live-stock-popup__details { min-width: 0; display: grid; gap: 4px; } .shahaz-live-stock-popup__details strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3; } .shahaz-live-stock-popup__status { display: block; color: #9a7114; font-size: 12px; font-weight: 900; line-height: 1.25; } .shahaz-live-stock-popup__arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(212, 175, 55, .55); border-radius: 50%; background: linear-gradient(145deg, #fffdf4 0%, #f5df8a 100%); color: #6f2a9d; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(128, 79, 0, .35); } .shahaz-live-stock-popup__empty { margin: 8px 0; padding: 24px 14px; text-align: center; color: #765f66; } .shahaz-live-stock-popup__empty strong { display: block; font-size: 14px; } .shahaz-live-stock-popup__empty span { display: block; margin-top: 5px; font-size: 12px; } body.shahaz-live-stock-popup-open { overflow: hidden; } @media (max-width: 767px) { .shahaz-live-stock-popup { padding: 10px; } .shahaz-live-stock-popup__panel { width: 100%; max-height: 88vh; border-radius: 20px; } .shahaz-live-stock-popup__close { top: 10px; left: 10px; width: 42px; height: 42px; } .shahaz-live-stock-popup__header { padding: 39px 48px 12px; } .shahaz-live-stock-popup__eyebrow { font-size: 10px; } .shahaz-live-stock-popup__header p { font-size: 12px; } .shahaz-live-stock-popup__body { gap: 8px; padding: 10px; } .shahaz-live-stock-popup__item { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; padding: 8px 9px; border-radius: 15px; } .shahaz-live-stock-popup__image { width: 58px; height: 58px; } .shahaz-live-stock-popup__details strong, .shahaz-live-stock-popup__status { font-size: 13px; } .shahaz-live-stock-popup__arrow { width: 27px; height: 27px; font-size: 21px; } } /* ========================================================================== SHAHAZ.COM — Order History Discovery Popup Scope: Discovery rail → Order History only. ========================================================================== */ .shahaz-order-history-popup[hidden] { display: none !important; } .shahaz-order-history-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 16px; box-sizing: border-box; } .shahaz-order-history-popup__backdrop { position: absolute; inset: 0; background: rgba(61, 21, 48, .34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .shahaz-order-history-popup__panel { position: relative; z-index: 1; width: min(100%, 660px); max-height: min(88vh, 820px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #fff3d6 0%, #fffaf0 100%); border: 2px solid #d4af37; border-radius: 24px; box-shadow: 0 18px 45px rgba(82, 40, 0, .28), 0 4px 0 rgba(212, 175, 55, .65); } .shahaz-order-history-popup__close { position: absolute; top: 12px; left: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid #d4af37; border-radius: 14px; background: linear-gradient(145deg, #ff0a8a 0%, #c6006e 100%); color: #fff; font: inherit; font-size: 30px; font-weight: 950; line-height: 1; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 #6f1050, 0 7px 12px rgba(111,16,80,.2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .shahaz-order-history-popup__close:hover { filter: brightness(1.05); } .shahaz-order-history-popup__close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 #6f1050, 0 3px 7px rgba(111,16,80,.16); } .shahaz-order-history-popup__close:focus-visible, .shahaz-order-history-popup__item:focus-visible, .shahaz-discovery-rail__item[data-shahaz-discovery="order-history"]:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; } .shahaz-order-history-popup__header { flex: 0 0 auto; padding: 42px 58px 14px; text-align: center; border-bottom: 1px solid rgba(212,175,55,.42); } .shahaz-order-history-popup__eyebrow { display: block; margin-bottom: 7px; color: #9a7114; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .shahaz-order-history-popup__header h2 { margin: 0; color: #be0b70; font-size: clamp(23px, 4vw, 30px); line-height: 1.15; } .shahaz-order-history-popup__header p { margin: 5px 0 0; color: #765f66; font-size: 13px; line-height: 1.5; } .shahaz-order-history-popup__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 9px; padding: 14px; } .shahaz-order-history-popup__item { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; box-sizing: border-box; border: 1px solid rgba(212,175,55,.62); border-radius: 17px; background: rgba(255,253,246,.78); color: #64134c; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(212,175,55,.16); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .shahaz-order-history-popup__item:hover { transform: translateY(-1px); border-color: rgba(190,11,112,.45); box-shadow: 0 5px 12px rgba(103,24,77,.1); } .shahaz-order-history-popup__item:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(80,24,55,.12); } .shahaz-order-history-popup__details { min-width: 0; display: grid; gap: 4px; } .shahaz-order-history-popup__topline { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; } .shahaz-order-history-popup__number { font-size: 14px; font-weight: 900; } .shahaz-order-history-popup__date { color: #765f66; font-size: 12px; } .shahaz-order-history-popup__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .shahaz-order-history-popup__status { color: #9a7114; font-size: 12px; font-weight: 900; } .shahaz-order-history-popup__total { color: #be0b70; font-size: 13px; font-weight: 900; } .shahaz-order-history-popup__summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #765f66; font-size: 12px; } .shahaz-order-history-popup__arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(212,175,55,.55); border-radius: 50%; background: linear-gradient(145deg,#fffdf4 0%,#f5df8a 100%); color: #6f2a9d; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(128,79,0,.35); } .shahaz-order-history-popup__loading, .shahaz-order-history-popup__empty { margin: 8px 0; padding: 24px 14px; text-align: center; color: #765f66; } .shahaz-order-history-popup__empty strong { display:block; font-size:14px; color:#64134c; } .shahaz-order-history-popup__empty span { display:block; margin-top:5px; font-size:12px; } .shahaz-order-history-popup__login { display: inline-grid; place-items: center; margin-top: 12px; padding: 9px 15px; border: 1px solid #d4af37; border-radius: 12px; background: linear-gradient(145deg,#ff0a8a 0%,#c6006e 100%); color:#fff; font-weight:900; text-decoration:none; box-shadow:0 3px 0 #6f1050; -webkit-tap-highlight-color:transparent; } .shahaz-order-history-popup__login:active { transform: translateY(2px); box-shadow:0 1px 0 #6f1050; } .shahaz-order-history-popup__login:focus-visible { outline:2px solid #d4af37; outline-offset:3px; } body.shahaz-order-history-popup-open { overflow: hidden; } @media (max-width: 767px) { .shahaz-order-history-popup { padding: 10px; } .shahaz-order-history-popup__panel { width:100%; max-height:88vh; border-radius:20px; } .shahaz-order-history-popup__close { top:10px; left:10px; width:42px; height:42px; } .shahaz-order-history-popup__header { padding:39px 48px 12px; } .shahaz-order-history-popup__eyebrow { font-size:10px; } .shahaz-order-history-popup__header p { font-size:12px; } .shahaz-order-history-popup__body { gap:8px; padding:10px; } .shahaz-order-history-popup__item { gap:10px; padding:10px 9px; border-radius:15px; } .shahaz-order-history-popup__number { font-size:13px; } .shahaz-order-history-popup__date, .shahaz-order-history-popup__status, .shahaz-order-history-popup__summary { font-size:11px; } .shahaz-order-history-popup__total { font-size:12px; } .shahaz-order-history-popup__arrow { width:27px; height:27px; font-size:21px; } } /* ======================================================================== SHAHAZ.COM — Collections Discovery Popup Scope: Discovery rail → Collections only. ======================================================================== */ .shahaz-discovery-rail__item[data-shahaz-discovery="collections"] { cursor: pointer; } .shahaz-discovery-rail__item[data-shahaz-discovery="collections"]:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(111, 16, 78, .92), 0 2px 5px rgba(75, 10, 61, .16); } .shahaz-collections-popup[hidden] { display: none !important; } .shahaz-collections-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 16px; box-sizing: border-box; } .shahaz-collections-popup__backdrop { position: absolute; inset: 0; background: rgba(61, 21, 48, .34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .shahaz-collections-popup__panel { position: relative; z-index: 1; width: min(100%, 660px); max-height: min(88vh, 820px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #fff3d6 0%, #fffaf0 100%); border: 2px solid #d4af37; border-radius: 24px; box-shadow: 0 18px 45px rgba(82, 40, 0, .28), 0 4px 0 rgba(212, 175, 55, .65); } .shahaz-collections-popup__close { position: absolute; top: 12px; left: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid #d4af37; border-radius: 14px; background: linear-gradient(145deg, #ff0a8a 0%, #c6006e 100%); color: #fff; font: inherit; font-size: 30px; font-weight: 950; line-height: 1; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 #6f1050, 0 7px 12px rgba(111,16,80,.2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .shahaz-collections-popup__close:hover { filter: brightness(1.05); } .shahaz-collections-popup__close:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 1px 0 #6f1050, 0 3px 7px rgba(111,16,80,.16); } .shahaz-collections-popup__close:focus-visible, .shahaz-collections-popup__item:focus-visible, .shahaz-discovery-rail__item[data-shahaz-discovery="collections"]:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; } .shahaz-collections-popup__header { flex: 0 0 auto; padding: 42px 58px 14px; text-align: center; border-bottom: 1px solid rgba(212,175,55,.42); } .shahaz-collections-popup__eyebrow { display: block; margin-bottom: 7px; color: #9a7114; font-size: 12px; font-weight: 900; letter-spacing: .14em; } .shahaz-collections-popup__header h2 { margin: 0; color: #be0b70; font-size: clamp(23px, 4vw, 30px); line-height: 1.15; } .shahaz-collections-popup__header p { margin: 5px 0 0; color: #765f66; font-size: 13px; line-height: 1.5; } .shahaz-collections-popup__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 9px; padding: 14px; } .shahaz-collections-popup__item { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; border: 1px solid rgba(212,175,55,.62); border-radius: 17px; background: rgba(255,253,246,.78); color: #64134c; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(212,175,55,.16); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .shahaz-collections-popup__item:hover { transform: translateY(-1px); border-color: rgba(190,11,112,.45); box-shadow: 0 5px 12px rgba(103,24,77,.1); } .shahaz-collections-popup__item:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(80,24,55,.12); } .shahaz-collections-popup__image { width: 64px; height: 64px; min-width: 64px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(212,175,55,.55); border-radius: 14px; background: rgba(255,253,246,.9); } .shahaz-collections-popup__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .shahaz-collections-popup__image-fallback { font-size: 26px; line-height: 1; } .shahaz-collections-popup__details { min-width: 0; display: grid; gap: 4px; } .shahaz-collections-popup__details strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 900; } .shahaz-collections-popup__details span { color: #9a7114; font-size: 12px; font-weight: 900; } .shahaz-collections-popup__arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(212,175,55,.55); border-radius: 50%; background: linear-gradient(145deg,#fffdf4 0%,#f5df8a 100%); color: #6f2a9d; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(128,79,0,.35); } .shahaz-collections-popup__empty { margin: 8px 0; padding: 24px 14px; text-align: center; color: #765f66; } .shahaz-collections-popup__empty strong { display:block; font-size:14px; color:#64134c; } .shahaz-collections-popup__empty span { display:block; margin-top:5px; font-size:12px; } body.shahaz-collections-popup-open { overflow: hidden; } @media (max-width: 767px) { .shahaz-collections-popup { padding: 10px; } .shahaz-collections-popup__panel { width:100%; max-height:88vh; border-radius:20px; } .shahaz-collections-popup__close { top:10px; left:10px; width:42px; height:42px; } .shahaz-collections-popup__header { padding:39px 48px 12px; } .shahaz-collections-popup__eyebrow { font-size:10px; } .shahaz-collections-popup__header p { font-size:12px; } .shahaz-collections-popup__body { gap:8px; padding:10px; } .shahaz-collections-popup__item { gap:10px; padding:9px; border-radius:15px; } .shahaz-collections-popup__image { width:58px; height:58px; min-width:58px; border-radius:13px; } .shahaz-collections-popup__details strong { font-size:13px; } .shahaz-collections-popup__details span { font-size:11px; } } @media (prefers-reduced-motion: reduce) { .shahaz-collections-popup__item { transition: none; } } /* ========================================================================== BRAND PROMISE — dedicated Homepage renderer Scoped exclusively to .shahaz-brand-promise; Discovery 5 remains owned by .shahaz-discovery-rail / 04-brand-banner.php. ========================================================================== */ .shahaz-brand-promise { position: relative; } .shahaz-brand-promise__header { text-align: center; } .shahaz-brand-promise__eyebrow { display: block; margin-bottom: 4px; color: var(--shahaz-magenta); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .shahaz-brand-promise__title { margin: 0; font-family: 'Playfair Display', Georgia, serif; color: var(--shahaz-ink); } .shahaz-brand-promise__intro { margin: 6px auto 0; max-width: 720px; color: var(--shahaz-gray); line-height: 1.6; } .shahaz-brand-promise__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; } .shahaz-brand-promise__item { display: flex; align-items: flex-start; gap: 10px; padding: 14px; background: var(--shahaz-offwhite); border: 1px solid var(--shahaz-border-pearl); border-radius: var(--shahaz-radius-md); box-shadow: var(--shahaz-shadow-soft); } .shahaz-brand-promise__icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--shahaz-gradient-magenta-gold); color: var(--shahaz-white); font-weight: 900; } .shahaz-brand-promise__copy { min-width: 0; } .shahaz-brand-promise__copy h3 { margin: 0; color: var(--shahaz-ink); font-size: 15px; line-height: 1.3; } .shahaz-brand-promise__copy p { margin: 5px 0 0; color: var(--shahaz-gray); font-size: 13px; line-height: 1.55; } .shahaz-brand-promise__item:focus-within { outline: 2px solid var(--shahaz-gold); outline-offset: 2px; } @media (max-width: 900px) { .shahaz-brand-promise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .shahaz-brand-promise__list { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .shahaz-brand-promise__item { transition: none; } } /* SHAHAZ Marketplace Entry Carousel — ZIP 194 spacing refinement + seamless infinite loop */ .shahaz-marketplace-entry{position:relative;width:100%;margin-top:-6px;margin-right:0;margin-bottom:-4px;margin-left:0;padding:clamp(5px,1vw,12px) 0;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#ff5aa8 0%,#ff7fba 30%,#ffd84d 52%,#ff8bc6 76%,#ff5aa8 100%);background-size:220% 100%;animation:shahazMarketplaceBackground 14s ease-in-out infinite}.shahaz-marketplace-entry::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:8px;background:inherit;pointer-events:none;z-index:-1}.shahaz-marketplace-entry__track-wrap{position:relative;overflow:hidden;padding:clamp(5px,1vw,10px) 0}.shahaz-marketplace-entry__track{display:flex;align-items:stretch;gap:clamp(6px,1vw,12px);width:100%;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;padding:clamp(10px,1.5vw,16px) 0;overscroll-behavior-x:contain}.shahaz-marketplace-entry__track::-webkit-scrollbar{display:none}.shahaz-marketplace-entry__card{position:relative;flex:0 0 calc((100% - (5 * clamp(6px,1vw,12px))) / 6);min-width:0;aspect-ratio:.78/1;text-decoration:none;scroll-snap-align:center;transform:scale(.9);transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s,opacity .55s;z-index:1;opacity:.88;filter:saturate(.94)}.shahaz-marketplace-entry__card.is-focus{transform:scale(1.12);z-index:5;opacity:1;filter:saturate(1.08)}.shahaz-marketplace-entry__media{position:relative;display:block;width:100%;height:calc(100% - 18%);overflow:hidden;border:1px solid transparent;border-radius:18px 10px 18px 12px;background:linear-gradient(145deg,#fff7fb,#f7e8ff);box-shadow:0 8px 20px rgba(70,0,75,.13),inset 0 0 0 1px rgba(255,255,255,.72)}.shahaz-marketplace-entry__card--2 .shahaz-marketplace-entry__media{border-radius:10px 20px 12px 18px}.shahaz-marketplace-entry__card--3 .shahaz-marketplace-entry__media{border-radius:20px 12px 18px 8px}.shahaz-marketplace-entry__card--5 .shahaz-marketplace-entry__media{border-radius:8px 18px 10px 22px}.shahaz-marketplace-entry__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease}.shahaz-marketplace-entry__image.is-visible{opacity:1}.shahaz-marketplace-entry__no-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,4vw,42px);font-weight:1000;color:#fff;background:linear-gradient(135deg,#ff087f,#6f00e8)}.shahaz-marketplace-entry__shine{position:absolute;inset:-30% 0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 61%);transform:translateX(-120%);animation:shahazMarketplaceShine 5.5s ease-in-out infinite}.shahaz-marketplace-entry__live-border{position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(120deg,#ff087f,#ffd84d,#7a00ff,#ff087f) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.95;animation:shahazMarketplaceBorder 4.2s linear infinite}.shahaz-marketplace-entry__label{position:relative;display:flex;align-items:center;justify-content:center;height:18%;padding:3px 2px;text-align:center;overflow:hidden}.shahaz-marketplace-entry__label strong{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(7px,1.35vw,13px);font-weight:1000;line-height:1.1;color:#65005f;text-shadow:0 1px 0 #fff}.shahaz-marketplace-entry__card.is-focus .shahaz-marketplace-entry__label strong{color:#d90072}@keyframes shahazMarketplaceShine{0%,60%,100%{transform:translateX(-120%)}75%{transform:translateX(120%)}}@keyframes shahazMarketplaceBorder{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}@keyframes shahazMarketplaceBackground{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@media(max-width:390px){.shahaz-marketplace-entry__track{gap:6px}.shahaz-marketplace-entry__card{flex-basis:calc((100% - (4 * 6px)) / 5)}.shahaz-marketplace-entry__media{border-radius:14px 8px 14px 10px}.shahaz-marketplace-entry__label strong{font-size:7px}}@media(min-width:768px){.shahaz-marketplace-entry__card{aspect-ratio:.82/1}.shahaz-marketplace-entry__media{height:82%}.shahaz-marketplace-entry__label{height:18%}}@media(prefers-reduced-motion:reduce){.shahaz-marketplace-entry__card,.shahaz-marketplace-entry__image{transition:none}.shahaz-marketplace-entry__shine,.shahaz-marketplace-entry__live-border,.shahaz-marketplace-entry{animation:none}} /* ZIP-197 targeted fix — keep the Marketplace Entry visual language continuous * through the following Banner/Advertisement area without changing any card, * spacing, carousel, banner media, or quick-action behaviour. */ .shahaz-homepage > .shahaz-hero-component { background: linear-gradient(115deg,#ff5aa8 0%,#ff7fba 30%,#ffd84d 52%,#ff8bc6 76%,#ff5aa8 100%); background-size: 220% 100%; animation: shahazMarketplaceBackground 14s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .shahaz-homepage > .shahaz-hero-component { animation: none; } } /* ZIP-199 targeted refinement — preserve ZIP-198 gradient while removing * the visual layer/separation around the Banner + Advertisement area, * tightening only the requested gaps, and removing label/bar shadow effects. */ .shahaz-marketplace-entry { margin-top: -11px; margin-bottom: -19px; } /* No extra continuation layer under the Entry Point. The existing seamless * Entry Point gradient remains the actual background. */ .shahaz-marketplace-entry::after { display: none; } /* Keep the ZIP-198 Hot Pink + Gold/Yellow gradient visible behind the * Banner/Advertisement. Remove only the separate outer frame shadow layer; * the existing card/frame border and media remain intact. */ .shahaz-homepage > .shahaz-hero-component { box-shadow: none; } .shahaz-homepage > .shahaz-hero-component .shahaz-hero-left, .shahaz-homepage > .shahaz-hero-component .shahaz-hero-right { box-shadow: none; } /* Requested: remove the shadow/3D effect behind Marketplace Entry labels. */ .shahaz-marketplace-entry__label strong { text-shadow: none; } /* Requested: remove the shadow below the slim Delivery / Flash Deals / * Gift Card bar while preserving its existing gradient, border and content. */ .shahaz-homepage .shahaz-hero-qa-track { box-shadow: none; }