/* ===================================================================== tibr-auth.css — sign-in, password reset, email verification and two-step verification pages (layouts/guest.blade.php, 2026-09). Brand panel on the left (TIBR charcoal / Vyntworks ink navy, via ), and a quiet, centred form column on white modelled on Vyntworks Control: centred heading, soft inputs, eye toggle, 6-box code entry. Brand colours come from tibr-shell.css tokens. Follows the device light/dark setting (nobody is signed in yet to have a saved preference). Prefix: ta- ===================================================================== */ body.ta-body { margin: 0; min-height: 100vh; font-family: var(--ts-font); color: #18181b; background: #fff; -webkit-font-smoothing: antialiased; --ta-panel: #222324; --ta-panel-ink: #f4f4f5; --ta-surface: #fff; --ta-text: #18181b; --ta-muted: #71717a; --ta-line: #e4e4e7; --ta-line-strong: #d4d4d8; --ta-soft: #f4f4f5; --ta-ink-btn: #27272a; --ta-ring: rgb(var(--ts-primary-500) / 0.22); } body.ta-body[data-brand="vyntworks"] { --ta-panel: #141c2e; --ta-panel-ink: #fbfbf9; --ta-ink-btn: #1d2940; } /* layout rules below set display on elements; [hidden] must still win */ .ta-body [hidden] { display: none !important; } .ta-shell { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .ta-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } /* ---- Brand panel ------------------------------------------------------- */ .ta-panel { display: none; position: relative; overflow: hidden; background: var(--ta-panel); color: var(--ta-panel-ink); } @media (min-width: 900px) { .ta-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; } } .ta-panel::after { /* a quiet drafting grid — this is software for people who build things */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%); mask-image: linear-gradient(160deg, #000 10%, transparent 75%); } .ta-panel > * { position: relative; z-index: 1; } .ta-panel-logo { height: 2.1rem; width: auto; display: block; } /* The full-colour TIBR mark's grey nodes fight a dark background: one-colour (white) on the panel, the usual reversed-out treatment. */ .ta-panel .ta-panel-logo { filter: brightness(0) invert(1); opacity: 0.94; } .ta-panel .ta-wordmark { font-size: 1.9rem; color: var(--ta-panel-ink); } .ta-panel-copy { max-width: 26rem; } .ta-panel-kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ts-accent)); margin: 0 0 0.9rem; } .ta-panel-title { font-size: 1.85rem; line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: -0.015em; } .ta-panel-text { margin: 1rem 0 0; font-size: 0.95rem; line-height: 1.55; color: rgb(255 255 255 / 0.66); } .ta-panel-foot { font-size: 0.72rem; color: rgb(255 255 255 / 0.45); } /* ---- Form column ------------------------------------------------------- */ .ta-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 16px; } .ta-card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 1.5rem; } .ta-mobile-brand { display: flex; justify-content: center; } @media (min-width: 900px) { .ta-mobile-brand { display: none; } } .ta-mobile-brand .ta-panel-logo { height: 1.9rem; } .ta-mobile-brand .ta-logo-dark { display: none; } .ta-wordmark { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1; font-size: 1.7rem; color: var(--ta-text); } .ta-wordmark .tick { color: rgb(var(--ts-primary-400)); } /* Centred heading block (Control's auth-header) */ .ta-head { text-align: center; } .ta-badge-icon { width: 2.75rem; height: 2.75rem; margin: 0 auto 1rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--ta-soft); color: rgb(var(--ts-primary-600)); box-shadow: 0 0 0 5px #fafafa, 0 0 0 6px var(--ta-line); } .ta-badge-icon svg { width: 1.3rem; height: 1.3rem; } .ta-kicker { margin: 0 0 0.45rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--ts-primary-600)); } .ta-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.015em; color: var(--ta-text); } .ta-sub { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ta-muted); } .ta-form { display: flex; flex-direction: column; gap: 1.25rem; } .ta-field { display: flex; flex-direction: column; gap: 0.45rem; } .ta-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .ta-label { font-size: 0.86rem; font-weight: 600; color: var(--ta-text); } .ta-input-wrap { position: relative; } .ta-input { width: 100%; box-sizing: border-box; height: 2.6rem; padding: 0 0.8rem; font: inherit; font-size: 0.93rem; color: var(--ta-text); background: var(--ta-surface); border: 1px solid var(--ta-line-strong); border-bottom-color: #c4c4c9; border-radius: 8px; outline: none; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: border-color 120ms, box-shadow 120ms; } .ta-input::placeholder { color: #a1a1aa; } .ta-input-wrap .ta-input { padding-right: 2.8rem; } .ta-input:focus { border-color: rgb(var(--ts-primary-500)); box-shadow: 0 0 0 3px var(--ta-ring), 0 1px 2px rgb(0 0 0 / 0.05); } .ta-input[aria-invalid="true"] { border-color: #dc2626; } .ta-input:read-only { background: #fafafa; color: #52525b; } .ta-eye { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #71717a; cursor: pointer; } .ta-eye:hover { color: var(--ta-text); background: var(--ta-soft); } .ta-eye:focus-visible { outline: 2px solid rgb(var(--ts-primary-500)); outline-offset: 0; } .ta-eye svg { width: 1.15rem; height: 1.15rem; } .ta-eye .ta-eye-off { display: none; } .ta-eye[aria-pressed="true"] .ta-eye-on { display: none; } .ta-eye[aria-pressed="true"] .ta-eye-off { display: block; } .ta-hint { font-size: 0.78rem; color: var(--ta-muted); margin: 0; } .ta-caps { font-size: 0.78rem; font-weight: 600; color: #b45309; margin: 0; } .ta-check { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--ta-text); cursor: pointer; user-select: none; } .ta-check input { -webkit-appearance: none; appearance: none; width: 1.05rem; height: 1.05rem; margin: 0; flex-shrink: 0; border: 1px solid var(--ta-line-strong); border-radius: 5px; background: var(--ta-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); display: grid; place-content: center; cursor: pointer; transition: background-color 100ms, border-color 100ms; } .ta-check input::after { content: ''; width: 0.55rem; height: 0.3rem; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .ta-check input:checked { background: var(--ta-ink-btn); border-color: var(--ta-ink-btn); } .ta-check input:checked::after { opacity: 1; } .ta-check input:focus-visible { outline: 2px solid rgb(var(--ts-primary-500)); outline-offset: 2px; } .ta-link { font-size: 0.86rem; font-weight: 500; color: var(--ta-text); text-decoration: underline; text-decoration-color: #d4d4d8; text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .ta-link:hover { text-decoration-color: currentColor; } .ta-link:focus-visible { outline: 2px solid rgb(var(--ts-primary-500)); outline-offset: 2px; border-radius: 2px; } .ta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 2.6rem; box-sizing: border-box; border: 0; border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--ta-ink-btn); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.1); transition: background-color 120ms; } .ta-btn:hover { background: rgb(var(--ts-primary-700)); } .ta-btn:focus-visible { outline: 2px solid rgb(var(--ts-primary-500)); outline-offset: 2px; } .ta-btn[disabled] { opacity: 0.6; cursor: progress; } .ta-btn-secondary { background: var(--ta-surface); color: var(--ta-text); box-shadow: inset 0 0 0 1px var(--ta-line-strong), 0 1px 2px rgb(0 0 0 / 0.05); } .ta-btn-secondary:hover { background: #fafafa; } .ta-btn .ta-ico { width: 1rem; height: 1rem; } .ta-spinner { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #fff; animation: ta-spin 0.7s linear infinite; display: none; } .ta-btn.is-busy .ta-spinner { display: inline-block; } @keyframes ta-spin { to { transform: rotate(360deg); } } .ta-btn-row { display: flex; gap: 0.75rem; } .ta-btn-row .ta-btn { flex: 1; } .ta-alert { border-radius: 8px; padding: 0.7rem 0.85rem; font-size: 0.86rem; line-height: 1.45; text-align: left; } .ta-alert ul { margin: 0.35rem 0 0; padding-left: 1.1rem; } .ta-alert-error { background: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px #fecaca; } .ta-alert-ok { background: #f0fdf4; color: #166534; box-shadow: inset 0 0 0 1px #bbf7d0; } .ta-foot { font-size: 0.86rem; color: var(--ta-muted); display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; text-align: center; } .ta-foot form { display: inline; } .ta-foot-split { justify-content: space-between; } .ta-divider { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #a1a1aa; } .ta-divider::before, .ta-divider::after { content: ''; flex: 1; height: 1px; background: var(--ta-line); } /* ---- 6-box code entry ---------------------------------------------------- */ .ta-otp { display: flex; justify-content: center; gap: 0.5rem; } .ta-otp-box { width: 2.75rem; height: 3.1rem; padding: 0; text-align: center; font: inherit; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ta-text); background: var(--ta-surface); border: 1px solid var(--ta-line-strong); border-radius: 8px; outline: none; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); caret-color: rgb(var(--ts-primary-500)); transition: border-color 120ms, box-shadow 120ms; } .ta-otp-box:focus { border-color: rgb(var(--ts-primary-500)); box-shadow: 0 0 0 3px var(--ta-ring); } .ta-otp-gap { width: 0.35rem; } .ta-otp.is-invalid .ta-otp-box { border-color: #dc2626; } @media (max-width: 360px) { .ta-otp { gap: 0.35rem; } .ta-otp-box { width: 2.4rem; height: 2.8rem; } } /* ---- Two-step set-up ------------------------------------------------------ */ .ta-qr-frame { display: flex; justify-content: center; } .ta-qr { width: 13.5rem; aspect-ratio: 1; box-sizing: border-box; padding: 0.85rem; background: #fff; border: 1px solid var(--ta-line); border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.06); } .ta-qr svg { display: block; width: 100%; height: 100%; } .ta-qr.is-error { width: auto; aspect-ratio: auto; font-size: 0.82rem; color: #991b1b; } .ta-applink { display: flex; justify-content: center; } @media (hover: hover) and (pointer: fine) { .ta-applink { display: none; } } .ta-keyrow { display: flex; align-items: stretch; border: 1px solid var(--ta-line-strong); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); } .ta-key { flex: 1; min-width: 0; padding: 0.6rem 0.75rem; font-family: var(--ts-mono); font-size: 0.84rem; letter-spacing: 0.05em; color: var(--ta-text); background: var(--ta-surface); word-break: break-all; user-select: all; } .ta-copy { flex-shrink: 0; width: 2.7rem; border: 0; border-left: 1px solid var(--ta-line); background: #fafafa; color: #52525b; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ta-copy:hover { color: var(--ta-text); background: var(--ta-soft); } .ta-copy svg { width: 1rem; height: 1rem; } .ta-apps { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--ta-muted); text-align: center; } .ta-apps b { color: var(--ta-text); font-weight: 600; } .ta-codes { list-style: none; margin: 0; padding: 1rem 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; border-radius: 10px; background: #fafafa; box-shadow: inset 0 0 0 1px var(--ta-line); } .ta-codes code { font-family: var(--ts-mono); font-size: 0.92rem; letter-spacing: 0.04em; color: var(--ta-text); } .ta-btn-link.is-disabled { opacity: 0.4; cursor: not-allowed; } /* ---- Dark (device setting) ---------------------------------------------- */ @media (prefers-color-scheme: dark) { body.ta-body { background: #0f0f10; color: #f4f4f5; --ta-surface: #18181b; --ta-text: #f4f4f5; --ta-muted: #a1a1aa; --ta-line: #27272a; --ta-line-strong: #3f3f46; --ta-soft: #27272a; --ta-ink-btn: #f4f4f5; } body.ta-body[data-brand="vyntworks"] { background: #0b1019; --ta-surface: #131b2b; --ta-line: #1f2a3f; --ta-line-strong: #2d3a52; --ta-soft: #1f2a3f; } body.ta-body .ta-panel { background: #18191a; } body.ta-body[data-brand="vyntworks"] .ta-panel { background: #111827; } body.ta-body .ta-input { border-bottom-color: var(--ta-line-strong); box-shadow: none; } body.ta-body .ta-input:read-only { background: rgb(255 255 255 / 0.04); color: #a1a1aa; } body.ta-body .ta-btn { color: #18181b; } body.ta-body .ta-btn:hover { background: #fff; } body.ta-body .ta-spinner { border-color: rgb(0 0 0 / 0.2); border-top-color: #18181b; } body.ta-body .ta-btn-secondary { color: #f4f4f5; background: transparent; box-shadow: inset 0 0 0 1px var(--ta-line-strong); } body.ta-body .ta-btn-secondary:hover { background: rgb(255 255 255 / 0.05); } body.ta-body .ta-check input:checked::after { border-color: #18181b; } body.ta-body .ta-link { text-decoration-color: #52525b; } body.ta-body .ta-kicker, body.ta-body .ta-badge-icon { color: rgb(var(--ts-primary-300)); } body.ta-body .ta-badge-icon { box-shadow: 0 0 0 5px #141415, 0 0 0 6px var(--ta-line); } body.ta-body .ta-alert-error { background: rgb(220 38 38 / 0.12); color: #fca5a5; box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.3); } body.ta-body .ta-alert-ok { background: rgb(22 163 74 / 0.12); color: #86efac; box-shadow: inset 0 0 0 1px rgb(22 163 74 / 0.3); } body.ta-body .ta-caps { color: #fbbf24; } body.ta-body .ta-codes, body.ta-body .ta-copy { background: rgb(255 255 255 / 0.04); } body.ta-body .ta-qr { border-color: transparent; } body.ta-body .ta-mobile-brand .ta-logo-light { display: none; } body.ta-body .ta-mobile-brand .ta-logo-dark { display: block; filter: brightness(0) invert(1); opacity: 0.94; } } @media (prefers-reduced-motion: reduce) { .ta-spinner { animation-duration: 2s; } }