| @@ -7,11 +7,11 @@ | ||
| 7 | 7 | */ |
| 8 | 8 | |
| 9 | 9 | /* CSS Custom Properties for better maintainability */ |
| 10 | 10 | :root { |
| 11 | - --yatra-login-primary: #3b82f6; | |
| 12 | - --yatra-login-primary-hover: #2563eb; | |
| 13 | - --yatra-login-primary-light: rgba(59, 130, 246, 0.1); | |
| 11 | + --yatra-login-primary: var(--yatra-primary, #3b82f6); | |
| 12 | + --yatra-login-primary-hover: var(--yatra-primary-dark, #2563eb); | |
| 13 | + --yatra-login-primary-light: color-mix(in srgb, var(--yatra-primary, #3b82f6) 12%, transparent); | |
| 14 | 14 | --yatra-login-text: #1f2937; |
| 15 | 15 | --yatra-login-text-muted: #6b7280; |
| 16 | 16 | --yatra-login-border: #d1d5db; |
| 17 | 17 | --yatra-login-border-hover: #9ca3af; |
| @@ -21,9 +21,9 @@ | ||
| 21 | 21 | --yatra-login-error-bg: #fef2f2; |
| 22 | 22 | --yatra-login-error-border: #fecaca; |
| 23 | 23 | --yatra-login-success: #10b981; |
| 24 | 24 | --yatra-login-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| 25 | - --yatra-login-shadow-hover: 0 2px 8px rgba(59, 130, 246, 0.3); | |
| 25 | + --yatra-login-shadow-hover: 0 2px 8px color-mix(in srgb, var(--yatra-primary, #3b82f6) 28%, transparent); | |
| 26 | 26 | --yatra-login-border-radius: 12px; |
| 27 | 27 | --yatra-login-border-radius-sm: 8px; |
| 28 | 28 | --yatra-login-border-radius-xs: 6px; |
| 29 | 29 | --yatra-login-transition: all 0.2s ease; |
| @@ -73,8 +73,68 @@ | ||
| 73 | 73 | .yatra-login-form-container { |
| 74 | 74 | padding: 30px; |
| 75 | 75 | } |
| 76 | 76 | |
| 77 | +/* Login / Sign Up tabs */ | |
| 78 | +.yatra-login-tabs { | |
| 79 | + display: flex; | |
| 80 | + gap: 4px; | |
| 81 | + margin-bottom: 24px; | |
| 82 | + border-bottom: 2px solid var(--yatra-login-border); | |
| 83 | +} | |
| 84 | + | |
| 85 | +.yatra-login-tab { | |
| 86 | + flex: 1; | |
| 87 | + background: none; | |
| 88 | + border: none; | |
| 89 | + padding: 12px 16px; | |
| 90 | + margin-bottom: -2px; | |
| 91 | + font-size: 0.95rem; | |
| 92 | + font-weight: 600; | |
| 93 | + color: var(--yatra-login-text-muted); | |
| 94 | + cursor: pointer; | |
| 95 | + border-bottom: 2px solid transparent; | |
| 96 | + transition: var(--yatra-login-transition-fast); | |
| 97 | +} | |
| 98 | + | |
| 99 | +.yatra-login-tab:hover { | |
| 100 | + color: var(--yatra-login-text); | |
| 101 | +} | |
| 102 | + | |
| 103 | +.yatra-login-tab.is-active { | |
| 104 | + color: var(--yatra-login-primary); | |
| 105 | + border-bottom-color: var(--yatra-login-primary); | |
| 106 | +} | |
| 107 | + | |
| 108 | +.yatra-login-tab:focus-visible { | |
| 109 | + outline: 2px solid var(--yatra-login-primary); | |
| 110 | + outline-offset: 2px; | |
| 111 | + border-radius: var(--yatra-login-border-radius-xs); | |
| 112 | +} | |
| 113 | + | |
| 114 | +/* Gentle fade so switching tabs (and the card growing/shrinking) isn't abrupt. | |
| 115 | + Only runs when a panel is rendered; the reduced-motion rule below disables it. */ | |
| 116 | +.yatra-auth-panel { | |
| 117 | + animation: yatraAuthPanelIn 0.2s ease; | |
| 118 | +} | |
| 119 | + | |
| 120 | +@keyframes yatraAuthPanelIn { | |
| 121 | + from { opacity: 0; transform: translateY(4px); } | |
| 122 | + to { opacity: 1; transform: translateY(0); } | |
| 123 | +} | |
| 124 | + | |
| 125 | +/* Title + intro line shown at the top of the register / forgot panels */ | |
| 126 | +.yatra-auth-panel-title { | |
| 127 | + text-align: center; | |
| 128 | + margin: 0 0 8px 0; | |
| 129 | + font-size: 1.5rem; | |
| 130 | +} | |
| 131 | + | |
| 132 | +.yatra-auth-panel-intro { | |
| 133 | + margin: 0 0 20px 0; | |
| 134 | + text-align: center; | |
| 135 | +} | |
| 136 | + | |
| 77 | 137 | .yatra-form-group { |
| 78 | 138 | margin-bottom: 20px; |
| 79 | 139 | } |
| 80 | 140 | |
| @@ -110,8 +170,14 @@ | ||
| 110 | 170 | .yatra-password-input-group { |
| 111 | 171 | position: relative; |
| 112 | 172 | } |
| 113 | 173 | |
| 174 | +/* Reserve room on the right so typed text / placeholder never runs under | |
| 175 | + the show/hide toggle. */ | |
| 176 | +.yatra-password-input-group .yatra-form-input { | |
| 177 | + padding-right: 44px; | |
| 178 | +} | |
| 179 | + | |
| 114 | 180 | .yatra-password-toggle { |
| 115 | 181 | position: absolute; |
| 116 | 182 | right: 12px; |
| 117 | 183 | top: 50%; |
| @@ -132,10 +198,10 @@ | ||
| 132 | 198 | .yatra-password-toggle:hover { |
| 133 | 199 | color: var(--yatra-login-primary); |
| 134 | 200 | } |
| 135 | 201 | |
| 136 | -.yatra-password-toggle:focus { | |
| 137 | - outline: 2px solid var(--yatra-login-primary-light); | |
| 202 | +.yatra-password-toggle:focus-visible { | |
| 203 | + outline: 2px solid var(--yatra-login-primary); | |
| 138 | 204 | outline-offset: 2px; |
| 139 | 205 | } |
| 140 | 206 | |
| 141 | 207 | .yatra-eye-icon, |
| @@ -340,9 +406,9 @@ | ||
| 340 | 406 | margin-bottom: 20px; |
| 341 | 407 | } |
| 342 | 408 | |
| 343 | 409 | .yatra-link { |
| 344 | - color: #3b82f6; | |
| 410 | + color: var(--yatra-primary, #3b82f6); | |
| 345 | 411 | text-decoration: none; |
| 346 | 412 | font-size: 0.875rem; |
| 347 | 413 | transition: color 0.3s ease; |
| 348 | 414 | } |
| @@ -347,9 +413,9 @@ | ||
| 347 | 413 | transition: color 0.3s ease; |
| 348 | 414 | } |
| 349 | 415 | |
| 350 | 416 | .yatra-link:hover { |
| 351 | - color: #2563eb; | |
| 417 | + color: var(--yatra-primary-dark, #2563eb); | |
| 352 | 418 | } |
| 353 | 419 | |
| 354 | 420 | .yatra-link-bold { |
| 355 | 421 | font-weight: 600; |
| @@ -437,6 +503,50 @@ | ||
| 437 | 503 | } |
| 438 | 504 | |
| 439 | 505 | .yatra-logged-in-actions { |
| 440 | 506 | flex-direction: column; |
| 507 | + } | |
| 508 | +} | |
| 509 | + | |
| 510 | +/* ============================================ | |
| 511 | + MOBILE-INPUT HYGIENE | |
| 512 | + ============================================ | |
| 513 | + Match the booking-form mobile rules so the customer's full | |
| 514 | + journey (browse → book → login → register → manage account) | |
| 515 | + feels consistent on phones. Two concerns are addressed at | |
| 516 | + <=768px: | |
| 517 | + | |
| 518 | + 1. iOS auto-zoom: any input below 16px computed font-size | |
| 519 | + triggers a 1.25x viewport zoom on focus. The desktop styles | |
| 520 | + use 1rem (16px) already, but we re-declare it inside the | |
| 521 | + media query to win any theme override that might lower it. | |
| 522 | + 2. Tap-target comfort: bump min-height to 48px and pad the | |
| 523 | + input vertically for thumb-friendly hit areas. Apple HIG | |
| 524 | + minimum is 44pt; Material is 48dp — we use the larger so | |
| 525 | + portrait phone use isn't cramped. | |
| 526 | + ============================================ */ | |
| 527 | +@media (max-width: 768px) { | |
| 528 | + .yatra-login-shortcode .yatra-form-input, | |
| 529 | + .yatra-login-shortcode input[type="text"], | |
| 530 | + .yatra-login-shortcode input[type="email"], | |
| 531 | + .yatra-login-shortcode input[type="password"], | |
| 532 | + .yatra-login-shortcode input[type="tel"], | |
| 533 | + .yatra-login-shortcode select, | |
| 534 | + .yatra-login-shortcode textarea { | |
| 535 | + font-size: 16px; | |
| 536 | + min-height: 48px; | |
| 537 | + padding-top: 14px; | |
| 538 | + padding-bottom: 14px; | |
| 539 | + } | |
| 540 | + | |
| 541 | + /* | |
| 542 | + * The submit / primary-action button on login + register | |
| 543 | + * gets the same 48px floor so the CTA matches input height | |
| 544 | + * and is easy to tap one-handed. | |
| 545 | + */ | |
| 546 | + .yatra-login-shortcode button[type="submit"], | |
| 547 | + .yatra-login-shortcode .yatra-btn-primary, | |
| 548 | + .yatra-login-shortcode .yatra-submit-btn { | |
| 549 | + min-height: 48px; | |
| 550 | + font-size: 16px; | |
| 441 | 551 | } |
| 442 | 552 | } |
