| @@ -70,9 +70,9 @@ | ||
| 70 | 70 | .yatra-rating-option input[type="checkbox"] { |
| 71 | 71 | margin: 0; |
| 72 | 72 | width: 16px; |
| 73 | 73 | height: 16px; |
| 74 | - accent-color: #3b82f6; | |
| 74 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 75 | 75 | } |
| 76 | 76 | |
| 77 | 77 | .yatra-stars-display { |
| 78 | 78 | display: flex; |
| @@ -186,8 +186,9 @@ | ||
| 186 | 186 | background: #f8fafc; |
| 187 | 187 | border: 1px solid #e5e7eb; |
| 188 | 188 | border-radius: 12px; |
| 189 | 189 | padding: 10px 12px; |
| 190 | + justify-content: end; | |
| 190 | 191 | } |
| 191 | 192 | |
| 192 | 193 | .yatra-sort-control { |
| 193 | 194 | display: flex; |
| @@ -219,9 +220,9 @@ | ||
| 219 | 220 | } |
| 220 | 221 | |
| 221 | 222 | .yatra-sort-control select:focus { |
| 222 | 223 | outline: none; |
| 223 | - border-color: #3b82f6; | |
| 224 | + border-color: var(--yatra-primary, #3b82f6); | |
| 224 | 225 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 225 | 226 | } |
| 226 | 227 | |
| 227 | 228 | /* Grid / list toggle: gray “track”, inactive = muted icon, active = white inset + blue ring (clear at a glance) */ |
| @@ -257,14 +258,14 @@ | ||
| 257 | 258 | } |
| 258 | 259 | |
| 259 | 260 | .yatra-view-btn:focus-visible { |
| 260 | 261 | outline: none; |
| 261 | - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6; | |
| 262 | + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--yatra-primary, #3b82f6); | |
| 262 | 263 | } |
| 263 | 264 | |
| 264 | 265 | .yatra-view-btn.active { |
| 265 | 266 | background: #ffffff; |
| 266 | - color: #1d4ed8; | |
| 267 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 267 | 268 | box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 0 0 1px #93c5fd; |
| 268 | 269 | } |
| 269 | 270 | |
| 270 | 271 | .yatra-view-btn svg { |
| @@ -325,9 +326,8 @@ | ||
| 325 | 326 | border-radius: 12px; |
| 326 | 327 | overflow: hidden; |
| 327 | 328 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
| 328 | 329 | transition: all 0.3s ease; |
| 329 | - cursor: pointer; | |
| 330 | 330 | display: flex; |
| 331 | 331 | flex-direction: column; |
| 332 | 332 | height: 100%; |
| 333 | 333 | } |
| @@ -546,9 +546,9 @@ | ||
| 546 | 546 | margin-left: 8px; |
| 547 | 547 | } |
| 548 | 548 | |
| 549 | 549 | .yatra-view-details-btn { |
| 550 | - background: #2563eb; | |
| 550 | + background: var(--yatra-primary-dark, #2563eb); | |
| 551 | 551 | color: #ffffff; |
| 552 | 552 | padding: 10px 20px; |
| 553 | 553 | border-radius: 8px; |
| 554 | 554 | text-decoration: none; |
| @@ -556,9 +556,9 @@ | ||
| 556 | 556 | transition: all 0.2s ease; |
| 557 | 557 | } |
| 558 | 558 | |
| 559 | 559 | .yatra-view-details-btn:hover { |
| 560 | - background: #1d4ed8; | |
| 560 | + background: var(--yatra-primary-darker, #1d4ed8); | |
| 561 | 561 | transform: translateY(-1px); |
| 562 | 562 | } |
| 563 | 563 | |
| 564 | 564 | /* Grid view specific styling */ |
| @@ -728,26 +728,73 @@ | ||
| 728 | 728 | |
| 729 | 729 | /* Additional responsive styles */ |
| 730 | 730 | @media (max-width: 768px) { |
| 731 | 731 | .yatra-results-controls { |
| 732 | + flex-direction: row; | |
| 733 | + flex-wrap: wrap; | |
| 734 | + align-items: center; | |
| 735 | + justify-content: flex-end; | |
| 736 | + gap: 10px 12px; | |
| 737 | + } | |
| 738 | + | |
| 739 | + .yatra-sort-control { | |
| 740 | + flex: 1 1 min(100%, 320px); | |
| 741 | + min-width: 0; | |
| 742 | + display: grid; | |
| 743 | + grid-template-columns: auto minmax(0, 1fr); | |
| 744 | + align-items: center; | |
| 745 | + gap: 8px 12px; | |
| 746 | + } | |
| 747 | + | |
| 748 | + .yatra-sort-control label { | |
| 749 | + white-space: normal; | |
| 750 | + line-height: 1.25; | |
| 751 | + font-size: 13px; | |
| 752 | + color: #475569; | |
| 753 | + } | |
| 754 | + | |
| 755 | + .yatra-sort-control select { | |
| 756 | + width: 100%; | |
| 757 | + min-width: 0; | |
| 758 | + flex: none; | |
| 759 | + max-width: 100%; | |
| 760 | + } | |
| 761 | + | |
| 762 | + .yatra-view-toggle { | |
| 763 | + flex: 0 0 auto; | |
| 764 | + margin-left: 0; | |
| 765 | + align-self: center; | |
| 766 | + } | |
| 767 | + | |
| 768 | + .yatra-destination-listing .yatra-results-controls .yatra-view-toggle, | |
| 769 | + .yatra-taxonomy-page .yatra-results-controls .yatra-view-toggle { | |
| 770 | + margin-left: 0; | |
| 771 | + } | |
| 772 | +} | |
| 773 | + | |
| 774 | +@media (max-width: 480px) { | |
| 775 | + .yatra-results-controls { | |
| 732 | 776 | flex-direction: column; |
| 733 | 777 | align-items: stretch; |
| 734 | - gap: 12px; | |
| 735 | 778 | } |
| 736 | - | |
| 779 | + | |
| 737 | 780 | .yatra-sort-control { |
| 738 | - justify-content: space-between; | |
| 781 | + grid-template-columns: 1fr; | |
| 782 | + gap: 6px; | |
| 739 | 783 | } |
| 740 | - | |
| 741 | - .yatra-sort-control select { | |
| 742 | - min-width: auto; | |
| 743 | - flex: 1; | |
| 784 | + | |
| 785 | + .yatra-sort-control label { | |
| 786 | + font-size: 12px; | |
| 744 | 787 | } |
| 788 | + | |
| 789 | + .yatra-view-toggle { | |
| 790 | + align-self: flex-end; | |
| 791 | + } | |
| 745 | 792 | } |
| 746 | 793 | |
| 747 | 794 | .yatra-sort-control select:focus { |
| 748 | 795 | outline: none; |
| 749 | - border-color: #3b82f6; | |
| 796 | + border-color: var(--yatra-primary, #3b82f6); | |
| 750 | 797 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 751 | 798 | } |
| 752 | 799 | |
| 753 | 800 | /* Listing Layout */ |
| @@ -790,9 +837,9 @@ | ||
| 790 | 837 | display: inline-block; |
| 791 | 838 | width: 36px; |
| 792 | 839 | height: 36px; |
| 793 | 840 | border: 3px solid #e5e7eb; |
| 794 | - border-top-color: #3b82f6; | |
| 841 | + border-top-color: var(--yatra-primary, #3b82f6); | |
| 795 | 842 | border-radius: 50%; |
| 796 | 843 | animation: yatra-listing-spin 0.75s linear infinite; |
| 797 | 844 | margin-bottom: 12px; |
| 798 | 845 | } |
| @@ -887,9 +934,9 @@ | ||
| 887 | 934 | } |
| 888 | 935 | |
| 889 | 936 | .yatra-clear-filters { |
| 890 | 937 | font-size: 13px; |
| 891 | - color: #1d4ed8; | |
| 938 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 892 | 939 | background: #eff6ff; |
| 893 | 940 | border: 1px solid #bfdbfe; |
| 894 | 941 | border-radius: 8px; |
| 895 | 942 | cursor: pointer; |
| @@ -902,9 +949,9 @@ | ||
| 902 | 949 | -webkit-appearance: none; |
| 903 | 950 | } |
| 904 | 951 | |
| 905 | 952 | .yatra-clear-filters:hover { |
| 906 | - color: #1e40af; | |
| 953 | + color: var(--yatra-primary-darker, #1e40af); | |
| 907 | 954 | background: #dbeafe; |
| 908 | 955 | border-color: #93c5fd; |
| 909 | 956 | text-decoration: none; |
| 910 | 957 | } |
| @@ -909,11 +956,11 @@ | ||
| 909 | 956 | text-decoration: none; |
| 910 | 957 | } |
| 911 | 958 | |
| 912 | 959 | .yatra-filter-section { |
| 913 | - margin-bottom: 24px; | |
| 960 | + margin-bottom: 14px; | |
| 914 | 961 | border-bottom: 1px solid #f3f4f6; |
| 915 | - padding-bottom: 20px; | |
| 962 | + padding-bottom: 14px; | |
| 916 | 963 | /* visible: range slider thumbs must not clip at section edges */ |
| 917 | 964 | overflow: visible; |
| 918 | 965 | width: 100%; |
| 919 | 966 | box-sizing: border-box; |
| @@ -932,11 +979,11 @@ | ||
| 932 | 979 | cursor: pointer; |
| 933 | 980 | font-size: 15px; |
| 934 | 981 | font-weight: 600; |
| 935 | 982 | color: #111827; |
| 936 | - margin-bottom: 16px; | |
| 983 | + margin-bottom: 10px; | |
| 937 | 984 | user-select: none; |
| 938 | - padding: 4px 0; | |
| 985 | + padding: 2px 0; | |
| 939 | 986 | transition: color 0.2s; |
| 940 | 987 | } |
| 941 | 988 | |
| 942 | 989 | .yatra-filter-actions { |
| @@ -988,13 +1035,13 @@ | ||
| 988 | 1035 | transition: color 0.2s; |
| 989 | 1036 | } |
| 990 | 1037 | |
| 991 | 1038 | .yatra-filter-title:hover .yatra-filter-icon { |
| 992 | - color: #3b82f6; | |
| 1039 | + color: var(--yatra-primary, #3b82f6); | |
| 993 | 1040 | } |
| 994 | 1041 | |
| 995 | 1042 | .yatra-filter-title:hover { |
| 996 | - color: #3b82f6; | |
| 1043 | + color: var(--yatra-primary, #3b82f6); | |
| 997 | 1044 | } |
| 998 | 1045 | |
| 999 | 1046 | .yatra-filter-arrow { |
| 1000 | 1047 | transition: transform 0.2s; |
| @@ -1003,9 +1050,9 @@ | ||
| 1003 | 1050 | } |
| 1004 | 1051 | |
| 1005 | 1052 | .yatra-filter-section.open .yatra-filter-arrow { |
| 1006 | 1053 | transform: rotate(180deg); |
| 1007 | - color: #3b82f6; | |
| 1054 | + color: var(--yatra-primary, #3b82f6); | |
| 1008 | 1055 | } |
| 1009 | 1056 | |
| 1010 | 1057 | .yatra-filter-content { |
| 1011 | 1058 | display: block; |
| @@ -1126,12 +1173,12 @@ | ||
| 1126 | 1173 | transition: all 0.3s ease; |
| 1127 | 1174 | } |
| 1128 | 1175 | |
| 1129 | 1176 | .yatra-filter-section.open .yatra-filter-content { |
| 1130 | - animation: slideDown 0.3s ease; | |
| 1177 | + animation: yatra-listing-filter-expand 0.3s ease; | |
| 1131 | 1178 | } |
| 1132 | 1179 | |
| 1133 | -@keyframes slideDown { | |
| 1180 | +@keyframes yatra-listing-filter-expand { | |
| 1134 | 1181 | from { |
| 1135 | 1182 | opacity: 0; |
| 1136 | 1183 | max-height: 0; |
| 1137 | 1184 | } |
| @@ -1209,9 +1256,9 @@ | ||
| 1209 | 1256 | } |
| 1210 | 1257 | |
| 1211 | 1258 | .yatra-price-inputs input:focus { |
| 1212 | 1259 | outline: none; |
| 1213 | - border-color: #3b82f6; | |
| 1260 | + border-color: var(--yatra-primary, #3b82f6); | |
| 1214 | 1261 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); |
| 1215 | 1262 | } |
| 1216 | 1263 | |
| 1217 | 1264 | .yatra-price-inputs input::placeholder { |
| @@ -1261,9 +1308,9 @@ | ||
| 1261 | 1308 | z-index: 1 !important; |
| 1262 | 1309 | height: 6px !important; |
| 1263 | 1310 | top: 50% !important; |
| 1264 | 1311 | transform: translateY(-50%) !important; |
| 1265 | - background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important; | |
| 1312 | + background: linear-gradient(90deg, var(--yatra-primary, #3b82f6) 0%, var(--yatra-primary-dark, #2563eb) 100%) !important; | |
| 1266 | 1313 | border-radius: 3px !important; |
| 1267 | 1314 | box-shadow: 0 2px 6px rgba(59, 130, 246, 0.28) !important; |
| 1268 | 1315 | pointer-events: none !important; |
| 1269 | 1316 | } |
| @@ -1309,9 +1356,9 @@ | ||
| 1309 | 1356 | width: 20px !important; |
| 1310 | 1357 | height: 20px !important; |
| 1311 | 1358 | border-radius: 50% !important; |
| 1312 | 1359 | background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; |
| 1313 | - border: 3px solid #3b82f6 !important; | |
| 1360 | + border: 3px solid var(--yatra-primary, #3b82f6) !important; | |
| 1314 | 1361 | cursor: grab !important; |
| 1315 | 1362 | pointer-events: all !important; |
| 1316 | 1363 | box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important; |
| 1317 | 1364 | margin-top: -7px !important; |
| @@ -1336,9 +1383,9 @@ | ||
| 1336 | 1383 | width: 20px !important; |
| 1337 | 1384 | height: 20px !important; |
| 1338 | 1385 | border-radius: 50% !important; |
| 1339 | 1386 | background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; |
| 1340 | - border: 3px solid #3b82f6 !important; | |
| 1387 | + border: 3px solid var(--yatra-primary, #3b82f6) !important; | |
| 1341 | 1388 | cursor: grab !important; |
| 1342 | 1389 | pointer-events: all !important; |
| 1343 | 1390 | box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important; |
| 1344 | 1391 | } |
| @@ -1376,9 +1423,9 @@ | ||
| 1376 | 1423 | padding: 6px 12px; |
| 1377 | 1424 | align-self: flex-start; |
| 1378 | 1425 | background: transparent; |
| 1379 | 1426 | border: none; |
| 1380 | - color: #3b82f6; | |
| 1427 | + color: var(--yatra-primary, #3b82f6); | |
| 1381 | 1428 | font-size: 13px; |
| 1382 | 1429 | font-weight: 500; |
| 1383 | 1430 | cursor: pointer; |
| 1384 | 1431 | border-radius: 6px; |
| @@ -1388,9 +1435,9 @@ | ||
| 1388 | 1435 | } |
| 1389 | 1436 | |
| 1390 | 1437 | .yatra-filter-show-more-toggle:hover { |
| 1391 | 1438 | background: rgba(59, 130, 246, 0.08); |
| 1392 | - color: #2563eb; | |
| 1439 | + color: var(--yatra-primary-dark, #2563eb); | |
| 1393 | 1440 | } |
| 1394 | 1441 | |
| 1395 | 1442 | .yatra-filter-collapsible.is-expanded .yatra-filter-show-more-label { |
| 1396 | 1443 | display: none; |
| @@ -1399,24 +1446,8 @@ | ||
| 1399 | 1446 | .yatra-filter-collapsible:not(.is-expanded) .yatra-filter-show-less-label { |
| 1400 | 1447 | display: none; |
| 1401 | 1448 | } |
| 1402 | 1449 | |
| 1403 | -.yatra-checkbox-label { | |
| 1404 | - display: flex; | |
| 1405 | - align-items: center; | |
| 1406 | - gap: 12px; | |
| 1407 | - cursor: pointer; | |
| 1408 | - font-size: 14px; | |
| 1409 | - color: #374151; | |
| 1410 | - transition: all 0.2s ease; | |
| 1411 | - padding: 8px 12px; | |
| 1412 | - border-radius: 8px; | |
| 1413 | - margin: -4px -12px; | |
| 1414 | - width: calc(100% + 24px); | |
| 1415 | - box-sizing: border-box; | |
| 1416 | - word-wrap: break-word; | |
| 1417 | - overflow: hidden; | |
| 1418 | -} | |
| 1419 | 1450 | |
| 1420 | 1451 | .yatra-checkbox-label:hover { |
| 1421 | 1452 | background: rgba(59, 130, 246, 0.05); |
| 1422 | 1453 | color: #1e293b; |
| @@ -1425,9 +1456,9 @@ | ||
| 1425 | 1456 | .yatra-checkbox-label input[type="checkbox"] { |
| 1426 | 1457 | width: 16px; |
| 1427 | 1458 | height: 16px; |
| 1428 | 1459 | cursor: pointer; |
| 1429 | - accent-color: #3b82f6; | |
| 1460 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 1430 | 1461 | margin: 0; |
| 1431 | 1462 | flex-shrink: 0; |
| 1432 | 1463 | } |
| 1433 | 1464 | |
| @@ -1463,9 +1494,8 @@ | ||
| 1463 | 1494 | border-radius: 12px; |
| 1464 | 1495 | overflow: hidden; |
| 1465 | 1496 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| 1466 | 1497 | transition: transform 0.2s, box-shadow 0.2s; |
| 1467 | - cursor: pointer; | |
| 1468 | 1498 | display: flex; |
| 1469 | 1499 | flex-direction: column; |
| 1470 | 1500 | height: 100%; |
| 1471 | 1501 | } |
| @@ -1595,10 +1625,10 @@ | ||
| 1595 | 1625 | .yatra-favorite-btn:hover { |
| 1596 | 1626 | background: #ffffff !important; |
| 1597 | 1627 | color: #ef4444 !important; |
| 1598 | 1628 | transform: scale(1.1) !important; |
| 1599 | - border-color: #ef4444 !important; | |
| 1600 | - 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; | |
| 1601 | 1631 | } |
| 1602 | 1632 | |
| 1603 | 1633 | .yatra-favorite-btn svg { |
| 1604 | 1634 | width: 20px !important; |
| @@ -1606,28 +1636,51 @@ | ||
| 1606 | 1636 | stroke-width: 2 !important; |
| 1607 | 1637 | display: block !important; |
| 1608 | 1638 | } |
| 1609 | 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". */ | |
| 1610 | 1646 | .yatra-favorite-btn.saved, |
| 1611 | 1647 | .yatra-favorite-btn.is-saved { |
| 1612 | 1648 | background: #ffffff !important; |
| 1613 | 1649 | color: #ef4444 !important; |
| 1614 | - border-color: #ef4444 !important; | |
| 1650 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1615 | 1651 | } |
| 1616 | 1652 | |
| 1617 | 1653 | .yatra-favorite-btn.saved svg, |
| 1618 | 1654 | .yatra-favorite-btn.is-saved svg { |
| 1619 | 1655 | fill: #ef4444 !important; |
| 1620 | - stroke: #ef4444 !important; | |
| 1656 | + stroke: none !important; | |
| 1657 | + stroke-width: 0 !important; | |
| 1621 | 1658 | } |
| 1622 | 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 | + | |
| 1623 | 1667 | .yatra-favorite-btn.saved:hover, |
| 1624 | 1668 | .yatra-favorite-btn.is-saved:hover { |
| 1625 | - background: #fee2e2 !important; | |
| 1669 | + background: #ffffff !important; | |
| 1626 | 1670 | color: #dc2626 !important; |
| 1627 | - border-color: #dc2626 !important; | |
| 1671 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1628 | 1672 | } |
| 1629 | 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 | + | |
| 1630 | 1683 | .yatra-trip-content { |
| 1631 | 1684 | padding: 20px; |
| 1632 | 1685 | display: flex; |
| 1633 | 1686 | flex-direction: column; |
| @@ -1670,9 +1723,9 @@ | ||
| 1670 | 1723 | |
| 1671 | 1724 | .yatra-highlight-badge { |
| 1672 | 1725 | padding: 4px 10px; |
| 1673 | 1726 | background: #eff6ff; |
| 1674 | - color: #1e40af; | |
| 1727 | + color: var(--yatra-primary-darker, #1e40af); | |
| 1675 | 1728 | border-radius: 4px; |
| 1676 | 1729 | font-size: 12px; |
| 1677 | 1730 | font-weight: 500; |
| 1678 | 1731 | text-decoration: none; |
| @@ -1684,9 +1737,9 @@ | ||
| 1684 | 1737 | } |
| 1685 | 1738 | |
| 1686 | 1739 | a.yatra-highlight-link:hover { |
| 1687 | 1740 | background: #dbeafe; |
| 1688 | - color: #1d4ed8; | |
| 1741 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 1689 | 1742 | text-decoration: none; |
| 1690 | 1743 | } |
| 1691 | 1744 | |
| 1692 | 1745 | |
| @@ -1736,9 +1789,9 @@ | ||
| 1736 | 1789 | |
| 1737 | 1790 | .yatra-current-price { |
| 1738 | 1791 | font-size: 22px; |
| 1739 | 1792 | font-weight: 700; |
| 1740 | - color: #3b82f6; | |
| 1793 | + color: var(--yatra-primary, #3b82f6); | |
| 1741 | 1794 | line-height: 1; |
| 1742 | 1795 | } |
| 1743 | 1796 | |
| 1744 | 1797 | .yatra-price-note { |
| @@ -1907,9 +1960,9 @@ | ||
| 1907 | 1960 | transition: color 0.2s ease; |
| 1908 | 1961 | } |
| 1909 | 1962 | |
| 1910 | 1963 | .yatra-trip-title-link:hover { |
| 1911 | - color: #2563eb; | |
| 1964 | + color: var(--yatra-primary-dark, #2563eb); | |
| 1912 | 1965 | text-decoration: none; |
| 1913 | 1966 | } |
| 1914 | 1967 | |
| 1915 | 1968 | .yatra-trip-card-meta { |
| @@ -1938,9 +1991,9 @@ | ||
| 1938 | 1991 | border-radius: 6px; |
| 1939 | 1992 | font-size: 0.75rem; |
| 1940 | 1993 | font-weight: 500; |
| 1941 | 1994 | background: #eff6ff; |
| 1942 | - color: #1d4ed8; | |
| 1995 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 1943 | 1996 | text-decoration: none; |
| 1944 | 1997 | border: 1px solid #bfdbfe; |
| 1945 | 1998 | transition: background-color 0.2s ease, color 0.2s ease; |
| 1946 | 1999 | } |
| @@ -1946,9 +1999,9 @@ | ||
| 1946 | 1999 | } |
| 1947 | 2000 | |
| 1948 | 2001 | .yatra-trip-primary-category-chip:hover { |
| 1949 | 2002 | background: #dbeafe; |
| 1950 | - color: #1e40af; | |
| 2003 | + color: var(--yatra-primary-darker, #1e40af); | |
| 1951 | 2004 | } |
| 1952 | 2005 | |
| 1953 | 2006 | .yatra-trip-primary-category-chip--text { |
| 1954 | 2007 | border-style: dashed; |
| @@ -1977,9 +2030,9 @@ | ||
| 1977 | 2030 | } |
| 1978 | 2031 | |
| 1979 | 2032 | .yatra-info-badge.duration { |
| 1980 | 2033 | background: #dbeafe; |
| 1981 | - color: #1d4ed8; | |
| 2034 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 1982 | 2035 | } |
| 1983 | 2036 | |
| 1984 | 2037 | .yatra-info-badge svg { |
| 1985 | 2038 | width: 12px; |
| @@ -2049,15 +2102,15 @@ | ||
| 2049 | 2102 | } |
| 2050 | 2103 | |
| 2051 | 2104 | .yatra-tag.activity-tag { |
| 2052 | 2105 | background: #eff6ff; |
| 2053 | - color: #1d4ed8; | |
| 2106 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 2054 | 2107 | border-color: #bfdbfe; |
| 2055 | 2108 | } |
| 2056 | 2109 | |
| 2057 | 2110 | .yatra-tag.activity-tag:hover { |
| 2058 | 2111 | background: #dbeafe; |
| 2059 | - color: #1e40af; | |
| 2112 | + color: var(--yatra-primary-darker, #1e40af); | |
| 2060 | 2113 | text-decoration: none; |
| 2061 | 2114 | box-shadow: 0 2px 8px rgba(29, 78, 216, 0.14); |
| 2062 | 2115 | } |
| 2063 | 2116 | |
| @@ -2089,8 +2142,19 @@ | ||
| 2089 | 2142 | width: 14px; |
| 2090 | 2143 | height: 14px; |
| 2091 | 2144 | } |
| 2092 | 2145 | |
| 2146 | +.yatra-difficulty-overlay i.difficulty-icon.fa-solid, | |
| 2147 | +.yatra-difficulty-overlay i.difficulty-icon.fa-regular { | |
| 2148 | + width: auto; | |
| 2149 | + height: auto; | |
| 2150 | + font-size: 14px; | |
| 2151 | + line-height: 1; | |
| 2152 | + display: inline-flex; | |
| 2153 | + align-items: center; | |
| 2154 | + justify-content: center; | |
| 2155 | +} | |
| 2156 | + | |
| 2093 | 2157 | /* Rating Section - consolidated with main rule above */ |
| 2094 | 2158 | |
| 2095 | 2159 | .yatra-rating-stars { |
| 2096 | 2160 | display: flex; |
| @@ -2119,9 +2183,9 @@ | ||
| 2119 | 2183 | |
| 2120 | 2184 | .yatra-trip-price { |
| 2121 | 2185 | font-size: 1.125rem; |
| 2122 | 2186 | font-weight: 700; |
| 2123 | - color: #2563eb; | |
| 2187 | + color: var(--yatra-primary-dark, #2563eb); | |
| 2124 | 2188 | display: flex; |
| 2125 | 2189 | align-items: baseline; |
| 2126 | 2190 | gap: 8px; |
| 2127 | 2191 | flex-wrap: wrap; |
| @@ -2194,19 +2258,25 @@ | ||
| 2194 | 2258 | color: #374151; |
| 2195 | 2259 | } |
| 2196 | 2260 | |
| 2197 | 2261 | .yatra-pagination-btn:hover:not(:disabled) { |
| 2198 | - border-color: #3b82f6; | |
| 2199 | - color: #3b82f6; | |
| 2262 | + border-color: var(--yatra-primary, #3b82f6); | |
| 2263 | + color: var(--yatra-primary, #3b82f6); | |
| 2200 | 2264 | } |
| 2201 | 2265 | |
| 2202 | 2266 | .yatra-pagination-btn.active { |
| 2203 | - border-color: #3b82f6; | |
| 2204 | - background: #3b82f6; | |
| 2267 | + border-color: var(--yatra-primary, #3b82f6); | |
| 2268 | + background: var(--yatra-primary, #3b82f6); | |
| 2205 | 2269 | color: #fff; |
| 2206 | 2270 | font-weight: 600; |
| 2271 | + box-shadow: 0 2px 8px color-mix(in srgb, var(--yatra-primary, #3b82f6) 32%, transparent); | |
| 2207 | 2272 | } |
| 2208 | 2273 | |
| 2274 | +.yatra-pagination-btn.active:hover:not(:disabled) { | |
| 2275 | + background: var(--yatra-primary-dark, #2563eb); | |
| 2276 | + border-color: var(--yatra-primary-dark, #2563eb); | |
| 2277 | +} | |
| 2278 | + | |
| 2209 | 2279 | .yatra-pagination-btn:disabled { |
| 2210 | 2280 | opacity: 0.5; |
| 2211 | 2281 | cursor: not-allowed; |
| 2212 | 2282 | } |
| @@ -2277,9 +2347,9 @@ | ||
| 2277 | 2347 | |
| 2278 | 2348 | .yatra-destination-listing .yatra-results-controls .yatra-view-btn.active, |
| 2279 | 2349 | .yatra-taxonomy-page .yatra-results-controls .yatra-view-btn.active { |
| 2280 | 2350 | background: #ffffff !important; |
| 2281 | - color: #1d4ed8 !important; | |
| 2351 | + color: var(--yatra-primary-darker, #1d4ed8) !important; | |
| 2282 | 2352 | box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 0 0 1px #93c5fd !important; |
| 2283 | 2353 | } |
| 2284 | 2354 | |
| 2285 | 2355 | .yatra-destination-listing .yatra-results-controls .yatra-view-btn:not(.active), |
| @@ -2323,9 +2393,8 @@ | ||
| 2323 | 2393 | } |
| 2324 | 2394 | |
| 2325 | 2395 | .yatra-results-controls { |
| 2326 | 2396 | width: 100%; |
| 2327 | - justify-content: space-between; | |
| 2328 | 2397 | } |
| 2329 | 2398 | |
| 2330 | 2399 | .yatra-listing-layout { |
| 2331 | 2400 | display: grid; |
| @@ -3029,9 +3098,9 @@ | ||
| 3029 | 3098 | height: 16px; |
| 3030 | 3099 | } |
| 3031 | 3100 | |
| 3032 | 3101 | .yatra-stat-icon.duration { |
| 3033 | - background: linear-gradient(135deg, #3b82f6, #2563eb); | |
| 3102 | + background: linear-gradient(135deg, var(--yatra-primary, #3b82f6), var(--yatra-primary-dark, #2563eb)); | |
| 3034 | 3103 | color: white; |
| 3035 | 3104 | } |
| 3036 | 3105 | |
| 3037 | 3106 | .yatra-stat-icon.difficulty { |
| @@ -3162,9 +3231,8 @@ | ||
| 3162 | 3231 | z-index: 3; |
| 3163 | 3232 | } |
| 3164 | 3233 | |
| 3165 | 3234 | .yatra-trip-title { |
| 3166 | - color: #000000 !important; | |
| 3167 | 3235 | font-weight: 700; |
| 3168 | 3236 | font-size: 20px; |
| 3169 | 3237 | line-height: 1.3; |
| 3170 | 3238 | margin-bottom: 12px; |
| @@ -3171,9 +3239,8 @@ | ||
| 3171 | 3239 | letter-spacing: -0.02em; |
| 3172 | 3240 | } |
| 3173 | 3241 | |
| 3174 | 3242 | .yatra-trip-title-link { |
| 3175 | - color: #000000 !important; | |
| 3176 | 3243 | text-decoration: none; |
| 3177 | 3244 | transition: all 0.2s ease; |
| 3178 | 3245 | display: block; |
| 3179 | 3246 | } |
| @@ -3178,9 +3245,8 @@ | ||
| 3178 | 3245 | display: block; |
| 3179 | 3246 | } |
| 3180 | 3247 | |
| 3181 | 3248 | .yatra-trip-title-link:hover { |
| 3182 | - color: #000000 !important; | |
| 3183 | 3249 | transform: translateY(-1px); |
| 3184 | 3250 | } |
| 3185 | 3251 | |
| 3186 | 3252 | .yatra-trip-short-description { |
| @@ -3426,4 +3492,195 @@ | ||
| 3426 | 3492 | font-weight: 400; |
| 3427 | 3493 | line-height: 1.5; |
| 3428 | 3494 | } |
| 3429 | 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 | +} | |
