/* * ═══════════════════════════════════════════════════════════════════════════════ * Lavisa Destinations Theme — ENHANCED DESIGN TOKENS (E1) * ═══════════════════════════════════════════════════════════════════════════════ * * @file assets/css/ldt-tokens-enhanced.css * @package Lavisa_Destinations_Theme * @since 2.9.2 (E1 — Visual Enhancement Roadmap v2) * * Additive layer that aligns the destinations theme tokens with the * lavisatravel.com portal visual system (Hotels / Flights / Cars modules). * * LOAD ORDER: * 1. ldt-tokens.css (existing baseline — DO NOT MODIFY) * 2. ldt-tokens-enhanced.css ← this file (extends, doesn't override) * 3. style.css (consumes both) * 4. all other stylesheets * * NAMING: * - All tokens prefixed --ldt- (existing convention). * - Tokens introduced for portal-alignment use namespaces: * --ldt-gradient-* extra gradients (page-bg, text, brand-soft) * --ldt-shadow-* brand-tinted depth (brand-glow, accent-glow) * --ldt-glass-* explicit blur/saturate values + named layers * --ldt-radius-* semantic aliases (card / feature / pill) * --ldt-section-* vertical/horizontal section spacing scale * --ldt-font-portal Poppins handle (activated by ldt-fonts-poppins.css) * --ldt-ease-portal alias of the ease curve the portal uses heavily * * NON-DUPLICATION: * ldt-tokens.css already defines: --ldt-gradient-primary / -accent / * -sunset / -sea / -hero-overlay / -card-overlay, --ldt-surface-*, * --ldt-shadow-card-hover / -focus / -focus-accent, --ldt-radius-2xl / * -3xl, --ldt-ease-* family. We do NOT redeclare these. * * ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ──────────────────────────────────────────────────────────────────────── * GRADIENTS — extras that complement the existing palette * ──────────────────────────────────────────────────────────────────────── */ /* Brand "soft" — same direction, lighter end, for hero badges + soft cards */ --ldt-gradient-brand-soft: linear-gradient(135deg, rgba(0, 53, 128, 0.08) 0%, rgba(0, 87, 184, 0.12) 100%); /* Accent "soft" — light orange tint for offer card backgrounds */ --ldt-gradient-accent-soft: linear-gradient(135deg, rgba(255, 140, 0, 0.08) 0%, rgba(255, 163, 51, 0.12) 100%); /* Success — emerald gradient for confirm/secured states */ --ldt-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); /* Page background — subtle white-to-near-white wash, used on most sections */ --ldt-gradient-page-bg: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%); /* Brand text gradient (3-stop) — for section titles via background-clip: text */ --ldt-gradient-text: linear-gradient(135deg, #003580 0%, #0057b8 50%, #ff8c00 100%); /* Brand-only text gradient (2-stop) — for headings that must stay on-brand without the orange shift. Useful inside accent-bg sections. */ --ldt-gradient-text-brand: linear-gradient(135deg, #003580 0%, #0057b8 100%); /* ──────────────────────────────────────────────────────────────────────── * GLASSMORPHISM — explicit values so consumers don't guess * ──────────────────────────────────────────────────────────────────────── */ --ldt-glass-blur: 20px; --ldt-glass-blur-strong: 32px; --ldt-glass-saturate: 180%; /* Layer surfaces (named, semantic — pair with backdrop-filter at use site). Light variants: dark text on translucent white. Dark variants: light text on translucent dark. */ --ldt-glass-light: rgba(255, 255, 255, 0.72); --ldt-glass-light-strong: rgba(255, 255, 255, 0.85); --ldt-glass-dark: rgba(15, 23, 42, 0.60); --ldt-glass-dark-strong: rgba(15, 23, 42, 0.78); /* Glass borders — 1px hairlines that sit cleanly on top of any blur */ --ldt-glass-border-light: 1px solid rgba(255, 255, 255, 0.50); --ldt-glass-border-dark: 1px solid rgba(255, 255, 255, 0.10); /* ──────────────────────────────────────────────────────────────────────── * BRAND-TINTED SHADOWS — depth tinted by brand color, not plain black * ──────────────────────────────────────────────────────────────────────── */ /* Default card resting / hover */ --ldt-shadow-card: 0 10px 40px rgba(0, 0, 0, 0.08); /* (--ldt-shadow-card-hover already exists in ldt-tokens.css — kept) */ /* Brand-tinted glow for primary CTAs and focus states */ --ldt-shadow-brand: 0 10px 30px rgba(0, 53, 128, 0.30); --ldt-shadow-brand-soft: 0 4px 15px rgba(0, 53, 128, 0.15); /* Accent-tinted glow for "book now" and offer CTAs */ --ldt-shadow-accent: 0 10px 30px rgba(255, 140, 0, 0.30); --ldt-shadow-accent-soft: 0 4px 15px rgba(255, 140, 0, 0.20); /* Offer pulse — used on countdown / discount badges */ --ldt-shadow-offer: 0 4px 15px rgba(255, 140, 0, 0.40); /* Success pulse — used on confirmation chips after AJAX submit */ --ldt-shadow-success: 0 4px 15px rgba(34, 197, 94, 0.30); /* Focus ring — accessibility (named alias of existing --ldt-shadow-focus) */ --ldt-ring-focus: 0 0 0 3px rgba(0, 87, 184, 0.35); --ldt-ring-focus-accent: 0 0 0 3px rgba(255, 140, 0, 0.35); /* ──────────────────────────────────────────────────────────────────────── * RADIUS — semantic aliases on top of the existing scale * ──────────────────────────────────────────────────────────────────────── */ /* (Existing: --ldt-radius-sm 4px, -md 8px, -lg 12px, -xl 16px, -2xl 24px, -3xl 32px, -full 9999px) */ /* Semantic aliases — use these in component CSS for clarity */ --ldt-radius-chip: 0.5rem; /* 8px — input chips, pills inside cards */ --ldt-radius-input: 0.75rem; /* 12px — form inputs */ --ldt-radius-card: 1.25rem; /* 20px — destination cards (portal default) */ --ldt-radius-feature: 1.875rem; /* 30px — large feature cards / hero CTA pills */ --ldt-radius-pill: 9999px; /* alias of --ldt-radius-full for clarity */ /* ──────────────────────────────────────────────────────────────────────── * SECTION SPACING — portal uses generous vertical padding * ──────────────────────────────────────────────────────────────────────── */ --ldt-section-py-lg: 100px; /* hero-adjacent sections (home, archive heroes) */ --ldt-section-py-md: 80px; /* default content sections */ --ldt-section-py-sm: 60px; /* secondary / supplementary sections */ --ldt-section-py-xs: 40px; /* dense / utility blocks */ --ldt-section-px-mobile: 20px; --ldt-section-px-tablet: 40px; --ldt-section-px-desktop: 60px; /* ──────────────────────────────────────────────────────────────────────── * EASING — alias of the curve the portal uses for almost every transition * ──────────────────────────────────────────────────────────────────────── */ --ldt-ease-portal: cubic-bezier(0.4, 0, 0.2, 1); /* (Same value as --ldt-ease-in-out — this alias keeps section CSS readable.) */ /* ──────────────────────────────────────────────────────────────────────── * TYPOGRAPHY — Portal font handle * ──────────────────────────────────────────────────────────────────────── */ /* --ldt-font-portal defaults to the existing Inter stack so any rule that references it stays safe even when Poppins isn't loaded. ldt-fonts-poppins.css overrides this value when the user opts in. */ --ldt-font-portal: var(--ldt-font-en, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); /* ──────────────────────────────────────────────────────────────────────── * BACKGROUND BLOB DEFAULTS — for the .ldt-bg-shapes pattern (defined in E2) * ──────────────────────────────────────────────────────────────────────── */ --ldt-blob-blur: 100px; --ldt-blob-opacity: 0.05; --ldt-blob-opacity-strong: 0.08; /* ──────────────────────────────────────────────────────────────────────── * MOTION DURATIONS — extras for staggered reveals / carousel transitions * ──────────────────────────────────────────────────────────────────────── */ /* (Existing: --ldt-duration-instant 100, -fast 150, -base 250, -slow 400, -slower 600, -crawl 900) */ --ldt-duration-stagger: 180ms; /* delay between consecutive reveals */ --ldt-duration-cross-fade: 900ms; /* hero slide change */ --ldt-duration-ken-burns: 8000ms; /* hero slide active-window zoom */ --ldt-duration-shimmer: 2500ms; /* skeleton loader */ /* ──────────────────────────────────────────────────────────────────────── * Z-INDEX EXTRAS (stack-aware, complement existing ladder) * ──────────────────────────────────────────────────────────────────────── */ /* (Existing: -below -1, base 0, raised 10, sticky-nav 180, header 220, mega 240, drawer 380, popup 450, lightbox 475, tooltip 600) */ --ldt-z-particles: 1; /* hero particle canvas — under content */ --ldt-z-shapes: 2; /* background blobs */ --ldt-z-overlay: 3; /* hero gradient overlay */ --ldt-z-content: 10; /* slide content / card body */ --ldt-z-floating: 150; /* sticky CTA bars (below sticky-nav) */ --ldt-z-back-to-top: 170; /* below sticky-nav, above floating */ } /* ═══════════════════════════════════════════════════════════════════════════════ * RTL TOKEN ADJUSTMENTS * Only what genuinely changes in RTL mode — most enhanced tokens are direction- * agnostic. Full RTL polish lands in E28; this is just the bare minimum so any * consumer that lands earlier doesn't render visually wrong in AR. * ═══════════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] :root, body.ldt-rtl { /* Reverse 3-stop text gradient direction so the orange end falls naturally at the visual end of an RTL line. */ --ldt-gradient-text: linear-gradient(225deg, #003580 0%, #0057b8 50%, #ff8c00 100%); --ldt-gradient-text-brand: linear-gradient(225deg, #003580 0%, #0057b8 100%); } /* ═══════════════════════════════════════════════════════════════════════════════ * PLUGIN-MISSING FALLBACK * When the wprad-lavisa-destinations plugin is inactive, ldt-tokens.css already * desaturates --ldt-primary / --ldt-accent. The enhanced tokens that depend * on those values (gradients with hex colors baked in) need parallel softening * so the UI doesn't look "branded but broken". * ═══════════════════════════════════════════════════════════════════════════════ */ body.ldt-no-plugin { --ldt-gradient-text: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); --ldt-gradient-text-brand: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); --ldt-shadow-brand: 0 10px 30px rgba(100, 116, 139, 0.20); --ldt-shadow-accent: 0 10px 30px rgba(148, 163, 184, 0.20); --ldt-shadow-offer: 0 4px 15px rgba(148, 163, 184, 0.20); } /* ═══════════════════════════════════════════════════════════════════════════════ * REDUCED MOTION * When users prefer reduced motion, neutralize duration tokens that drive * animation-heavy moments. Keyframes themselves are guarded in E3, but * shrinking the durations here is cheap insurance. * ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --ldt-duration-cross-fade: 200ms; --ldt-duration-ken-burns: 0ms; --ldt-duration-shimmer: 0ms; --ldt-duration-stagger: 0ms; } } /* ─── END OF ldt-tokens-enhanced.css ──────────────────────────────────────── */