/* ============================================ Khala Drive — Hover Glow Effect Add this file once, link it from every page's ============================================ */ /* Buttons: subtle lift + green glow on hover */ .btn-green, .btn-outline, .btn-details, .btn-plan, .btn-wa, .card-fav, button { transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-green:hover, .btn-details:hover, .btn-plan:hover, .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91, 189, 47, 0.35); } .btn-outline:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } /* Vehicle / plan cards: gentle lift + glow border on hover */ .vehicle-card, .plan-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .vehicle-card:hover, .plan-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(91, 189, 47, 0.18); } /* Links inside content: soft green glow text-shadow on hover, no layout shift */ .nav-links a, .card-name a, .provider-name, a { transition: color 0.2s ease, text-shadow 0.2s ease; } .nav-links a:hover, .card-name a:hover, .provider-name:hover { text-shadow: 0 0 8px rgba(91, 189, 47, 0.4); } /* Respect users who've asked for reduced motion */ @media (prefers-reduced-motion: reduce) { .btn-green, .btn-outline, .btn-details, .btn-plan, .btn-wa, .card-fav, button, .vehicle-card, .plan-card, .nav-links a, .card-name a, .provider-name, a { transition: none !important; } .btn-green:hover, .btn-details:hover, .btn-plan:hover, .btn-wa:hover, .vehicle-card:hover, .plan-card:hover { transform: none !important; } }