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