/* ============================================================ Theme Override: True Dual-Theme System for Boba Tea Website Applied when ============================================================ */ /* ===== A: CSS Variable Redefinitions ===== */ html.light { --background: 0 0% 100%; --foreground: 0 0% 10%; --card: 0 0% 96%; --card-foreground: 0 0% 10%; --popover: 0 0% 100%; --popover-foreground: 0 0% 10%; --primary: 24 95% 53%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 90%; --secondary-foreground: 0 0% 10%; --muted: 0 0% 90%; --muted-foreground: 0 0% 40%; --accent: 24 95% 53%; --accent-foreground: 0 0% 100%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 85%; --input: 0 0% 90%; --ring: 24 95% 53%; } /* ===== B: Body Hardcoded Override ===== */ html.light body { background-color: #ffffff !important; color: #1a1a1a !important; } /* ===== C: Tailwind Hardcoded Color Overrides ===== */ /* --- Background: bg-black variants --- */ html.light .bg-black { --tw-bg-opacity: 1 !important; background-color: rgb(245 245 245 / 1) !important; } html.light .bg-black\/40 { background-color: rgb(245 245 245 / 0.4) !important; } html.light .bg-black\/50 { background-color: rgb(245 245 245 / 0.5) !important; } html.light .bg-black\/60 { background-color: rgb(245 245 245 / 0.6) !important; } html.light .bg-black\/90 { background-color: rgb(245 245 245 / 0.9) !important; } html.light .bg-black\/95 { background-color: rgb(245 245 245 / 0.95) !important; } /* --- Background: bg-white variants (flip to dark) --- */ html.light .bg-white { background-color: #1a1a1a !important; } html.light .bg-white\/5 { background-color: rgb(26 26 26 / 0.05) !important; } html.light .bg-white\/10 { background-color: rgb(26 26 26 / 0.10) !important; } html.light .bg-white\/30 { background-color: rgb(26 26 26 / 0.30) !important; } /* --- Background: gray variants --- */ html.light .bg-gray-900 { background-color: #e5e5e5 !important; } html.light .bg-gray-800\/20 { background-color: rgb(229 229 229 / 0.2) !important; } /* --- Text colors --- */ /* On orange/primary backgrounds, text should stay white in BOTH themes */ html.light .text-white { color: #1a1a1a !important; } html.light .bg-primary .text-white, html.light .bg-orange-500 .text-white, html.light .bg-orange-500\/50 .text-white, html.light .bg-orange-500\/60 .text-white, html.light .bg-orange-500\/80 .text-white, html.light .bg-orange-500\/90 .text-white, html.light .bg-primary .text-primary-foreground, html.light .bg-orange-500 .text-primary-foreground, html.light [data-state=active] .text-white, html.light .data-\[state\=active\]\:text-white[data-state="active"] { color: #ffffff !important; } html.light .text-white\/40 { color: rgb(26 26 26 / 0.4) !important; } html.light .text-white\/50 { color: rgb(26 26 26 / 0.5) !important; } html.light .text-white\/60 { color: rgb(26 26 26 / 0.6) !important; } html.light .text-white\/70 { color: rgb(26 26 26 / 0.7) !important; } html.light .text-white\/80 { color: rgb(26 26 26 / 0.8) !important; } /* --- Border colors --- */ html.light .border-white\/10 { border-color: rgb(26 26 26 / 0.10) !important; } html.light .border-white\/20 { border-color: rgb(26 26 26 / 0.20) !important; } html.light .border-white\/30 { border-color: rgb(26 26 26 / 0.30) !important; } html.light .border-t-white { border-top-color: #1a1a1a !important; } /* --- Placeholder --- */ html.light .placeholder\:text-white\/40::placeholder { color: rgb(26 26 26 / 0.4) !important; } html.light .placeholder\:text-white\/40::-moz-placeholder { color: rgb(26 26 26 / 0.4) !important; } /* ===== D: Gradient Overrides ===== */ /* from-black / to-black */ html.light .from-black { --tw-gradient-from: #f5f5f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.light .from-black\/80 { --tw-gradient-from: rgb(245 245 245 / 0.8) var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.light .to-black { --tw-gradient-to: #f5f5f5 var(--tw-gradient-to-position); } /* from-[#1a1a1a] / to-[#1a1a1a] */ html.light .from-\[\#1a1a1a\] { --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.light .to-\[\#1a1a1a\] { --tw-gradient-to: #e5e5e5 var(--tw-gradient-to-position); } /* via-black variants */ html.light .via-black\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgb(245 245 245 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to); } html.light .via-black\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgb(245 245 245 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to); } html.light .via-gray-900 { --tw-gradient-stops: var(--tw-gradient-from), #e5e5e5 var(--tw-gradient-via-position), var(--tw-gradient-to); } /* from-white/5 -> from-dark/5 */ html.light .from-white\/5 { --tw-gradient-from: rgb(26 26 26 / 0.05) var(--tw-gradient-from-position); --tw-gradient-to: rgb(26 26 26 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* ===== E: Hover State Overrides ===== */ html.light .hover\:bg-white\/10:hover { background-color: rgb(26 26 26 / 0.10) !important; } html.light .hover\:bg-white\/20:hover { background-color: rgb(26 26 26 / 0.20) !important; } html.light .hover\:bg-white\/50:hover { background-color: rgb(26 26 26 / 0.50) !important; } html.light .hover\:text-white:hover { color: #1a1a1a !important; } html.light .hover\:text-white\/70:hover { color: rgb(26 26 26 / 0.7) !important; } html.light .hover\:from-white\/10:hover { --tw-gradient-from: rgb(26 26 26 / 0.10) var(--tw-gradient-from-position); --tw-gradient-to: rgb(26 26 26 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* ===== F: Browser Chrome Styles ===== */ /* Scrollbar */ html.light ::-webkit-scrollbar-track { background: #e5e5e5; } html.light ::-webkit-scrollbar-thumb { background: #999; } html.light ::-webkit-scrollbar-thumb:hover { background: #f97316; } /* Selection */ html.light ::selection, html.light ::-moz-selection { background: rgb(249 115 22 / 0.3); color: #1a1a1a; } /* Focus visible */ html.light *:focus-visible { outline-color: #f97316; } /* ===== G: Data Attribute States ===== */ /* Overridden above in orange-bg section — text-white stays white on orange buttons in light mode */ /* ===== H: Markdown Syntax Highlighting (GitHub Light) ===== */ html.light .hljs { color: #24292e; background: #ffffff; } html.light .hljs-doctag, html.light .hljs-keyword, html.light .hljs-meta .hljs-keyword, html.light .hljs-template-tag, html.light .hljs-template-variable, html.light .hljs-type, html.light .hljs-variable.language_ { color: #d73a49; } html.light .hljs-title, html.light .hljs-title.class_, html.light .hljs-title.class_.inherited__, html.light .hljs-title.function_ { color: #6f42c1; } html.light .hljs-attr, html.light .hljs-attribute, html.light .hljs-literal, html.light .hljs-meta, html.light .hljs-number, html.light .hljs-operator, html.light .hljs-variable, html.light .hljs-selector-attr, html.light .hljs-selector-class, html.light .hljs-selector-id { color: #005cc5; } html.light .hljs-regexp, html.light .hljs-string, html.light .hljs-meta .hljs-string { color: #032f62; } html.light .hljs-built_in, html.light .hljs-symbol { color: #e36209; } html.light .hljs-comment, html.light .hljs-code, html.light .hljs-formula { color: #6a737d; } html.light .hljs-name, html.light .hljs-quote, html.light .hljs-selector-tag, html.light .hljs-selector-pseudo { color: #22863a; } html.light .hljs-subst { color: #24292e; } html.light .hljs-section { color: #005cc5; font-weight: 700; } html.light .hljs-bullet { color: #735c0f; } html.light .hljs-emphasis { color: #24292e; font-style: italic; } html.light .hljs-strong { color: #24292e; font-weight: 700; } html.light .hljs-addition { color: #22863a; background-color: #f0fff4; } html.light .hljs-deletion { color: #b31d28; background-color: #ffeef0; } /* ===== I: Theme Transition Smoothness ===== */ html { transition: background-color 0.3s ease, color 0.3s ease; } /* ===== J: Hide extra drink cards (keep only 6) ===== */ /* Hide by matching the IMG src attribute (JS-driven) */ /* Also hide the parent card wrapper using :has() */ #drinks img[src*="vanilla-bubble"], #drinks img[src*="hazelnut-bubble"], #drinks img[src*="jasmine-tea"] { display: none !important; } #drinks .grid > div:has(img[src*="vanilla-bubble"]), #drinks .grid > div:has(img[src*="hazelnut-bubble"]), #drinks .grid > div:has(img[src*="jasmine-tea"]) { display: none !important; } /* ===== K: Drink card images fill edge-to-edge (no gaps) ===== */ /* Remove padding and border-radius from the card wrapper */ #drinks .group { border-radius: 0 !important; padding: 0 !important; } /* Hide the absolute border overlay */ #drinks .group > .absolute.inset-0.rounded-2xl { display: none !important; } #drinks .group > .absolute.inset-0 { display: none !important; } /* Remove bottom margin from image container */ #drinks .group .aspect-\[3\/4\] { margin-bottom: 0 !important; } /* Make images cover the full space without gaps */ #drinks .group img { object-fit: cover !important; } /* ===== L: Hero gradient overlay in light mode (50% opacity white) ===== */ html.light .bg-gradient-to-t.from-black { --tw-gradient-from: rgba(255 255 255 / 0.5) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(255 255 255 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html.light .bg-gradient-to-t.from-black.via-black\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; } html.light .bg-gradient-to-t.via-black\/50 { --tw-gradient-stops: transparent, transparent !important; }