/* * TravelEngine — Three Theme Layouts * * Applied via set by layout choice in Customizer. * * Layout 1 (default — no class needed): Adventure * Bold, high-contrast. Trek-orange dominant. Strong shadows. * * Layout 2: .te-layout-2 — Minimal * Clean, airy, lots of white space. Muted tones. Thin borders. * * Layout 3: .te-layout-3 — Dark Luxury * Deep navy backgrounds, gold accents. Premium feel. */ /* ================================================================ LAYOUT 2 — MINIMAL / CLEAN Light, spacious, editorial. Blue accent. ================================================================ */ .te-layout-2 { --te-trek: #2563EB; /* blue instead of orange */ --te-hotel: #0891B2; /* teal */ --te-green: #059669; --te-dark: #1E293B; --te-darker: #0F172A; --te-bg: #FAFBFC; --te-surface: #FFFFFF; --te-border: #E8ECF2; --te-text: #1E293B; --te-muted: #64748B; --te-trek-tint: rgba(37,99,235,.06); --te-hotel-tint: rgba(8,145,178,.06); --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.10); } /* Minimal header — ultra-clean, light weight */ .te-layout-2 .te-header { border-bottom: 1px solid var(--te-border); box-shadow: none; } .te-layout-2 .te-header.is-scrolled { box-shadow: 0 1px 8px rgba(0,0,0,.06); } .te-layout-2 .te-logo-icon { background: var(--te-dark); box-shadow: none; } .te-layout-2 .te-nav-link { font-weight: 500; letter-spacing: 0.01em; } /* Minimal hero — offset, typographic */ .te-layout-2 .te-hero { background: var(--te-dark); } .te-layout-2 .te-hero h1 { font-size: clamp(32px, 5vw, 62px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.08; } .te-layout-2 .te-hero-eyebrow { font-weight: 400; letter-spacing: 0.25em; font-size: 11px; } /* Minimal cards — flat, thin border */ .te-layout-2 .te-card { border-radius: var(--r-md); box-shadow: none; border: 1px solid var(--te-border); } .te-layout-2 .te-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; } .te-layout-2 .te-card-title { font-size: 15px; font-weight: 700; } /* Minimal section headings */ .te-layout-2 .te-section-head h2 { font-size: clamp(20px, 2.5vw, 30px); font-weight: 600; letter-spacing: -0.01em; } .te-layout-2 .te-section-eyebrow { color: var(--te-muted); font-weight: 600; font-size: 11px; letter-spacing: 0.15em; } /* Minimal buttons — no shadows, thinner */ .te-layout-2 .te-btn { font-weight: 600; border-radius: var(--r-sm); box-shadow: none; } .te-layout-2 .te-btn--trek { background: var(--te-dark); border-color: var(--te-dark); box-shadow: none; } .te-layout-2 .te-btn--trek:hover { background: #0F172A; box-shadow: none; } /* Minimal search card */ .te-layout-2 .te-search-card { border-radius: var(--r-md); box-shadow: var(--shadow-sm); border: 1px solid var(--te-border); } /* Minimal footer */ .te-layout-2 .te-footer { background: #F1F3F6; color: var(--te-text); margin-top: 60px; } .te-layout-2 .te-footer-brand p { color: var(--te-muted); } .te-layout-2 .te-footer-col h4 { color: var(--te-muted); } .te-layout-2 .te-footer-col a { color: var(--te-text); } .te-layout-2 .te-footer-bottom { color: var(--te-muted); border-top-color: var(--te-border); } .te-layout-2 .te-footer-brand-logo strong { color: var(--te-text); } .te-layout-2 .te-footer-social-link { background: var(--te-border); border-color: transparent; color: var(--te-muted); } .te-layout-2 .te-footer-social-link:hover { background: var(--te-dark); color: #fff; } /* Minimal CTA */ .te-layout-2 .te-cta-banner { background: var(--te-dark); border-radius: var(--r-lg); } .te-layout-2 .te-cta-banner::before { display: none; } /* Minimal stats */ .te-layout-2 .te-section--dark { background: var(--te-dark); } /* ================================================================ LAYOUT 3 — DARK LUXURY / PREMIUM Deep navy, gold accents, larger typography. ================================================================ */ .te-layout-3 { --te-trek: #D4A017; /* gold / amber */ --te-hotel: #8B5CF6; /* violet */ --te-green: #34D399; /* emerald */ --te-dark: #050D1A; --te-darker: #020810; --te-bg: #060F1E; --te-surface: #0D1B30; --te-border: rgba(212,160,23,.15); --te-text: #E8F0FE; --te-muted: #7B93B8; --te-light: #3D5A80; --te-trek-tint: rgba(212,160,23,.1); --te-hotel-tint: rgba(139,92,246,.1); --te-green-tint: rgba(52,211,153,.1); --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-2xl: 40px; --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 20px 48px rgba(0,0,0,.6); } /* Dark body override */ .te-layout-3 body, .te-layout-3 { background: var(--te-bg); color: var(--te-text); } /* Dark header */ .te-layout-3 .te-header { background: rgba(5,13,26,.95); border-bottom-color: var(--te-border); backdrop-filter: blur(20px); } .te-layout-3 .te-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.6); } .te-layout-3 .te-logo-icon { background: linear-gradient(135deg, var(--te-trek), #B8860B); box-shadow: 0 2px 12px rgba(212,160,23,.35); } .te-layout-3 .te-nav-link { color: rgba(232,240,254,.7); } .te-layout-3 .te-nav-link:hover { color: var(--te-text); background: rgba(255,255,255,.06); } .te-layout-3 .te-nav-dropdown { background: #0D1B30; border-color: var(--te-border); } .te-layout-3 .te-nav-dropdown .te-nav-link:hover { background: rgba(212,160,23,.1); color: var(--te-trek); } .te-layout-3 .te-hamburger { border-color: rgba(255,255,255,.2); } .te-layout-3 .te-hamburger span { background: var(--te-text); } /* Dark hero — cinematic */ .te-layout-3 .te-hero { background: linear-gradient(135deg, #020810 0%, #0D1B30 50%, #0A1220 100%); } .te-layout-3 .te-hero h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; background: linear-gradient(135deg, #FFFFFF 0%, #D4A017 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .te-layout-3 .te-hero-eyebrow { color: var(--te-trek); letter-spacing: 0.2em; } /* Dark cards — elevated panels */ .te-layout-3 .te-card { background: var(--te-surface); border: 1px solid var(--te-border); border-radius: var(--r-lg); } .te-layout-3 .te-card:hover { border-color: rgba(212,160,23,.3); box-shadow: 0 8px 32px rgba(212,160,23,.12); transform: translateY(-4px); } .te-layout-3 .te-card-title a { color: var(--te-text); } .te-layout-3 .te-card-title a:hover { color: var(--te-trek); } .te-layout-3 .te-card-footer { border-top-color: var(--te-border); } .te-layout-3 .te-card-amenity { background: rgba(212,160,23,.08); border-color: rgba(212,160,23,.2); color: #C0A030; } /* Dark section overrides */ .te-layout-3 .te-section { background: var(--te-bg); } .te-layout-3 .te-section--gray { background: var(--te-surface); } .te-layout-3 .te-section--dark { background: #020810; } /* Dark section headings */ .te-layout-3 .te-section-head h2 { font-size: clamp(24px, 3.5vw, 42px); font-weight: 900; letter-spacing: -0.02em; } .te-layout-3 .te-section-eyebrow { color: var(--te-trek); letter-spacing: 0.15em; } /* Dark buttons */ .te-layout-3 .te-btn--trek { background: var(--te-trek); border-color: var(--te-trek); color: #050D1A; font-weight: 800; box-shadow: 0 2px 12px rgba(212,160,23,.4); } .te-layout-3 .te-btn--trek:hover { background: #C08010; box-shadow: 0 4px 20px rgba(212,160,23,.5); } .te-layout-3 .te-btn--hotel { background: var(--te-hotel); border-color: var(--te-hotel); color: #fff; } .te-layout-3 .te-btn--ghost { color: rgba(232,240,254,.75); border-color: rgba(255,255,255,.2); } .te-layout-3 .te-btn--ghost:hover { color: var(--te-text); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); } /* Dark search card */ .te-layout-3 .te-search-card { background: var(--te-surface); border: 1px solid var(--te-border); } .te-layout-3 .te-search-tabs-bar { background: rgba(0,0,0,.2); } .te-layout-3 .te-search-tab { color: rgba(232,240,254,.6); } .te-layout-3 .te-search-tab.is-active { color: var(--te-trek); border-bottom-color: var(--te-trek); } .te-layout-3 .te-form-input, .te-layout-3 .te-form-select { background: rgba(0,0,0,.2); border-color: var(--te-border); color: var(--te-text); } .te-layout-3 .te-form-input:focus, .te-layout-3 .te-form-select:focus { border-color: var(--te-trek); box-shadow: 0 0 0 3px rgba(212,160,23,.15); background: rgba(0,0,0,.3); } /* Dark FDP */ .te-layout-3 .te-fdp-card { background: var(--te-surface); border-color: var(--te-border); } .te-layout-3 .te-fdp-card:hover:not(.is-soldout) { border-color: var(--te-trek); box-shadow: 0 0 0 3px rgba(212,160,23,.15); } .te-layout-3 .te-fdp-card.is-selected { border-color: var(--te-trek); background: rgba(212,160,23,.1); } .te-layout-3 .te-fdp-month { color: var(--te-trek); } .te-layout-3 .te-fdp-day { color: var(--te-text); } .te-layout-3 .te-fdp-check { background: var(--te-trek); color: #050D1A; } /* Dark booking sidebar */ .te-layout-3 .te-booking-box { background: var(--te-surface); border-color: var(--te-border); } .te-layout-3 .te-booking-box-head { background: linear-gradient(135deg, #020810, #0D1B30); border-bottom: 1px solid rgba(212,160,23,.2); } /* Dark why-cards */ .te-layout-3 .te-why-card { background: var(--te-surface); border: 1px solid var(--te-border); } .te-layout-3 .te-why-card:hover { border-color: rgba(212,160,23,.3); } .te-layout-3 .te-why-icon { background: rgba(212,160,23,.1); } /* Dark destination cards */ .te-layout-3 .te-dest-item { border: 1px solid var(--te-border); } /* Dark stats */ .te-layout-3 .te-stat-num { color: var(--te-trek); } /* Dark CTA */ .te-layout-3 .te-cta-banner { background: linear-gradient(135deg, #020810, #0D1530); border: 1px solid rgba(212,160,23,.2); } .te-layout-3 .te-cta-banner::before { background: radial-gradient(ellipse at 10% 55%, rgba(212,160,23,.3), transparent 50%), radial-gradient(ellipse at 88% 30%, rgba(139,92,246,.25), transparent 50%); } /* Dark review cards */ .te-layout-3 .te-review-avatar { background: rgba(212,160,23,.1); border-color: rgba(212,160,23,.2); color: var(--te-trek); } .te-layout-3 .te-review-stars { color: var(--te-trek); } /* Dark footer */ .te-layout-3 .te-footer { background: #020810; border-top: 1px solid rgba(212,160,23,.12); } .te-layout-3 .te-footer-social-link:hover { background: var(--te-trek); color: #050D1A; } /* Dark box */ .te-layout-3 .te-box { background: var(--te-surface); border-color: var(--te-border); } /* Dark archive hero */ .te-layout-3 .te-archive-hero { background: linear-gradient(135deg, #020810, #0A1525); } /* Dark pills */ .te-layout-3 .te-pill { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--te-muted); } .te-layout-3 .te-pill--trek { background: rgba(212,160,23,.12); color: #C0A030; } .te-layout-3 .te-pill--hotel { background: rgba(139,92,246,.12); color: var(--te-hotel); } /* Dark FDP summary */ .te-layout-3 .te-fdp-summary { background: rgba(0,0,0,.2); border-color: var(--te-border); } /* Dark nav mobile panel */ @media(max-width:900px) { .te-layout-3 .te-nav-links { background: #0D1B30; border-bottom-color: var(--te-border); } }