@font-face { font-family: 'Vazirmatn'; src: url('css/fonts/Vazirmatn-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Vazirmatn'; src: url('css/fonts/Vazirmatn-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Vazirmatn'; src: url('css/fonts/Vazirmatn-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Vazirmatn'; src: url('css/fonts/Vazirmatn-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Vazirmatn'; src: url('css/fonts/Vazirmatn-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Vazirmatn'; src: url('css/fonts/Vazirmatn-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } /* Smooth Scroll */ html { scroll-behavior: smooth; scroll-padding-top: 6rem; } :root { --apple-gray: #f5f5f7; --apple-dark: #1d1d1f; --apple-blue: #0071e3; --apple-green: #34c759; --apple-red: #ff3b30; --apple-amber: #ffcc00; --glass-bg: rgba(255, 255, 255, 0.4); --glass-border: rgba(255, 255, 255, 0.4); --liquid-glass: rgba(255, 255, 255, 0.15); --rim-light: rgba(255, 255, 255, 0.8); --apple-blue-light: rgba(0, 113, 227, 0.08); /* Standardized Transitions */ --apple-ease: cubic-bezier(0.4, 0, 0.2, 1); --apple-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --apple-spring: cubic-bezier(0.22, 1, 0.36, 1); /* Typography Scale */ --text-2xs: 0.625rem; /* 10px */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.3125rem; /* 21px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ /* Spacing Scale */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Radius Scale */ --radius-sm: 0.75rem; /* 12px */ --radius-md: 1rem; /* 16px */ --radius-lg: 1.5rem; /* 24px */ --radius-xl: 2rem; /* 32px */ --radius-2xl: 2.5rem; /* 40px */ --radius-full: 999px; /* Focus Ring */ --focus-ring: 0 0 0 4px rgba(0, 113, 227, 0.3); } /* ============================================ DARK MODE — Design Token Overrides Applied via data-theme="dark" on ============================================ */ [data-theme="dark"] { --apple-gray: #1c1c1e; --apple-dark: #f5f5f7; --glass-bg: rgba(44, 44, 46, 0.65); --glass-border: rgba(255, 255, 255, 0.08); --liquid-glass: rgba(44, 44, 46, 0.45); --rim-light: rgba(255, 255, 255, 0.06); --apple-blue-light: rgba(10, 132, 255, 0.15); --focus-ring: 0 0 0 4px rgba(10, 132, 255, 0.4); /* Dark blue for better dark-mode contrast */ --apple-blue: #0a84ff; } /* --- Dark Body & App Shell --- */ [data-theme="dark"] body { background: radial-gradient(circle at 0% 0%, rgba(28, 28, 32, 1) 0%, rgba(0, 0, 0, 1) 100%); color: #f5f5f7; } [data-theme="dark"] #main-app { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 100%); } /* --- Dark Sidebar & Header --- */ [data-theme="dark"] .unified-sidebar { background: rgba(28, 28, 30, 0.75); border-left-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .unified-header { background: rgba(28, 28, 30, 0.6); border-bottom-color: rgba(255, 255, 255, 0.06); } /* --- Dark Glass Surfaces --- */ [data-theme="dark"] .glass { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .liquid-glass { background: var(--liquid-glass); border-color: var(--glass-border); box-shadow: inset 0 0 0 1px var(--rim-light), 0 10px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .liquid-glass:hover { background: rgba(58, 58, 60, 0.5); box-shadow: inset 0 0 0 1.5px var(--rim-light), 0 20px 50px rgba(0, 0, 0, 0.5); } /* --- Dark Text Overrides (Tailwind utilities) --- */ [data-theme="dark"] .text-gray-900 { color: #f5f5f7 !important; } [data-theme="dark"] .text-gray-800 { color: #e5e5ea !important; } [data-theme="dark"] .text-gray-700 { color: #d1d1d6 !important; } [data-theme="dark"] .text-gray-600 { color: #aeaeb2 !important; } [data-theme="dark"] .text-gray-500 { color: #8e8e93 !important; } [data-theme="dark"] .text-gray-400 { color: #636366 !important; } [data-theme="dark"] .text-gray-300 { color: #48484a !important; } [data-theme="dark"] .text-gray-200 { color: #3a3a3c !important; } [data-theme="dark"] .text-black { color: #f5f5f7 !important; } /* --- Dark Background Overrides --- */ [data-theme="dark"] .bg-gray-100, [data-theme="dark"] .bg-gray-50 { background-color: rgba(44, 44, 46, 0.5) !important; } [data-theme="dark"] .bg-white { background-color: rgba(44, 44, 46, 0.8) !important; } [data-theme="dark"] .bg-white\/60, [data-theme="dark"] .bg-white\/40, [data-theme="dark"] .bg-white\/30 { background-color: rgba(58, 58, 60, 0.4) !important; } [data-theme="dark"] .bg-white\/80 { background-color: rgba(44, 44, 46, 0.8) !important; } /* --- Dark Border Overrides --- */ [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-white\/60, [data-theme="dark"] .border-white\/40, [data-theme="dark"] .border-white\/20 { border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .border-t, [data-theme="dark"] .border-b { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .divide-white\/20>*+* { border-color: rgba(255, 255, 255, 0.06) !important; } /* --- Dark Hover States --- */ [data-theme="dark"] .hover\:bg-white\/60:hover { background-color: rgba(58, 58, 60, 0.5) !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(58, 58, 60, 0.6) !important; } [data-theme="dark"] .hover\:text-black:hover { color: #f5f5f7 !important; } /* --- Dark Auth Section --- */ [data-theme="dark"] #auth-section { background: radial-gradient(circle at 50% 50%, rgba(28, 28, 32, 1) 0%, rgba(0, 0, 0, 1) 100%); } [data-theme="dark"] #auth-section .glass { background: rgba(44, 44, 46, 0.7); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] #auth-section .bg-gray-100\/40 { background-color: rgba(58, 58, 60, 0.5) !important; } /* --- Dark Form Inputs --- */ [data-theme="dark"] .floating-label-group input { background: rgba(58, 58, 60, 0.85); border-color: rgba(255, 255, 255, 0.15); color: #f5f5f7; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .floating-label-group input:focus { background: rgba(72, 72, 74, 0.95); border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .floating-label-group label { color: #8e8e93; } /* --- Dark Search Bar --- */ [data-theme="dark"] .search-glass { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.08); color: #f5f5f7; } [data-theme="dark"] .search-glass:focus { background: rgba(58, 58, 60, 0.7); border-color: rgba(10, 132, 255, 0.4); } [data-theme="dark"] .search-clear-btn { background: rgba(255, 255, 255, 0.1); } /* --- Dark Category Filters --- */ [data-theme="dark"] .cat-filter { background: rgba(44, 44, 46, 0.5); border-color: rgba(255, 255, 255, 0.08); color: #8e8e93; } [data-theme="dark"] .cat-filter:hover { background: rgba(58, 58, 60, 0.6); color: #f5f5f7; } [data-theme="dark"] .cat-filter.active { background: var(--apple-blue); color: white; border-color: rgba(255, 255, 255, 0.1); } /* --- Dark Product Cards --- */ [data-theme="dark"] .bg-white\/80.backdrop-blur-xl { background: rgba(44, 44, 46, 0.7) !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .quantity-controls { background: rgba(44, 44, 46, 0.5) !important; border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .quantity-controls.has-items { border-color: rgba(10, 132, 255, 0.3) !important; box-shadow: 0 0 20px rgba(10, 132, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .quantity-input { color: #f5f5f7; } /* --- Dark Blue Badges (brand tags) --- */ [data-theme="dark"] .text-blue-600 { color: #64b5f6 !important; } [data-theme="dark"] .bg-blue-50\/50 { background-color: rgba(10, 132, 255, 0.12) !important; } [data-theme="dark"] .border-blue-100\/30 { border-color: rgba(10, 132, 255, 0.2) !important; } /* --- Dark Status Badges --- */ [data-theme="dark"] .status-pending { background: rgba(255, 143, 0, 0.15); } [data-theme="dark"] .status-approved { background: rgba(52, 199, 89, 0.15); } [data-theme="dark"] .status-shipped { background: rgba(10, 132, 255, 0.15); } [data-theme="dark"] .status-declined { background: rgba(255, 59, 48, 0.15); } /* --- Dark Stock Dots --- */ [data-theme="dark"] .stock-status-badge { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .stock-dot .tooltip { background: rgba(44, 44, 46, 0.85); border-color: rgba(255, 255, 255, 0.1); color: #f5f5f7; } /* --- Dark Cart Drawer --- */ [data-theme="dark"] #cart-drawer { background: rgba(28, 28, 30, 0.9) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border-right-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .cart-item { background: var(--glass-bg); border-color: var(--glass-border); } /* --- Dark Modals --- */ [data-theme="dark"] #modal-backdrop { background: rgba(0, 0, 0, 0.75); } /* Product modal inputs — solid white, clear border */ #modal-content input, #modal-content select { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1d1d1f !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; transition: all 0.25s var(--apple-ease); } #modal-content input:focus, #modal-content select:focus { background: #ffffff !important; border-color: var(--apple-blue) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06) !important; outline: none !important; } [data-theme="dark"] #modal-content { background: rgba(44, 44, 46, 0.9) !important; border-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] #modal-content input, [data-theme="dark"] #modal-content select { background: rgba(58, 58, 60, 0.6) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f5f5f7 !important; } [data-theme="dark"] #modal-content input:focus, [data-theme="dark"] #modal-content select:focus { background: rgba(72, 72, 74, 0.8) !important; border-color: rgba(10, 132, 255, 0.5) !important; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15) !important; } [data-theme="dark"] .modal-section-header { border-bottom-color: rgba(255, 255, 255, 0.06); } /* --- Dark Toasts --- */ [data-theme="dark"] .toast-info { background: rgba(58, 58, 60, 0.85); color: #f5f5f7; border-color: rgba(255, 255, 255, 0.08); } /* --- Dark Confirm Dialog --- */ [data-theme="dark"] .confirm-dialog { background: rgba(44, 44, 46, 0.92); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .confirm-dialog h3 { color: #f5f5f7; } [data-theme="dark"] .confirm-dialog p { color: #8e8e93; } [data-theme="dark"] .confirm-cancel-btn { background: rgba(255, 255, 255, 0.08); color: #f5f5f7; } [data-theme="dark"] .confirm-cancel-btn:hover { background: rgba(255, 255, 255, 0.12); } /* --- Dark Pending Section --- */ [data-theme="dark"] #pending-section { background: rgba(0, 0, 0, 0.6); } [data-theme="dark"] #pending-section .glass { background: rgba(44, 44, 46, 0.85); } /* --- Dark Admin Tables --- */ [data-theme="dark"] .table-wrapper tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .table-wrapper tbody tr:hover { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] table th { color: #636366; } /* --- Dark Order Stepper --- */ [data-theme="dark"] .order-step-dot.pending { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .order-step-line.pending { background: rgba(255, 255, 255, 0.06); } /* --- Dark Bottom Nav --- */ [data-theme="dark"] #bottom-nav { background: rgba(28, 28, 30, 0.8) !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* --- Dark Select Dropdowns --- */ [data-theme="dark"] select { background: rgba(58, 58, 60, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f5f5f7 !important; } /* --- Dark Sidebar Profile & Nav --- */ [data-theme="dark"] #nav-items a:not(.text-white) { color: #8e8e93; } [data-theme="dark"] #nav-items a:hover { background: rgba(255, 255, 255, 0.06); color: #f5f5f7; } [data-theme="dark"] .hover\:bg-red-50\/50:hover { background: rgba(255, 59, 48, 0.1) !important; } /* --- Dark Mode Toggle Button --- */ .theme-toggle-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-radius: 1rem; font-size: 0.8125rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.3s var(--apple-ease); background: rgba(0, 0, 0, 0.03); color: #636366; } [data-theme="dark"] .theme-toggle-btn { background: rgba(255, 255, 255, 0.06); color: #aeaeb2; } .theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--apple-dark); } [data-theme="dark"] .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); color: #f5f5f7; } .theme-toggle-btn .theme-icon { transition: transform 0.5s var(--apple-spring); } .theme-toggle-btn:active .theme-icon { transform: rotate(30deg) scale(0.85); } /* Visible text selection — readable against both light and dark themes */ [data-theme="dark"] ::selection { background: rgba(10, 132, 255, 0.35); color: inherit; } html { scrollbar-gutter: stable; } body { font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, sans-serif !important; background: radial-gradient(circle at 0% 0%, rgba(240, 244, 255, 1) 0%, rgba(245, 245, 247, 1) 100%); background-attachment: fixed; color: var(--apple-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; direction: rtl; overflow-x: hidden; /* Safe Area Support — fullscreen PWA */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); min-height: 100vh; /* Native-app feel — disable iOS long-press callout but ALLOW text selection. B2B users copy product names, SKUs, and prices to share via Rubika/phone. Specific interactive elements re-disable selection below (see button/nav rules). */ -webkit-touch-callout: none; } /* Re-disable selection only on interactive controls — never on content. */ button, .btn-apple-primary, .btn-apple-dark, .nav-item, .cat-filter, .stat-counter, [role="button"], [data-section] .quantity-input + span, .product-modal-tabs button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #main-app { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 100%); /* Removed backdrop-filter to prevent layout jitter during fixed child transitions */ } button, input, select, textarea, table { font-family: "Vazirmatn", sans-serif !important; } /* ============================================ GLOBAL FORM INPUT — APPLE HIG LIGHT MODE White fill, dark hairline border, full contrast. Covers every input/select on every page. Dark-mode overrides below supersede this block. ============================================ */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.quantity-input), select, textarea { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.18) !important; color: #1d1d1f !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.quantity-input):focus, select:focus, textarea:focus { background-color: #ffffff !important; border-color: var(--apple-blue) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important; outline: none !important; } [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.quantity-input), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: rgba(58, 58, 60, 0.7) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f5f5f7 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.quantity-input):focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { background-color: rgba(72, 72, 74, 0.9) !important; border-color: var(--apple-blue) !important; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3) !important; outline: none !important; } /* Touch Target Optimization (HIG Standard) */ button, a, input[type="checkbox"], input[type="radio"], select, .touch-target { min-height: 44px !important; min-width: 44px !important; } @media (max-width: 640px) { h2 { font-size: 1.5rem !important; } h3 { font-size: 1.25rem !important; } } /* Enhanced Typography for Product Grid */ .product-title { font-size: 1.125rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; /* Enhance sharpness on some desktop browsers */ text-shadow: 0 0 1px rgba(255, 255, 255, 0.01); } @media (min-width: 1024px) { .product-title { font-size: 1.35rem; } } .product-sku { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: #86868b; } .product-price { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; } @media (min-width: 1024px) { .product-price { font-size: 1.625rem; } } /* ============================================ UNIFIED LAYOUT SYSTEM ============================================ */ .unified-sidebar { background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border-left: 1px solid rgba(255, 255, 255, 0.2); /* Use glow instead of hard line on desktop */ box-shadow: 0 0 40px rgba(0, 0, 0, 0.05); will-change: transform; flex-shrink: 0; isolation: isolate; } .unified-header { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* No shadow to maintain flow with main content */ transform: translateZ(0); isolation: isolate; } @media (min-width: 1024px) { .unified-sidebar { border-left: none; box-shadow: 0 0 60px rgba(0, 0, 0, 0.03); } .unified-header { border-bottom: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02); } } .glass { background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04); /* Force Hardware Acceleration for Sharpness */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate; } .liquid-glass { background: var(--liquid-glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: inset 0 0 0 1px var(--rim-light), 0 10px 40px rgba(0, 0, 0, 0.05); transition: all 0.5s var(--apple-ease-out); position: relative; height: auto; /* Allow cards to fit content in stacked layouts */ /* Force Hardware Acceleration for Sharpness */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate; } .liquid-glass:hover { background: rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1.5px var(--rim-light), 0 20px 50px rgba(0, 0, 0, 0.1); } .grid>.liquid-glass { height: 100%; /* Preserve equal height in grid layouts like dashboard stats */ } .fade-in { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } section { display: none; } section.active { display: block; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Custom Range/Toggle Tweaks */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* ───── Apple-style switch (HiBargh component) ───── Compact, elongated track with a small centered knob (smaller than iOS to feel more refined and less consumer-y in a B2B context). Math: track 44×22, knob 16×16, 3px padding all sides → travel 22px. Markup: */ .hb-switch { position: relative; display: inline-block; width: 44px; height: 22px; flex-shrink: 0; vertical-align: middle; } .hb-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .hb-switch-slider { position: absolute; inset: 0; cursor: pointer; background: #e5e5ea; border-radius: 999px; transition: background 0.28s cubic-bezier(0.22,1,0.36,1); box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04); } .hb-switch-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #ffffff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.18), 0 0.5px 1px rgba(0,0,0,0.08); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); } .hb-switch input:checked + .hb-switch-slider { background: #34c759; } .hb-switch input:checked + .hb-switch-slider::before { transform: translateX(22px); } .hb-switch input:focus-visible + .hb-switch-slider { box-shadow: 0 0 0 3px rgba(10,132,255,0.30); } [dir="rtl"] .hb-switch-slider::before { left: auto; right: 3px; } [dir="rtl"] .hb-switch input:checked + .hb-switch-slider::before { transform: translateX(-22px); } [data-theme="dark"] .hb-switch-slider { background: rgba(120,120,128,0.32); } /* Size variants */ .hb-switch.sm { width: 36px; height: 20px; } .hb-switch.sm .hb-switch-slider::before { width: 14px; height: 14px; top: 3px; left: 3px; } .hb-switch.sm input:checked + .hb-switch-slider::before { transform: translateX(16px); } [dir="rtl"] .hb-switch.sm .hb-switch-slider::before { left: auto; right: 3px; } [dir="rtl"] .hb-switch.sm input:checked + .hb-switch-slider::before { transform: translateX(-16px); } /* Color variants (default = iOS green when on; opt into blue/orange for context) */ .hb-switch.blue input:checked + .hb-switch-slider { background: #0a84ff; } .hb-switch.orange input:checked + .hb-switch-slider { background: linear-gradient(135deg,#ff3b30,#ff9500); } .quantity-input { background: transparent; border: none; width: 4rem; text-align: center; font-size: 1.125rem; font-weight: 900; color: var(--apple-dark); outline: none; padding: 0; margin: 0; } ::selection { background: rgba(0, 113, 227, 0.25); color: inherit; } /* Table Refinements */ table th { letter-spacing: 0.05em; text-transform: uppercase; font-size: 10px; color: #86868b; padding: 1.5rem 1.5rem 0.75rem 1.5rem; } table td { padding: 1.25rem 1.5rem; vertical-align: middle; } /* Bulletproof Responsive Views */ @media (max-width: 1023px) { .desktop-view { display: none !important; } } @media (min-width: 1024px) { .mobile-view { display: none !important; } } /* Responsive Tables */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .table-wrapper::-webkit-scrollbar { height: 6px; } .table-wrapper::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; } /* Stock Status Indicator & Tooltips */ .stock-status-container { position: relative; display: flex; align-items: center; } .stock-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; /* Changed from absolute to relative for better flow in new container */ transition: all 0.5s var(--apple-ease-out); cursor: help; } .stock-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: live-pulse 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; } .emerald-dot { background-color: #10b981; /* Emerald 500 */ color: rgba(16, 185, 129, 0.6); box-shadow: 0 0 10px rgba(16, 185, 129, 0.7); } .amber-dot { background-color: #f59e0b; /* Amber 500 */ color: rgba(245, 158, 11, 0.6); box-shadow: 0 0 10px rgba(245, 158, 11, 0.7); } .muted-dot { background-color: #8e8e93; /* Apple Gray */ color: rgba(142, 142, 147, 0.4); box-shadow: none; } @keyframes live-pulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(2.5); opacity: 0; } 100% { transform: scale(2.5); opacity: 0; } } /* Glassmorphism Tooltip */ .stock-dot .tooltip { visibility: hidden; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(0); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 14px; border-radius: 14px; color: var(--apple-dark); font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 30; pointer-events: none; } @media (min-width: 1024px) { .stock-dot:hover .tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-10px); } } .stock-status-badge { position: absolute; top: 1.5rem; left: 1.5rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); z-index: 10; } .stock-label { font-size: 10px; font-weight: 800; color: #8e8e93; } /* Standardized Status Badges */ .status-badge { padding: 0.5rem 1.25rem; border-radius: 1rem; font-size: 11px; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); display: inline-flex; align-items: center; gap: 0.5rem; } .status-pending { background: #fff8e1; color: #ff8f00; border: 1px solid rgba(255, 143, 0, 0.1); } .status-approved { background: #e8f5e9; color: #2e7d32; border: 1px solid rgba(46, 125, 50, 0.1); } .status-shipped { background: #e3f2fd; color: #1565c0; border: 1px solid rgba(21, 101, 192, 0.1); } .status-declined { background: #ffebee; color: #c62828; border: 1px solid rgba(198, 40, 40, 0.1); } .status-default { background: var(--apple-gray); color: #86868b; border: 1px solid rgba(134, 134, 139, 0.1); } /* UI Helper: Grayscale for disabled state */ .btn-disabled { opacity: 0.5 !important; filter: grayscale(1) !important; pointer-events: none !important; cursor: not-allowed !important; } /* Catalog Filter Buttons Styling */ .cat-filter { border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); color: #86868b; font-weight: 600; font-size: 0.75rem; padding: 0.75rem 1.5rem; border-radius: 999px; transition: all 0.4s var(--apple-spring); box-shadow: none !important; cursor: pointer; white-space: nowrap; flex-shrink: 0; /* never shrink — required so first pill keeps full width on mobile */ } /* Filter rail spacing on mobile — give the active pill breathing room from the screen edges */ #category-filters { padding-inline: 1rem !important; scroll-padding-inline: 1rem; } @media (min-width: 768px) { #category-filters { padding-inline: 0 !important; } } .cat-filter:hover { background: rgba(255, 255, 255, 0.6); color: var(--apple-dark); transform: translateY(-1px); } .cat-filter.active { background: var(--apple-blue); color: white; font-weight: 800; border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important; transform: translateY(-2px); } /* Search Bar Liquid Glass */ .search-glass { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.1); color: #1d1d1f; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; transform: translateZ(0); transition: all 0.25s var(--apple-ease); } .search-glass:focus { background: #ffffff; border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04) !important; outline: none; } .cat-filter:not(.active):hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); } /* Optimized Image Containers (if any) */ .product-card-image { background: linear-gradient(135deg, white, #f5f5f7); overflow: hidden; border-radius: 1.5rem; } /* ============================================ PHASE 2: FLOATING LABEL INPUTS ============================================ */ .floating-label-group { position: relative; width: 100%; } .floating-label-group input { width: 100%; padding: 1.65rem 1.75rem 0.65rem; border-radius: var(--radius-lg); background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); color: #1d1d1f; font-size: var(--text-sm); font-weight: 500; transition: all 0.25s var(--apple-ease); outline: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .floating-label-group input:focus { background: #ffffff; border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04); outline: none; } .floating-label-group label { position: absolute; top: 50%; right: 1.75rem; transform: translateY(-50%); font-size: var(--text-sm); font-weight: 500; color: #8e8e93; pointer-events: none; transition: all 0.25s var(--apple-spring); transform-origin: right; } /* Float up on focus or when filled */ .floating-label-group input:focus+label, .floating-label-group input:not(:placeholder-shown)+label { top: 0.35rem; transform: translateY(0) scale(0.8); color: var(--apple-blue); font-weight: 700; } /* LTR inputs: label on left, caret must not overlap */ .floating-label-group.ltr-input label { right: auto; left: 1.75rem; transform-origin: left; } .floating-label-group.ltr-input input { direction: ltr; text-align: left; } .floating-label-group.ltr-input input:focus+label, .floating-label-group.ltr-input input:not(:placeholder-shown)+label { left: 1.75rem; } /* ============================================ PHASE 2: FORM VALIDATION STATES ============================================ */ .input-valid { border-color: rgba(52, 199, 89, 0.4) !important; } .input-error { border-color: rgba(255, 59, 48, 0.4) !important; animation: inputShake 0.4s var(--apple-ease); } .validation-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0; transition: all 0.3s var(--apple-spring); } .validation-icon.show { opacity: 1; } .validation-message { font-size: var(--text-2xs); font-weight: 600; padding: 0.25rem 0.5rem 0; transition: all 0.25s var(--apple-ease); } .validation-message.error { color: var(--apple-red); } .validation-message.success { color: var(--apple-green); } @keyframes inputShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ============================================ PHASE 2: AUTH TAB ANIMATION ============================================ */ .auth-form-container { position: relative; } .auth-form { transition: all 0.4s var(--apple-spring); opacity: 1; transform: translateX(0); } .auth-form.slide-out-left { opacity: 0; transform: translateX(30px); position: absolute; inset: 0; pointer-events: none; } .auth-form.slide-out-right { opacity: 0; transform: translateX(-30px); position: absolute; inset: 0; pointer-events: none; } /* ============================================ PHASE 2: PENDING MODAL BREATHING ============================================ */ .breathing-icon { animation: breathe 3s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } } .pulse-dots { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--apple-blue); opacity: 0.3; animation: pulseDot 1.5s ease-in-out infinite; } .pulse-dot:nth-child(2) { animation-delay: 0.2s; } /* Order Details Accordion */ .order-details-accordion { transition: all 0.4s var(--apple-ease-out); } .rotate-180 { transform: rotate(180deg); } .order-items-grid { display: grid; gap: 0.75rem; } .order-items-grid>div { animation: slideUpFade 0.5s var(--apple-ease-out) forwards; opacity: 0; } .order-items-grid>div:nth-child(2) { animation-delay: 0.1s; } .order-items-grid>div:nth-child(3) { animation-delay: 0.15s; } .order-items-grid>div:nth-child(4) { animation-delay: 0.2s; } .order-items-grid>div:nth-child(n+5) { animation-delay: 0.25s; } @keyframes slideUpFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .order-stepper { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; } .order-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #e5e7eb; background: white; z-index: 10; transition: all 0.4s var(--apple-ease); } .order-step-dot.active { border-color: var(--apple-blue); background: var(--apple-blue); box-shadow: 0 0 10px rgba(0, 113, 227, 0.4); } .order-step-dot.completed { border-color: var(--apple-blue); background: var(--apple-blue); } .order-step-line { flex: 1; height: 2px; background: #e5e7eb; margin: 0 -2px; transition: all 0.4s var(--apple-ease); } .order-step-line.completed { background: var(--apple-blue); } .order-step-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; padding: 0 0.5rem; } .order-step-label { font-size: 9px; font-weight: 800; color: #9ca3af; text-transform: uppercase; } .order-step-label.active { color: var(--apple-blue); } .order-step-label.completed { color: #4b5563; } @keyframes pulseDot { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* ============================================ PHASE 3: QUANTITY CONTROLS GLOW ============================================ */ .quantity-controls { transition: all 0.4s var(--apple-ease-out); } .quantity-controls.has-items { border-color: rgba(0, 113, 227, 0.25) !important; box-shadow: 0 0 20px rgba(0, 113, 227, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06) !important; } .qty-bump { animation: qtyBump 0.3s var(--apple-spring); } @keyframes qtyBump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } /* ============================================ PHASE 5: SIDEBAR NAV TRANSITIONS ============================================ */ #nav-items a { transition: background 0.35s var(--apple-ease), color 0.35s var(--apple-ease), box-shadow 0.35s var(--apple-ease), transform 0.2s var(--apple-ease); } #nav-items a:active { transform: scale(0.97); } /* Time Greeting */ .user-greeting { font-size: var(--text-2xs); font-weight: 600; color: var(--apple-blue); margin-bottom: 0.125rem; } /* Auto-hide bottom nav */ #bottom-nav { transition: transform 0.4s var(--apple-spring); } #bottom-nav.nav-hidden { transform: translateY(calc(100% + 2rem)); } /* ============================================ PHASE 6: ORDER PROGRESS STEPPER ============================================ */ .order-stepper { display: flex; align-items: center; gap: 0; padding: 0.75rem 0 0.25rem; } .order-step { display: flex; align-items: center; flex: 1; } .order-step-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s var(--apple-ease); } .order-step-dot.completed { background: var(--apple-green); box-shadow: 0 0 8px rgba(52, 199, 89, 0.4); } .order-step-dot.active { background: var(--apple-blue); box-shadow: 0 0 8px rgba(0, 113, 227, 0.4); width: 10px; height: 10px; } .order-step-dot.pending { background: rgba(0, 0, 0, 0.08); } .order-step-line { flex: 1; height: 2px; margin: 0 0.25rem; border-radius: 1px; transition: background 0.3s var(--apple-ease); } .order-step-line.completed { background: var(--apple-green); } .order-step-line.pending { background: rgba(0, 0, 0, 0.06); } .order-step-labels { display: flex; justify-content: space-between; padding: 0.25rem 0 0; } .order-step-label { font-size: 0.5625rem; font-weight: 700; color: #86868b; text-align: center; } .order-step-label.active { color: var(--apple-blue); } .order-step-label.completed { color: var(--apple-green); } /* ============================================ PHASE 7: ADMIN TABLE LUXURY ============================================ */ .table-wrapper tbody tr { transition: all 0.25s var(--apple-ease); } .table-wrapper tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); } .table-wrapper tbody tr:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } /* Stat counter animation */ .stat-counter { transition: all 0.4s var(--apple-spring); } /* Modal scale-in */ #modal-content { animation: modalScaleIn 0.35s var(--apple-spring) both; } @keyframes modalScaleIn { from { opacity: 0; transform: scale(0.92) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Modal section headers */ .modal-section-header { font-size: var(--text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #86868b; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.04); margin-bottom: 1rem; } /* ============================================ PHASE 3: SEARCH CLEAR BUTTON ============================================ */ .search-clear-btn { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.08); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.25s var(--apple-ease); } .search-clear-btn.visible { opacity: 1; pointer-events: auto; } .search-clear-btn:hover { background: rgba(0, 0, 0, 0.14); } .result-count { font-size: var(--text-xs); font-weight: 700; color: #86868b; padding: 0.5rem 0; transition: all 0.3s var(--apple-ease); } /* ============================================ PHASE 4: CART ITEM ANIMATIONS ============================================ */ .cart-item { transition: all 0.4s var(--apple-spring); } .cart-item.removing { opacity: 0; transform: translateX(-100%); max-height: 0; padding: 0; margin: 0; overflow: hidden; } /* ============================================ TOAST NOTIFICATION SYSTEM ============================================ */ .toast-container { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; pointer-events: none; width: 100%; max-width: 420px; padding: 0 1.5rem; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.5rem; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; line-height: 1.4; width: 100%; backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.5); animation: toastEnter 0.5s var(--apple-spring) forwards; will-change: transform, opacity; } .toast-success { background: rgba(52, 199, 89, 0.85); color: white; } .toast-error { background: rgba(255, 59, 48, 0.85); color: white; } .toast-info { background: rgba(255, 255, 255, 0.75); color: var(--apple-dark); border: 1px solid rgba(0, 0, 0, 0.06); } .toast-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .toast-exit { animation: toastExit 0.35s var(--apple-ease) forwards; } @keyframes toastEnter { 0% { opacity: 0; transform: translateY(-20px) scale(0.92); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes toastExit { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(0.95); } } /* ============================================ CONFIRM DIALOG SYSTEM ============================================ */ .confirm-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: confirmBackdropIn 0.3s var(--apple-ease) forwards; } .confirm-dialog { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-xl); padding: 2.5rem; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15); animation: confirmDialogIn 0.4s var(--apple-spring) forwards; } .confirm-dialog h3 { font-size: var(--text-lg); font-weight: 800; color: var(--apple-dark); margin-bottom: 0.5rem; } .confirm-dialog p { font-size: var(--text-sm); color: #86868b; line-height: 1.6; margin-bottom: 2rem; font-weight: 500; } .confirm-dialog .confirm-actions { display: flex; gap: 0.75rem; } .confirm-dialog .confirm-actions button { flex: 1; padding: 0.875rem 1.5rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; border: none; cursor: pointer; transition: all 0.25s var(--apple-ease); } .confirm-dialog .confirm-actions button:active { transform: scale(0.96); } .confirm-cancel-btn { background: rgba(0, 0, 0, 0.06); color: var(--apple-dark); } .confirm-cancel-btn:hover { background: rgba(0, 0, 0, 0.1); } .confirm-destructive-btn { background: var(--apple-red); color: white; box-shadow: 0 4px 16px rgba(255, 59, 48, 0.3); } .confirm-destructive-btn:hover { filter: brightness(1.1); } .confirm-primary-btn { background: var(--apple-blue); color: white; box-shadow: 0 4px 16px rgba(0, 113, 227, 0.3); } .confirm-primary-btn:hover { filter: brightness(1.1); } @keyframes confirmBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes confirmDialogIn { 0% { opacity: 0; transform: scale(0.9) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .confirm-backdrop-exit { animation: confirmBackdropOut 0.25s var(--apple-ease) forwards; } .confirm-backdrop-exit .confirm-dialog { animation: confirmDialogOut 0.25s var(--apple-ease) forwards; } @keyframes confirmBackdropOut { to { opacity: 0; } } @keyframes confirmDialogOut { to { opacity: 0; transform: scale(0.95); } } /* ============================================ ACCESSIBILITY — Focus Rings ============================================ */ *:focus { outline: none; } *:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; border-radius: var(--radius-sm); } button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus-ring) !important; } /* Skip Link (screen readers) */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: var(--apple-dark); color: white; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); z-index: 10000; transition: top 0.3s var(--apple-ease); } .skip-link:focus { top: 1rem; } /* ============================================ STAGGERED CARD ENTRY (Intersection Observer) ============================================ */ .stagger-item { opacity: 0; transform: translateY(24px); will-change: transform, opacity; } .stagger-item.visible { animation: staggerReveal 0.6s var(--apple-spring) forwards; } @keyframes staggerReveal { to { opacity: 1; transform: translateY(0); } } /* ============================================ PREFERS REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .liquid-glass:hover { transform: none; } .toast { animation: none; opacity: 1; } .confirm-dialog, .confirm-backdrop { animation: none; opacity: 1; } .stagger-item { opacity: 1; transform: none; } .fade-in { animation: none; opacity: 1; } html { scroll-behavior: auto; } } /* ============================================ MOBILE PERFORMANCE — STRIP BLUR < 768px Desktop & tablet: full glassmorphism Phone: solid frosted backgrounds (no GPU blur) ============================================ */ @media (max-width: 767px) { /* Core glass elements — solid frosted white */ .glass { background: rgba(255, 255, 255, 0.88) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .liquid-glass { background: rgba(255, 255, 255, 0.82) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .liquid-glass:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.9) !important; } /* Product cards — solid white */ [class*="backdrop-blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Confirm dialog & toast — solid */ .confirm-dialog { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .toast-info { background: rgba(255, 255, 255, 0.98) !important; } .toast-success { background: rgba(52, 199, 89, 1) !important; } .toast-error { background: rgba(255, 59, 48, 1) !important; } .toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Modal backdrop — simpler blur */ #modal-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, 0.55) !important; } /* Cart drawer backdrop */ #cart-drawer-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, 0.4) !important; } /* Pending section backdrop */ #pending-section { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Reduce animation complexity */ .stagger-item { animation-duration: 0.2s !important; } /* Disable card hover lift on touch */ .liquid-glass:active { transform: scale(0.98); } } /* ============================================ LOW-DPI DESKTOP — SHARPER TEXT 27" 1080p monitors ~ 82 PPI (1x device-pixel-ratio). Heavy backdrop-filter blur forces GPU compositing which kills subpixel antialiasing on non-Retina screens. Solution: reduce blur to keep the glass look but preserve text crispness. ============================================ */ @media (max-resolution: 1.5dppx) and (min-width: 768px) { .unified-sidebar { backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; } .unified-header { backdrop-filter: blur(10px) saturate(140%) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; } .glass { backdrop-filter: blur(10px) saturate(150%) !important; -webkit-backdrop-filter: blur(10px) saturate(150%) !important; } .liquid-glass { backdrop-filter: blur(8px) saturate(150%) !important; -webkit-backdrop-filter: blur(8px) saturate(150%) !important; } .search-glass { backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; } .cat-filter { backdrop-filter: blur(6px) saturate(120%) !important; -webkit-backdrop-filter: blur(6px) saturate(120%) !important; } .toast { backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; } .confirm-dialog { backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; } /* Remove subtle text-shadow that softens glyphs at 1x */ .product-title { text-shadow: none !important; } } /* ============================================ MOBILE DARK MODE — SOLID DARK SURFACES On mobile, backdrop-filter is stripped for performance. Dark mode needs solid dark backgrounds instead of solid white ones. ============================================ */ @media (max-width: 767px) { [data-theme="dark"] .glass { background: rgba(44, 44, 46, 0.92) !important; } [data-theme="dark"] .liquid-glass { background: rgba(38, 38, 40, 0.9) !important; } [data-theme="dark"] .liquid-glass:hover, [data-theme="dark"] .liquid-glass:active { background: rgba(50, 50, 52, 0.95) !important; } [data-theme="dark"] .confirm-dialog { background: rgba(44, 44, 46, 0.96) !important; } [data-theme="dark"] .toast-info { background: rgba(58, 58, 60, 0.98) !important; } [data-theme="dark"] .toast-success { background: rgba(52, 199, 89, 0.95) !important; } [data-theme="dark"] .toast-error { background: rgba(255, 59, 48, 0.95) !important; } }