/* RoadTrip site-specific styles. Loaded only by RoadTripLayout pages on the roadtrip.* host so the consumer site can have a different look from the admin UI without theme.css fighting it. Builds on the same CSS-variable system as theme.css (--bg, --card, --text, etc) but layers a softer, more inviting palette on top. */ .roadtrip-shell { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(180deg, #0f1014 0%, #14171c 100%); color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Offline banner — sits above the topbar when the browser reports it's offline (the App.razor JS bridge sets data-online="false" on ). Hidden by default; the [data-online="false"] selector below reveals it. Amber on dark, warmer amber on light — signals "degraded" without being alarming red. */ .roadtrip-offline-banner { display: none; align-items: center; gap: 8px; padding: 8px 14px; background: #78350f; color: #fef3c7; font-size: 12px; text-align: center; justify-content: center; } [data-online="false"] .roadtrip-offline-banner { display: flex; } [data-theme="light"] .roadtrip-offline-banner { background: #fef3c7; color: #78350f; border-bottom: 1px solid #fde68a; } /* ---- Topbar ---- */ .roadtrip-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid #23252b; background: rgba(15, 16, 20, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .roadtrip-brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: #f3f4f6; text-decoration: none; letter-spacing: 0.2px; } .roadtrip-brand-icon { font-size: 22px; } .roadtrip-brand-text { color: #60a5fa; } .roadtrip-topbar-spacer { flex: 1; } .roadtrip-topbar-actions { display: flex; gap: 14px; align-items: center; } .roadtrip-topbar-actions a { color: #d1d5db; text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .roadtrip-topbar-actions a:hover { color: #f3f4f6; background: #1f2024; } .roadtrip-topbar-actions a.roadtrip-cta { background: #2563eb; color: #fff; font-weight: 600; } .roadtrip-topbar-actions a.roadtrip-cta:hover { background: #1d4ed8; } /* ---- Main + footer ---- */ .roadtrip-main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 32px 24px 48px; } .roadtrip-footer { padding: 18px 24px; text-align: center; color: #6b7280; font-size: 12px; border-top: 1px solid #23252b; } /* ---- Hero ---- */ .roadtrip-hero { text-align: center; padding: 48px 16px 24px; } .roadtrip-hero-title { font-size: 40px; font-weight: 800; margin: 0 0 14px; line-height: 1.15; background: linear-gradient(90deg, #60a5fa, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } .roadtrip-hero-subtitle { font-size: 17px; color: #c2c5cc; max-width: 620px; margin: 0 auto 28px; line-height: 1.55; } .roadtrip-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; } .roadtrip-hero-note { font-size: 13px; color: #9ca3af; } /* ---- Buttons ---- */ .roadtrip-btn { display: inline-block; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s, transform 0.05s; } .roadtrip-btn:active { transform: translateY(1px); } .roadtrip-btn-primary { background: #2563eb; color: #fff; } .roadtrip-btn-primary:hover { background: #1d4ed8; } .roadtrip-btn-primary:disabled { background: #374151; color: #9ca3af; cursor: not-allowed; } .roadtrip-btn-secondary { background: #1f2024; color: #f3f4f6; border: 1px solid #2c2f36; } .roadtrip-btn-secondary:hover { background: #262830; } .roadtrip-btn-block { width: 100%; } /* ---- Features grid ---- */ .roadtrip-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 48px; } .roadtrip-feature { background: #14171c; border: 1px solid #23252b; border-radius: 10px; padding: 22px; } .roadtrip-feature-icon { font-size: 28px; margin-bottom: 10px; } .roadtrip-feature-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #f3f4f6; } .roadtrip-feature-text { font-size: 13px; line-height: 1.55; color: #9ca3af; } /* ---- Auth cards (sign-in / sign-up) ---- */ .roadtrip-auth-card { max-width: 420px; margin: 32px auto; background: #14171c; border: 1px solid #23252b; border-radius: 12px; padding: 28px; } .roadtrip-auth-card h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; } .roadtrip-auth-subtitle { font-size: 13px; color: #9ca3af; margin-bottom: 18px; line-height: 1.5; } .roadtrip-auth-card label { display: block; font-size: 12px; color: #9ca3af; margin-top: 12px; margin-bottom: 4px; } .roadtrip-auth-card input { width: 100%; padding: 10px 12px; background: #0f1014; border: 1px solid #2c2f36; border-radius: 6px; color: #f3f4f6; font-size: 14px; box-sizing: border-box; } .roadtrip-auth-card input:focus { outline: none; border-color: #60a5fa; } .roadtrip-auth-card .roadtrip-btn { margin-top: 18px; } .roadtrip-auth-footer { margin-top: 18px; text-align: center; font-size: 13px; color: #9ca3af; } .roadtrip-auth-footer a { color: #60a5fa; text-decoration: none; } .roadtrip-auth-footer a:hover { text-decoration: underline; } .roadtrip-error { padding: 10px 12px; background: #2a1414; border: 1px solid #7f1d1d; border-radius: 6px; color: #fca5a5; font-size: 13px; margin-bottom: 12px; } @media (max-width: 600px) { .roadtrip-hero-title { font-size: 28px; } .roadtrip-hero-subtitle { font-size: 15px; } .roadtrip-main { padding: 16px 12px 32px; } } /* ─── Light-mode overrides ─── Activated by [data-theme="light"] on the root (set by the theme toggle JS in App.razor). The dark palette above is the default; these rules are the diff for light. Selectors are prefixed [data-theme="light"] .roadtrip-foo so they only apply to the consumer surface — admin pages use theme.css's variables and adapt automatically. */ [data-theme="light"] .roadtrip-shell { background: linear-gradient(180deg, #f6f8fa 0%, #ffffff 100%); color: #1f2937; } [data-theme="light"] .roadtrip-topbar { background: rgba(255, 255, 255, 0.9); border-bottom-color: #d0d7de; } [data-theme="light"] .roadtrip-brand { color: #1f2937; } [data-theme="light"] .roadtrip-topbar-actions a:not(.roadtrip-cta) { color: #57606a; } [data-theme="light"] .roadtrip-topbar-actions a:not(.roadtrip-cta):hover { color: #1f2937; background: #f0f2f5; } /* The Register CTA stays white-on-blue in both themes — the previous broad rule above was repainting it dark grey on its blue background, which made the label nearly unreadable. */ [data-theme="light"] .roadtrip-topbar-actions a.roadtrip-cta { color: #fff; } [data-theme="light"] .roadtrip-topbar-actions a.roadtrip-cta:hover { color: #fff; background: #1d4ed8; } [data-theme="light"] .roadtrip-footer { color: #6b7280; border-top-color: #d0d7de; } [data-theme="light"] .roadtrip-hero-subtitle { color: #4b5563; } [data-theme="light"] .roadtrip-hero-note { color: #6b7280; } [data-theme="light"] .roadtrip-feature { background: #ffffff; border-color: #d0d7de; } [data-theme="light"] .roadtrip-feature-title { color: #1f2937; } [data-theme="light"] .roadtrip-feature-text { color: #57606a; } [data-theme="light"] .roadtrip-btn-secondary { background: #f0f2f5; color: #1f2937; border-color: #d0d7de; } [data-theme="light"] .roadtrip-btn-secondary:hover { background: #e5e7eb; } /* Primary buttons (CTAs, Save, Sign in, +Add a route, …) stay white-on-blue in light mode. Without these explicit rules the document-level color (#1f2937) cascades onto the button label and you get unreadable dark text on a blue background. */ [data-theme="light"] .roadtrip-btn-primary { color: #fff; } [data-theme="light"] .roadtrip-btn-primary:hover { color: #fff; } /* The bare