/* ========================================================================== UrbanEater Platform Theme — Marketing Surface ONLY AB#505 — restaurant-owner-subscription-packages-design.md §1.5 Audience: Restaurant OWNERS visiting urbaneater.com (B2B buyer) URL shape: /, /pricing, /features, /contact, /privacy — NO slug Loaded by: Views/Shared/_PlatformPublicLayout.cshtml ONLY ⚠️ NOT a per-org theme. ⚠️ NOT in the wwwroot/themes/{slug}/ restaurant catalog (default / noir / rustic / bold / coastal / vibrant). Restaurants CANNOT pick this theme. ⚠️ NOT a SupportedTheme row — must never be inserted into that table. ⚠️ NEVER loaded by _PublicLayout (per-org diner-facing menu/cart/checkout). ⚠️ NEVER loaded by _AdminLayout or _PlatformAdminLayout. Why a dedicated file: Platform marketing (urbaneater.com itself) and per-org restaurant branding are two different audiences with two different identities. Sharing a stylesheet meant any change to UrbanEater's marketing brand would bleed into every restaurant on the default theme — and vice versa. This file owns UrbanEater's own brand; the per-org catalog owns restaurants'. Identity: - Modern SaaS, not restaurant-warm. Confident, trustworthy, tech-forward. - Indigo primary (#4F46E5) — visually distinct from the per-org default's Bootstrap-baseline blue (#0d6efd) so the marketing surface stops looking like "a restaurant that didn't pick a theme." - Inter typography — the modern SaaS-marketing standard. Geometric sans-serif, clean at display sizes, free via Google Fonts. - Generous marketing rhythm (py-20 sections vs per-org's py-16) — breathing room for landing-page reading, not transactional density. How theming reaches the DOM without selector rules in this file: - body.theme-bg consumes --theme-font-body (ClientApp/theme.css:124) - .theme-hero-title consumes --theme-font-heading (ClientApp/theme.css:189) - .theme-section-title consumes --theme-font-heading (ClientApp/theme.css:201) - .theme-heading consumes --theme-font-heading (ClientApp/theme.css:552) So setting --theme-font-* below propagates everywhere; no selector rules needed in this file. (And keeping selectors out of this file means we never accidentally leak rules to surfaces that don't load it.) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* ── Core palette — modern SaaS, cool-clean ── */ --theme-primary: #4F46E5; /* Indigo 600 — distinct from default's #0d6efd */ --theme-primary-hover: #4338CA; /* Indigo 700 */ --theme-bg: #F8FAFC; /* Slate 50 — cool clean background */ --theme-surface: #FFFFFF; --theme-text: #0F172A; /* Slate 900 — deep near-black with cool tone */ --theme-text-muted: #64748B; /* Slate 500 */ --theme-border: #E2E8F0; /* Slate 200 */ /* ── Typography — Inter throughout (heading and body) ── Single font family across the marketing surface keeps the look cohesive and avoids FOUT on a second @import. If we later want a display font for hero only, override --theme-font-heading without touching body. */ --theme-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --theme-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --theme-font-accent: 'Inter', sans-serif; /* ── Component tokens — softer corners, lighter shadows than per-org default ── */ --theme-card-radius: 0.75rem; --theme-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --theme-card-shadow-hover: 0 10px 25px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04); --theme-card-border: 1px solid var(--theme-border); --theme-card-bg: var(--theme-surface); --theme-navbar-bg: #FFFFFF; --theme-navbar-text: var(--theme-text); --theme-navbar-shadow: 0 1px 0 rgba(15, 23, 42, 0.05); --theme-btn-radius: 0.5rem; --theme-input-radius: 0.5rem; --theme-badge-radius: 9999px; /* ── Status colours — modern Slate-tuned ── */ --theme-success: #059669; /* Emerald 600 */ --theme-success-bg: #D1FAE5; --theme-success-text: #064E3B; --theme-danger: #DC2626; /* Red 600 */ --theme-danger-bg: #FEE2E2; --theme-danger-text: #7F1D1D; --theme-warning: #D97706; /* Amber 600 */ --theme-warning-bg: #FEF3C7; --theme-warning-text: #78350F; --theme-info: #0284C7; /* Sky 600 */ --theme-info-bg: #E0F2FE; --theme-info-text: #075985; /* ── Tag colours ── Marketing pages don't render menu-item tags, but a few component classes reference these. Keep them defined so any incidental usage stays legible. */ --tag-allergen: #DC2626; --tag-dietary: #059669; --tag-custom: var(--theme-primary); --tag-default: #64748B; /* ── Pickup delay notice ── Same reasoning as tag colours — not used on marketing pages, but defined to avoid any unstyled fallback if a shared partial ever sneaks in. */ --pickup-delay-bg: #FEF3C7; --pickup-delay-border: #D97706; --pickup-delay-text: #78350F; /* ── Marketing rhythm — generous, confident ── py-20 sections vs per-org default's py-16. Landing pages reward breathing room; transactional per-org pages reward density. Different needs → different defaults. */ --theme-section-padding-y: 5rem; /* py-20 equivalent */ --theme-content-max-width: 80rem; /* max-w-7xl */ --theme-hero-title-size: 3.5rem; /* larger than default's 3rem — confident */ --theme-hero-title-size-mobile: 2.5rem; --theme-section-title-size: 2.25rem; --theme-section-title-size-mobile: 1.875rem; --theme-hero-lead-size: 1.25rem; --theme-bg-pattern: none; /* clean — no gradient overlay */ /* --theme-page-padding-y is intentionally NOT overridden here. That variable is consumed by _PublicLayout (per-org) for transactional page padding. It has no effect on _PlatformPublicLayout, which uses .theme-section / .theme-section-tinted for its own rhythm. Defining it here would be misleading. */ }