/* * ═══════════════════════════════════════════════════════════════════════════════ * Lavisa Destinations Theme — RELATED CARDS POLISH (3.1.20) * ═══════════════════════════════════════════════════════════════════════════════ * * @file assets/css/ldt-enhanced-related-cards-polish.css * @package Lavisa_Destinations_Theme * @since 3.1.20 * @depends ALL prior enhanced CSS * * Targets the "You Might Also Like" section on single destination pages * (sections/shared/section-related.php — 4-card grid of related dests). * * Bug user reported: cards looked inconsistent — Paris card showed an * "Explore →" link, Nice/Cannes cards didn't, even though they all rendered * the same markup. Cause: * * .ldt-related-card__cta { opacity: 0; } * .ldt-related-card:hover .ldt-related-card__cta { opacity: 1; } * * The CTA fades in only on hover — so the hovered card looks "different" * from its siblings. Bad UX for two reasons: (1) visitors don't realize * the cards have a CTA until they hover, (2) hover-only CTAs are * inaccessible on touch devices (no hover state). * * Fix: show the CTA always. Style it as a subtle brand-blue link with * a small arrow that slides on hover (matches the modal CTA pattern from * 3.1.10-3.1.15). Keep the card hover lift + image zoom from 3.1.19. * * Plus general polish: brand-tint border on hover, cleaner shadow ramp, * tighter typography on tags, slightly larger title. * * Pure CSS layer — no PHP partial edited. * * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ * 1. CARD CONTAINER — premium shadow + brand-tint on hover * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related-card { background: #ffffff !important; border: 1px solid var(--ldt-gray-200, #e5e7eb) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1), border-color 500ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-related-card:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 30px rgba(0, 53, 128, 0.16), 0 4px 8px rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 53, 128, 0.18) !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 2. IMAGE — preserve the aspect-ratio + zoom; slow the zoom for premium feel * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related-card__img { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-related-card:hover .ldt-related-card__img { transform: scale(1.06) !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 3. BADGE — brand-gradient pill instead of flat color * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related-card__badge { padding: 4px 12px !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.10em !important; border-radius: 9999px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important; /* background-color set inline by PHP from $r_color — preserve it */ } /* ═══════════════════════════════════════════════════════════════════════════════ * 4. BODY — better padding + typography * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related-card__body { padding: 16px 16px 14px !important; } body .ldt-related-card__name { font-size: 15.5px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; color: var(--ldt-dark, #1e293b) !important; margin: 0 0 8px !important; } /* ═══════════════════════════════════════════════════════════════════════════════ * 5. TAGS — pill-style with brand-blue tint * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related-card__tags { gap: 6px !important; margin-bottom: 12px !important; } body .ldt-related-card__tag { padding: 3px 10px !important; font-size: 11px !important; font-weight: 600 !important; background: rgba(0, 53, 128, 0.06) !important; color: var(--ldt-primary, #003580) !important; border: 1px solid rgba(0, 53, 128, 0.14) !important; border-radius: 9999px !important; letter-spacing: 0.005em; } /* ═══════════════════════════════════════════════════════════════════════════════ * 6. CTA — ALWAYS VISIBLE (the actual fix), arrow slides on hover * * Removes the original `opacity: 0` rule by overriding to `opacity: 1`. * Adds a brand-blue inline-link feel with an animated arrow. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related-card__cta { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--ldt-primary, #003580) !important; opacity: 1 !important; /* ← was 0; this is the fix */ text-decoration: none !important; transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1), gap 500ms cubic-bezier(0.22, 1, 0.36, 1) !important; } @media (hover: hover) and (pointer: fine) { body .ldt-related-card:hover .ldt-related-card__cta { color: var(--ldt-accent, #ff8c00) !important; gap: 8px !important; } } /* If the markup uses a "→" character, try to give it a smooth shift via * an attribute selector. The original PHP outputs the arrow as text in * the same span as the label, so we can't isolate it; the gap animation * (above) achieves a similar visual effect by widening the inter-character * spacing on hover. */ /* ═══════════════════════════════════════════════════════════════════════════════ * 7. SECTION HEADER + "Explore More Destinations" outer link * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-section-related__header { margin-bottom: 24px !important; } /* The "Explore More Destinations →" outer button — reuse the brand * polish from 3.1.5+ (existing rules apply). No override needed unless * the existing styles get overridden elsewhere. */ /* ═══════════════════════════════════════════════════════════════════════════════ * 8. GRID — same desktop layout, but cleaner gap * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-related__grid { gap: 20px !important; } @media (max-width: 991px) { body .ldt-related__grid { gap: 16px !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 9. REDUCED MOTION * ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { body .ldt-related-card, body .ldt-related-card__img, body .ldt-related-card__cta { transition: none !important; } body .ldt-related-card:hover { transform: none !important; } body .ldt-related-card:hover .ldt-related-card__img { transform: none !important; } body .ldt-related-card:hover .ldt-related-card__cta { gap: 4px !important; } } /* ─── END OF ldt-enhanced-related-cards-polish.css ────────────────────────── */