/* * ═══════════════════════════════════════════════════════════════════════════════ * Lavisa Destinations Theme — CTA POLISH (3.1.2) * ═══════════════════════════════════════════════════════════════════════════════ * * @file assets/css/ldt-enhanced-cta-polish.css * @package Lavisa_Destinations_Theme * @since 3.1.2 (post-3.1.1 visual refinement) * @depends ALL prior enhanced CSS (loads after newsletter-rich at end of chain) * * Fixes two issues reported on the destination page sidebar + bottom sticky bar: * * 1. SIDEBAR BOOKING CTA STACK (sections/sidebar/section-sidebar-cta-buttons.php * a.k.a. "BOOK OCEANIA" widget) — hover transition was 250ms, felt too snappy. * Slowed to 420ms with a smoother ease + softer hover-lift + icon micro-shift * for a more premium feel. * * 2. STICKY CTA BAR (sections/shared/section-sticky-cta.php — the * "Planning a trip to Marrakesh?" floating dock at the bottom of long pages) * — text was unreadable. ROOT CAUSE: same class of bug as the newsletter * title in 3.0.1 — existing rules in ldt-enhanced-sections-cta.css only * flip text to white for `--brand` and `--accent` variants, but the * default theme is `--primary`, which fell through to dark text on the * navy background. Plus the bar lacked visual depth + decorative finish. * * FIXES the visibility bug + ENRICHES with: * - Multi-layer ambient bg (radial accent glow + bottom orange strip) * - Drop-shadow for depth * - Backdrop-blur for glass feel * - Subtle inner highlight * - Bigger, bolder, white message text with text-shadow * - Better-contrast secondary link with hover affordance * - Brighter, more visible close button * - Icon plane gets a subtle accent tint * - Polished mobile layout * * PURE CSS LAYER — NO PHP partial is touched. NO existing CSS file is edited. * * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ * 1. SIDEBAR BOOKING CTA STACK — slower, smoother hover transitions * * The existing rules in ldt-enhanced-portal-handoff.css use 250ms with the * portal ease. We override to 420ms with a softer ease for a more premium * feel. Icon also gets a small horizontal shift for additional polish. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-cta-buttons__btn { transition: background 420ms cubic-bezier(0.22, 1, 0.36, 1), border-color 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-cta-buttons__btn:hover { transition-duration: 420ms !important; } } /* Icon inside button — slight horizontal shift on hover for additional polish */ body .ldt-cta-buttons__btn .ldt-cta-buttons__icon, body .ldt-cta-buttons__btn > [class*="icon"]:first-child, body .ldt-cta-buttons__btn > .emoji, body .ldt-cta-buttons__btn > span:first-child:not([class]) { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-cta-buttons__btn:hover .ldt-cta-buttons__icon, body .ldt-cta-buttons__btn:hover > [class*="icon"]:first-child, body .ldt-cta-buttons__btn:hover > .emoji, body .ldt-cta-buttons__btn:hover > span:first-child:not([class]) { transform: translateX(3px); } /* RTL — icon shifts the other way */ [dir="rtl"] body .ldt-cta-buttons__btn:hover .ldt-cta-buttons__icon, [dir="rtl"] body .ldt-cta-buttons__btn:hover > [class*="icon"]:first-child, [dir="rtl"] body .ldt-cta-buttons__btn:hover > .emoji, [dir="rtl"] body .ldt-cta-buttons__btn:hover > span:first-child:not([class]), .ldt-rtl body .ldt-cta-buttons__btn:hover .ldt-cta-buttons__icon, .ldt-rtl body .ldt-cta-buttons__btn:hover > [class*="icon"]:first-child, .ldt-rtl body .ldt-cta-buttons__btn:hover > .emoji, .ldt-rtl body .ldt-cta-buttons__btn:hover > span:first-child:not([class]) { transform: translateX(-3px); } } @media (prefers-reduced-motion: reduce) { body .ldt-cta-buttons__btn, body .ldt-cta-buttons__btn .ldt-cta-buttons__icon { transition: none !important; } body .ldt-cta-buttons__btn:hover { transform: none !important; } body .ldt-cta-buttons__btn:hover .ldt-cta-buttons__icon, body .ldt-cta-buttons__btn:hover > [class*="icon"]:first-child, body .ldt-cta-buttons__btn:hover > .emoji, body .ldt-cta-buttons__btn:hover > span:first-child:not([class]) { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 2. STICKY CTA BAR — fix unreadable text on --primary variant + enrichment * * The default theme is `--primary` (matches the bar's navy background). * Existing rules only set white text for `--brand` and `--accent`, leaving * `--primary` with dark text that's invisible on the navy background. * * Apply the same color-flip + add visual depth + polish. * ═══════════════════════════════════════════════════════════════════════════════ */ /* 2.1 — INNER container: rich background, depth, glass treatment */ body .ldt-sticky-cta--primary .ldt-sticky-cta__inner, body .ldt-sticky-cta--dark .ldt-sticky-cta__inner { position: relative; overflow: hidden; border-radius: var(--ldt-radius-card, 1.25rem); padding: 14px 22px !important; background: /* Top-right accent glow */ radial-gradient( circle at 92% 0%, rgba(255, 140, 0, 0.20) 0%, transparent 38% ), /* Bottom-left brand-light glow */ radial-gradient( circle at 5% 100%, rgba(0, 87, 184, 0.50) 0%, transparent 50% ), /* Base navy gradient */ linear-gradient( 135deg, #002560 0%, #003580 50%, #0057b8 100% ) !important; box-shadow: 0 -8px 32px rgba(0, 53, 128, 0.30), 0 -2px 8px rgba(0, 53, 128, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* RTL mirrors the radial glow positions */ [dir="rtl"] body .ldt-sticky-cta--primary .ldt-sticky-cta__inner, [dir="rtl"] body .ldt-sticky-cta--dark .ldt-sticky-cta__inner, .ldt-rtl body .ldt-sticky-cta--primary .ldt-sticky-cta__inner, .ldt-rtl body .ldt-sticky-cta--dark .ldt-sticky-cta__inner { background: radial-gradient( circle at 8% 0%, rgba(255, 140, 0, 0.20) 0%, transparent 38% ), radial-gradient( circle at 95% 100%, rgba(0, 87, 184, 0.50) 0%, transparent 50% ), linear-gradient( 225deg, #002560 0%, #003580 50%, #0057b8 100% ) !important; } /* Decorative bottom-edge accent strip (only on the visible bar — full width) */ body .ldt-sticky-cta--primary .ldt-sticky-cta__inner::after, body .ldt-sticky-cta--dark .ldt-sticky-cta__inner::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 140, 0, 0.50) 30%, rgba(255, 140, 0, 0.85) 50%, rgba(255, 140, 0, 0.50) 70%, transparent 100% ); opacity: 0.7; pointer-events: none; } /* 2.2 — MESSAGE: white, bigger, with text-shadow for depth */ body .ldt-sticky-cta--primary .ldt-sticky-cta__message, body .ldt-sticky-cta--dark .ldt-sticky-cta__message { color: #ffffff !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.005em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); } /* 2.3 — ICON: white with subtle warm tint */ body .ldt-sticky-cta--primary .ldt-sticky-cta__icon, body .ldt-sticky-cta--dark .ldt-sticky-cta__icon { color: #ffd699 !important; font-size: 20px; filter: drop-shadow(0 2px 6px rgba(255, 140, 0, 0.40)); } /* 2.4 — TIMER (urgency countdown): readable */ body .ldt-sticky-cta--primary .ldt-sticky-cta__timer, body .ldt-sticky-cta--dark .ldt-sticky-cta__timer { color: #ffd699 !important; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } /* 2.5 — SECONDARY link: visible on dark bg with hover affordance */ body .ldt-sticky-cta--primary .ldt-sticky-cta__secondary, body .ldt-sticky-cta--dark .ldt-sticky-cta__secondary { color: rgba(255, 255, 255, 0.78) !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 250ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-sticky-cta--primary .ldt-sticky-cta__secondary:hover, body .ldt-sticky-cta--dark .ldt-sticky-cta__secondary:hover { color: #ffffff !important; border-bottom-color: rgba(255, 255, 255, 0.40); } } /* 2.6 — PRIMARY button: keep as-is but add stronger glow on dark bg */ body .ldt-sticky-cta--primary .ldt-sticky-cta__primary, body .ldt-sticky-cta--dark .ldt-sticky-cta__primary { background: linear-gradient( 135deg, #ff9d1a 0%, #ff8c00 50%, #e07a00 100% ) !important; color: #ffffff !important; padding: 11px 22px !important; font-weight: 800 !important; box-shadow: 0 6px 18px rgba(255, 140, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important; } @media (hover: hover) and (pointer: fine) { body .ldt-sticky-cta--primary .ldt-sticky-cta__primary:hover, body .ldt-sticky-cta--dark .ldt-sticky-cta__primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 140, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important; filter: brightness(1.08); } } /* 2.7 — CLOSE button: visible on navy + nicer hover */ body .ldt-sticky-cta--primary .ldt-sticky-cta__close, body .ldt-sticky-cta--dark .ldt-sticky-cta__close { background: rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.85) !important; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.18); transition: background 250ms cubic-bezier(0.22, 1, 0.36, 1), color 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-sticky-cta--primary .ldt-sticky-cta__close:hover, body .ldt-sticky-cta--dark .ldt-sticky-cta__close:hover { background: rgba(255, 140, 0, 0.30) !important; color: #ffffff !important; border-color: rgba(255, 140, 0, 0.55); transform: rotate(90deg); } } @media (prefers-reduced-motion: reduce) { body .ldt-sticky-cta--primary .ldt-sticky-cta__close:hover, body .ldt-sticky-cta--dark .ldt-sticky-cta__close:hover { transform: none !important; } } /* 2.8 — RESPONSIVE: tightens nicely on mobile */ @media (max-width: 768px) { body .ldt-sticky-cta--primary .ldt-sticky-cta__inner, body .ldt-sticky-cta--dark .ldt-sticky-cta__inner { padding: 10px 14px !important; gap: 10px !important; border-radius: var(--ldt-radius-input, 0.75rem); } body .ldt-sticky-cta--primary .ldt-sticky-cta__message, body .ldt-sticky-cta--dark .ldt-sticky-cta__message { font-size: 13.5px !important; line-height: 1.3; } body .ldt-sticky-cta--primary .ldt-sticky-cta__primary, body .ldt-sticky-cta--dark .ldt-sticky-cta__primary { padding: 9px 16px !important; font-size: 13px !important; } /* Hide secondary link on small screens — primary CTA + close are enough */ body .ldt-sticky-cta--primary .ldt-sticky-cta__secondary, body .ldt-sticky-cta--dark .ldt-sticky-cta__secondary { display: none !important; } } /* ─── END OF Section 2 (sticky CTA bar) ───────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════════ * 3. BROADER SIDEBAR HOVER SLOWDOWN (3.1.3) * * The 3.1.2 sidebar slowdown only covered .ldt-cta-buttons__btn ("Search * flights / Book hotels / Rent a car / Get a quote"). User reported that * other sidebar widgets — KEY FACTS card, CURRENT WEATHER card, YOU MAY * ALSO LIKE related destinations, mini-tools list — still felt snappy on * hover. Apply the same 420ms timing + soft ease to all of them. * * Existing timings being overridden (from ldt-enhanced-portal-handoff.css): * .ldt-widget 300ms → 420ms * .ldt-widget-dest-mini 200ms → 420ms * .ldt-mini-tools__list a 200ms → 420ms * .ldt-mini-tools__list a >span 200ms → 420ms * * Behavior unchanged — only durations slowed. !important wins specificity * because the existing rules use the same 0,1,1 specificity. * ═══════════════════════════════════════════════════════════════════════════════ */ /* 3.1 — All sidebar widget cards (KEY FACTS, CURRENT WEATHER, BOOK MARRAKECH, YOU MAY ALSO LIKE, MINI TOOLS, DEAL SPOTLIGHT — every widget shares this base class) */ body .ldt-widget { transition: border-color 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } /* 3.2 — Related destinations rail (YOU MAY ALSO LIKE) — each row */ body .ldt-widget-dest-mini { transition: background 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } /* Thumb image zoom-in on hover for additional polish */ body .ldt-widget-dest-mini img { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-widget-dest-mini:hover img { transform: scale(1.06); } } /* 3.3 — Mini-tools list (sidebar mini tool links) */ body .ldt-mini-tools__list a { transition: background 420ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms cubic-bezier(0.22, 1, 0.36, 1), gap 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } body .ldt-mini-tools__list a > span:first-child, body .ldt-mini-tools__list a > .emoji { transition: background 420ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important; } /* 3.4 — Reduced motion: kill all transitions + transforms across the sidebar */ @media (prefers-reduced-motion: reduce) { body .ldt-widget, body .ldt-widget-dest-mini, body .ldt-widget-dest-mini img, body .ldt-mini-tools__list a, body .ldt-mini-tools__list a > span:first-child, body .ldt-mini-tools__list a > .emoji { transition: none !important; } body .ldt-widget-dest-mini:hover img { transform: none !important; } } /* ─── END OF ldt-enhanced-cta-polish.css ──────────────────────────────────── */