/* MAX Reservations - Shared Styles */
html {
min-height: 100%;
}
body {
font-family: 'Inter', sans-serif;
min-height: 100%;
background: #0a0806;
}
.main-bg {
background: #0a0806;
position: relative;
overflow-y: auto;
}
.main-bg--centered {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.gradient-mesh {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
animation: none;
z-index: 0;
}
/* ─── Section background system ─────────────────────────────────────────────
4 tiers of warm-dark backgrounds create clear visual separation without
any HTML changes. Removing background-attachment: fixed (see body above)
is the critical enabler — fixed-attachment made all overlays invisible.
─────────────────────────────────────────────────────────────────────────── */
/* Base tier: all sections start at warm near-black */
main > section {
background: #0f0c09;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Hero (first section): rich amber-warm gradient entrance */
main > section:first-child {
background: linear-gradient(180deg, #231508 0%, #0f0c09 65%);
border-top: none;
}
/* Raised tier: even sections lift noticeably (~2.5x more luminous than base) */
main > section:nth-of-type(even):not(#newsletter-signup-container) {
background: #1a1410;
border-top: 1px solid rgba(251, 146, 60, 0.15);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Newsletter: distinct warm mid-dark band with a strong orange cap */
#newsletter-signup-container {
background: #121009;
border-top: 2px solid rgba(251, 146, 60, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
/* Newsletter inner card */
.newsletter-signup-inner {
background: rgba(26, 20, 14, 0.9);
border: 1px solid rgba(251, 146, 60, 0.22);
border-radius: 1rem;
padding: 1.5rem 1.75rem;
box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
}
.newsletter-signup-inner .newsletter-heading {
color: #fff;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.newsletter-signup-inner .form-input.newsletter-field {
padding: 0.625rem 0.75rem;
min-height: 2.5rem;
}
/* Footer: darkest cap — visually closes the page */
footer {
background: #070505;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.form-input {
background: rgba(15, 10, 6, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.875rem 1.25rem;
transition: border-color 0.3s ease;
}
.form-input:focus {
border-color: rgba(251, 146, 60, 0.7);
outline: none;
}
.newsletter-field {
height: 2.25rem;
min-height: 2.25rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.cta-button {
transition: all 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(251, 146, 60, 0.5);
}
.glass-card {
background: rgba(15, 10, 6, 0.75);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
border-color: rgba(251, 146, 60, 0.7);
}
.glass-card--demo {
background: linear-gradient(to bottom, rgba(17, 24, 39, 0.2) 0%, rgba(17, 24, 39, 0.2) 82%, rgba(17, 24, 39, 0.8) 100%);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
opacity: 0;
animation: fadeIn 0.8s ease-out forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
/* Scroll-triggered fade-up animation */
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
transition-delay: var(--scroll-delay, 0ms);
}
.animate-on-scroll.animate-on-scroll--visible {
opacity: 1;
transform: translateY(0);
}
.legal-content h2 {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: white;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
.legal-content p {
margin-bottom: 1rem;
line-height: 1.75;
}
.legal-content a {
color: #f97316;
text-decoration: underline;
}
.legal-content strong,
.legal-content b {
font-weight: 800;
}
.legal-content em {
font-style: italic;
}
.legal-content u {
text-decoration: underline;
}
.legal-content ul {
margin-bottom: 1rem;
padding-left: 3.5rem;
line-height: 1.75;
list-style-type: disc;
}
.legal-content ol {
margin-bottom: 1rem;
padding-left: 3.5rem;
line-height: 1.75;
list-style-type: decimal;
}
/* Terms of Service: ordered lists use letters (a, b, c) */
body.page-terms .legal-content ol {
list-style-type: lower-alpha;
}
/* Privacy: ordered lists use numbers (explicit for clarity) */
body.page-privacy .legal-content ol {
list-style-type: decimal;
}
.legal-content li {
margin-bottom: 0.5rem;
}
.legal-content table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
margin-bottom: 1rem;
}
.legal-content table th,
.legal-content table td {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.75rem 1rem;
text-align: left;
}
.legal-content table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: white;
}
.legal-content table td {
color: rgba(255, 255, 255, 0.9);
}
.map-container {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Image Grid Showcase (solution pages: hotels, vacation-rentals, campgrounds, rv-parks) */
.image-grid-showcase {
min-height: 360px;
grid-auto-rows: minmax(150px, auto);
}
@media (min-width: 768px) {
.image-grid-showcase {
min-height: 0;
height: 480px;
grid-auto-rows: auto;
}
}
.image-grid-showcase-cell {
min-height: 150px;
}
@media (min-width: 768px) {
.image-grid-showcase-cell {
min-height: 0;
}
}