/* ==========================================================================
CompadreAI auth shared stylesheet
Linked by every page under /auth/ with:
dark mode is the base theme. light is the alternate via
prefers-color-scheme. tokens match the Phase 8 theme system
(--bg, --bg-elev1, --bg-elev2, --fg, --fg-muted, --fg-subtle,
--border, --accent, --accent-fg, --danger, --success, --warning,
--info) so the Phase 8 toggle can drop in without a rewrite.
no third-party resources. system font stack only. one accent: teal.
========================================================================== */
/* --------------------------------------------------------------------------
1. tokens, dark base
-------------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* surfaces */
--bg: #0a0b0d;
--bg-elev1: #111318;
--bg-elev2: #171a20;
--bg-inset: #0d0f13;
/* text */
--fg: #e8eaef;
--fg-muted: #9aa1ae;
--fg-subtle: #6b7280;
/* lines */
--border: #23262e;
--border-strong: #2f333c;
/* accent, refined teal */
--accent: #2dd4bf;
--accent-hover: #3fe3cf;
--accent-active: #22b6a4;
--accent-fg: #04130f;
--accent-soft: rgba(45, 212, 191, 0.12);
--accent-line: rgba(45, 212, 191, 0.32);
/* status */
--danger: #f87171;
--danger-soft: rgba(248, 113, 113, 0.12);
--danger-line: rgba(248, 113, 113, 0.34);
--success: #34d399;
--success-soft: rgba(52, 211, 153, 0.12);
--success-line: rgba(52, 211, 153, 0.34);
--warning: #fbbf24;
--info: #60a5fa;
/* focus */
--focus: rgba(45, 212, 191, 0.5);
/* elevation */
--shadow-card:
0 1px 0 0 rgba(255, 255, 255, 0.02) inset,
0 18px 50px -22px rgba(0, 0, 0, 0.85);
/* shape */
--radius-sm: 7px;
--radius-md: 10px;
--radius-lg: 16px;
/* rhythm */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 22px;
--space-6: 30px;
/* type */
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
--font-mono: ui-monospace, Menlo, Consolas, "SF Mono", "Liberation Mono",
monospace;
--card-max: 420px;
}
/* --------------------------------------------------------------------------
2. light alternate via prefers-color-scheme
dark stays the base. these values override only when the operator
system asks for light and no explicit data-theme is set.
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--bg: #f5f6f8;
--bg-elev1: #ffffff;
--bg-elev2: #fbfbfc;
--bg-inset: #f1f2f5;
--fg: #14161a;
--fg-muted: #555c69;
--fg-subtle: #8a909c;
--border: #e4e7ec;
--border-strong: #d4d8df;
--accent: #0d9488;
--accent-hover: #0b8378;
--accent-active: #0a766c;
--accent-fg: #ffffff;
--accent-soft: rgba(13, 148, 136, 0.1);
--accent-line: rgba(13, 148, 136, 0.3);
--danger: #dc2626;
--danger-soft: rgba(220, 38, 38, 0.08);
--danger-line: rgba(220, 38, 38, 0.32);
--success: #0f9d6f;
--success-soft: rgba(15, 157, 111, 0.1);
--success-line: rgba(15, 157, 111, 0.32);
--warning: #b45309;
--info: #2563eb;
--focus: rgba(13, 148, 136, 0.42);
--shadow-card:
0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
0 14px 40px -24px rgba(16, 24, 40, 0.28);
}
}
/* explicit overrides for the Phase 8 toggle.
data-theme on wins over the system preference. */
:root[data-theme="light"] {
color-scheme: light;
--bg: #f5f6f8;
--bg-elev1: #ffffff;
--bg-elev2: #fbfbfc;
--bg-inset: #f1f2f5;
--fg: #14161a;
--fg-muted: #555c69;
--fg-subtle: #8a909c;
--border: #e4e7ec;
--border-strong: #d4d8df;
--accent: #0d9488;
--accent-hover: #0b8378;
--accent-active: #0a766c;
--accent-fg: #ffffff;
--accent-soft: rgba(13, 148, 136, 0.1);
--accent-line: rgba(13, 148, 136, 0.3);
--danger: #dc2626;
--danger-soft: rgba(220, 38, 38, 0.08);
--danger-line: rgba(220, 38, 38, 0.32);
--success: #0f9d6f;
--success-soft: rgba(15, 157, 111, 0.1);
--success-line: rgba(15, 157, 111, 0.32);
--warning: #b45309;
--info: #2563eb;
--focus: rgba(13, 148, 136, 0.42);
--shadow-card:
0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
0 14px 40px -24px rgba(16, 24, 40, 0.28);
}
/* data-theme="dark" simply re-asserts the base, so the toggle is symmetric. */
:root[data-theme="dark"] {
color-scheme: dark;
}
/* --------------------------------------------------------------------------
3. reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-5);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.5;
color: var(--fg);
background-color: var(--bg);
/* very subtle radial lift behind the card, no hard gradient fill */
background-image:
radial-gradient(
1100px 620px at 50% -8%,
var(--accent-soft),
transparent 60%
);
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg,
canvas {
display: block;
max-width: 100%;
}
::selection {
background: var(--accent-soft);
color: var(--fg);
}
/* --------------------------------------------------------------------------
4. shell + card
-------------------------------------------------------------------------- */
.auth-shell {
width: 100%;
max-width: var(--card-max);
margin: auto;
}
.auth-card {
width: 100%;
background: var(--bg-elev1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-card);
}
/* brand mark above the title, small and quiet */
.auth-brand {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-5);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-muted);
}
.auth-brand .mark {
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid var(--accent-line);
background: var(--accent-soft);
display: grid;
place-items: center;
color: var(--accent);
font-weight: 700;
letter-spacing: 0;
}
/* --------------------------------------------------------------------------
5. headings + copy
page headings are lowercase per the voice signature
-------------------------------------------------------------------------- */
.auth-title {
margin: 0 0 var(--space-2);
font-size: 22px;
line-height: 1.25;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--fg);
}
.auth-subtitle {
margin: 0 0 var(--space-5);
font-size: 14px;
color: var(--fg-muted);
}
.auth-subtitle:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
6. form layout, labels, inputs
-------------------------------------------------------------------------- */
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-5);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field-label,
label {
font-size: 13px;
font-weight: 550;
color: var(--fg);
}
.field-label .optional {
margin-left: var(--space-2);
font-weight: 400;
color: var(--fg-subtle);
}
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"] {
width: 100%;
font-family: inherit;
font-size: 15px;
line-height: 1.4;
color: var(--fg);
background: var(--bg-elev2);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 11px 13px;
transition:
border-color 0.14s ease,
box-shadow 0.14s ease,
background-color 0.14s ease;
appearance: none;
}
/* one-time-code inputs sit centered and spaced for TOTP entry */
input[inputmode="numeric"],
input[autocomplete="one-time-code"] {
font-family: var(--font-mono);
letter-spacing: 0.35em;
text-align: center;
}
.input::placeholder,
input::placeholder {
color: var(--fg-subtle);
}
.input:hover,
input:hover:not(:disabled):not(:focus) {
border-color: var(--fg-subtle);
}
.input:focus,
input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus);
background: var(--bg-elev1);
}
.input:disabled,
input:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* invalid state, set aria-invalid="true" on the input */
.input[aria-invalid="true"],
input[aria-invalid="true"] {
border-color: var(--danger);
}
.input[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px var(--danger-soft);
}
/* keep autofilled fields on-theme rather than the browser white wash */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--fg);
caret-color: var(--fg);
-webkit-box-shadow: 0 0 0 1000px var(--bg-elev2) inset;
box-shadow: 0 0 0 1000px var(--bg-elev2) inset;
transition: background-color 600000s 0s ease;
}
/* input paired with an inline button, for example show password */
.input-group {
position: relative;
display: flex;
align-items: stretch;
}
.input-group .input {
padding-right: 76px;
}
.input-group .input-action {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
height: calc(100% - 12px);
padding: 0 10px;
font-family: inherit;
font-size: 12px;
font-weight: 550;
color: var(--fg-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
}
.input-group .input-action:hover {
color: var(--fg);
background: var(--bg-inset);
}
/* --------------------------------------------------------------------------
7. hints + inline field errors
-------------------------------------------------------------------------- */
.field-hint,
.password-hint {
font-size: 12.5px;
line-height: 1.45;
color: var(--fg-subtle);
}
.password-hint {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.password-hint .dot {
flex: none;
width: 6px;
height: 6px;
margin-top: 6px;
border-radius: 50%;
background: var(--fg-subtle);
}
.password-hint.is-ok {
color: var(--success);
}
.password-hint.is-ok .dot {
background: var(--success);
}
/* inline error under a single field. hidden until populated by page JS */
.field-error {
font-size: 12.5px;
line-height: 1.45;
color: var(--danger);
}
.field-error:empty {
display: none;
}
/* --------------------------------------------------------------------------
8. aria-live status banner, success + error variants
markup:
page JS adds .is-error or .is-success and the message text.
-------------------------------------------------------------------------- */
.status {
display: none;
align-items: flex-start;
gap: var(--space-3);
padding: 11px 13px;
margin-bottom: var(--space-4);
font-size: 13.5px;
line-height: 1.45;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elev2);
color: var(--fg);
}
.status.is-visible,
.status.is-error,
.status.is-success,
.status.is-info {
display: flex;
}
.status::before {
content: "";
flex: none;
width: 8px;
height: 8px;
margin-top: 6px;
border-radius: 50%;
background: var(--fg-subtle);
}
.status.is-success {
border-color: var(--success-line);
background: var(--success-soft);
color: var(--success);
}
.status.is-success::before {
background: var(--success);
}
.status.is-error {
border-color: var(--danger-line);
background: var(--danger-soft);
color: var(--danger);
}
.status.is-error::before {
background: var(--danger);
}
.status.is-info {
border-color: var(--accent-line);
background: var(--accent-soft);
color: var(--accent);
}
.status.is-info::before {
background: var(--accent);
}
/* --------------------------------------------------------------------------
9. buttons, primary + secondary
-------------------------------------------------------------------------- */
.btn {
--btn-bg: transparent;
--btn-fg: var(--fg);
--btn-border: var(--border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
min-height: 44px;
padding: 11px 18px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
color: var(--btn-fg);
background: var(--btn-bg);
border: 1px solid var(--btn-border);
border-radius: var(--radius-md);
cursor: pointer;
user-select: none;
text-decoration: none;
transition:
background-color 0.14s ease,
border-color 0.14s ease,
color 0.14s ease,
transform 0.06s ease,
box-shadow 0.14s ease;
}
.btn:active {
transform: translateY(1px);
}
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-loading {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-primary {
--btn-bg: var(--accent);
--btn-fg: var(--accent-fg);
--btn-border: var(--accent);
}
.btn-primary:hover:not(:disabled):not(.is-loading) {
--btn-bg: var(--accent-hover);
--btn-border: var(--accent-hover);
}
.btn-primary:active:not(:disabled) {
--btn-bg: var(--accent-active);
--btn-border: var(--accent-active);
}
.btn-secondary {
--btn-bg: var(--bg-elev2);
--btn-fg: var(--fg);
--btn-border: var(--border-strong);
}
.btn-secondary:hover:not(:disabled):not(.is-loading) {
--btn-border: var(--fg-subtle);
--btn-bg: var(--bg-inset);
}
/* quiet variant for low-emphasis actions */
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--fg-muted);
--btn-border: transparent;
}
.btn-ghost:hover:not(:disabled):not(.is-loading) {
--btn-fg: var(--fg);
--btn-bg: var(--bg-inset);
}
.btn-danger {
--btn-bg: transparent;
--btn-fg: var(--danger);
--btn-border: var(--danger-line);
}
.btn-danger:hover:not(:disabled):not(.is-loading) {
--btn-bg: var(--danger-soft);
}
.btn-sm {
width: auto;
min-height: 34px;
padding: 7px 12px;
font-size: 13px;
}
/* inline loading spinner. swap the label class with .is-loading on submit */
.btn .spinner {
flex: none;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
opacity: 0.85;
animation: auth-spin 0.7s linear infinite;
}
.btn:not(.is-loading) .spinner {
display: none;
}
@keyframes auth-spin {
to {
transform: rotate(360deg);
}
}
/* action stack under the form */
.auth-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-2);
}
/* row of small controls, for example remember me + forgot link */
.field-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
/* checkbox row */
.checkbox {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 13.5px;
color: var(--fg-muted);
cursor: pointer;
}
.checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
/* --------------------------------------------------------------------------
10. links
-------------------------------------------------------------------------- */
a,
.auth-link {
color: var(--accent);
text-decoration: none;
border-radius: 3px;
}
a:hover,
.auth-link:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* footer line under the card, for example a sign in vs sign up switch */
.auth-foot {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
font-size: 13.5px;
color: var(--fg-muted);
text-align: center;
}
.auth-meta {
margin-top: var(--space-4);
font-size: 12px;
color: var(--fg-subtle);
text-align: center;
}
/* --------------------------------------------------------------------------
11. divider with optional centered text
markup: or
-------------------------------------------------------------------------- */
.divider {
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-2) 0;
color: var(--fg-subtle);
font-size: 12px;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
/* --------------------------------------------------------------------------
12. code / secret display block, monospace
for the TOTP setup secret and similar one-time values
-------------------------------------------------------------------------- */
.secret-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.secret-block code,
.secret-value {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.08em;
color: var(--fg);
word-break: break-all;
}
.secret-block .copy-btn {
flex: none;
font-family: inherit;
font-size: 12px;
font-weight: 550;
color: var(--fg-muted);
background: var(--bg-elev2);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 6px 10px;
cursor: pointer;
transition:
color 0.14s ease,
border-color 0.14s ease,
background-color 0.14s ease;
}
.secret-block .copy-btn:hover {
color: var(--fg);
border-color: var(--fg-subtle);
}
.secret-block .copy-btn.is-copied {
color: var(--success);
border-color: var(--success-line);
}
/* inline code token used within sentences */
code,
.code {
font-family: var(--font-mono);
font-size: 0.92em;
color: var(--fg);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 5px;
padding: 1px 6px;
}
/* QR holder for TOTP enrollment. white plate so the code scans on dark */
.qr {
width: 176px;
height: 176px;
margin: 0 auto var(--space-4);
padding: 12px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.qr img,
.qr canvas,
.qr svg {
width: 100%;
height: 100%;
}
/* --------------------------------------------------------------------------
13. backup / recovery codes grid
shown once on MFA enable
-------------------------------------------------------------------------- */
.backup-codes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
margin: var(--space-3) 0 var(--space-4);
padding: var(--space-4);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.backup-code {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.06em;
text-align: center;
color: var(--fg);
background: var(--bg-elev2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 9px 6px;
}
.backup-code.is-used {
color: var(--fg-subtle);
text-decoration: line-through;
}
/* --------------------------------------------------------------------------
14. focus rings
keyboard focus stays visible everywhere. pointer focus stays quiet.
-------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.input:focus-visible,
input:focus-visible {
outline: none;
}
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
a:focus-visible,
.auth-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
15. utilities
-------------------------------------------------------------------------- */
.text-center {
text-align: center;
}
.text-muted {
color: var(--fg-muted);
}
.mt-0 {
margin-top: 0;
}
.is-hidden,
[hidden] {
display: none !important;
}
/* visually hidden but available to screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
16. responsive, 360px through desktop
-------------------------------------------------------------------------- */
@media (max-width: 420px) {
body {
padding: var(--space-4);
align-items: flex-start;
}
.auth-card {
padding: var(--space-5);
border-radius: var(--radius-md);
}
.auth-title {
font-size: 20px;
}
}
@media (max-width: 340px) {
.backup-codes {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
17. motion + contrast preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
@media (prefers-contrast: more) {
:root {
--border: var(--border-strong);
--fg-muted: var(--fg);
}
}