/* Dukai global styles — extends Tailwind */ :root { --brand-50: #EEF2FF; --brand-500: #6366F1; --brand-600: #4F46E5; --brand-700: #4338CA; } /* Alpine flash-of-unstyled-content guard. * * 1. `x-cloak` is always honored (Alpine removes it after evaluating). * 2. As a safety net, every `x-show` element is pre-hidden until * Alpine boots and adds `.alpine-ready` to . The listener * lives in partials/base.html. Once `.alpine-ready` is on, this * rule no longer matches, so Alpine's own inline styles take over * and elements show or hide based on their expressions. * * This is what stops modals/dropdowns from flashing during the ~100ms * gap between HTML render and the deferred Alpine script booting. */ [x-cloak] { display: none !important; } html:not(.alpine-ready) [x-show] { display: none !important; } /* tabular numbers for money + quantities */ .num, .font-mono, table td.num { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; } /* slim, subtle scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.15); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.3); background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* primary button */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 0.75rem; background: var(--brand-600); color: white; font-weight: 600; transition: transform 80ms ease, background-color 120ms ease; } .btn-primary:hover { background: var(--brand-700); } .btn-primary:active { transform: scale(0.97); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 0.75rem; background: rgba(15,23,42,0.04); color: rgb(15,23,42); font-weight: 600; transition: transform 80ms ease, background-color 120ms ease; } .btn-ghost:hover { background: rgba(15,23,42,0.08); } .btn-ghost:active { transform: scale(0.97); } /* slide-in for toasts */ @keyframes slide-in { from { transform: translateY(-8px) translateX(8px); opacity: 0; } to { transform: translateY(0) translateX(0); opacity: 1; } } .animate-slide-in { animation: slide-in 180ms ease-out both; } /* currency input prefix */ .input-money { position: relative; } .input-money::before { content: "₹"; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: rgb(100,116,139); pointer-events: none; } .input-money > input { padding-left: 1.75rem; } /* multilingual font helpers — apply via [data-lang="gu|hi"] on body */ body[data-lang="gu"] { font-family: 'Noto Sans Gujarati', Inter, sans-serif; } body[data-lang="hi"] { font-family: 'Noto Sans Devanagari', Inter, sans-serif; } /* ===== Shops-near-you animated cards ===== */ @keyframes shop-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes shop-awning{ 0%,100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } } @keyframes sale-pulse { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.12); } } @keyframes shop-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } } .shopcard { animation: shop-pop 320ms ease-out both; } .shopcard:hover .shopcard-scene { animation-duration: 1s; } .shopcard-scene { animation: shop-bob 2.4s ease-in-out infinite; transform-origin: bottom center; } .shopcard-awning { animation: shop-awning 3s ease-in-out infinite; transform-origin: top center; } .shopcard-sale { animation: sale-pulse 750ms ease-in-out infinite; transform-origin: center; } .shopcard-awning-stripe { fill: rgba(0,0,0,0.18); } @media (prefers-reduced-motion: reduce) { .shopcard, .shopcard-scene, .shopcard-awning, .shopcard-sale { animation: none !important; } } /* HTMX indicator */ .htmx-indicator { opacity: 0; transition: opacity 120ms; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ============================================================ * DARK MODE * * The templates use plain Tailwind utilities (bg-white, * text-slate-900, border-slate-200, …) with no `dark:` variants, so we * flip them site-wide by overriding the common ones under `html.dark`. * `html.dark .bg-white` (specificity 0,2,1) beats the CDN's single-class * `.bg-white` (0,1,0) — no !important needed. The `dark` class is set * pre-paint by the init script in base.html. Brand/indigo + already-dark * slate-800/900 are left as-is (they read fine on dark). * ============================================================ */ html.dark { color-scheme: dark; } html.dark body { background-color: #0f172a; color: #e2e8f0; } /* Surfaces */ html.dark .bg-white { background-color: #1e293b; } html.dark .bg-slate-50 { background-color: #0f172a; } html.dark .bg-slate-100 { background-color: #1e293b; } html.dark .bg-slate-200 { background-color: #334155; } html.dark .hover\:bg-slate-50:hover { background-color: #0f172a; } html.dark .hover\:bg-slate-100:hover { background-color: #1e293b; } html.dark .hover\:bg-white:hover { background-color: #243244; } /* Text */ html.dark .text-slate-900 { color: #f1f5f9; } html.dark .text-slate-800 { color: #e2e8f0; } html.dark .text-slate-700 { color: #cbd5e1; } html.dark .text-slate-600 { color: #94a3b8; } html.dark .text-slate-500 { color: #94a3b8; } html.dark .text-slate-400 { color: #64748b; } html.dark .text-black { color: #f1f5f9; } /* Borders / rings / dividers */ html.dark .border-slate-100 { border-color: #1e293b; } html.dark .border-slate-200 { border-color: #334155; } html.dark .border-slate-300 { border-color: #475569; } html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; } html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; } html.dark .ring-slate-200 { --tw-ring-color: #334155; } /* Inputs / placeholders */ html.dark .placeholder-slate-400::placeholder { color: #64748b; } html.dark .placeholder-slate-500::placeholder { color: #64748b; } html.dark input, html.dark textarea, html.dark select { color: #e2e8f0; } /* Indigo accents (active states, selected chips) — keep readable on dark */ html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.16); } html.dark .text-indigo-700 { color: #a5b4fc; } html.dark .text-indigo-600 { color: #818cf8; } /* Component overrides */ html.dark .btn-ghost { background: rgba(255,255,255,0.08); color: #e2e8f0; } html.dark .btn-ghost:hover { background: rgba(255,255,255,0.14); } html.dark .input-money::before { color: #94a3b8; } html.dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); background-clip: content-box; } html.dark *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); background-clip: content-box; }