← All changes | assets/css/shortcodes/activity-shortcode.css +43 -22 3.0.2.6 → 3.0.16 View file →

		@@ -77,11 +77,42 @@
77	77	transition: color 0.2s ease;
78	78	}
79	79
80	80	.yatra-category-card-title-link:hover {
81		- color: #60a5fa;
	81	+ color: var(--yatra-primary-light, #60a5fa);
82	82	}
83	83
	84	+/*
	85	+ * Whole-card click target.
	86	+ *
	87	+ * Promote the title link to a "stretched link" so the entire card is
	88	+ * navigable, while keeping the visible <a> on the title for screen readers
	89	+ * and SEO. The pseudo-element fills the overlay (which is `inset: 0` on the
	90	+ * image wrapper), giving us a single canonical link target without nesting
	91	+ * <a> elements. The featured badge is made non-interactive so clicks on it
	92	+ * pass through to the stretched link.
	93	+ */
	94	+.yatra-category-card {
	95	+ cursor: pointer;
	96	+}
	97	+
	98	+.yatra-category-card-title-link::after {
	99	+ content: "";
	100	+ position: absolute;
	101	+ inset: 0;
	102	+ z-index: 1;
	103	+ border-radius: inherit;
	104	+}
	105	+
	106	+.yatra-category-card-title-link:focus-visible::after {
	107	+ outline: 2px solid var(--yatra-primary, #2563eb);
	108	+ outline-offset: -2px;
	109	+}
	110	+
	111	+.yatra-category-featured-badge {
	112	+ pointer-events: none;
	113	+}
	114	+
84	115	.yatra-category-card-stats {
85	116	display: flex;
86	117	gap: 20px;
87	118	margin-bottom: 16px;
		@@ -108,9 +139,9 @@
108	139	color: #fbbf24;
109	140	}
110	141
111	142	.category-stat.trips .category-stat-icon {
112		- color: #60a5fa;
	143	+ color: var(--yatra-primary-light, #60a5fa);
113	144	}
114	145
115	146	.category-stat.price .category-stat-icon {
116	147	color: #10b981;
		@@ -217,19 +248,14 @@
217	248	width: 30px;
218	249	height: 30px;
219	250	margin: -15px 0 0 -15px;
220	251	border: 3px solid #f3f3f3;
221		- border-top: 3px solid #0073aa;
	252	+ border-top: 3px solid var(--yatra-primary, #3b82f6);
222	253	border-radius: 50%;
223	254	animation: yatra-spin 1s linear infinite;
224	255	z-index: 11;
225	256	}
226	257
227		-@keyframes yatra-spin {
228		- 0% { transform: rotate(0deg); }
229		- 100% { transform: rotate(360deg); }
230		-}
231		-
232	258	.yatra-activity-header {
233	259	display: flex;
234	260	justify-content: space-between;
235	261	align-items: center;
		@@ -773,16 +799,11 @@
773	799	left: -100%;
774	800	width: 100%;
775	801	height: 100%;
776	802	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
777		- animation: shimmer 1.5s infinite;
	803	+ animation: yatra-shimmer 1.5s infinite;
778	804	}
779	805
780		-@keyframes shimmer {
781		- 0% { left: -100%; }
782		- 100% { left: 100%; }
783		-}
784		-
785	806	.yatra-activity-empty {
786	807	text-align: center;
787	808	padding: 60px 20px;
788	809	color: #6b7280;
		@@ -821,26 +842,26 @@
821	842	}
822	843
823	844	.yatra-pagination-link:hover {
824	845	background: #f9fafb;
825		- border-color: #9ca3af;
826		- color: #111827;
	846	+ border-color: color-mix(in srgb, var(--yatra-primary, #3b82f6) 35%, #d1d5db);
	847	+ color: var(--yatra-primary, #3b82f6);
827	848	}
828	849
829	850	.yatra-pagination-current {
830		- background: #0073aa;
831		- border-color: #0073aa;
	851	+ background: var(--yatra-primary, #3b82f6);
	852	+ border-color: var(--yatra-primary, #3b82f6);
832	853	color: #ffffff;
833	854	font-weight: 600;
834	855	transform: scale(1.05);
835		- box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
	856	+ box-shadow: 0 2px 8px color-mix(in srgb, var(--yatra-primary, #3b82f6) 35%, transparent);
836	857	}
837	858
838	859	.yatra-pagination-current:hover {
839		- background: #005a87;
840		- border-color: #005a87;
	860	+ background: var(--yatra-primary-dark, #2563eb);
	861	+ border-color: var(--yatra-primary-dark, #2563eb);
841	862	transform: scale(1.05);
842		- box-shadow: 0 2px 8px rgba(0, 90, 135, 0.4);
	863	+ box-shadow: 0 2px 8px color-mix(in srgb, var(--yatra-primary-dark, #2563eb) 40%, transparent);
843	864	}
844	865
845	866	.yatra-pagination-ellipsis {
846	867	color: #9ca3af;