| @@ -326,9 +326,8 @@ | ||
| 326 | 326 | border-radius: 12px; |
| 327 | 327 | overflow: hidden; |
| 328 | 328 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| 329 | 329 | transition: all 0.3s ease; |
| 330 | - cursor: pointer; | |
| 331 | 330 | display: flex; |
| 332 | 331 | flex-direction: column; |
| 333 | 332 | height: 100%; |
| 334 | 333 | } |
| @@ -732,9 +731,9 @@ | ||
| 732 | 731 | .yatra-results-controls { |
| 733 | 732 | flex-direction: row; |
| 734 | 733 | flex-wrap: wrap; |
| 735 | 734 | align-items: center; |
| 736 | - justify-content: end | |
| 735 | + justify-content: flex-end; | |
| 737 | 736 | gap: 10px 12px; |
| 738 | 737 | } |
| 739 | 738 | |
| 740 | 739 | .yatra-sort-control { |
| @@ -957,11 +956,11 @@ | ||
| 957 | 956 | text-decoration: none; |
| 958 | 957 | } |
| 959 | 958 | |
| 960 | 959 | .yatra-filter-section { |
| 961 | - margin-bottom: 24px; | |
| 960 | + margin-bottom: 14px; | |
| 962 | 961 | border-bottom: 1px solid #f3f4f6; |
| 963 | - padding-bottom: 20px; | |
| 962 | + padding-bottom: 14px; | |
| 964 | 963 | /* visible: range slider thumbs must not clip at section edges */ |
| 965 | 964 | overflow: visible; |
| 966 | 965 | width: 100%; |
| 967 | 966 | box-sizing: border-box; |
| @@ -980,11 +979,11 @@ | ||
| 980 | 979 | cursor: pointer; |
| 981 | 980 | font-size: 15px; |
| 982 | 981 | font-weight: 600; |
| 983 | 982 | color: #111827; |
| 984 | - margin-bottom: 16px; | |
| 983 | + margin-bottom: 10px; | |
| 985 | 984 | user-select: none; |
| 986 | - padding: 4px 0; | |
| 985 | + padding: 2px 0; | |
| 987 | 986 | transition: color 0.2s; |
| 988 | 987 | } |
| 989 | 988 | |
| 990 | 989 | .yatra-filter-actions { |
| @@ -1495,9 +1494,8 @@ | ||
| 1495 | 1494 | border-radius: 12px; |
| 1496 | 1495 | overflow: hidden; |
| 1497 | 1496 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| 1498 | 1497 | transition: transform 0.2s, box-shadow 0.2s; |
| 1499 | - cursor: pointer; | |
| 1500 | 1498 | display: flex; |
| 1501 | 1499 | flex-direction: column; |
| 1502 | 1500 | height: 100%; |
| 1503 | 1501 | } |
| @@ -1627,10 +1625,10 @@ | ||
| 1627 | 1625 | .yatra-favorite-btn:hover { |
| 1628 | 1626 | background: #ffffff !important; |
| 1629 | 1627 | color: #ef4444 !important; |
| 1630 | 1628 | transform: scale(1.1) !important; |
| 1631 | - border-color: #ef4444 !important; | |
| 1632 | - box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important; | |
| 1629 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1630 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; | |
| 1633 | 1631 | } |
| 1634 | 1632 | |
| 1635 | 1633 | .yatra-favorite-btn svg { |
| 1636 | 1634 | width: 20px !important; |
| @@ -1638,28 +1636,51 @@ | ||
| 1638 | 1636 | stroke-width: 2 !important; |
| 1639 | 1637 | display: block !important; |
| 1640 | 1638 | } |
| 1641 | 1639 | |
| 1640 | +/* Saved state: keep the button neutral (no red ring on the button itself); | |
| 1641 | + * only the heart icon glyph turns red and gets filled. | |
| 1642 | + * | |
| 1643 | + * stroke is set to NONE (and stroke-width to 0) when filled — otherwise the | |
| 1644 | + * 2px outward stroke makes the filled heart look ~2px chunkier than the | |
| 1645 | + * outlined heart on neighboring cards, which reads as "different icon". */ | |
| 1642 | 1646 | .yatra-favorite-btn.saved, |
| 1643 | 1647 | .yatra-favorite-btn.is-saved { |
| 1644 | 1648 | background: #ffffff !important; |
| 1645 | 1649 | color: #ef4444 !important; |
| 1646 | - border-color: #ef4444 !important; | |
| 1650 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1647 | 1651 | } |
| 1648 | 1652 | |
| 1649 | 1653 | .yatra-favorite-btn.saved svg, |
| 1650 | 1654 | .yatra-favorite-btn.is-saved svg { |
| 1651 | 1655 | fill: #ef4444 !important; |
| 1652 | - stroke: #ef4444 !important; | |
| 1656 | + stroke: none !important; | |
| 1657 | + stroke-width: 0 !important; | |
| 1653 | 1658 | } |
| 1654 | 1659 | |
| 1660 | +.yatra-favorite-btn.saved svg path, | |
| 1661 | +.yatra-favorite-btn.is-saved svg path { | |
| 1662 | + fill: #ef4444 !important; | |
| 1663 | + stroke: none !important; | |
| 1664 | + stroke-width: 0 !important; | |
| 1665 | +} | |
| 1666 | + | |
| 1655 | 1667 | .yatra-favorite-btn.saved:hover, |
| 1656 | 1668 | .yatra-favorite-btn.is-saved:hover { |
| 1657 | - background: #fee2e2 !important; | |
| 1669 | + background: #ffffff !important; | |
| 1658 | 1670 | color: #dc2626 !important; |
| 1659 | - border-color: #dc2626 !important; | |
| 1671 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1660 | 1672 | } |
| 1661 | 1673 | |
| 1674 | +.yatra-favorite-btn.saved:hover svg, | |
| 1675 | +.yatra-favorite-btn.is-saved:hover svg, | |
| 1676 | +.yatra-favorite-btn.saved:hover svg path, | |
| 1677 | +.yatra-favorite-btn.is-saved:hover svg path { | |
| 1678 | + fill: #dc2626 !important; | |
| 1679 | + stroke: none !important; | |
| 1680 | + stroke-width: 0 !important; | |
| 1681 | +} | |
| 1682 | + | |
| 1662 | 1683 | .yatra-trip-content { |
| 1663 | 1684 | padding: 20px; |
| 1664 | 1685 | display: flex; |
| 1665 | 1686 | flex-direction: column; |
| @@ -3210,9 +3231,8 @@ | ||
| 3210 | 3231 | z-index: 3; |
| 3211 | 3232 | } |
| 3212 | 3233 | |
| 3213 | 3234 | .yatra-trip-title { |
| 3214 | - color: #000000 !important; | |
| 3215 | 3235 | font-weight: 700; |
| 3216 | 3236 | font-size: 20px; |
| 3217 | 3237 | line-height: 1.3; |
| 3218 | 3238 | margin-bottom: 12px; |
| @@ -3219,9 +3239,8 @@ | ||
| 3219 | 3239 | letter-spacing: -0.02em; |
| 3220 | 3240 | } |
| 3221 | 3241 | |
| 3222 | 3242 | .yatra-trip-title-link { |
| 3223 | - color: #000000 !important; | |
| 3224 | 3243 | text-decoration: none; |
| 3225 | 3244 | transition: all 0.2s ease; |
| 3226 | 3245 | display: block; |
| 3227 | 3246 | } |
| @@ -3226,9 +3245,8 @@ | ||
| 3226 | 3245 | display: block; |
| 3227 | 3246 | } |
| 3228 | 3247 | |
| 3229 | 3248 | .yatra-trip-title-link:hover { |
| 3230 | - color: #000000 !important; | |
| 3231 | 3249 | transform: translateY(-1px); |
| 3232 | 3250 | } |
| 3233 | 3251 | |
| 3234 | 3252 | .yatra-trip-short-description { |
| @@ -3474,4 +3492,195 @@ | ||
| 3474 | 3492 | font-weight: 400; |
| 3475 | 3493 | line-height: 1.5; |
| 3476 | 3494 | } |
| 3477 | 3495 | |
| 3496 | + | |
| 3497 | +/* ============================================================ | |
| 3498 | + Trip listing — Compact card layout | |
| 3499 | + Settings → Frontend Theme → "Listing card layout". | |
| 3500 | + Opt-in; the default "standard" card is left untouched. | |
| 3501 | + .yatra-listing-compact → compact on mobile (both compact modes) | |
| 3502 | + .yatra-listing-compact--all → compact on desktop too (compact_all) | |
| 3503 | + The class is placed on the LISTING CONTAINER (.yatra-listing-page for the | |
| 3504 | + archive/taxonomy, .yatra-tour-shortcode / .yatra-discount-shortcode for the | |
| 3505 | + shortcode + Gutenberg block), NOT on <body>. That lets each listing resolve | |
| 3506 | + its own layout: the site-wide Design setting is the default, and an | |
| 3507 | + individual shortcode/block can override it (card_layout / cardLayout attr). | |
| 3508 | + The compact card intentionally shows only: image, title, price, | |
| 3509 | + and the "View Details" button — everything else is hidden for density. | |
| 3510 | + ============================================================ */ | |
| 3511 | + | |
| 3512 | +/* --- Compact on mobile (<=768px): compact_mobile AND compact_all --- */ | |
| 3513 | +@media (max-width: 768px) { | |
| 3514 | + /* Force a single column so each compact card becomes a full-width | |
| 3515 | + horizontal row — covers every trip-card grid wrapper: | |
| 3516 | + .yatra-trip-grid → archive / taxonomy | |
| 3517 | + .yatra-tour-grid → [yatra_trip]/[yatra_tour] shortcode + Tour block | |
| 3518 | + .yatra-discount-grid → discount-and-deals shortcode */ | |
| 3519 | + .yatra-listing-compact .yatra-trip-grid, | |
| 3520 | + .yatra-listing-compact .yatra-tour-grid, | |
| 3521 | + .yatra-listing-compact .yatra-discount-grid { | |
| 3522 | + grid-template-columns: 1fr !important; | |
| 3523 | + gap: 12px; | |
| 3524 | + } | |
| 3525 | + .yatra-listing-compact .yatra-trip-card { | |
| 3526 | + display: grid !important; | |
| 3527 | + grid-template-columns: 116px minmax(0, 1fr) !important; | |
| 3528 | + align-items: stretch; | |
| 3529 | + gap: 0; | |
| 3530 | + overflow: hidden; | |
| 3531 | + /* Neutralise the Grid/List view toggle so Compact stays compact whether | |
| 3532 | + the visitor is in grid OR list view (list-view forces min-height:240). */ | |
| 3533 | + min-height: 0 !important; | |
| 3534 | + max-height: none !important; | |
| 3535 | + flex-direction: initial !important; | |
| 3536 | + } | |
| 3537 | + .yatra-listing-compact .yatra-trip-card-image { | |
| 3538 | + height: 100% !important; | |
| 3539 | + min-height: 118px !important; | |
| 3540 | + width: auto !important; | |
| 3541 | + min-width: 0 !important; | |
| 3542 | + aspect-ratio: auto !important; | |
| 3543 | + border-radius: 0; | |
| 3544 | + align-self: stretch; | |
| 3545 | + } | |
| 3546 | + /* Keep the image overlays readable on the small thumbnail. */ | |
| 3547 | + .yatra-listing-compact .yatra-discount-badge { | |
| 3548 | + font-size: 0.65rem; | |
| 3549 | + padding: 2px 6px; | |
| 3550 | + } | |
| 3551 | + .yatra-listing-compact .yatra-favorite-btn { | |
| 3552 | + width: 26px; | |
| 3553 | + height: 26px; | |
| 3554 | + } | |
| 3555 | + .yatra-listing-compact .yatra-trip-card-image img { | |
| 3556 | + width: 100% !important; | |
| 3557 | + height: 100% !important; | |
| 3558 | + object-fit: cover; | |
| 3559 | + } | |
| 3560 | + .yatra-listing-compact .yatra-trip-content { | |
| 3561 | + padding: 10px 12px !important; | |
| 3562 | + display: flex; | |
| 3563 | + flex-direction: column; | |
| 3564 | + gap: 6px; | |
| 3565 | + min-width: 0; | |
| 3566 | + } | |
| 3567 | + .yatra-listing-compact .yatra-trip-title { | |
| 3568 | + font-size: 0.95rem; | |
| 3569 | + line-height: 1.3; | |
| 3570 | + margin: 0; | |
| 3571 | + display: -webkit-box; | |
| 3572 | + -webkit-line-clamp: 2; | |
| 3573 | + -webkit-box-orient: vertical; | |
| 3574 | + overflow: hidden; | |
| 3575 | + } | |
| 3576 | + .yatra-listing-compact .yatra-trip-destinations, | |
| 3577 | + .yatra-listing-compact .yatra-trip-card-meta, | |
| 3578 | + .yatra-listing-compact .yatra-trip-short-description, | |
| 3579 | + .yatra-listing-compact .yatra-trip-stats-row, | |
| 3580 | + .yatra-listing-compact .yatra-trip-traveler-types, | |
| 3581 | + .yatra-listing-compact .yatra-trip-activities, | |
| 3582 | + .yatra-listing-compact .yatra-trip-categories-compact, | |
| 3583 | + .yatra-listing-compact .yatra-difficulty-overlay, | |
| 3584 | + .yatra-listing-compact .yatra-group-discount-badge, | |
| 3585 | + .yatra-listing-compact .yatra-trip-listing-dp-urgency { | |
| 3586 | + display: none !important; | |
| 3587 | + } | |
| 3588 | + .yatra-listing-compact .yatra-trip-footer { | |
| 3589 | + margin-top: auto; | |
| 3590 | + display: flex; | |
| 3591 | + /* The base mobile footer is flex-direction:column — force a single row | |
| 3592 | + so price and the button sit side by side in the compact card. */ | |
| 3593 | + flex-direction: row !important; | |
| 3594 | + flex-wrap: nowrap; | |
| 3595 | + align-items: center; | |
| 3596 | + justify-content: space-between; | |
| 3597 | + align-self: stretch; | |
| 3598 | + gap: 8px; | |
| 3599 | + padding: 0 !important; | |
| 3600 | + border: 0 !important; | |
| 3601 | + } | |
| 3602 | + .yatra-listing-compact .yatra-trip-card-price { margin: 0 !important; width: auto !important; align-items: flex-start; } | |
| 3603 | + .yatra-listing-compact .yatra-card-view-btn { flex: 0 0 auto; } | |
| 3604 | + .yatra-listing-compact .yatra-trip-price { font-size: 1rem; } | |
| 3605 | + .yatra-listing-compact .yatra-card-view-btn { | |
| 3606 | + padding: 6px 10px !important; | |
| 3607 | + font-size: 0.8rem; | |
| 3608 | + white-space: nowrap; | |
| 3609 | + } | |
| 3610 | +} | |
| 3611 | + | |
| 3612 | +/* --- Compact on desktop too (>=769px): compact_all only. | |
| 3613 | + Respects the visitor's Grid/List view toggle: | |
| 3614 | + • Grid view → the multi-column grid is kept, cards are just shorter | |
| 3615 | + • List view → compact horizontal rows (list-view supplies the row) | |
| 3616 | + The density trimming (hiding the extra blocks) applies to both. --- */ | |
| 3617 | +@media (min-width: 769px) { | |
| 3618 | + /* Density — identical in grid and list. */ | |
| 3619 | + .yatra-listing-compact--all .yatra-trip-content { | |
| 3620 | + gap: 8px; | |
| 3621 | + min-width: 0; | |
| 3622 | + padding: 14px 16px !important; | |
| 3623 | + } | |
| 3624 | + .yatra-listing-compact--all .yatra-trip-title { | |
| 3625 | + font-size: 1.05rem; | |
| 3626 | + line-height: 1.3; | |
| 3627 | + margin: 0; | |
| 3628 | + display: -webkit-box; | |
| 3629 | + -webkit-line-clamp: 2; | |
| 3630 | + -webkit-box-orient: vertical; | |
| 3631 | + overflow: hidden; | |
| 3632 | + } | |
| 3633 | + .yatra-listing-compact--all .yatra-trip-destinations, | |
| 3634 | + .yatra-listing-compact--all .yatra-trip-card-meta, | |
| 3635 | + .yatra-listing-compact--all .yatra-trip-short-description, | |
| 3636 | + .yatra-listing-compact--all .yatra-trip-stats-row, | |
| 3637 | + .yatra-listing-compact--all .yatra-trip-traveler-types, | |
| 3638 | + .yatra-listing-compact--all .yatra-trip-activities, | |
| 3639 | + .yatra-listing-compact--all .yatra-trip-categories-compact, | |
| 3640 | + .yatra-listing-compact--all .yatra-difficulty-overlay, | |
| 3641 | + .yatra-listing-compact--all .yatra-group-discount-badge, | |
| 3642 | + .yatra-listing-compact--all .yatra-trip-listing-dp-urgency { | |
| 3643 | + display: none !important; | |
| 3644 | + } | |
| 3645 | + .yatra-listing-compact--all .yatra-trip-footer { | |
| 3646 | + margin-top: auto; | |
| 3647 | + display: flex; | |
| 3648 | + flex-direction: row !important; | |
| 3649 | + flex-wrap: nowrap; | |
| 3650 | + align-items: center; | |
| 3651 | + justify-content: space-between; | |
| 3652 | + gap: 12px; | |
| 3653 | + padding-top: 4px !important; | |
| 3654 | + border: 0 !important; | |
| 3655 | + } | |
| 3656 | + .yatra-listing-compact--all .yatra-trip-card-price { margin: 0 !important; width: auto !important; } | |
| 3657 | + .yatra-listing-compact--all .yatra-card-view-btn { flex: 0 0 auto; white-space: nowrap; } | |
| 3658 | + | |
| 3659 | + /* GRID view (DEFAULT) → a shorter vertical card. Grid-agnostic: applies to | |
| 3660 | + every wrapper (archive grid, shortcode/block .yatra-tour-grid, and | |
| 3661 | + .yatra-discount-grid) since none of them except the archive list-view | |
| 3662 | + needs the horizontal row. */ | |
| 3663 | + .yatra-listing-compact--all .yatra-trip-card-image { | |
| 3664 | + height: 160px !important; | |
| 3665 | + aspect-ratio: auto !important; | |
| 3666 | + } | |
| 3667 | + | |
| 3668 | + /* LIST view (archive only) → compact horizontal row overrides the vertical | |
| 3669 | + default. The Grid/List toggle exists only on .yatra-trip-grid, so the | |
| 3670 | + shortcode/block/discount grids always keep the compact vertical card. */ | |
| 3671 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-card { | |
| 3672 | + min-height: 0 !important; | |
| 3673 | + max-height: none !important; | |
| 3674 | + } | |
| 3675 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-card-image { | |
| 3676 | + height: 160px !important; | |
| 3677 | + min-height: 0 !important; | |
| 3678 | + max-height: none !important; | |
| 3679 | + aspect-ratio: auto !important; | |
| 3680 | + align-self: stretch; | |
| 3681 | + } | |
| 3682 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-content { | |
| 3683 | + padding: 16px 18px !important; | |
| 3684 | + justify-content: flex-start; | |
| 3685 | + } | |
| 3686 | +} | |
