/* * ESCAPE RV RENTALS — CSS Theme System * File: css/themes.css * * Four CSS theme variants for the anti-pattern system. * theme-a = Clean white / teal accents (Booking.com style) * theme-b = Off-white / warm amber accents * theme-c = Light grey / deep blue accents * theme-d = Cream / forest green accents * * Each theme uses the same CSS custom properties so components * automatically adopt the right colours without any JS. * * USAGE: or etc. * * SPLIT FILES IN PRODUCTION: * /css/theme-a.css * /css/theme-b.css * /css/theme-c.css * /css/theme-d.css * /css/components.css ← shared across all themes */ /* ═══════════════════════════════════════════════════ BASE RESET + TYPOGRAPHY ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.7; color: var(--erv-text); background: var(--erv-bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--erv-link); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3,h4 { font-weight: 600; line-height: 1.25; margin: 0 0 .75rem; color: var(--erv-heading); } h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); } h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 1rem; } ul,ol { padding-left: 1.5rem; margin: 0 0 1rem; } li { margin-bottom: .25rem; } /* ═══════════════════════════════════════════════════ THEME A — Clean White / Teal (Default / Booking.com style) ═══════════════════════════════════════════════════ */ .theme-a { --erv-bg: #ffffff; --erv-bg-secondary: #f5f7fa; --erv-bg-card: #ffffff; --erv-text: #1a1a2e; --erv-text-muted: #5a6572; --erv-heading: #0d1b2a; --erv-link: #0072ce; --erv-accent: #00877a; --erv-accent-light: #e0f5f3; --erv-accent-dark: #005e55; --erv-cta: #ff6b35; --erv-cta-hover: #e55a26; --erv-border: #e1e5eb; --erv-border-dark: #c5ccd4; --erv-shadow: 0 2px 8px rgba(0,0,0,.08); --erv-shadow-hover: 0 4px 16px rgba(0,0,0,.12); --erv-radius-sm: 4px; --erv-radius: 8px; --erv-radius-lg: 12px; --erv-warning-bg: #fff8e1; --erv-warning-border:#f9a825; --erv-warning-text: #5d4037; --erv-critical-bg: #fff0ee; --erv-critical-border:#e53935; --erv-critical-text:#b71c1c; --erv-success-bg: #e8f5e9; --erv-success-text: #1b5e20; } /* ═══════════════════════════════════════════════════ THEME B — Off-White / Warm Amber ═══════════════════════════════════════════════════ */ .theme-b { --erv-bg: #fdfcf9; --erv-bg-secondary: #f7f3ec; --erv-bg-card: #ffffff; --erv-text: #2c2c2c; --erv-text-muted: #6b6054; --erv-heading: #1a1207; --erv-link: #c85000; --erv-accent: #d4660a; --erv-accent-light: #fff3e0; --erv-accent-dark: #8d4300; --erv-cta: #d4660a; --erv-cta-hover: #b8580a; --erv-border: #e8e0d4; --erv-border-dark: #d0c4b0; --erv-shadow: 0 2px 8px rgba(60,30,0,.07); --erv-shadow-hover: 0 4px 16px rgba(60,30,0,.12); --erv-radius-sm: 4px; --erv-radius: 8px; --erv-radius-lg: 12px; --erv-warning-bg: #fff8e1; --erv-warning-border:#f9a825; --erv-warning-text: #5d4037; --erv-critical-bg: #fff0ee; --erv-critical-border:#e53935; --erv-critical-text:#b71c1c; --erv-success-bg: #e8f5e9; --erv-success-text: #1b5e20; } /* ═══════════════════════════════════════════════════ THEME C — Light Grey / Deep Blue ═══════════════════════════════════════════════════ */ .theme-c { --erv-bg: #f0f4f8; --erv-bg-secondary: #e4ecf4; --erv-bg-card: #ffffff; --erv-text: #1c2b3a; --erv-text-muted: #4a6278; --erv-heading: #0a1929; --erv-link: #1565c0; --erv-accent: #1565c0; --erv-accent-light: #e3f2fd; --erv-accent-dark: #0d3b82; --erv-cta: #0052cc; --erv-cta-hover: #003d99; --erv-border: #cad8e4; --erv-border-dark: #9ab4c8; --erv-shadow: 0 2px 8px rgba(0,30,60,.08); --erv-shadow-hover: 0 4px 16px rgba(0,30,60,.15); --erv-radius-sm: 4px; --erv-radius: 8px; --erv-radius-lg: 12px; --erv-warning-bg: #fff8e1; --erv-warning-border:#f9a825; --erv-warning-text: #5d4037; --erv-critical-bg: #fff0ee; --erv-critical-border:#e53935; --erv-critical-text:#b71c1c; --erv-success-bg: #e8f5e9; --erv-success-text: #1b5e20; } /* ═══════════════════════════════════════════════════ THEME D — Cream / Forest Green ═══════════════════════════════════════════════════ */ .theme-d { --erv-bg: #faf8f0; --erv-bg-secondary: #f0ece0; --erv-bg-card: #ffffff; --erv-text: #1e2a1a; --erv-text-muted: #4a5c44; --erv-heading: #0d1a0b; --erv-link: #2e7d32; --erv-accent: #2e7d32; --erv-accent-light: #e8f5e9; --erv-accent-dark: #1b5e20; --erv-cta: #33691e; --erv-cta-hover: #255016; --erv-border: #d8e4d0; --erv-border-dark: #b0c8a8; --erv-shadow: 0 2px 8px rgba(10,30,10,.07); --erv-shadow-hover: 0 4px 16px rgba(10,30,10,.12); --erv-radius-sm: 4px; --erv-radius: 8px; --erv-radius-lg: 12px; --erv-warning-bg: #fff8e1; --erv-warning-border:#f9a825; --erv-warning-text: #5d4037; --erv-critical-bg: #fff0ee; --erv-critical-border:#e53935; --erv-critical-text:#b71c1c; --erv-success-bg: #e8f5e9; --erv-success-text: #1b5e20; } /* ═══════════════════════════════════════════════════ SHARED COMPONENTS (all themes) ═══════════════════════════════════════════════════ */ /* Layout */ .erv-container { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; } .erv-main { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } /* Breadcrumb */ .erv-breadcrumb { max-width: 820px; margin: 0 auto; padding: .75rem 1.25rem; } .erv-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: 13px; color: var(--erv-text-muted); } .erv-breadcrumb li::after { content: '›'; margin-left: .25rem; } .erv-breadcrumb li:last-child::after { content: ''; } .erv-breadcrumb a { color: var(--erv-text-muted); } .erv-breadcrumb a:hover { color: var(--erv-accent); } /* Hero */ .erv-hero { margin-bottom: 2rem; } .erv-h1 { margin-bottom: .5rem; } .erv-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.25rem; align-items: center; } .erv-price-pill { background: var(--erv-accent-light); color: var(--erv-accent-dark); padding: 4px 12px; border-radius: 20px; font-size: 14px; } .erv-inventory-pill { background: var(--erv-bg-secondary); color: var(--erv-text-muted); padding: 4px 12px; border-radius: 20px; font-size: 13px; border: 0.5px solid var(--erv-border); } .erv-verified { font-size: 12px; color: var(--erv-text-muted); } /* Urgency bar */ .erv-urgency-bar { background: var(--erv-accent-light); border: 0.5px solid var(--erv-accent); border-radius: var(--erv-radius); padding: 10px 16px; margin-bottom: 1rem; font-size: 14px; display: flex; align-items: center; gap: 8px; } .erv-urgency-icon { font-size: 16px; } /* Section titles */ .erv-section-title { font-size: 1.3rem; font-weight: 600; margin: 2rem 0 1rem; border-bottom: 2px solid var(--erv-accent); padding-bottom: .4rem; display: inline-block; } .erv-section-title-sm { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .75rem; } /* Primary CTA button */ .erv-btn-primary { display: inline-block; background: var(--erv-cta); color: #fff; padding: 12px 24px; border-radius: var(--erv-radius); font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: background .15s, transform .1s; text-align: center; } .erv-btn-primary:hover { background: var(--erv-cta-hover); text-decoration: none; color: #fff; } .erv-btn-primary:active { transform: scale(0.98); } .erv-btn-secondary { display: inline-block; background: transparent; color: var(--erv-accent); padding: 10px 20px; border-radius: var(--erv-radius); font-size: 14px; font-weight: 500; border: 1.5px solid var(--erv-accent); cursor: pointer; transition: background .15s; } .erv-btn-secondary:hover { background: var(--erv-accent-light); text-decoration: none; } /* Widget section */ .erv-widget-primary { background: var(--erv-bg-card); border: 0.5px solid var(--erv-border); border-radius: var(--erv-radius-lg); padding: 1.5rem; margin: 1.5rem 0; box-shadow: var(--erv-shadow); } .erv-scarcity { font-size: 13px; color: var(--erv-text-muted); margin: .75rem 0 0; display: flex; align-items: center; gap: .5rem; } .erv-dot-red { width: 8px; height: 8px; border-radius: 50%; background: #e53935; display: inline-block; animation: pulse-red 1.2s ease-in-out infinite; } @keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:.4} } /* Live Data Bar */ .erv-data-bar { margin: 2rem 0; } .erv-data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .erv-data-card { background: var(--erv-bg-card); border: 0.5px solid var(--erv-border); border-radius: var(--erv-radius); padding: 14px; display: flex; flex-direction: column; } .erv-data-label { font-size: 11px; color: var(--erv-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .erv-data-value { font-size: 22px; font-weight: 700; color: var(--erv-heading); line-height: 1.1; } .erv-data-delta { font-size: 12px; color: var(--erv-accent); margin-top: 2px; } .erv-data-sub { font-size: 11px; color: var(--erv-text-muted); margin-top: 4px; } .erv-data-source { font-size: 11px; color: var(--erv-text-muted); margin-top: .5rem; } /* Choice Architecture Table */ .erv-choice-table { margin: 2rem 0; overflow-x: auto; } .erv-choice-table table { width: 100%; border-collapse: collapse; font-size: 14px; } .erv-choice-table th { background: var(--erv-bg-secondary); padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--erv-border-dark); font-weight: 600; } .erv-choice-table td { padding: 10px 14px; border-bottom: 0.5px solid var(--erv-border); vertical-align: top; } .erv-choice-table tr:hover td { background: var(--erv-bg-secondary); } .erv-check { color: var(--erv-success-text); font-weight: 600; } .erv-cross { color: var(--erv-critical-text); } /* Pitfall warning boxes */ .erv-warning-box { border-radius: var(--erv-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; border-left: 4px solid var(--erv-warning-border); background: var(--erv-warning-bg); } .erv-warning-box.erv-warning-critical { border-left-color: var(--erv-critical-border); background: var(--erv-critical-bg); } .erv-warning-title { font-size: 15px; font-weight: 600; margin: 0 0 .5rem; color: var(--erv-warning-text); } .erv-warning-box.erv-warning-critical .erv-warning-title { color: var(--erv-critical-text); } /* Campgrounds */ .erv-campground-list { display: flex; flex-direction: column; gap: 8px; } .erv-campground-item { display: flex; align-items: center; gap: 12px; background: var(--erv-bg-secondary); border-radius: var(--erv-radius); padding: 10px 14px; font-size: 14px; } .erv-campground-name { font-weight: 500; } .erv-campground-dist { font-size: 12px; color: var(--erv-text-muted); margin-left: auto; } /* P2P Cards */ .erv-p2p-section { margin: 2rem 0; } .erv-p2p-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 1rem 0; } .erv-p2p-card { background: var(--erv-bg-card); border: 0.5px solid var(--erv-border); border-radius: var(--erv-radius-lg); overflow: hidden; box-shadow: var(--erv-shadow); transition: box-shadow .15s; } .erv-p2p-card:hover { box-shadow: var(--erv-shadow-hover); } .erv-p2p-card-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; } .erv-p2p-card-body { padding: 12px; } .erv-p2p-card-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; } .erv-p2p-card-price { font-size: 16px; font-weight: 700; color: var(--erv-accent-dark); } .erv-p2p-card-rating { font-size: 12px; color: var(--erv-text-muted); } /* FAQ */ .erv-faq { margin: 2rem 0; } .erv-faq-item { border-bottom: 0.5px solid var(--erv-border); } .erv-faq-question { font-size: 15px; font-weight: 600; padding: 1rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .erv-faq-question::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--erv-accent); flex-shrink: 0; } .erv-faq-item.open .erv-faq-question::after { content: '−'; } .erv-faq-answer { display: none; padding: 0 0 1rem; font-size: 14px; color: var(--erv-text); line-height: 1.7; } .erv-faq-item.open .erv-faq-answer { display: block; } /* Author card */ .erv-article-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 0.5px solid var(--erv-border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; } .erv-author-card { display: flex; align-items: center; gap: 12px; } .erv-author-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--erv-border); } .erv-author-label { font-size: 11px; color: var(--erv-text-muted); display: block; } .erv-author-name { font-size: 15px; font-weight: 600; display: block; } .erv-author-specialty { font-size: 12px; color: var(--erv-text-muted); display: block; } .erv-verified-date { font-size: 12px; color: var(--erv-text-muted); } .erv-how-link { color: var(--erv-link); margin-left: 8px; } /* Sticky CTA */ .erv-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--erv-bg-card); border-top: 0.5px solid var(--erv-border); padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; z-index: 1000; box-shadow: 0 -4px 12px rgba(0,0,0,.08); } .erv-sticky-hidden { transform: translateY(100%); pointer-events: none; } .erv-sticky-price { font-size: 15px; font-weight: 600; } .erv-sticky-btn { padding: 10px 20px; font-size: 14px; } @media (min-width: 900px) { .erv-sticky-cta { display: none; } } /* Related nav */ .erv-spoke-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .erv-spoke-list li a { display: block; background: var(--erv-bg-secondary); border: 0.5px solid var(--erv-border); border-radius: var(--erv-radius); padding: 8px 12px; font-size: 13px; color: var(--erv-link); transition: background .1s; } .erv-spoke-list li a:hover { background: var(--erv-accent-light); text-decoration: none; } .erv-city-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .erv-city-list li a { background: var(--erv-bg-secondary); border: 0.5px solid var(--erv-border); border-radius: 20px; padding: 5px 14px; font-size: 13px; color: var(--erv-link); } .erv-city-list li a:hover { background: var(--erv-accent-light); text-decoration: none; } /* Grid layouts */ .erv-grid-4col { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .erv-dest-card { background: var(--erv-bg-card); border-radius: var(--erv-radius-lg); overflow: hidden; box-shadow: var(--erv-shadow); transition: box-shadow .15s; text-decoration: none; color: var(--erv-text); display: block; } .erv-dest-card:hover { box-shadow: var(--erv-shadow-hover); text-decoration: none; } .erv-dest-img { aspect-ratio: 3/2; background-size: cover; background-position: center; } .erv-dest-info { padding: 12px 14px; } .erv-dest-info h3 { font-size: 16px; margin-bottom: 4px; } .erv-dest-info p { font-size: 13px; color: var(--erv-text-muted); margin: 0; } /* Trust section */ .erv-trust { margin: 2rem 0; } .erv-trust-grid { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; } .erv-counter-text { font-size: 15px; } .erv-trust-section { background: var(--erv-bg-secondary); padding: 3rem 0; } .erv-trust-stats { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; } .erv-trust-stat { text-align: center; } .erv-trust-stat strong { font-size: 2rem; font-weight: 700; display: block; color: var(--erv-accent-dark); } .erv-trust-stat span { font-size: 14px; color: var(--erv-text-muted); } /* Route stats */ .erv-route-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; } .erv-route-stat { background: var(--erv-bg-secondary); border-radius: var(--erv-radius); padding: 12px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 100px; } .erv-stat-value { font-size: 18px; font-weight: 700; } .erv-stat-label { font-size: 11px; color: var(--erv-text-muted); margin-top: 2px; } .erv-difficulty-badge { padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; } [data-difficulty="1"] .erv-difficulty-badge { background: #e8f5e9; color: #1b5e20; } [data-difficulty="2"] .erv-difficulty-badge { background: #f1f8e9; color: #33691e; } [data-difficulty="3"] .erv-difficulty-badge { background: #fff8e1; color: #e65100; } [data-difficulty="4"] .erv-difficulty-badge { background: #fff3e0; color: #bf360c; } [data-difficulty="5"] .erv-difficulty-badge { background: #ffebee; color: #b71c1c; } /* Gear block */ .erv-gear-block { background: var(--erv-bg-secondary); border-radius: var(--erv-radius-lg); padding: 1.5rem; margin: 2rem 0; } .erv-gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 1rem; } .erv-gear-item { background: var(--erv-bg-card); border: 0.5px solid var(--erv-border); border-radius: var(--erv-radius); padding: 10px 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .erv-gear-icon { font-size: 20px; flex-shrink: 0; } /* Badges */ .erv-badge { background: var(--erv-accent-light); color: var(--erv-accent-dark); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; display: inline-block; margin-right: 6px; margin-bottom: 4px; } .erv-airport-badges { margin-top: .75rem; } /* How it works steps */ .erv-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .erv-step { background: var(--erv-bg-card); border-radius: var(--erv-radius-lg); padding: 1.5rem; box-shadow: var(--erv-shadow); } .erv-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--erv-accent); color: #fff; font-size: 16px; font-weight: 700; margin-bottom: .75rem; } .erv-step h3 { font-size: 15px; margin-bottom: .5rem; } /* Country tabs (homepage) */ .erv-country-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; } .erv-tab { background: var(--erv-bg-secondary); border: 0.5px solid var(--erv-border); border-radius: var(--erv-radius); padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background .1s, border-color .1s; } .erv-tab.active, .erv-tab:hover { background: var(--erv-accent-light); border-color: var(--erv-accent); color: var(--erv-accent-dark); } .erv-hero-trust { font-size: 13px; color: var(--erv-text-muted); margin-top: .75rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .erv-hero-trust span { display: flex; align-items: center; gap: .25rem; } /* visually hidden (accessibility) */ .visually-hidden, .erv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Loading spinner (quiz + itinerary) */ .erv-loading-spinner { width: 28px; height: 28px; border: 3px solid var(--erv-border); border-top-color: var(--erv-accent); border-radius: 50%; animation: erv-spin .7s linear infinite; display: inline-block; } @keyframes erv-spin { to { transform: rotate(360deg); } } /* FAQ accordion JS */ document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.erv-faq-question').forEach(function(q) { q.addEventListener('click', function() { var item = this.closest('.erv-faq-item'); item.classList.toggle('open'); }); }); }); /* Dark mode — all themes */ @media (prefers-color-scheme: dark) { .theme-a, .theme-b, .theme-c, .theme-d { --erv-bg: #12151a; --erv-bg-secondary: #1c2028; --erv-bg-card: #1c2028; --erv-text: #e4e6eb; --erv-text-muted: #8b9099; --erv-heading: #f0f2f5; --erv-border: #2a2e38; --erv-border-dark: #3a3f4b; --erv-shadow: 0 2px 8px rgba(0,0,0,.3); --erv-shadow-hover: 0 4px 16px rgba(0,0,0,.4); } } /* Responsive */ @media (max-width: 640px) { .erv-data-grid { grid-template-columns: repeat(2, 1fr); } .erv-route-stats { gap: .75rem; } .erv-route-stat { min-width: 80px; padding: 10px; } .erv-itinerary-teaser { flex-direction: column; } .erv-trust-grid { flex-direction: column; } }