.auth-page, .auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; } .auth-page { position: relative; } .auth-hero { position: relative; z-index: 0; display: flex; flex-direction: column; height: clamp(220px, 40vh, 320px); overflow: hidden; color: var(--color-white); } .auth-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--auth-hero-position, center top); background-color: #1a1a1a; } .auth-hero__overlay { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.44); } .auth-hero__logo-row { padding: var(--space-4) var(--page-gutter); } .auth-page__logo { display: inline-block; line-height: 0; transition: opacity var(--duration-fast) var(--ease-out); } .auth-page__logo:hover { opacity: 0.9; } .auth-page__logo img { width: clamp(96px, 22vw, 153px); height: auto; } .auth-hero__intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--page-gutter) var(--space-4); text-align: center; } .auth-page__title { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-bold); } .auth-page__title--hero { font-size: clamp(1.5rem, 7vw, 1.875rem); color: var(--color-white); } .auth-page__title--card { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--auth-card-title-color, var(--color-black)); text-align: center; } .auth-page__credit { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); white-space: nowrap; } .auth-page__credit--hero { font-size: var(--fs-xs); color: var(--color-white); } .auth-page__credit--footer { font-size: var(--fs-sm); color: var(--color-white); } .auth-page__avatar { border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; } .auth-page__avatar--sm { width: 25px; height: 25px; } .auth-page__avatar--lg { width: 44px; height: 44px; } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 480px; margin-inline: auto; padding: clamp(24px, 6vw, 40px) var(--page-gutter); background-color: var(--color-white); display: flex; flex-direction: column; gap: var(--space-6); } .auth-page__footer { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--page-gutter); } .auth-page__copyright { margin: 0; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; } .auth-btn { width: 100%; height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; border-radius: 10px; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-md); cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .auth-btn:active { transform: scale(0.98); } .auth-btn:focus-visible { outline: 2px solid var(--color-canon-red-alt); outline-offset: 2px; } .auth-btn:disabled { background-color: #e5e7eb; color: #99a1af; border-color: transparent; cursor: not-allowed; } .auth-btn--primary { background-color: var(--color-canon-red-alt); color: var(--color-white); } .auth-btn--primary:hover { background-color: var(--color-canon-red); color: var(--color-white); text-decoration: none; } .auth-btn--google { background-color: #e9e9e9; color: #050505; } .auth-btn--google:hover { background-color: #dcdcdc; } .auth-btn--google img { display: block; } .auth-btn--outline { background-color: transparent; color: var(--color-canon-red-alt); border: 1.6px solid var(--color-canon-red-alt); } .auth-btn--outline:hover { background-color: var(--color-canon-red-soft); } .auth-field { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; } .auth-field__label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--color-text-dark); margin: 0; } .auth-field__control { position: relative; } .auth-field__input { width: 100%; height: 44px; padding-inline: 14px; border: 1px solid #d9d9d9; border-radius: var(--radius-sm); background: var(--color-white); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-dark); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .auth-field__input--password { padding-right: 44px; } .auth-field__input::placeholder { color: #80878f; } .auth-field__input:hover { border-color: var(--color-border-strong); } .auth-field__input:focus-visible { outline: none; border-color: var(--color-canon-red-alt); box-shadow: 0 0 0 3px var(--color-canon-red-soft); } .auth-field__input[aria-invalid="true"] { border-color: var(--color-canon-red); } .auth-field__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius-full); background: transparent; color: #919498; font-size: 1.2rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .auth-field__toggle:hover { background-color: var(--color-bg); color: var(--color-text-dark); } .auth-field__toggle:focus-visible { outline: 2px solid var(--color-canon-red-alt); outline-offset: 2px; } .auth-field__error { margin: 0; color: var(--color-canon-red); font-size: var(--fs-xs); } @media (min-width: 992px) { .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; } .auth-hero { position: absolute; inset: 0; height: auto; } .auth-hero__intro { display: none; } .auth-card { max-width: var(--auth-card-max-width, 536px); padding: 40px var(--auth-card-padding-inline, clamp(20px, 3vw, 32px)); border-radius: 15px; box-shadow: 0 4px 4px 0 rgba(90, 90, 90, 0.25); } .auth-page__title--card { display: block; } .auth-page__footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; justify-content: space-between; } .auth-page__credit--footer { display: flex; } .auth-page__copyright { color: #b5b5b5; text-align: right; } } @media (max-width: 991.98px) { .auth-page__title--card, .auth-page__credit--footer { display: none; } } .activated { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; } .activated__heading { margin: 0; display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--color-black); } .activated__icon { font-size: var(--fs-3xl); color: #06a10b; flex-shrink: 0; } .activated__icon--error { color: var(--color-canon-red); } .activated__body { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; width: 100%; } .activated__text { margin: 0; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--color-text-dark); }