.login-form { display: flex; flex-direction: column; gap: var(--space-6); } .login-form__fields { display: flex; flex-direction: column; gap: var(--space-5); } .login-form__password-group { display: flex; flex-direction: column; gap: var(--space-2); } .login-form__forgot { align-self: flex-start; font-family: var(--font-body); font-size: var(--fs-sm); color: #767676; text-decoration: underline; } .login-form__forgot:hover { color: var(--color-canon-red-alt); } .login-form__actions { display: flex; flex-direction: column; gap: var(--space-5); } .login-form__honeypot { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .login-form__submit:disabled { opacity: 0.7; cursor: not-allowed; } .login-form__google { display: flex; flex-direction: column; gap: var(--space-5); visibility: hidden; } .login-form__google.is-ready { visibility: visible; } .auth-google { position: relative; height: 45px; } .auth-google__face { position: absolute; inset: 0; pointer-events: none; } .auth-google:focus-within .auth-google__face { outline: 2px solid var(--color-canon-red-alt); outline-offset: 2px; } .auth-google__gis { position: absolute; inset: 0; opacity: 0; overflow: hidden; } .auth-google__gis > div, .auth-google__gis > div > div, .auth-google__gis iframe { width: 100% !important; height: 100% !important; } .login-form__signup { margin: 0; text-align: center; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-md); color: var(--color-text-dark); } .login-form__signup a { font-weight: var(--fw-bold); color: var(--color-canon-red-alt); text-decoration: none; } .login-form__signup a:hover { color: var(--color-canon-red-hover); text-decoration: underline; } .auth-field__input.invalid { border-color: var(--color-canon-red); } .auth-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .auth-divider__line { flex: 1; height: 1px; background-color: #cacaca; } .auth-divider__label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-md); color: #868686; } .login-modal__dialog { position: relative; width: 100%; max-width: 590px; z-index: 1; } .login-modal__content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8); background: var(--color-white); border-radius: 15px; box-shadow: 0 4px 4px 0 rgba(90, 90, 90, 0.25); padding: 60px 30px; } .login-modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-text-dark); font-size: 1.2rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .login-modal__close:hover { background: var(--color-canon-red-soft); color: var(--color-canon-red-alt); } .login-modal__icon { font-size: 45px; color: var(--color-canon-red-alt); } .login-modal__title { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 2.5rem; color: var(--color-canon-red-alt); } .login-modal__body { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; font-family: var(--font-body); font-size: var(--fs-md); color: var(--color-text-dark); text-align: left; } .login-modal__body p { margin: 0; } .login-modal__lead { text-align: center; font-weight: var(--fw-medium); } .login-modal__link { color: var(--color-canon-red-alt); text-decoration: underline; } .login-modal__link:hover { color: var(--color-canon-red-hover); }