/* ============================================================ Monoloci Design Tokens & Theme Brand palette lifted from the Mystery Journey theme / logo: deep teal #0d5c65 · steel blue #7ba9c1 · slate ink #0f172a Loaded AFTER tailwind.css so overrides win. Dark mode: add class "dark" to (see js/theme-toggle.js) ============================================================ */ :root { /* Brand */ --ml-primary: #0d5c65; /* deep teal (logo) */ --ml-primary-strong: #0a4a52; /* pressed / hover */ --ml-primary-soft: rgba(13, 92, 101, 0.08); --ml-accent: #7ba9c1; /* steel blue (logo) */ --ml-accent-soft: rgba(123, 169, 193, 0.16); --ml-cta-text: #ffffff; /* Surfaces (light) */ --ml-bg: #f8fafc; --ml-card: #ffffff; --ml-card-soft: #f1f5f9; --ml-border: #e2e8f0; /* Text (light) */ --ml-ink: #0f172a; --ml-body: #334155; --ml-muted: #64748b; --ml-faint: #94a3b8; /* Links / interactive accents — flips lighter in dark mode */ --ml-link: #0d5c65; } html.dark { /* Surfaces (dark — mirrors Mystery Journey screens) */ --ml-bg: #0f172a; --ml-card: #1e293b; --ml-card-soft: #16223a; --ml-border: rgba(148, 163, 184, 0.22); /* Text (dark) */ --ml-ink: #f1f5f9; --ml-body: #cbd5e1; --ml-muted: #94a3b8; --ml-faint: #64748b; --ml-primary-soft: rgba(123, 169, 193, 0.12); --ml-accent-soft: rgba(123, 169, 193, 0.14); --ml-link: #7ba9c1; } /* ============================================================ 1. BRAND REBRAND — map the legacy sky-* utilities to teal. Every existing CTA, tab and link picks up the logo colour without touching markup or JS. ============================================================ */ .bg-sky-500, .bg-sky-600, .bg-sky-700 { background-color: var(--ml-primary) !important; } .hover\:bg-sky-600:hover, .hover\:bg-sky-700:hover { background-color: var(--ml-primary-strong) !important; } .text-sky-500, .text-sky-600, .text-sky-700 { color: var(--ml-link) !important; } .hover\:text-sky-600:hover, .hover\:text-sky-700:hover { color: var(--ml-primary-strong) !important; } .border-sky-500, .border-sky-600 { border-color: var(--ml-primary) !important; } html.dark .border-sky-500, html.dark .border-sky-600 { border-color: var(--ml-accent) !important; } .bg-sky-50, .bg-sky-100 { background-color: var(--ml-primary-soft) !important; } .focus\:ring-sky-500:focus { --tw-ring-color: var(--ml-primary) !important; } /* ============================================================ 2. FLAT SCREEN HEADERS — no background image, no info icon. A slim solid brand bar that extends behind the status bar / camera cutout on iOS & Android (safe-area padding), matching the theme-color meta so the system chrome blends in. ============================================================ */ .header-with-bg { background-image: none !important; background-color: var(--ml-accent) !important; min-height: 0 !important; /* Clear the status bar / camera cutout on native, plus a little breathing room so controls are never under the system chrome (matches the app's previous env() + offset convention) */ padding-top: calc(env(safe-area-inset-top, 0px) + 0.25rem) !important; border-bottom: none !important; /* Headers are flex children on several screens — never let the column layout crush them to 0 height when content overflows */ flex-shrink: 0 !important; } .header-with-bg::before { display: none !important; } .header-with-bg h1 { /* Dark ink on the steel-blue bar — white fails contrast on #7ba9c1 */ color: #0f172a !important; text-shadow: none !important; font-size: 1.2rem !important; padding: 0.85rem 0 !important; margin: 0 !important; } .header-with-bg button { color: #0f172a !important; } html.dark .header-with-bg h1, html.dark .header-with-bg button { color: var(--ml-ink) !important; } /* Back buttons / controls inside headers: comfortable 44px tap target, kept below the safe-area padding of the bar itself */ .header-with-bg button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Hide the "how to use" info icon row */ .header-with-bg h5 { display: none !important; } html.dark .header-with-bg { /* Matches the dark theme-color meta so the status bar blends seamlessly */ background-color: var(--ml-bg) !important; border-bottom: 1px solid var(--ml-border) !important; } /* ============================================================ 3. DARK MODE — surface + text overrides for the common Tailwind utilities used across the vanilla screens. ============================================================ */ html.dark body { background-color: var(--ml-bg); color: var(--ml-body); } html.dark .bg-white { background-color: var(--ml-card) !important; } html.dark .bg-slate-50, html.dark .bg-gray-50, html.dark .bg-slate-100, html.dark .bg-gray-100 { background-color: var(--ml-card-soft) !important; } html.dark .bg-slate-200 { background-color: #243349 !important; } html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-gray-900, html.dark .text-gray-800 { color: var(--ml-ink) !important; } html.dark .text-slate-700, html.dark .text-slate-600, html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--ml-body) !important; } html.dark .text-slate-500, html.dark .text-slate-400, html.dark .text-gray-500 { color: var(--ml-muted) !important; } html.dark .border, html.dark .border-b, html.dark .border-t, html.dark .border-l, html.dark .border-r, html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--ml-border) !important; } html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.5); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; } html.dark .divide-slate-200 > * + * { border-color: var(--ml-border) !important; } /* Inputs */ html.dark input[type="text"], html.dark input[type="tel"], html.dark input[type="email"], html.dark input[type="number"], html.dark textarea, html.dark select { background-color: var(--ml-card-soft); color: var(--ml-ink); border-color: var(--ml-border); } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--ml-faint); } /* Bottom navigation */ html.dark .main-nav { background-color: var(--ml-card) !important; border-color: var(--ml-border) !important; } /* Bottom sheets & modals */ html.dark .bottom-sheet { background-color: var(--ml-card) !important; } html.dark .bottom-sheet-handle-bar { background-color: var(--ml-faint) !important; } /* Trip planner stop cards */ html.dark .stop-card { background-color: var(--ml-card); } /* ============================================================ 4. CONSISTENT COMPONENTS ============================================================ */ /* Compact event card — thumbnail left, scannable meta line */ .event-card--compact { display: flex; align-items: stretch; gap: 0; border-left: 3px solid transparent; } .event-card--compact:hover, .event-card--compact:active { border-left-color: var(--ml-primary); } .event-card-thumb { width: 84px; min-height: 84px; object-fit: cover; flex-shrink: 0; align-self: stretch; } .event-card-thumb--placeholder { width: 84px; min-height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--ml-accent-soft); color: var(--ml-primary); } .event-card-body { flex: 1; min-width: 0; padding: 0.65rem 0.85rem; display: flex; flex-direction: column; justify-content: center; } .event-card-title { font-weight: 700; color: var(--ml-ink); font-size: 0.92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .event-card-meta { margin-top: 0.25rem; font-size: 0.78rem; color: var(--ml-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-card-meta .ml-dot { margin: 0 0.3rem; color: var(--ml-faint); } /* Quiet premium gate row (replaces the loud gradient box) */ .premium-quiet-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; padding: 0.7rem 0.9rem; border: 1px solid var(--ml-border); border-radius: 0.75rem; background: var(--ml-primary-soft); font-size: 0.82rem; color: var(--ml-body); } .premium-quiet-row .ml-lock { flex-shrink: 0; color: var(--ml-primary); } html.dark .premium-quiet-row .ml-lock { color: var(--ml-accent); } /* Major event badge — brand colours instead of purple/rose */ .major-event-badge { background: var(--ml-primary) !important; color: #e6f2f4 !important; } /* Trip planner — journey-style micro-interactions */ .stop-card { border-left: 3px solid transparent !important; border-top: none; border-right: none; border-bottom: none; border-radius: 0 0.75rem 0.75rem 0; } .stop-card:hover { border-left-color: var(--ml-accent) !important; } .stop-card[data-editing="true"] { border-left-color: var(--ml-primary) !important; box-shadow: 0 10px 22px rgba(13, 92, 101, 0.18) !important; } .stop-card.drag-over { border-left-color: var(--ml-primary) !important; } /* ============================================================ 5. APPEARANCE TOGGLE (Info screen) ============================================================ */ .ml-appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 1rem; border: 1px solid var(--ml-border); border-radius: 0.5rem; background: var(--ml-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .ml-appearance-label { display: flex; align-items: center; gap: 0.75rem; color: var(--ml-ink); font-weight: 600; } .ml-appearance-label svg { color: var(--ml-primary); } html.dark .ml-appearance-label svg { color: var(--ml-accent); } .ml-switch { position: relative; width: 52px; height: 30px; border-radius: 999px; border: none; cursor: pointer; background: #cbd5e1; transition: background 0.25s; flex-shrink: 0; padding: 0; } .ml-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } html.dark .ml-switch { background: var(--ml-primary); } html.dark .ml-switch::after { transform: translateX(22px); } /* ============================================================ 6. ROUND 2 FIXES ============================================================ */ /* Trip planner "Add Stop to Itinerary" — sky gradient → deep teal */ .trip-btn-primary { background: var(--ml-primary) !important; border-color: var(--ml-primary-strong) !important; } .trip-btn-primary:hover { background: var(--ml-primary-strong) !important; } /* Green action buttons (Add to Trip etc.) → steel blue */ button.bg-green-500, a.bg-green-500 { background-color: var(--ml-accent) !important; } button.hover\:bg-green-600:hover, button.bg-green-600, a.bg-green-600 { background-color: #6492ab !important; } /* Chat mode pill: static bg-white class on the Chat button must not win over the inactive state in dark mode (higher specificity than .bg-white) */ html.dark .chat-mode-btn:not(.active) { background: transparent !important; color: var(--ml-muted) !important; box-shadow: none !important; } /* Journey category outlines (Rewards/Explore/Mystery/Game fieldsets): subtle dark border + tint instead of pastel in dark mode */ html.dark .journey-category-group { border-color: var(--ml-border) !important; background-color: rgba(148, 163, 184, 0.05) !important; } html.dark .journey-category-label { background-color: var(--ml-bg) !important; } /* Group chat presence bar (member avatars) in dark mode */ html.dark #chat-presence-bar { background: var(--ml-card) !important; border-color: var(--ml-border) !important; } html.dark .presence-name { color: var(--ml-body) !important; } /* Group chat mode switcher (Chat / Map / Photos) in dark mode */ html.dark .chat-mode-btn.active { background: var(--ml-card) !important; color: var(--ml-accent) !important; } html.dark .chat-mode-btn:not(.active) { color: var(--ml-muted) !important; } html.dark #map-location-consent { background: var(--ml-card) !important; border-color: var(--ml-border) !important; } html.dark .map-consent-title { color: var(--ml-ink) !important; } html.dark .map-consent-desc { color: var(--ml-muted) !important; } /* Discovery (AI) chat — premium gate panel */ .premium-prompt-content .premium-note p { color: var(--ml-muted) !important; text-shadow: none !important; } /* AI chat: photo background dropped entirely (both modes) — clean themed surface, and the welcome header becomes a normal card */ #ai-chat-root, .premium-prompt { background-image: none !important; background-color: var(--ml-bg) !important; } .ai-chat-welcome { background: var(--ml-card) !important; border-bottom: 1px solid var(--ml-border) !important; } .ai-chat-welcome h2, .ai-chat-welcome p { color: var(--ml-ink) !important; text-shadow: none !important; } html.dark .premium-prompt-content { background: var(--ml-card) !important; border-color: var(--ml-border) !important; } html.dark .premium-prompt-content h2, html.dark .premium-prompt-content h3 { color: var(--ml-ink) !important; text-shadow: none !important; } html.dark .premium-prompt-content p, html.dark .premium-prompt-content ul, html.dark .premium-prompt-content li { color: var(--ml-body) !important; text-shadow: none !important; } /* Info screen — community card text stays readable in dark mode (teal-tinted gradient cards keep light-mode slate text otherwise) */ html.dark #info-community-button, html.dark #premium-section { background: linear-gradient(to right, rgba(13, 92, 101, 0.35), rgba(123, 169, 193, 0.18)) !important; }