/* * The identity screens' stylesheet (spec platform-00 §4 — no CSS * framework). M8 · Epic D (#72/#73/#74/#75): every color, space, radius, * shadow, and type value reads a shared design token from tokens.css * (loaded before this file) — the SAME cross-stack contract the React * SPAs consume (audit X7). Zero private brand hexes here. The body font * is the self-hosted Inter (fonts.css); codes/secrets use JetBrains Mono. * Dark mode is inherited from tokens.css via [data-theme] on — a * value swap, no per-color work below. Contrast on every control/status * ≥ 4.5:1; status is never conveyed by color alone (each state carries * its own copy). */ * { box-sizing: border-box; } /* ═══════════════ page shell ═══════════════ */ .auth-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--line-height-md); color: var(--color-fg); background: linear-gradient(180deg, var(--color-bg-subtle), var(--color-bg) 65%); -webkit-font-smoothing: antialiased; } /* 1px geometry below is the standard visually-hidden technique. */ .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 10; background: var(--color-surface); color: var(--color-fg); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .auth-body :focus-visible { outline: var(--focus-ring-width) solid var(--color-ring); outline-offset: var(--focus-ring-offset); } /* Page-enter: a calm fade + rise on the auth card (QA #200 AUTH-3), using the shared motion tokens and gated off under reduced motion. One rule covers all three screens (sign-in / register / forgot) + the --hero/--wide modifiers, since they are modifiers on this same element. */ @keyframes auth-page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Non-hero screens: a calm, single elevated card under the logo. */ .auth-shell { width: 100%; max-width: 27rem; animation: auth-page-enter var(--duration-base) var(--ease-standard) both; } @media (prefers-reduced-motion: reduce) { .auth-shell { animation: none; } } .auth-panel { display: flex; flex-direction: column; gap: var(--space-5); } /* ═══════════════ split-screen hero (#73) ═══════════════ */ .auth-shell--hero { max-width: 64rem; display: grid; grid-template-columns: 1fr; background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; } .auth-shell--hero .auth-panel { justify-content: center; padding: var(--space-10) var(--space-9); background: var(--color-surface); } .auth-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 34rem; padding: var(--space-10); color: var(--color-neutral-100); background: linear-gradient(155deg, var(--color-brand-800), var(--color-ink) 55%, var(--color-brand-950)); } .auth-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .auth-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-5); } .auth-hero__tagline { margin: 0; max-width: 20ch; font-family: var(--font-display); font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); color: var(--color-neutral-50); } /* Below the split breakpoint the hero folds away; the form stays one-tab-from-content and the logo persists in the panel. */ @media (min-width: 60rem) { .auth-shell--hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } @media (max-width: 59.999rem) { .auth-hero { display: none; } } /* ═══════════════ logo lockup (#73) ═══════════════ */ .brand { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; } .brand__mark { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: block; } .brand__word { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: 1; color: var(--color-fg); } /* Hero brand: larger, light on the ink ground; the mark's tile drops so the luminous islands + teal horizon float on the "open water". */ .brand--hero .brand__mark { width: 2.5rem; height: 2.5rem; } .brand--hero .brand__mark rect:first-child { display: none; } .brand--hero .brand__word { font-size: var(--font-size-2xl); color: var(--color-neutral-50); } /* ═══════════════ card ═══════════════ */ .auth-card { background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: var(--space-8); } /* Inside the hero shell the surrounding panel is the surface, so the card itself goes flat (no double elevation). */ .auth-shell--hero .auth-card { background: transparent; box-shadow: none; border-radius: 0; padding: 0; } /* ═══════════════ wide shell (/sessoes — #115, D13) ═══════════════ */ /* The hero's generous width WITHOUT the brand hero panel: a broader card that lets the grouped session/device/security layout breathe and fan out on large viewports (AC-4). Below the breakpoint it stays a single calm column, exactly like the default card. */ .auth-shell--wide { max-width: 52rem; } /* ═══════════════ typography ═══════════════ */ h1 { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); color: var(--color-fg); } h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--font-size-lg); line-height: var(--line-height-lg); font-weight: var(--font-weight-semibold); color: var(--color-fg); } /* ═══════════════ forms ═══════════════ */ label { display: block; margin: var(--space-5) 0 var(--space-2); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-fg); } label.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-sm); color: var(--color-fg); cursor: pointer; } /* Real legal links inside the consent label (issue #195): accent + AA on the card surface; underlined so the affordance never relies on color. */ label.checkbox a { color: var(--color-accent); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 2px; } label.checkbox a:hover, label.checkbox a:focus-visible { color: var(--color-accent-hover); } input[type="text"], input[type="email"], input[type="password"] { display: block; width: 100%; min-height: var(--control-md); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-md); color: var(--color-fg); background: var(--color-surface); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover { border-color: var(--color-fg-muted); } input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible { border-color: var(--color-accent); } input::placeholder { color: var(--color-fg-muted); } /* Custom, on-token checkbox — the native box restyled (no markup change, so "checked" never enters the page HTML; state is CSS-only). The check uses --color-accent-fg so it stays legible on the accent in both themes (dark on bright teal in dark mode). */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0.12rem 0 0; display: inline-grid; place-content: center; border: 1.5px solid var(--color-fg-muted); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } input[type="checkbox"]::before { content: ""; width: 0.7rem; height: 0.7rem; transform: scale(0); transform-origin: center; transition: transform var(--duration-fast) var(--ease-out); background-color: var(--color-accent-fg); clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 84% 8%, 40% 68%); } input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); } input[type="checkbox"]:checked::before { transform: scale(1); } /* ═══════════════ buttons ═══════════════ */ button.primary, a.button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--control-md); margin-top: var(--space-5); padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-fg); font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs); transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } button.primary:hover, a.button:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-sm); } button.primary:active, a.button:active { transform: translateY(1px); } button.primary[disabled], button.primary:disabled { background: var(--color-border); color: var(--color-fg-muted); box-shadow: none; cursor: not-allowed; } button.secondary { min-height: var(--control-md); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } button.secondary:hover { background: var(--color-surface-hover); border-color: var(--color-fg-muted); } /* In-field visibility toggle (issue #195): the input keeps 100% of the field width; the eye icon button sits inside the field. The input reserves the icon area so text never underlaps it. */ .password-field { position: relative; } .password-field input { width: 100%; min-width: 0; padding-inline-end: calc(var(--control-sm) + var(--space-2)); } button.toggle-password { position: absolute; inset-inline-end: var(--space-2); top: 50%; transform: translateY(-50%); display: grid; place-content: center; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-fg-muted); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); } button.toggle-password:hover { color: var(--color-fg); } /* Icon geometry (the raw sizes below are the sanctioned icon exception). */ .toggle-password svg { width: 1.25rem; height: 1.25rem; } .toggle-password[aria-pressed="true"] .toggle-password__eye, .toggle-password:not([aria-pressed="true"]) .toggle-password__eye-off { display: none; } /* ═══════════════ feedback (status never by color alone) ═══════════════ */ /* The error banner [platform-08 §4.3; D2]: CALM palette — neutral surface, hairline border, INK left accent — never the danger ramp (reserved for destructive affordances, none on this surface). Severity is text-carried by .alert-severity; the leading icon is decorative. Mirrors the kernel ErrorBanner anatomy in CSS. */ .alert { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--color-border); border-left: 0.25rem solid var(--color-fg); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-sm); } /* Focus lands on the banner (tabindex=-1 autofocus); keep the ring OUTSIDE the box so it never overlaps the card header or fields. */ .alert:focus-visible { outline-offset: 2px; } /* Decorative leading icon (triangle-alert); severity is REAL text. */ .alert::before { content: ""; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; } .alert-content { flex: 1; min-width: 0; } /* The visible severity word — meaning text-carried, never color alone. */ .alert-severity { display: block; font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); } .alert a { color: var(--color-fg); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 2px; } /* Inline SUCCESS notice (renamed from the misnamed `.toast` [platform-08 D1 vocabulary]: it never floated and never auto-dismissed). */ .notice-success { border: 1px solid var(--color-success); border-left-width: 0.25rem; border-radius: var(--radius-md); background: var(--color-success-soft); color: var(--color-success-strong); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-sm); } /* ═══════════════ secondary text + strength meter ═══════════════ */ .note, .hint { color: var(--color-fg-muted); font-size: var(--font-size-sm); line-height: var(--line-height-sm); margin: var(--space-2) 0 0; } /* Inline field-level error (client-side pre-check, #226): the hint slot escalated to the danger token; the copy stays catalog-sourced (rendered server-side into data-*). */ .field-error { color: var(--color-danger); font-size: var(--font-size-sm); line-height: var(--line-height-sm); margin: var(--space-2) 0 0; } /* Strength: a token-colored bar PLUS its text label (issue #75 — never color alone). JS sets [data-strength-level]; the bar is decorative, the text ("Força da senha: fraca/…") carries the state. */ .strength { position: relative; margin: var(--space-3) 0 0; padding-top: calc(var(--space-2) + 0.3rem); color: var(--color-fg-muted); font-size: var(--font-size-sm); line-height: var(--line-height-sm); } .strength[hidden] { display: none; } .strength::before, .strength::after { content: ""; position: absolute; top: 0; left: 0; height: 0.3rem; border-radius: var(--radius-full); } .strength::before { width: 100%; background: var(--color-bg-subtle); } .strength::after { width: 0; background: var(--color-fg-muted); transition: width var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-standard); } .strength[data-strength-level="weak"]::after { width: 33%; background: var(--color-danger); } .strength[data-strength-level="fair"]::after { width: 66%; background: var(--color-warning); } .strength[data-strength-level="strong"]::after { width: 100%; background: var(--color-success); } /* ═══════════════ links ═══════════════ */ .links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); font-size: var(--font-size-sm); } .links a, p a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--font-weight-medium); } .links a:hover, p a:hover { color: var(--color-accent-hover); } /* ═══════════════ sessions & devices (#75 — designed rows) ═══════════════ */ .session-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .session-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-subtle); } .session-row__glyph { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: grid; place-content: center; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); } .session-row__glyph svg { width: 1.25rem; height: 1.25rem; } .session-row__body { flex: 1; min-width: 0; } .session-row__title { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--font-weight-medium); color: var(--color-fg); } .session-row__meta { margin: var(--space-1) 0 0; color: var(--color-fg-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--font-feature-tabular); } .session-row__body .hint { margin-top: var(--space-1); } .session-row__action { flex: 0 0 auto; margin: 0; } .session-empty { margin: var(--space-4) 0 0; padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-fg-muted); text-align: center; } .badge { display: inline-flex; align-items: center; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); line-height: var(--line-height-xs); font-weight: var(--font-weight-semibold); } /* Grouped sections (Suas sessões · Dispositivos reconhecidos · Segurança da conta). One calm column by default; on the wide shell at ≥ 900px the groups fan into two columns without horizontal scroll, folding back to one below the breakpoint (AC-4). */ .session-groups { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .session-group { display: flex; flex-direction: column; gap: var(--space-2); } .session-group > h2 { margin: 0; } @media (min-width: 56.25rem) { .auth-shell--wide .session-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } /* The security block anchors full-width beneath the two live lists. */ .auth-shell--wide .session-group--security { grid-column: 1 / -1; } } .security-links { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .security-link { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-subtle); } .security-link a { font-weight: var(--font-weight-medium); } .security-link .hint { margin: var(--space-1) 0 0; } /* ═══════════════ one-time code + secrets ═══════════════ */ fieldset.otp { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: var(--space-4) 0 0; } fieldset.otp input.otp-code { width: 2.75rem; height: var(--control-lg); padding: 0; text-align: center; font-size: var(--font-size-2xl); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); transition: border-color var(--duration-fast) var(--ease-standard); } fieldset.otp input.otp-code:focus-visible { border-color: var(--color-accent); } .otp-code, .manual-secret { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--font-feature-tabular); word-break: break-all; } ul.recovery-codes { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-subtle); font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--font-feature-tabular); columns: 2; column-gap: var(--space-6); } ul.recovery-codes li { margin: var(--space-1) 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ═══════════════ two-factor enrolment (/seguranca/mfa) ═══════════════ */ .mfa-qr { display: flex; justify-content: center; margin: var(--space-5) 0; } .mfa-qr canvas { width: 12rem; height: 12rem; image-rendering: pixelated; /* Quiet zone stays literal white in BOTH themes (scanner contrast) — the dedicated theme-invariant token, not the themed surface color. */ border: var(--space-2) solid var(--color-qr-frame); border-radius: var(--radius-md); background: var(--color-qr-frame); box-shadow: var(--shadow-sm); } .mfa-key { margin: var(--space-2) 0 var(--space-5); text-align: center; } .mfa-key code { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.12em; } .mfa-status { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-subtle); } .mfa-status__title { margin: 0; font-weight: 600; color: var(--color-success, var(--color-fg)); } .mfa-manage { display: flex; flex-direction: column; gap: var(--space-5); } .mfa-manage form { margin: 0; } .mfa-remove-confirm { margin-top: var(--space-2); } .recovery-actions { display: flex; gap: var(--space-3); margin: var(--space-4) 0; flex-wrap: wrap; } .recovery-confirm { margin-top: var(--space-5); } button.danger { color: var(--color-danger-fg); background: var(--color-danger); border: 1px solid transparent; } button.danger:hover { filter: brightness(0.95); } /* ═══════════════ small screens ═══════════════ */ @media (max-width: 48rem) { .auth-body { padding: var(--space-4); } .auth-card { padding: var(--space-6); } .auth-shell--hero .auth-panel { padding: var(--space-8) var(--space-6); } }