/* ============================================= BuyPakistani — Main Stylesheet Dark mode default, Light mode via .light class on ============================================= */ /* ---------- CSS Variables ---------- */ :root { --bg-base: #0a0a0a; --bg-card: rgba(255,255,255,0.03); --bg-card-hover: rgba(255,255,255,0.06); --bg-nav: rgba(10,10,10,0.85); --border: rgba(255,255,255,0.08); --border-hover: rgba(34,197,94,0.35); --text-primary: #f1f5f9; --text-secondary:#94a3b8; --text-muted: #64748b; --green-glow: rgba(34,197,94,0.15); --red-glow: rgba(239,68,68,0.12); --tag-red-bg: rgba(239,68,68,0.15); --tag-red-text: #fca5a5; --tag-red-border:rgba(239,68,68,0.3); --tag-green-bg: rgba(34,197,94,0.15); --tag-green-text:#86efac; --tag-green-border:rgba(34,197,94,0.3); --gradient-border-inner: #111111; --input-bg: rgba(30,30,30,0.8); --input-border: #374151; --shadow-green: 0 0 30px rgba(34,197,94,0.15); } html.light { --bg-base: #f8fafc; --bg-card: rgba(255,255,255,0.85); --bg-card-hover: rgba(255,255,255,1); --bg-nav: rgba(248,250,252,0.92); --border: rgba(0,0,0,0.08); --border-hover: rgba(22,163,74,0.4); --text-primary: #0f172a; --text-secondary:#475569; --text-muted: #475569; --green-glow: rgba(22,163,74,0.08); --red-glow: rgba(220,38,38,0.06); --tag-red-bg: rgba(254,226,226,0.9); --tag-red-text: #dc2626; --tag-red-border:rgba(220,38,38,0.25); --tag-green-bg: rgba(220,252,231,0.9); --tag-green-text:#15803d; --tag-green-border:rgba(22,163,74,0.25); --gradient-border-inner: #ffffff; --input-bg: rgba(241,245,249,0.9); --input-border: #cbd5e1; --shadow-green: 0 0 30px rgba(22,163,74,0.1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg-base); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; } /* ---------- Links ---------- */ body a { color: var(--text-primary); text-decoration: none; transition: color 0.2s; } /* Green hover for simple text links only (not buttons) */ body a:not([class*="bg-"]):not(.glass):not([class*="glass-"]):hover { color: #22c55e; } html.light body a:not([class*="bg-"]):not(.glass):not([class*="glass-"]):hover { color: #15803d; } /* ---------- Glass Cards ---------- */ .glass { background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); transition: background 0.3s, border-color 0.3s; } .glass-hover:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-green); } .card-glow:hover { box-shadow: var(--shadow-green); } /* ---------- Dropdown Menu ---------- */ .dropdown { background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); } html.light .dropdown { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border); } /* ---------- Navbar ---------- */ .nav-blur { background: var(--bg-nav); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } /* ---------- Gradient Text ---------- */ .gradient-text { background: linear-gradient(135deg, #22c55e, #86efac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html.light .gradient-text { background: linear-gradient(135deg, #15803d, #16a34a); -webkit-background-clip: text; background-clip: text; } /* ---------- Gradient Border ---------- */ .gradient-border { border: 1px solid transparent; background: linear-gradient(var(--gradient-border-inner), var(--gradient-border-inner)) padding-box, linear-gradient(135deg, #22c55e, #86efac) border-box; } /* ---------- Hero Glow ---------- */ .hero-glow { background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--green-glow), transparent); } /* ---------- Tags ---------- */ .tag-red { background: var(--tag-red-bg); color: var(--tag-red-text); border: 1px solid var(--tag-red-border); } .tag-green { background: var(--tag-green-bg); color: var(--tag-green-text); border: 1px solid var(--tag-green-border); } /* ---------- Form Inputs ---------- */ .form-input { width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); font-size: 0.875rem; transition: border-color 0.2s, background 0.3s; outline: none; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { border-color: #22c55e; } /* ---------- Trash bulk-select checkboxes ---------- */ .trash-checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; position: relative; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; flex-shrink: 0; } .trash-checkbox:hover { border-color: var(--border-hover); background: var(--bg-card-hover); } .trash-checkbox:checked { background: #22c55e; border-color: #22c55e; box-shadow: 0 0 0 3px var(--green-glow); } .trash-checkbox:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .trash-checkbox:focus-visible { outline: 2px solid var(--border-hover); outline-offset: 2px; } /* ---------- Scrollbar ---------- */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* ---------- Animations ---------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInFromTop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideOutToTop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-in { animation: fadeIn 0.5s ease-in-out; } .animate-slide-up { animation: slideUp 0.4s ease-out; } .flash-msg { animation: slideInFromTop 0.4s ease-out; } .flash-msg.animate-slide-out { animation: slideOutToTop 0.4s ease-in forwards; } /* ---------- Theme Toggle Button ---------- */ .theme-toggle { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; font-size: 1rem; } .theme-toggle:hover { border-color: var(--border-hover); transform: scale(1.1); } /* ---------- Breadcrumb ---------- */ .breadcrumb { color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); transition: color 0.2s; } .breadcrumb a:hover { color: #22c55e; } .breadcrumb .current { color: var(--text-primary); } /* ---------- Light mode text overrides ---------- */ html.light .text-gray-100 { color: #0f172a; } html.light .text-gray-200 { color: #1e293b; } html.light .text-gray-300 { color: #334155; } html.light .text-gray-400 { color: #475569; } html.light .text-gray-500 { color: #64748b; } html.light .text-gray-600 { color: #94a3b8; } html.light .text-gray-700 { color: #64748b; } html.light .text-gray-800 { color: #475569; } html.light .text-gray-900 { color: #0f172a; } html.light .text-white { color: #0f172a; } html.light .border-gray-700 { border-color: #e2e8f0; } html.light .border-gray-800 { border-color: #e2e8f0; } html.light .bg-gray-800\/60 { background: rgba(241,245,249,0.9); } html.light .placeholder-gray-500::placeholder { color: #94a3b8; } /* ---------- Light mode navbar fix ---------- */ html.light .nav-blur { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* ---------- Light mode dropdown fix ---------- */ html.light .dropdown { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 0, 0, 0.08); } /* ---------- Light mode glass card fix ---------- */ html.light .glass { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); } html.light .glass-hover:hover { background: rgba(255, 255, 255, 1); border-color: rgba(22, 163, 74, 0.4); } /* ---------- Light mode input fix ---------- */ html.light .form-input { background: rgba(241, 245, 249, 0.95); border: 1px solid #cbd5e1; color: #0f172a; } html.light .form-input::placeholder { color: #94a3b8; } html.light .form-input:focus { border-color: #22c55e; } /* ---------- Page favicon emoji fallback ---------- */ .site-favicon { display: inline-flex; align-items: center; justify-content: center; } /* ---------- Autocomplete Dropdown ---------- */ .autocomplete-dropdown { background: rgba(20, 20, 20, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } html.light .autocomplete-dropdown { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .autocomplete-dropdown a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--text-primary); text-decoration: none; transition: background 0.15s; } .autocomplete-dropdown a:hover, .autocomplete-dropdown a:focus { background: rgba(34, 197, 94, 0.08); } .autocomplete-dropdown a strong { color: #22c55e; font-weight: 600; } html.light .autocomplete-dropdown a strong { color: #15803d; } .autocomplete-dropdown .autocomplete-empty { padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--text-muted); text-align: center; } /* Search input with spinner */ #searchInput.pr-10, #navbarSearchInput.pr-10, #mobileSearchInput.pr-10 { padding-right: 2.5rem; } /* ---------- Text Logo ---------- */ .logo-text { font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-decoration: none; } .logo-text .logo-buy { color: #ffffff; } .logo-text .logo-pakistani { color: #22c55e; } .logo-text .logo-org { color: #64748b; } .logo-text .i-with-star { position: relative; display: inline-block; } .logo-text .i-with-star::after { content: "★"; position: absolute; top: calc(-0.4em + 2px); left: 50%; transform: translateX(-50%); color: #FFD700; font-size: 0.7em; line-height: 1; } html.light .logo-text .logo-buy { color: #0f172a; } html.light .logo-text .logo-pakistani { color: #15803d; } html.light .logo-text .logo-org { color: #64748b; }