/* ============================================================ MY LUCKY LAUNDRY — Shared Theme System Light/Dark mode, toast notifications, UI polish ============================================================ */ /* ── LIGHT MODE VARIABLES ──────────────────────────────────── */ /* Applied when */ [data-theme="light"] { /* index.html / about.html / contact.html / faq.html / privacy.html / cancel.html */ --bg-dark: #fdf9f0; --bg-card: #ffffff; --bg-card-hover: #f5f0e4; --bg-surface: #f0ead8; --text-primary: #1a1209; --text-secondary: #4a3f2e; --text-muted: #8a7a60; --border-subtle: rgba(212,175,55,0.2); --border-gold: rgba(212,175,55,0.35); --gold-subtle: rgba(244,196,48,0.12); /* book.html uses shorter variable names */ --bg: #fdf9f0; --card: #ffffff; --card2: #f5f0e4; --surface: #f0ead8; --text: #1a1209; --text2: #4a3f2e; --text3: #8a7a60; --border: rgba(212,175,55,0.28); --border2: rgba(0,0,0,0.09); } /* ── ELEMENT OVERRIDES FOR LIGHT MODE ──────────────────────── */ [data-theme="light"] body { background: var(--bg-dark, var(--bg, #fdf9f0)); color: var(--text-primary, var(--text, #1a1209)); } /* Nav */ [data-theme="light"] nav { background: rgba(253, 249, 240, 0.96) !important; } /* Glass cards */ [data-theme="light"] .glass-card { background: rgba(255,255,255,0.75); } /* Compare table */ [data-theme="light"] .compare-table { background: #ffffff; } [data-theme="light"] .compare-table th, [data-theme="light"] .compare-table td { border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] .compare-table th { background: rgba(244,196,48,0.04); } /* Footer */ [data-theme="light"] footer { background: var(--bg-surface, var(--surface, #f0ead8)); } /* Booking card */ [data-theme="light"] .booking-card { background: #ffffff; border-color: rgba(0,0,0,0.1); } /* Form inputs */ [data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select { background: rgba(0,0,0,0.03) !important; color: var(--text, #1a1209) !important; border-color: rgba(0,0,0,0.12); } [data-theme="light"] .field select option { background: #ffffff; } /* Tags input */ [data-theme="light"] .tags-wrap { background: rgba(0,0,0,0.03); } [data-theme="light"] .tag-input { color: var(--text, #1a1209); } /* Addon cards */ [data-theme="light"] .addon-card, [data-theme="light"] .bag-card, [data-theme="light"] .recurring-opt, [data-theme="light"] .addr-card, [data-theme="light"] .time-btn { background: var(--card2, #f5f0e4) !important; border-color: rgba(0,0,0,0.1); color: var(--text, #1a1209); } [data-theme="light"] .bag-card.selected, [data-theme="light"] .recurring-opt.selected, [data-theme="light"] .addr-card.sel { background: rgba(244,196,48,0.1) !important; border-color: var(--gold, #F4C430) !important; } /* Running total */ [data-theme="light"] .running-total { background: rgba(244,196,48,0.06); border-color: rgba(244,196,48,0.2); } /* Summary block */ [data-theme="light"] .summary-block { background: var(--card2, #f5f0e4); } [data-theme="light"] .sum-row { border-bottom-color: rgba(0,0,0,0.06); } /* Promo input */ [data-theme="light"] .promo-input { background: rgba(0,0,0,0.03); color: var(--text, #1a1209); border-color: rgba(0,0,0,0.12); } [data-theme="light"] .promo-btn { background: var(--card2, #f5f0e4); color: var(--text, #1a1209); } /* Mobile nav open */ [data-theme="light"] .nav-links.open { background: rgba(253,249,240,0.99) !important; } /* Progress bar */ [data-theme="light"] .bubble.pending { background: #e8e0cc; border-color: rgba(0,0,0,0.1); } /* Calendar */ [data-theme="light"] .cal-btn { border-color: rgba(0,0,0,0.12); color: var(--text2, #4a3f2e); } [data-theme="light"] .cal-day.avail:hover { background: rgba(244,196,48,0.15); } /* Qty buttons */ [data-theme="light"] .qty-btn { background: #f0e8d0; border-color: rgba(0,0,0,0.1); color: var(--text, #1a1209); } /* Delivery options */ [data-theme="light"] .delivery-opt { border-color: rgba(0,0,0,0.12); } /* Recurring section */ [data-theme="light"] .recurring-section { background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.25); } /* Price chips (index.html) */ [data-theme="light"] .price-chip { background: #ffffff; border-color: rgba(244,196,48,0.25); } /* Step card (index.html) */ [data-theme="light"] .step-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .step-card:hover { background: var(--bg-card-hover, #f5f0e4); } /* Feature card (index.html) */ [data-theme="light"] .feature-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .feature-card:hover { background: var(--bg-card-hover, #f5f0e4); } /* ── THEME TOGGLE BUTTON ────────────────────────────────────── */ .theme-toggle { background: none; border: 1px solid var(--border-gold, var(--border, rgba(244,196,48,0.25))); border-radius: 8px; padding: 0; color: var(--text-secondary, var(--text2, #a1a1aa)); font-size: 17px; cursor: pointer; transition: all 0.3s; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; position: relative; } .theme-toggle:hover { background: var(--gold-subtle, rgba(244,196,48,0.08)); border-color: var(--gold, #F4C430); } .theme-toggle .icon-light { display: none; } .theme-toggle .icon-dark { display: inline; } [data-theme="light"] .theme-toggle .icon-light { display: inline; } [data-theme="light"] .theme-toggle .icon-dark { display: none; } /* ── TOAST NOTIFICATIONS ────────────────────────────────────── */ .mll-toast-wrap { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: calc(100% - 32px); max-width: 420px; } .mll-toast { background: var(--card, #1a1a1a); border-radius: 14px; padding: 14px 20px; font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 14px; font-weight: 600; box-shadow: 0 8px 32px rgba(0,0,0,0.35); pointer-events: all; display: flex; align-items: center; gap: 10px; animation: mllToastIn 0.3s cubic-bezier(0.34,1.56,0.64,1); } [data-theme="light"] .mll-toast { background: #1a1209; color: #f5f5f5; } .mll-toast.is-error { border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; } .mll-toast.is-success { border: 1px solid rgba(16,185,129,0.4); color: #6ee7b7; } .mll-toast.is-info { border: 1px solid rgba(244,196,48,0.3); color: #fde68a; } .mll-toast-icon { font-size: 16px; flex-shrink: 0; } .mll-toast-fade { animation: mllToastOut 0.3s ease forwards; } @keyframes mllToastIn { from { opacity: 0; transform: translateY(24px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mllToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* ── PRICE CHANGE ANIMATION ─────────────────────────────────── */ .mll-price-pop { animation: mllPricePop 0.35s cubic-bezier(0.34,1.56,0.64,1); } @keyframes mllPricePop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* ── ADDON TOGGLE ANIMATION ─────────────────────────────────── */ .addon-card { transition: all 0.2s cubic-bezier(0.34,1.2,0.64,1) !important; } .addon-card.mll-just-selected { animation: mllAddonSelect 0.35s cubic-bezier(0.34,1.56,0.64,1); } @keyframes mllAddonSelect { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } } /* ── NATIVE-FEEL TOUCH TARGETS (min 44px) ───────────────────── */ /* Quantity buttons in book.html */ .qty-btn { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; border-radius: 10px !important; font-size: 20px !important; } .qty-val { width: 32px !important; font-size: 17px !important; } /* Calendar nav buttons */ .cal-btn { width: 44px !important; height: 44px !important; border-radius: 10px !important; } /* Calendar days — bigger hit area */ .cal-day { min-height: 40px; font-size: 14px; border-radius: 10px !important; } /* Mobile: all buttons min 44px */ @media (max-width: 768px) { .btn-back, .nav-link, .cal-btn, .theme-toggle, .mobile-menu-btn { min-height: 44px; } .nav-link { display: flex; align-items: center; } } /* ── NATIVE CARD POLISH ──────────────────────────────────────── */ /* Consistent border-radius across cards */ .step-card, .feature-card, .price-chip, .bag-card, .addr-card, .delivery-opt, .recurring-section, .auth-wall, .summary-block { border-radius: 14px !important; } .booking-card { border-radius: 16px !important; } /* Subtle shadows for cards in light mode */ [data-theme="light"] .step-card, [data-theme="light"] .feature-card, [data-theme="light"] .price-chip { box-shadow: 0 2px 12px rgba(0,0,0,0.06); } /* Form inputs: better focus ring */ .field input:focus, .field textarea:focus, .field select:focus, .promo-input:focus { box-shadow: 0 0 0 3px rgba(244,196,48,0.15) !important; } /* ── BOTTOM SHEET MODAL TRANSITION ──────────────────────────── */ @media (max-width: 768px) { .nav-links.open { animation: slideUpSheet 0.25s ease !important; } @keyframes slideUpSheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } }