/* ============================================================ tidal-login.css Split-panel login gate, ported from the approved redesign mockup. Added By John - 06/08/2026 The login view is deliberately outside the app shell (Layout = null, its own ), so it links this file plus tidal-theme.css and reuses the exact same tokens, type scale and controls as the signed in app. It replaces the old, disconnected /Content/Login/style.css neon theme (that file is left on disk, just no longer referenced). ============================================================ */ /* the gate is the only body child, so let it own the viewport */ .ta-gate { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); flex: 1 0 auto; min-height: 100vh; } .ta-gate-brand { position: relative; overflow: hidden; background: var(--nav); color: #fff; padding: 56px 56px 44px; display: flex; flex-direction: column; } /* whisper-quiet texture, not a glow */ .ta-gate-brand::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, rgba(63,184,181,.16), transparent 58%), repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px); } .ta-gate-brand > * { position: relative; } .ta-gate-brand .ta-brand-word { font-size: 19px; } .ta-gate-copy { margin-top: auto; padding-top: 48px; max-width: 34ch; } .ta-gate-copy h2 { font-size: 29px; font-weight: 650; letter-spacing: -.028em; line-height: 1.24; margin: 0; color: #fff; } .ta-gate-copy p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.78); } .ta-gate-meta { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 22px; } .ta-gate-meta span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.72); } .ta-gate-meta .ta-ic { font-size: 13px; color: var(--teal-400); } .ta-gate-form { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 48px 40px; } .ta-gate-form-in { width: 100%; max-width: 364px; } .ta-gate-form-in h1 { font-size: 24px; font-weight: 680; letter-spacing: -.024em; margin: 0; color: var(--ink); } .ta-gate-lede { margin: 6px 0 26px; font-size: 14px; color: var(--text-2); } .ta-gate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 20px; } .ta-gate-help { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); line-height: 1.55; } @media (max-width:900px) { .ta-gate { grid-template-columns: 1fr; min-height: 0; } .ta-gate-brand { padding: 34px 28px 30px; } .ta-gate-copy { padding-top: 26px; max-width: none; } .ta-gate-copy h2 { font-size: 24px; } .ta-gate-form { padding: 34px 28px 52px; } .ta-gate-form-in { max-width: none; } }