Edwin Eames
d60c816002
Complete visual overhaul of the three core public pages, establishing a consistent design system with reusable CSS classes and theme tokens. Phase 1 — Home Page: - Hero section with flame badge, bold headline, bouncing arrow CTA - SVG map wrapped in warm-glow container with hover indicator - State navigation cards with per-state colors and hover lift - Value propositions grid (Compare, Find, Save, Free) - Subtle dealer login CTA Phase 2 — State Page: - Themed breadcrumb with ChevronLeft back-nav - Per-state accent colors on header - County map in .map-container with hover indicator - County navigation card grid with bidirectional map cross-highlighting - Skeleton loading and DaisyUI error states Phase 3 — County/Tables Page: - Price-hero styling makes pricing the dominant visual element - Sortable desktop table with chevron icons and active column highlight - Completely redesigned mobile cards: company + price top row, cash callout, icon-labeled details grid, tappable phone CTA - Market prices section with info note - Relative date formatting (Today, Yesterday, 3 days ago) - Full skeleton loading states Design System (shared across all pages): - 19 reusable CSS classes in app.postcss (.accent-badge, .map-container, .price-hero, .listing-card, .county-card, .skeleton-box, etc.) - oil-orange and oil-blue color scales in Tailwind config - fade-in-up, fade-in, float animations - Staggered section reveals with Svelte transitions - Zero hardcoded colors — all theme tokens and DaisyUI semantics - Full dark mode support throughout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
111 lines
2.4 KiB
JavaScript
Executable File
111 lines
2.4 KiB
JavaScript
Executable File
/** @type {import('tailwindcss').Config}*/
|
|
const config = {
|
|
content: [
|
|
"./src/**/*.{html,js,svelte,ts}",
|
|
|
|
],
|
|
darkMode: 'class',
|
|
daisyui: {
|
|
|
|
themes: [
|
|
{
|
|
light: {
|
|
"primary": "#0256bf",
|
|
"secondary": "#36363a",
|
|
"accent": "#7F00FF",
|
|
"neutral": "#2B2B36",
|
|
"base-100": "#ffffff",
|
|
"base-200": "#f8f9fa",
|
|
"base-300": "#dee2e6",
|
|
"base-content": "#000000",
|
|
"info": "#74a0d5",
|
|
"success": "#33cc33",
|
|
"warning": "#97520C",
|
|
"error": "#da0e0e",
|
|
},
|
|
},
|
|
{
|
|
dark: {
|
|
"primary": "#0256bf",
|
|
"secondary": "#36363a",
|
|
"accent": "#7F00FF",
|
|
"neutral": "#2B2B36",
|
|
"base-100": "#252531",
|
|
"base-200": "#1a1a1f",
|
|
"base-300": "#15151a",
|
|
"base-content": "#ffffff",
|
|
"info": "#74a0d5",
|
|
"success": "#33cc33",
|
|
"warning": "#97520C",
|
|
"error": "#da0e0e",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
plugins: [
|
|
require("daisyui"),
|
|
],
|
|
|
|
|
|
|
|
theme: {
|
|
screens: {
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
'oil-orange': {
|
|
50: '#fff7ed',
|
|
100: '#ffedd5',
|
|
200: '#fed7aa',
|
|
300: '#fdba74',
|
|
400: '#fb923c',
|
|
500: '#ff6600',
|
|
600: '#e55a00',
|
|
700: '#c2410c',
|
|
800: '#9a3412',
|
|
900: '#7c2d12',
|
|
},
|
|
'oil-blue': {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#0256bf',
|
|
600: '#0248a3',
|
|
700: '#1d4ed8',
|
|
800: '#14368f',
|
|
900: '#1e3a5f',
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
|
|
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
|
'float': 'float 6s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
fadeInUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(24px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-8px)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
};
|
|
|
|
module.exports = config;
|