d822b77fb0
- Extract LandingNav, LiveTicker, StatsRow, VerdictCard, and HeroSearch into reusable landing components - Implement responsive two-layout strategy: mobile stacked (hero search + verdict card + CTA) vs desktop inline pill input with verdict card sidebar - Add serif/mono font tokens and live-dot pulse animation to CSS - Move verdict card above search input on mobile, to right sidebar on desktop - Replace hero "fill up now" mockup with dynamic VerdictCard showing top stations, pricing, and recommendation - Simplify navigation with uppercase tracking, add Fleet anchor, and gate CTA by auth state - Lazy-load LeafletMap with defineAsyncComponent to reduce initial bundle - Relocate SearchBar below hero on search attempt for persistent filter UI - Add meta description for SEO
127 lines
3.6 KiB
CSS
127 lines
3.6 KiB
CSS
@import 'tailwindcss';
|
|
@import '../../vendor/livewire/flux/dist/flux.css';
|
|
|
|
@source '../views';
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
|
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
|
|
|
@custom-variant dark (&:where(.dark-mode-disabled));
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
--color-zinc-50: #faf6f3; /* surface */
|
|
--color-zinc-100: #f5ede5; /* surface-page */
|
|
--color-zinc-200: #eeeae5; /* surface-subtle */
|
|
--color-zinc-300: #e5ded7; /* border */
|
|
--color-zinc-400: #c8b8b0;
|
|
--color-zinc-500: #89726c; /* text-muted */
|
|
--color-zinc-600: #6b5a55; /* text-dim */
|
|
--color-zinc-700: #5a4a45;
|
|
--color-zinc-800: #4a3f3b; /* text-base */
|
|
--color-zinc-900: #3a302c;
|
|
--color-zinc-950: #2a2220;
|
|
|
|
/* Brand accent — burnt sienna */
|
|
--color-accent: #bb5b3e;
|
|
--color-accent-content: #a34a31;
|
|
--color-accent-foreground: #ffffff;
|
|
|
|
/* Named semantic tokens */
|
|
--color-primary: #bb5b3e;
|
|
--color-primary-dark: #a34a31;
|
|
--color-surface: #faf6f3;
|
|
--color-surface-page: #f5ede5;
|
|
--color-surface-subtle: #eeeae5;
|
|
--color-border: #e5ded7;
|
|
--color-text-base: #4a3f3b;
|
|
--color-text-muted: #89726c;
|
|
--color-text-dim: #6b5a55;
|
|
|
|
/* Accent palette */
|
|
--color-teal: #4a7c7e;
|
|
--color-mauve: #8b4860;
|
|
--color-tan: #9b8b6b;
|
|
|
|
/* Status */
|
|
--color-status-good: #22c55e;
|
|
--color-status-warn: #f59e0b;
|
|
--color-status-bad: #ef4444;
|
|
|
|
/* Display font */
|
|
--font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Hero type pairing — swap these tokens to upgrade to Instrument Serif / Geist Mono later */
|
|
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
|
|
@layer utilities {
|
|
.hero-gradient {
|
|
background:
|
|
radial-gradient(circle at top right, color-mix(in oklch, var(--color-primary) 8%, transparent), transparent 50%),
|
|
radial-gradient(circle at bottom left, color-mix(in oklch, var(--color-primary) 5%, transparent), transparent 40%);
|
|
}
|
|
|
|
.glass-card {
|
|
background: color-mix(in oklch, var(--color-surface) 90%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
|
|
}
|
|
|
|
.live-dot {
|
|
animation: live-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes live-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
|
|
body {
|
|
color: var(--color-zinc-800);
|
|
}
|
|
|
|
:root {
|
|
--primary: #bb5b3e;
|
|
--bg-main: #f5ede5;
|
|
--bg-card: #faf6f3;
|
|
--text-main: #4a3f3b;
|
|
--neutral: #89726c;
|
|
--rec-now: #8B4860;
|
|
--rec-wait: #4A7C7E;
|
|
--rec-hold: #9B8B6B;
|
|
}
|
|
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
[data-flux-label] {
|
|
@apply !mb-0 !leading-tight;
|
|
}
|
|
|
|
input:focus[data-flux-control],
|
|
textarea:focus[data-flux-control],
|
|
select:focus[data-flux-control] {
|
|
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
|
}
|
|
|
|
/* \[:where(&)\]:size-4 {
|
|
@apply size-4;
|
|
} */
|