| @@ -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, |
| @@ -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 | } |
