/* "Fresh" theme — custom styles layered on top of the Tailwind CDN runtime. * The React microsite uses Tailwind utilities + arbitrary values, so the Play * CDN reproduces almost everything; this file only sets the base font, hides * carousel scrollbars, and guards against a flash of unstyled content. */ :root { --brand: #059669; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; color: #0B0B12; background: #fff; } /* Unified heading system — every display/section heading uses Inter for a * consistent, professional UI. The class name is kept (existing markup uses it as * the "section heading" marker); it no longer maps to a serif face. */ .font-\[\'Playfair_Display\'\] { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Inter on every heading site-wide (reinforces the base body font for consistency). */ h1, h2, h3, h4, h5, h6 { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Consistent SECTION-heading size + weight + tracking. An element+class selector * has higher specificity (0,1,1) than Tailwind's single-class text-* utilities * (0,1,0), so section headings that carry different inline sizes all normalise to * ONE responsive scale across every page — regardless of stylesheet order. */ h2.font-\[\'Playfair_Display\'\] { font-size: 1.875rem; /* 30px — text-3xl */ line-height: 2.25rem; font-weight: 700; letter-spacing: -0.02em; } @media (min-width: 640px) { h2.font-\[\'Playfair_Display\'\] { font-size: 2.25rem; /* 36px — text-4xl */ line-height: 2.5rem; } } /* Hide horizontal scrollbars on carousels / category strips */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Loading placeholder before the app hydrates */ #app > .fg-loading { display: flex; min-height: 100vh; align-items: center; justify-content: center; color: #6b7280; font-size: 14px; } img { max-width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE — activated by data-theme="dark" on . The layout/markup is unchanged; this only remaps the neutral Tailwind classes the theme uses (white / gray-*) to dark equivalents. The navy chrome, the emerald brand accents, black overlays and text-white all stay as-is. ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body { background: #0b0f0e; color: #e5e7eb; } /* Surfaces */ html[data-theme="dark"] .bg-white { background-color: #111827 !important; } html[data-theme="dark"] .bg-\[\#F7F8F5\] { background-color: #0b0f0e !important; } html[data-theme="dark"] .bg-gray-50 { background-color: #0f1520 !important; } html[data-theme="dark"] .bg-gray-100 { background-color: #1f2937 !important; } html[data-theme="dark"] .bg-gray-200 { background-color: #374151 !important; } html[data-theme="dark"] .bg-white\/90 { background-color: rgba(17,24,39,.92) !important; } html[data-theme="dark"] .bg-white\/80 { background-color: rgba(17,24,39,.85) !important; } html[data-theme="dark"] .bg-white\/70 { background-color: rgba(17,24,39,.72) !important; } html[data-theme="dark"] .bg-white\/60 { background-color: rgba(17,24,39,.62) !important; } html[data-theme="dark"] .bg-gray-50\/50 { background-color: rgba(15,21,32,.5) !important; } html[data-theme="dark"] .bg-gray-50\/60 { background-color: rgba(15,21,32,.6) !important; } html[data-theme="dark"] .bg-gray-50\/80 { background-color: rgba(15,21,32,.8) !important; } html[data-theme="dark"] .focus\:bg-white:focus { background-color: #111827 !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #0f1520 !important; } html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #1f2937 !important; } html[data-theme="dark"] .bg-green-50 { background-color: rgba(5,150,105,.14) !important; } /* Text */ html[data-theme="dark"] .text-gray-900 { color: #f3f4f6 !important; } html[data-theme="dark"] .text-gray-800 { color: #e5e7eb !important; } html[data-theme="dark"] .text-gray-700 { color: #d1d5db !important; } html[data-theme="dark"] .text-gray-600 { color: #b6bdc7 !important; } html[data-theme="dark"] .text-gray-500 { color: #9aa3af !important; } html[data-theme="dark"] .text-gray-400 { color: #7c8592 !important; } html[data-theme="dark"] .text-gray-300 { color: #5b6472 !important; } html[data-theme="dark"] .text-gray-200 { color: #4b5563 !important; } /* Arbitrary brand-green text (e.g. business-hours open/close times, "text-[#1E3B33]") is unreadable on a dark surface — remap it to a legible light emerald in dark mode. Light mode keeps the dark green. */ html[data-theme="dark"] .text-\[\#1E3B33\] { color: #6ee7b7 !important; } /* Borders + dividers */ html[data-theme="dark"] .border-gray-50, html[data-theme="dark"] .border-gray-100 { border-color: #1f2937 !important; } html[data-theme="dark"] .border-gray-200 { border-color: #2b3644 !important; } html[data-theme="dark"] .border-gray-300 { border-color: #3a4657 !important; } html[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]), html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; } /* Light section gradients → dark (sidebar/section headers use from-gray-50 / to-white) */ html[data-theme="dark"] .from-gray-50 { --tw-gradient-from: #0f1520 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(15,21,32,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html[data-theme="dark"] .to-white { --tw-gradient-to: #111827 var(--tw-gradient-to-position) !important; } html[data-theme="dark"] .to-gray-100\/50 { --tw-gradient-to: rgba(31,41,55,.5) var(--tw-gradient-to-position) !important; }