@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=DM+Sans:wght@300;400;500;600&family=Cairo:wght@400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Light mode (default) ── */ body { --bg: #f8f7f5; --surface: #ffffff; --surface2: #f0ede8; --border: #e8e6e1; --text: #1a1a1a; --text2: #555555; --text3: #999999; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; } /* ── Dark mode — class on ── */ body.dark { --bg: #0f0f0f; --surface: #1a1a1a; --surface2: #252525; --border: #2e2e2e; --text: #f0f0f0; --text2: #aaaaaa; --text3: #555555; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); } [dir="rtl"] { font-family: 'Cairo', sans-serif; } [dir="ltr"] { font-family: 'DM Sans', sans-serif; } /* ── Sticky nav ── */ .store-nav { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow var(--transition), background 0.3s; } .store-nav.scrolled { box-shadow: var(--shadow-md); } /* ── Theme toggle ── */ .theme-toggle { width: 40px; height: 24px; border-radius: 12px; border: none; cursor: pointer; position: relative; background: #ddd; transition: background 0.3s; flex-shrink: 0; padding: 0; } body.dark .theme-toggle { background: var(--brand, #1a56db); } .theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } body.dark .theme-toggle::after { transform: translateX(16px); } /* ── Search ── */ .search-input { width: 100%; padding: 10px 16px 10px 40px; border: 1.5px solid var(--border); border-radius: 30px; font-size: 14px; font-family: inherit; background: var(--surface2); color: var(--text); outline: none; transition: all var(--transition); } .search-input:focus { border-color: var(--brand); background: var(--surface); } .search-input::placeholder { color: var(--text3); } /* ── Category tabs ── */ .cat-tab { padding: 7px 18px; border-radius: 30px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap; transition: all var(--transition); } .cat-tab.active { background: var(--brand); color: white; border-color: var(--brand); } .cat-tab:hover:not(.active) { border-color: var(--brand); color: var(--brand); } /* ── Cards ── */ .hero-card { background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); cursor: pointer; } .hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .product-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); cursor: pointer; } .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .product-card img { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); } .product-card:hover img { transform: scale(1.06); } /* ── Delivery ── */ .delivery-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); } .delivery-toggle { width: 100%; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text); } /* ── Animations ── */ .fade-in { animation: fadeUp 0.4s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .fade-in:nth-child(2) { animation-delay: 0.05s; } .fade-in:nth-child(3) { animation-delay: 0.10s; } .fade-in:nth-child(4) { animation-delay: 0.15s; } .fade-in:nth-child(5) { animation-delay: 0.20s; } /* ── Modal ── */ .overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; } @media(min-width:640px) { .overlay { align-items: center; } } .sheet { background: var(--surface); width: 100%; max-width: 520px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; overflow-y: auto; padding: 28px 24px; border: 1px solid var(--border); border-bottom: none; animation: sheetUp 0.3s cubic-bezier(0.4,0,0.2,1); } @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media(min-width:640px) { .sheet { border-radius: var(--radius-xl); border: 1px solid var(--border); } } /* ── Forms ── */ input, select, textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 15px; font-family: inherit; background: var(--surface2); color: var(--text); transition: all var(--transition); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--brand); background: var(--surface); } input::placeholder, textarea::placeholder { color: var(--text3); } select option { background: var(--surface); color: var(--text); } label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; } /* ── Buttons ── */ .btn-primary { width: 100%; padding: 15px; background: var(--brand); color: white; border: none; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; transition: opacity var(--transition), transform var(--transition); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .qty-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); font-family: inherit; } .qty-btn:hover { border-color: var(--brand); color: var(--brand); }