/* ========================================================== LA BELLA DRAWER PART 1 BLACK / PURPLE GLASS + GOLD AURA ========================================================== */ /* ========================== OVERLAY ========================== */ [id^="headlessui-dialog"] .fixed.inset-0.bg-black, [id^="headlessui-dialog"] .fixed.inset-0{ background: rgba(8,1,10,.45) !important; backdrop-filter: blur(46px) saturate(165%); -webkit-backdrop-filter: blur(46px) saturate(165%); } /* ========================== MOBILE MENU ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl{ position:relative; overflow:hidden; background: radial-gradient( circle at 100% 0%, rgba(212,175,55,.16), transparent 36% ), radial-gradient( circle at 0% 100%, rgba(109,4,130,.30), transparent 48% ), linear-gradient( 180deg, rgba(14,2,16,.90), rgba(28,4,34,.95) ) !important; backdrop-filter: blur(42px) saturate(180%) brightness(.95); -webkit-backdrop-filter: blur(42px) saturate(180%) brightness(.95); border:none !important; box-shadow: -18px 0 60px rgba(0,0,0,.4); } /* ========================== LOGO WATERMARK ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::before{ content:""; position:absolute; left:-70px; bottom:-70px; width:220px; height:220px; background: url("https://res.cloudinary.com/deztjfwjo/image/upload/v1783998931/logo_xqcsba.png") center center / contain no-repeat; opacity:.06; pointer-events:none; z-index:0; } /* ========================== GOLD AURA GLASS LIGHT ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient( circle at 100% 0%, rgba(212,175,55,.14), transparent 40% ), linear-gradient( 180deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 22%, transparent 55% ); z-index:0; } /* ========================== CONTENT ABOVE EFFECTS ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl>*{ position:relative; z-index:2; } /* ========================== REMOVE ALL DIVIDERS ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .divide-y{ border:none !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl hr{ display:none !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [class*="divide-"]{ border:none !important; } /* ========================================================== LA BELLA DRAWER PART 2 TYPOGRAPHY — CHAMPAGNE, STATIC (NO HOVER) ========================================================== */ /* ========================== HEADINGS ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .font-bold{ color:#E9D6A8 !important; font-size:17px; font-weight:700; letter-spacing:.4px; margin-bottom:10px; text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* ========================== LINKS ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a{ display:flex; align-items:center; min-height:50px; padding:14px 18px !important; border-radius:14px; color:#F0DFB6 !important; font-size:15px; font-weight:500; text-decoration:none; } /* ========================== CLOSE BUTTON (سيلكتور محدد لزرار الإغلاق بس، بدل استهداف كل الـ button جوا الدرج — عشان مايبوظش أزرار الأقسام اللي بتفتح/تقفل زي "عطور نسائي" و"عطور رجالي") ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flex.justify-end.px-4.pt-5 button{ width:42px; height:42px; border:none; border-radius:50%; background: rgba(212,175,55,.08); } /* ========================== SECTION DISCLOSURE BUTTONS (عطور نسائي / عطور رجالي) — تفضل بعرض كامل وتاخد نفس ستايل اللينكات الباقية ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"]{ width:100%; height:auto; border:none; border-radius:0; background:transparent; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] a{ color:#F0DFB6 !important; font-size:15px; font-weight:500; text-decoration:none; } /* ========================== DISCLOSURE OPEN STATE (Tailwind بيضيف bg-gray-100 لما الأكورديون يفتح، وده كان بيدي خلفية بيضاء تحت النص الدهبي فيختفي الفرق بينهم — بنلغيها ونحط لمسة دهبي خفيفة بدالها) ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl [id^="headlessui-disclosure-button"] .bg-gray-100{ background: rgba(212,175,55,.10) !important; } /* ========================== ICONS ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl svg{ color:#D4AF37 !important; } /* ========================== SCROLLBAR ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar{ width:6px; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl::-webkit-scrollbar-thumb{ background: rgba(212,175,55,.28); border-radius:999px; } /* ========================== TEXT SELECTION ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl *::selection{ background: rgba(212,175,55,.22); } /* ========================== FONT RENDERING ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl{ color:#E9D6A8; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ========================== REMOVE TAILWIND DIVIDERS ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .divide-y>*{ border-top:none !important; } .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl .flow-root{ border:none !important; } /* ========================== FOCUS — accessibility only, not a hover effect ========================== */ .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl a:focus-visible, .relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl button:focus-visible{ outline:2px solid #D4AF37; outline-offset:2px; }