← All changes
|
assets/css/shortcodes/destination-shortcode.css
+48
-23
3.0.2.6
→
3.0.16
View file →
| @@ -59,10 +59,14 @@ | ||
| 59 | 59 | |
| 60 | 60 | .yatra-category-card-content { |
| 61 | 61 | color: #ffffff; |
| 62 | 62 | width: 100%; |
| 63 | - z-index: 2; | |
| 64 | - position: relative; | |
| 63 | + /* No `position: relative` here: it would become the nearest positioned | |
| 64 | + ancestor for the title link's stretched `::after`, trapping the click | |
| 65 | + overlay to the bottom-strip content area instead of the whole card. | |
| 66 | + The overlay above (`.yatra-category-card-overlay`) is `position: | |
| 67 | + absolute; inset: 0` so the link's `::after` correctly fills the full | |
| 68 | + card via that wrapper. */ | |
| 65 | 69 | } |
| 66 | 70 | |
| 67 | 71 | .yatra-category-card-title { |
| 68 | 72 | margin: 0 0 16px 0; |
| @@ -77,11 +81,42 @@ | ||
| 77 | 81 | transition: color 0.2s ease; |
| 78 | 82 | } |
| 79 | 83 | |
| 80 | 84 | .yatra-category-card-title-link:hover { |
| 81 | - color: #60a5fa; | |
| 85 | + color: var(--yatra-primary-light, #60a5fa); | |
| 82 | 86 | } |
| 83 | 87 | |
| 88 | +/* | |
| 89 | + * Whole-card click target. | |
| 90 | + * | |
| 91 | + * Promote the title link to a "stretched link" so the entire card is | |
| 92 | + * navigable, while keeping the visible <a> on the title for screen readers | |
| 93 | + * and SEO. The pseudo-element fills the overlay (which is `inset: 0` on the | |
| 94 | + * image wrapper), giving us a single canonical link target without nesting | |
| 95 | + * <a> elements. The featured badge is made non-interactive so clicks on it | |
| 96 | + * pass through to the stretched link. | |
| 97 | + */ | |
| 98 | +.yatra-category-card { | |
| 99 | + cursor: pointer; | |
| 100 | +} | |
| 101 | + | |
| 102 | +.yatra-category-card-title-link::after { | |
| 103 | + content: ""; | |
| 104 | + position: absolute; | |
| 105 | + inset: 0; | |
| 106 | + z-index: 1; | |
| 107 | + border-radius: inherit; | |
| 108 | +} | |
| 109 | + | |
| 110 | +.yatra-category-card-title-link:focus-visible::after { | |
| 111 | + outline: 2px solid var(--yatra-primary, #2563eb); | |
| 112 | + outline-offset: -2px; | |
| 113 | +} | |
| 114 | + | |
| 115 | +.yatra-category-featured-badge { | |
| 116 | + pointer-events: none; | |
| 117 | +} | |
| 118 | + | |
| 84 | 119 | .yatra-category-card-stats { |
| 85 | 120 | display: flex; |
| 86 | 121 | gap: 20px; |
| 87 | 122 | margin-bottom: 16px; |
| @@ -108,9 +143,9 @@ | ||
| 108 | 143 | color: #fbbf24; |
| 109 | 144 | } |
| 110 | 145 | |
| 111 | 146 | .category-stat.trips .category-stat-icon { |
| 112 | - color: #60a5fa; /* Blue for consistency */ | |
| 147 | + color: var(--yatra-primary-light, #60a5fa); | |
| 113 | 148 | } |
| 114 | 149 | |
| 115 | 150 | .category-stat.price .category-stat-icon { |
| 116 | 151 | color: #10b981; |
| @@ -223,13 +258,8 @@ | ||
| 223 | 258 | animation: yatra-spin 1s linear infinite; |
| 224 | 259 | z-index: 11; |
| 225 | 260 | } |
| 226 | 261 | |
| 227 | -@keyframes yatra-spin { | |
| 228 | - 0% { transform: rotate(0deg); } | |
| 229 | - 100% { transform: rotate(360deg); } | |
| 230 | -} | |
| 231 | - | |
| 232 | 262 | .yatra-destination-header { |
| 233 | 263 | display: flex; |
| 234 | 264 | justify-content: space-between; |
| 235 | 265 | align-items: center; |
| @@ -861,16 +891,11 @@ | ||
| 861 | 891 | left: -100%; |
| 862 | 892 | width: 100%; |
| 863 | 893 | height: 100%; |
| 864 | 894 | background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); |
| 865 | - animation: shimmer 1.5s infinite; | |
| 895 | + animation: yatra-shimmer 1.5s infinite; | |
| 866 | 896 | } |
| 867 | 897 | |
| 868 | -@keyframes shimmer { | |
| 869 | - 0% { left: -100%; } | |
| 870 | - 100% { left: 100%; } | |
| 871 | -} | |
| 872 | - | |
| 873 | 898 | /* Destination Rating */ |
| 874 | 899 | .yatra-destination-rating { |
| 875 | 900 | display: flex; |
| 876 | 901 | align-items: center; |
| @@ -979,26 +1004,26 @@ | ||
| 979 | 1004 | } |
| 980 | 1005 | |
| 981 | 1006 | .yatra-pagination-link:hover { |
| 982 | 1007 | background: #f9fafb; |
| 983 | - border-color: #9ca3af; | |
| 984 | - color: #111827; | |
| 1008 | + border-color: color-mix(in srgb, var(--yatra-primary, #3b82f6) 35%, #d1d5db); | |
| 1009 | + color: var(--yatra-primary, #3b82f6); | |
| 985 | 1010 | } |
| 986 | 1011 | |
| 987 | 1012 | .yatra-pagination-current { |
| 988 | - background: #0073aa; | |
| 989 | - border-color: #0073aa; | |
| 1013 | + background: var(--yatra-primary, #3b82f6); | |
| 1014 | + border-color: var(--yatra-primary, #3b82f6); | |
| 990 | 1015 | color: #ffffff; |
| 991 | 1016 | font-weight: 600; |
| 992 | 1017 | transform: scale(1.05); |
| 993 | - box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3); | |
| 1018 | + box-shadow: 0 2px 8px color-mix(in srgb, var(--yatra-primary, #3b82f6) 35%, transparent); | |
| 994 | 1019 | } |
| 995 | 1020 | |
| 996 | 1021 | .yatra-pagination-current:hover { |
| 997 | - background: #005a87; | |
| 998 | - border-color: #005a87; | |
| 1022 | + background: var(--yatra-primary-dark, #2563eb); | |
| 1023 | + border-color: var(--yatra-primary-dark, #2563eb); | |
| 999 | 1024 | transform: scale(1.05); |
| 1000 | - box-shadow: 0 2px 8px rgba(0, 90, 135, 0.4); | |
| 1025 | + box-shadow: 0 2px 8px color-mix(in srgb, var(--yatra-primary-dark, #2563eb) 40%, transparent); | |
| 1001 | 1026 | } |
| 1002 | 1027 | |
| 1003 | 1028 | .yatra-pagination-ellipsis { |
| 1004 | 1029 | color: #9ca3af; |