/* ============================================================================
/register page stylesheet
Evolves the register screen onto the shared Lernavio auth identity that
already ships on /login (static/css/style_index.css): wallpaper, frosted
panel, glass fields, blue gradient CTA, atmosphere layers, entrance
animations. Every value below resolves to a token already declared by
static/css/app_theme.css (semantic tokens) or static/css/style_index.css
(auth brand values / :root custom properties) - see
docs/gui-redesign/register/design-brief.md section 6 (decisions D1-D10)
and section 7 for the exact mapping table.
Scope: register only for this phase (design-brief.md section 7). Login,
forgot-password, reset-password and the generic auth-message screen are
untouched.
========================================================================= */
:root {
/* Register carries five fields plus a role choice plus a legal gate, so the
panel is wider than login's 420px default (design-brief.md section 3,
"Evolved"). This only affects this page: register.css is loaded only by
register.html. */
--panel-w: 560px;
/* Page-level aliases -> always resolve back to an app_theme.css or
style_index.css token. No new colour is introduced (design-brief D1/D3). */
--auth-accent: var(--info);
--auth-accent-ring: color-mix(in srgb, var(--auth-accent) 16%, transparent);
--auth-danger-ring: color-mix(in srgb, var(--danger) 16%, transparent);
/* README_CSS.md section 2.3/2.9 + "Auth form controls": inputs 44-48px,
radius scales with block size, auth password toggle 32x32 / 20px icon. */
--auth-field-radius: var(--radius-md);
--auth-block-radius: var(--radius-lg);
--auth-field-h: 48px;
--auth-gap: 14px;
}
/* ---------------------------------------------------------------------------
Page frame: scrollable auth column (design-brief D6). The single
login-only breakpoint / body{overflow:hidden} clipping risk flagged by the
audit is replaced by a normal scrollable column so short viewports never
trap content behind an unreachable submit button.
------------------------------------------------------------------------- */
body.register-page {
min-height: 100dvh;
overflow: visible;
overflow-x: hidden;
}
/* The idle "shellFloat" vertical bob login uses is deliberately not applied
here: a tall multi-field form drifting while being filled in is
distracting (design-brief D6 / section 4 "Panel"). The soft shadow pulse
beneath the panel (.login-shell::before) is unrelated to shell position
and stays as-is. */
.login-shell {
animation: none;
}
/* The form state's own .login-bottom-links foot strip already supplies its
bottom spacing (matches login's own box, which never uses the
--auth-page modifier either). The verify state has no foot strip, so it
needs the panel's own bottom padding restored - same responsive scale
style_index.css already defines for .login-box--auth-page, applied only
while that state is visible. */
.login-box:has(.auth-verify:not([hidden])) {
padding-bottom: 26px;
}
@media (max-width: 980px) {
.login-box:has(.auth-verify:not([hidden])) {
padding-bottom: 28px;
}
}
@media (max-width: 640px) {
.login-box:has(.auth-verify:not([hidden])) {
padding-bottom: 24px;
}
}
/* ---------------------------------------------------------------------------
Head: title / subtitle / note. Login has no equivalent block, so this is
page-local, but every value is a token.
------------------------------------------------------------------------- */
.auth-head {
margin-bottom: 18px;
text-align: center;
}
.auth-subtitle {
margin: 8px 0 0;
color: var(--text-main);
font-size: var(--app-theme-font-size-lg);
font-weight: 700;
line-height: 1.3;
}
.auth-note {
margin: 4px 0 0;
color: var(--field-text);
font-size: var(--app-theme-font-size-sm);
line-height: 1.45;
}
/* ---------------------------------------------------------------------------
Context banner (referral / organization invitation). Reuses the glass
field-surface tokens (--field-bg-1/2, --field-border) already declared by
style_index.css instead of inventing a new surface colour.
------------------------------------------------------------------------- */
.auth-context {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
padding: 12px 14px;
border: 1px solid var(--field-border);
border-left: 3px solid var(--auth-accent);
border-radius: var(--auth-block-radius);
background: linear-gradient(180deg, var(--field-bg-1), var(--field-bg-2));
color: var(--text-main);
font-size: var(--app-theme-font-size-sm);
line-height: 1.5;
}
.auth-context[hidden] {
display: none;
}
.auth-context__icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 1px;
opacity: 0.85;
}
.auth-context__icon--alert {
display: none;
}
.auth-context.is-error {
border-color: color-mix(in srgb, var(--danger) 28%, var(--field-border));
border-left-color: var(--danger);
background: var(--danger-bg);
color: var(--danger);
}
.auth-context.is-error .auth-context__icon--info {
display: none;
}
.auth-context.is-error .auth-context__icon--alert {
display: block;
}
.auth-context__text strong {
font-weight: 800;
}
/* ---------------------------------------------------------------------------
Field grid + "auth field" atom (design-brief section 7: proposed reusable
pattern, scoped to register for this phase). Named .auth-field* rather
than login's .field/.field--* so it cannot collide with the type-selector
rules style_index.css already defines for login's 58px fields - both
stylesheets are loaded on this page and must not fight over the same
selector while producing different documented sizes (login stays 58px,
register is 44-48px per README_CSS.md 2.9).
------------------------------------------------------------------------- */
.auth-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--auth-gap) var(--auth-gap);
}
.auth-field {
min-width: 0;
position: relative;
}
.auth-field--email {
grid-column: 1 / -1;
}
.auth-field__label {
display: block;
margin-bottom: 6px;
color: var(--text-main);
font-size: var(--app-theme-font-size-xs);
font-weight: 700;
line-height: 1.25;
}
.auth-field__req {
margin-left: 3px;
color: var(--danger);
}
.auth-field__shell {
position: relative;
}
.auth-field__shell::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
z-index: 2;
width: 20px;
height: 20px;
transform: translateY(-50%);
opacity: 0.72;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
/* Field icons: same drawing language/stroke colour as login's
.field--login/.field--password/.field--email icons (style_index.css).
Name and email/password reuse those exact icons; login and password2 are
the two genuinely new icons this design needs (design-brief section 7),
drawn in the identical stroke/weight/viewBox convention. */
.auth-field--name .auth-field__shell::before {
background-image: url('data:image/svg+xml;utf8,');
}
.auth-field--login .auth-field__shell::before {
background-image: url('data:image/svg+xml;utf8,');
}
.auth-field--email .auth-field__shell::before {
background-image: url('data:image/svg+xml;utf8,');
}
.auth-field--password .auth-field__shell::before {
background-image: url('data:image/svg+xml;utf8,');
}
.auth-field--password2 .auth-field__shell::before {
background-image: url('data:image/svg+xml;utf8,');
}
.auth-field__input {
width: 100%;
height: var(--auth-field-h);
padding: 0 44px;
border: 1.5px solid var(--field-border);
border-radius: var(--auth-field-radius);
background: linear-gradient(180deg, var(--field-bg-1), var(--field-bg-2));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
0 3px 12px rgba(70, 96, 148, 0.04);
color: var(--field-text);
font: 400 var(--app-theme-font-size-md) / 1.2 "Noto Sans", "Roboto", "Geist", sans-serif;
outline: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.auth-field__input::placeholder {
color: var(--field-placeholder);
}
.auth-field__input:hover {
border-color: color-mix(in srgb, var(--field-border) 60%, var(--auth-accent) 20%);
}
.auth-field__input:focus {
border-color: var(--auth-accent);
box-shadow:
0 0 0 4px var(--auth-accent-ring),
inset 0 1px 0 rgba(255, 255, 255, 0.48);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.24));
}
/* Browser autofill must not repaint over the leading icon (README_CSS.md
"Auth form controls"). */
.auth-field__input:-webkit-autofill,
.auth-field__input:-webkit-autofill:hover,
.auth-field__input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--field-text);
caret-color: var(--field-text);
transition: background-color 9999s ease-out;
-webkit-box-shadow:
0 0 0 1000px rgba(255, 255, 255, 0.22) inset,
inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.auth-field__input::-ms-reveal,
.auth-field__input::-ms-clear {
display: none;
width: 0;
height: 0;
}
.auth-field__input::-webkit-credentials-auto-fill-button,
.auth-field__input::-webkit-strong-password-auto-fill-button,
.auth-field__input::-webkit-textfield-decoration-container {
display: none !important;
visibility: hidden;
pointer-events: none;
}
/* Invalid state: single --danger token (design-brief D3), never colour-only -
border + text + glyph + message. */
.auth-field.is-invalid .auth-field__input {
border-color: var(--danger);
box-shadow: 0 0 0 3px var(--auth-danger-ring), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.auth-field.is-invalid .auth-field__shell::before {
opacity: 0.9;
}
/* Availability confirmed - presentation of the existing /register/check
reply already received by the page; no new request, no behaviour change
(design-brief section 8 item 7). */
.auth-field__status {
position: absolute;
right: 12px;
top: 50%;
z-index: 2;
width: 20px;
height: 20px;
transform: translateY(-50%);
opacity: 0;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
transition: opacity 0.18s ease;
pointer-events: none;
}
.auth-field.is-available .auth-field__status {
opacity: 1;
}
.auth-field.is-available .auth-field__input {
border-color: color-mix(in srgb, var(--success) 44%, var(--field-border));
}
.auth-field__error {
display: none;
margin: 6px 0 0;
color: var(--danger);
font-size: var(--app-theme-font-size-xs);
font-weight: 600;
line-height: 1.35;
}
.auth-field__error.is-visible {
display: block;
}
.auth-field__error.is-visible::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;
vertical-align: -2px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* ---------------------------------------------------------------------------
Password toggle: reuses login's .field-password-toggle class verbatim
(design-brief D4) for size/shell/hover - only the :focus-visible ring is
overridden here. style_index.css's shared rule (outline: none + a 3px ring
at 12% opacity) predates this redesign and is shared with /login, so it is
left unmodified there (out of this task's approved scope); register gets
its own real 2px accent outline via this page-scoped selector, matching
every other new interactive control on this page (design-brief D4 / section
11 "Focus and keyboard": "a real 2px accent outline; the existing rule that
strips all focus styling is deleted" - deleted for register's instance of
the control, scoped by body.register-page so login is unaffected).
------------------------------------------------------------------------- */
body.register-page .field-password-toggle:focus,
body.register-page .field-password-toggle:focus-visible {
outline: 2px solid var(--auth-accent);
outline-offset: 2px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}
/* ---------------------------------------------------------------------------
Role: segmented control in Lernavio glass (README_CSS.md 2.10, design-brief
D5). Built on real input[type=radio] elements inside a fieldset/legend.
------------------------------------------------------------------------- */
.auth-role {
margin: 18px 0 0;
padding: 0;
border: 0;
}
.auth-role[hidden] {
display: none;
}
.auth-role__legend {
display: block;
margin-bottom: 6px;
padding: 0;
color: var(--text-main);
font-size: var(--app-theme-font-size-xs);
font-weight: 700;
line-height: 1.25;
}
.auth-role__track {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
padding: 4px;
border: 1px solid var(--field-border);
border-radius: var(--auth-block-radius);
background: linear-gradient(180deg, var(--field-bg-1), var(--field-bg-2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.auth-role__option {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
/* README_CSS.md accessibility acceptance: segments are an interactive
target and must stay >=44px high (design-brief section 11), a 2px bump
from the prototype's 42px reference value. */
min-height: 44px;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: var(--auth-field-radius);
color: var(--field-text);
font-size: var(--app-theme-font-size-sm);
font-weight: 700;
line-height: 1.2;
text-align: center;
cursor: pointer;
user-select: none;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.auth-role__icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
opacity: 0.72;
}
.auth-role__option input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.auth-role__option:hover {
color: var(--text-main);
background: rgba(255, 255, 255, 0.34);
}
/* Active segment: white-glass fill, accent border/label (README_CSS.md 2.10:
"активный таб - белый или слегка выделенный"). --bg-panel is solid white,
an existing app_theme.css token, so no new literal is needed here. */
.auth-role__option:has(input:checked) {
border-color: var(--auth-accent);
background: var(--bg-panel);
color: var(--auth-accent);
box-shadow: 0 2px 8px rgba(58, 85, 132, 0.10);
}
.auth-role__option:has(input:focus-visible) {
outline: 2px solid var(--auth-accent);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
Legal acceptance block (design-brief D7): same token set as
legal_acceptance.css, login's "Remember me" checkbox reused as the visual
recipe for the legal-acceptance checkbox.
------------------------------------------------------------------------- */
.auth-legal {
margin-top: 18px;
padding: 12px 14px;
border: 1px solid var(--field-border);
border-radius: var(--auth-block-radius);
background: linear-gradient(180deg, var(--field-bg-1), var(--field-bg-2));
color: var(--text-main);
font-size: var(--app-theme-font-size-sm);
line-height: 1.5;
}
.auth-legal[hidden] {
display: none;
}
.auth-legal__row {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
/* Checkbox visual recipe copied from style_index.css .remember
input[type="checkbox"] (login's "Remember me" control), reused verbatim
per design-brief D7 - same border/fill/check-icon/focus treatment, scoped
to this block's own selector since the markup shapes differ. */
.auth-legal__row input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 2px 0 0;
flex: 0 0 auto;
appearance: none;
-webkit-appearance: none;
border: 1.5px solid rgba(146, 171, 212, 0.9);
border-radius: 6px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.24));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.42),
0 1px 3px rgba(58, 85, 132, 0.08);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-legal__row input[type="checkbox"]:hover {
border-color: rgba(96, 136, 206, 0.92);
}
.auth-legal__row input[type="checkbox"]:focus-visible {
outline: 2px solid var(--auth-accent);
outline-offset: 2px;
}
.auth-legal__row input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.auth-legal__row input[type="checkbox"]:checked {
border-color: var(--auth-accent);
background:
url('data:image/svg+xml;utf8,') center / 12px 12px no-repeat,
linear-gradient(180deg, var(--button-from), var(--button-to));
box-shadow: 0 6px 12px rgba(47, 124, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.auth-legal a {
color: var(--link);
font-weight: 700;
}
.auth-legal a:focus-visible {
outline: 2px solid var(--auth-accent);
outline-offset: 2px;
}
.auth-legal__error {
display: none;
margin: 8px 0 0 28px;
color: var(--danger);
font-size: var(--app-theme-font-size-xs);
font-weight: 600;
line-height: 1.4;
}
.auth-legal.is-error .auth-legal__error {
display: block;
}
/* ---------------------------------------------------------------------------
Submit: full-width gradient action (design-brief section 8 item 11).
Gradient/shadow are consumed via var() from style_index.css tokens, so no
new colour is introduced.
------------------------------------------------------------------------- */
.auth-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
margin-top: 20px;
border: 0;
border-radius: var(--auth-block-radius);
background: linear-gradient(90deg, var(--button-from), var(--button-to));
box-shadow: var(--button-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
color: var(--text-on-accent);
font: 800 var(--app-theme-font-size-lg) / 1.2 "Noto Sans", "Roboto", "Geist", sans-serif;
letter-spacing: 0.01em;
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.auth-submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(40, 105, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.40);
filter: saturate(1.03);
}
.auth-submit:active:not(:disabled) {
transform: translateY(0);
}
.auth-submit:focus-visible {
outline: 3px solid var(--text-on-accent);
outline-offset: 2px;
}
.auth-submit:disabled {
background: var(--bg-muted);
box-shadow: none;
color: var(--text-secondary);
cursor: not-allowed;
opacity: 0.85;
transform: none;
}
.auth-submit__spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: var(--text-on-accent);
border-radius: 50%;
animation: authSpin 0.8s linear infinite;
}
.auth-submit[aria-busy="true"] .auth-submit__spinner {
display: block;
}
.auth-submit[aria-busy="true"] {
cursor: progress;
}
@keyframes authSpin {
to {
transform: rotate(360deg);
}
}
/* ---------------------------------------------------------------------------
Verification state (design-brief D9): pre-existing hidden block toggled
via [hidden], filled with text nodes - no innerHTML replacement.
------------------------------------------------------------------------- */
.auth-verify {
text-align: center;
}
.auth-verify[hidden] {
display: none;
}
.auth-verify__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border: 1px solid var(--field-border);
border-radius: 50%;
background: rgba(255, 255, 255, 0.44);
}
.auth-verify__icon img {
width: 28px;
height: 28px;
opacity: 0.85;
}
.auth-verify__text {
margin: 0 0 20px;
color: var(--text-main);
font-size: var(--app-theme-font-size-md);
line-height: 1.55;
}
.auth-verify__text strong {
font-weight: 800;
overflow-wrap: anywhere;
}
.auth-verify__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 18px;
margin-top: 16px;
}
.auth-verify__actions a {
color: var(--link);
font-size: var(--app-theme-font-size-sm);
font-weight: 700;
text-decoration: none;
}
.auth-verify__actions a:hover {
text-decoration: underline;
}
.auth-verify__actions a:focus-visible {
outline: 2px solid var(--auth-accent);
outline-offset: 2px;
}
.auth-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 8px 18px;
border: 1.5px solid var(--field-border);
border-radius: var(--auth-field-radius);
background: rgba(255, 255, 255, 0.42);
color: var(--text-main);
font: 700 var(--app-theme-font-size-md) / 1.2 "Noto Sans", "Roboto", "Geist", sans-serif;
cursor: pointer;
}
.auth-secondary:hover:not(:disabled) {
border-color: var(--auth-accent);
color: var(--auth-accent);
}
.auth-secondary:focus-visible {
outline: 2px solid var(--auth-accent);
outline-offset: 2px;
}
.auth-secondary:disabled {
color: var(--text-muted);
cursor: not-allowed;
opacity: 0.7;
}
/* ---------------------------------------------------------------------------
Responsive (design-brief section 9). Viewport media queries, matching the
pattern style_index.css already uses for /login (980px / 640px
breakpoints) rather than the prototype's container-query harness, which
only existed to support the prototype's side-by-side viewport switcher.
------------------------------------------------------------------------- */
@media (max-width: 1023px) {
:root {
--panel-w: 520px;
--auth-field-h: 52px;
}
.auth-role__option {
min-height: 46px;
}
.auth-submit {
height: 54px;
}
}
@media (max-width: 767px) {
:root {
--panel-w: 460px;
}
.auth-grid {
grid-template-columns: minmax(0, 1fr);
}
.auth-field--email {
grid-column: auto;
}
}
@media (max-width: 480px) {
:root {
--auth-field-h: 50px;
}
.auth-submit {
height: 52px;
font-size: 16px;
}
.auth-role__option {
padding: 8px 6px;
}
}
/* Very narrow / long localized role labels: segments stack instead of
truncating (design-brief section 9, "≤340"). */
@media (max-width: 340px) {
.auth-role__track {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.auth-submit__spinner {
animation: none !important;
}
.auth-submit:hover:not(:disabled) {
transform: none;
}
}