/* * ═══════════════════════════════════════════════════════════════════════════════ * Lavisa Destinations Theme — ENHANCED HERO VARIANTS POLISH (E7) * ═══════════════════════════════════════════════════════════════════════════════ * * @file assets/css/ldt-enhanced-hero-variants.css * @package Lavisa_Destinations_Theme * @since 2.9.8 (E7 — Visual Enhancement Roadmap v2) * @depends ldt-tokens-enhanced.css (E1 — gradients, shadows, glass tokens) * ldt-enhanced-animations.css (E3 — keyframes: ldt-pulse-glow, * ldt-float-icon, ldt-fade-up) * ldt-enhanced-hero.css (E6 — base hero polish, particle layer) * * Polishes the secondary hero variants used by archive / region / country / * city pages. These heroes use a DIFFERENT class system from the home / * explore carousel heroes that E6 covered: * * hero-archive.php .ldt-hero--archive static bg, breadcrumb, count badge * hero-region.php .ldt-hero--region static bg, flag, type badge * hero-country.php .ldt-hero--country static bg with own ken-burns, * flag, chips list * hero-city.php .ldt-hero--city same pattern as country * * Shared classes across these variants: * .ldt-hero__overlay (archive + region — generic dark overlay) * .ldt-hero__breadcrumb (archive + region — breadcrumb wrap) * .ldt-hero__content (archive + region — content wrap) * .ldt-hero__heading (archive — heading wrap) * .ldt-hero__count-badge (archive — destination count chip) * .ldt-hero__search (archive + region — search wrap with --variant) * * Variant-specific classes: * .ldt-hero--archive__title .ldt-hero--archive__subtitle * .ldt-hero-region__info .ldt-hero-region__flag * .ldt-hero-region__title .ldt-hero-region__type-badge * .ldt-hero-region__count * .ldt-hero-country__bg .ldt-hero-country__overlay * .ldt-hero-country__crumbs .ldt-hero-country__crumb-sep * .ldt-hero-country__head .ldt-hero-country__flag * .ldt-hero-country__title .ldt-hero-country__tagline * .ldt-hero-country__chips .ldt-hero-country__chip * .ldt-hero-country__chip-icon .ldt-hero-country__chip-label * .ldt-hero-country__chip-value * .ldt-hero-city__* (mirror of country structure) * * PARTICLE CANVAS: * The E6 JS targets `.ldt-hero` (which all variants have), so the * particle backdrop already works on archive / region / country / city * heroes. No additional JS changes needed. * * SPECIFICITY: * Existing inline styles use plain class selectors (0,1,0). Our * `body .selector` rules at 0,1,1 win cleanly. For multi-class * selectors (already 0,2,0), `body` prefix lands at 0,2,1 — still wins. * * ZERO PHP EDITS: * Same approach as E4-E6. The four secondary hero PHP files in * sections/heroes/ stay byte-identical to baseline. * * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ * 1. SHARED OVERLAY GRADIENT (archive + region) * * Existing rule sets a flat translucent dark overlay. We swap to a directional * gradient that's darker at the bottom (where text + search sit) and lighter * at the top (where the imagery is busy). Same gradient pattern used by E6 * for the carousel hero overlay, kept consistent across all hero types. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-hero--archive .ldt-hero__overlay, body .ldt-hero--region .ldt-hero__overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 30, 80, 0.72) 100% ) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ * 2. SHARED CONTENT FADE-IN (archive + region — static heroes) * * On home / explore the carousel triggers fade-up via .is-active. These static * heroes are always "active", so we run the reveal once on load instead. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-hero--archive .ldt-hero__heading > *, body .ldt-hero--region .ldt-hero-region__info, body .ldt-hero--country .ldt-hero-country__head, body .ldt-hero--country .ldt-hero-country__tagline, body .ldt-hero--country .ldt-hero-country__chips, body .ldt-hero--city .ldt-hero-city__head, body .ldt-hero--city .ldt-hero-city__title, body .ldt-hero--city .ldt-hero-city__tagline, body .ldt-hero--city .ldt-hero-city__chips { animation: ldt-fade-up 700ms var(--ldt-ease-portal, ease) backwards; } /* Stagger delays per variant */ body .ldt-hero--archive .ldt-hero__breadcrumb { animation: ldt-fade-up 600ms var(--ldt-ease-portal, ease) 50ms backwards; } body .ldt-hero--archive .ldt-hero--archive__title { animation-delay: 150ms; } body .ldt-hero--archive .ldt-hero__count-badge { animation: ldt-zoom-in 600ms var(--ldt-ease-portal, ease) 230ms backwards; } body .ldt-hero--archive .ldt-hero--archive__subtitle { animation-delay: 280ms; } body .ldt-hero--archive .ldt-hero__search { animation-delay: 380ms; } body .ldt-hero--region .ldt-hero__breadcrumb { animation: ldt-fade-up 600ms var(--ldt-ease-portal, ease) 50ms backwards; } body .ldt-hero--region .ldt-hero-region__info { animation-delay: 150ms; } body .ldt-hero--region .ldt-hero-region__count { animation-delay: 250ms; } body .ldt-hero--region .ldt-hero__search { animation-delay: 350ms; } body .ldt-hero--country .ldt-hero-country__crumbs { animation: ldt-fade-up 600ms var(--ldt-ease-portal, ease) 50ms backwards; } body .ldt-hero--country .ldt-hero-country__head { animation-delay: 150ms; } body .ldt-hero--country .ldt-hero-country__tagline { animation-delay: 250ms; } body .ldt-hero--country .ldt-hero-country__chips { animation-delay: 350ms; } body .ldt-hero--city .ldt-hero-city__crumbs { animation: ldt-fade-up 600ms var(--ldt-ease-portal, ease) 50ms backwards; } body .ldt-hero--city .ldt-hero-city__title { animation-delay: 150ms; } body .ldt-hero--city .ldt-hero-city__tagline { animation-delay: 250ms; } body .ldt-hero--city .ldt-hero-city__chips { animation-delay: 350ms; } @media (prefers-reduced-motion: reduce) { body .ldt-hero--archive .ldt-hero__heading > *, body .ldt-hero--archive .ldt-hero__breadcrumb, body .ldt-hero--archive .ldt-hero__count-badge, body .ldt-hero--archive .ldt-hero__search, body .ldt-hero--region .ldt-hero__breadcrumb, body .ldt-hero--region .ldt-hero-region__info, body .ldt-hero--region .ldt-hero-region__count, body .ldt-hero--region .ldt-hero__search, body .ldt-hero--country .ldt-hero-country__crumbs, body .ldt-hero--country .ldt-hero-country__head, body .ldt-hero--country .ldt-hero-country__tagline, body .ldt-hero--country .ldt-hero-country__chips, body .ldt-hero--city .ldt-hero-city__crumbs, body .ldt-hero--city .ldt-hero-city__title, body .ldt-hero--city .ldt-hero-city__tagline, body .ldt-hero--city .ldt-hero-city__chips { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 3. ARCHIVE HERO POLISH * * .ldt-hero--archive layout: breadcrumb on top, large title, count badge, * subtitle, search bar at bottom. * ═══════════════════════════════════════════════════════════════════════════════ */ /* Title — chiseled shadow with brand-blue depth (same as E6 carousel title) */ body .ldt-hero--archive__title { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 20, 60, 0.45), 0 0 40px rgba(0, 87, 184, 0.20); letter-spacing: -0.01em; } /* Subtitle — softer text-shadow + slight color polish */ body .ldt-hero--archive__subtitle { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); color: rgba(255, 255, 255, 0.92); } /* Count badge — gradient pill with brand-tinted shadow */ body .ldt-hero__count-badge { background: var(--ldt-gradient-accent, linear-gradient(135deg, #ff8c00 0%, #e07a00 100%)) !important; box-shadow: var(--ldt-shadow-offer, 0 4px 15px rgba(255, 140, 0, 0.40)); color: #ffffff; font-weight: 700; border: none !important; transition: transform 250ms var(--ldt-ease-portal, ease), box-shadow 250ms var(--ldt-ease-portal, ease); } @media (hover: hover) and (pointer: fine) { body .ldt-hero__count-badge:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 140, 0, 0.50); } } /* ═══════════════════════════════════════════════════════════════════════════════ * 4. REGION HERO POLISH * * .ldt-hero--region layout: breadcrumb, flag emoji + title + type badge inline, * count below, search at bottom. * ═══════════════════════════════════════════════════════════════════════════════ */ /* Region info wrap — inline-flex with breathing space */ body .ldt-hero-region__info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* Flag emoji — large, gentle float animation, drop-shadow for depth */ body .ldt-hero-region__flag { font-size: 3.25rem; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30)); animation: ldt-float-icon 6s ease-in-out infinite; will-change: transform; } /* Region title — chiseled shadow */ body .ldt-hero-region__title { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 20, 60, 0.45), 0 0 40px rgba(0, 87, 184, 0.20); letter-spacing: -0.01em; } /* Type badge — polish the pill (the inline `style="background-color: ..."` sets a dynamic color per type; we add box-shadow + border + font polish on top of whatever color the PHP injects) */ body .ldt-hero-region__type-badge { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.20); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Region count — soft white with slight shadow */ body .ldt-hero-region__count { color: rgba(255, 255, 255, 0.90); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); font-weight: 600; } @media (prefers-reduced-motion: reduce) { body .ldt-hero-region__flag { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 5. COUNTRY HERO POLISH * * .ldt-hero--country layout: breadcrumb crumbs, flag + title in head, tagline, * chips list. Has its own ken-burns on bg (we leave intact). * ═══════════════════════════════════════════════════════════════════════════════ */ /* Country head — flag + title inline */ body .ldt-hero-country__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* Country flag — large, float animation, drop-shadow, glass-light pill bg */ body .ldt-hero-country__flag { background: var(--ldt-glass-light, rgba(255, 255, 255, 0.18)) !important; border: 1px solid rgba(255, 255, 255, 0.30); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); border-radius: var(--ldt-radius-pill, 9999px); line-height: 1; animation: ldt-float-icon 8s ease-in-out infinite; will-change: transform; } /* Country title — chiseled */ body .ldt-hero-country__title { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.40), 0 6px 24px rgba(0, 20, 60, 0.45), 0 0 40px rgba(0, 87, 184, 0.20); letter-spacing: -0.01em; } /* Country tagline — accent-colored with shadow */ body .ldt-hero-country__tagline { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); font-weight: 500; } /* Country chips list — flex wrap with gap */ body .ldt-hero-country__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } /* Country chip — glass-light pill */ body .ldt-hero-country__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--ldt-glass-light, rgba(255, 255, 255, 0.16)) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: var(--ldt-radius-pill, 9999px); color: #ffffff; font-size: 13px; font-weight: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background-color 250ms var(--ldt-ease-portal, ease), transform 250ms var(--ldt-ease-portal, ease), box-shadow 250ms var(--ldt-ease-portal, ease); } @media (hover: hover) and (pointer: fine) { body .ldt-hero-country__chip:hover { background: rgba(255, 140, 0, 0.25) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 140, 0, 0.30); } } /* Country chip icon — accent color with subtle drop-shadow */ body .ldt-hero-country__chip-icon { color: var(--ldt-accent, #ff8c00); display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* Country chip label — softer color for the "key" part */ body .ldt-hero-country__chip-label { color: rgba(255, 255, 255, 0.70); font-weight: 500; } /* Country chip value — full white + bolder for the "value" part */ body .ldt-hero-country__chip-value { color: #ffffff; font-weight: 700; } /* Crumbs — glass-light row with accent on current item */ body .ldt-hero-country__crumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 14px; background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--ldt-radius-pill, 9999px); font-size: 13px; } body .ldt-hero-country__crumbs a { color: rgba(255, 255, 255, 0.80); text-decoration: none; transition: color 200ms var(--ldt-ease-portal, ease); } body .ldt-hero-country__crumbs a:hover { color: var(--ldt-accent, #ff8c00); } body .ldt-hero-country__crumb-sep { color: rgba(255, 255, 255, 0.40); margin: 0 2px; } /* Last crumb (current) — accent color */ body .ldt-hero-country__crumbs > *:last-child { color: var(--ldt-accent, #ff8c00); font-weight: 600; } @media (prefers-reduced-motion: reduce) { body .ldt-hero-country__flag { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 6. CITY HERO POLISH * * .ldt-hero--city mirrors the country structure exactly with __city suffixes. * We mirror the country styles to keep the visual treatment identical — the * city hero is just a smaller geographic scale, not a different visual class. * ═══════════════════════════════════════════════════════════════════════════════ */ /* City title — chiseled */ body .ldt-hero-city__title { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.40), 0 6px 24px rgba(0, 20, 60, 0.45), 0 0 40px rgba(0, 87, 184, 0.20); letter-spacing: -0.01em; } body .ldt-hero-city__tagline { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); font-weight: 500; } /* City chips list */ body .ldt-hero-city__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } body .ldt-hero-city__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--ldt-glass-light, rgba(255, 255, 255, 0.16)) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: var(--ldt-radius-pill, 9999px); color: #ffffff; font-size: 13px; font-weight: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background-color 250ms var(--ldt-ease-portal, ease), transform 250ms var(--ldt-ease-portal, ease), box-shadow 250ms var(--ldt-ease-portal, ease); } @media (hover: hover) and (pointer: fine) { body .ldt-hero-city__chip:hover { background: rgba(255, 140, 0, 0.25) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 140, 0, 0.30); } } body .ldt-hero-city__chip-icon { color: var(--ldt-accent, #ff8c00); display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } body .ldt-hero-city__chip-label { color: rgba(255, 255, 255, 0.70); font-weight: 500; } body .ldt-hero-city__chip-value { color: #ffffff; font-weight: 700; } /* City crumbs — same as country */ body .ldt-hero-city__crumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 14px; background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--ldt-radius-pill, 9999px); font-size: 13px; } body .ldt-hero-city__crumbs a { color: rgba(255, 255, 255, 0.80); text-decoration: none; transition: color 200ms var(--ldt-ease-portal, ease); } body .ldt-hero-city__crumbs a:hover { color: var(--ldt-accent, #ff8c00); } body .ldt-hero-city__crumb-sep { color: rgba(255, 255, 255, 0.40); margin: 0 2px; } body .ldt-hero-city__crumbs > *:last-child { color: var(--ldt-accent, #ff8c00); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════════ * 7. SHARED BREADCRUMB POLISH (archive + region) * * The .ldt-hero__breadcrumb wrap holds the existing .ldt-breadcrumb component. * We add a glass-light pill background around the breadcrumb so it visually * separates from the hero imagery. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-hero--archive .ldt-hero__breadcrumb, body .ldt-hero--region .ldt-hero__breadcrumb { display: inline-flex; align-items: center; padding: 6px 14px; background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--ldt-radius-pill, 9999px); font-size: 13px; } body .ldt-hero--archive .ldt-hero__breadcrumb .ldt-breadcrumb__link, body .ldt-hero--region .ldt-hero__breadcrumb .ldt-breadcrumb__link { transition: color 200ms var(--ldt-ease-portal, ease); } body .ldt-hero--archive .ldt-hero__breadcrumb .ldt-breadcrumb__link:hover, body .ldt-hero--region .ldt-hero__breadcrumb .ldt-breadcrumb__link:hover { color: var(--ldt-accent, #ff8c00) !important; text-decoration: none !important; } /* ═══════════════════════════════════════════════════════════════════════════════ * 8. VARIANT SEARCH WRAPS — reuse the E6 glass-strong treatment * * Archive + region heroes embed a search via .ldt-hero__search--archive / * --region. The search component uses .ldt-autocomplete--hero internally * (E6 already polishes that). Here we add a wrapper polish for the variant * containers. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-hero__search--archive, body .ldt-hero__search--region { max-width: 720px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════════ * 9. RESPONSIVE — tighter spacing on mobile * ═══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Region flag smaller on mobile */ body .ldt-hero-region__flag { font-size: 2.5rem; } /* Country/city flag — smaller pill padding */ body .ldt-hero-country__flag, body .ldt-hero-city__flag { font-size: 32px !important; } /* Chips list — slightly smaller chips */ body .ldt-hero-country__chip, body .ldt-hero-city__chip { padding: 6px 12px; font-size: 12px; } /* Title scales down via existing clamp() — no override needed */ /* Breadcrumb — tighter padding */ body .ldt-hero--archive .ldt-hero__breadcrumb, body .ldt-hero--region .ldt-hero__breadcrumb, body .ldt-hero-country__crumbs, body .ldt-hero-city__crumbs { padding: 4px 10px; font-size: 12px; } } /* ─── END OF ldt-enhanced-hero-variants.css ───────────────────────────────── */