/* ========================================================================= WatchCrew login page styles ------------------------------------------------------------------------- Loaded ONLY by templates/account/login.html (via {% block extra_head %}). The two-column "hero panel + form" layout is unique to this page; every other auth page (password reset, etc.) inherits the narrow card from account/base_auth.html and needs none of these rules. Token policy: * Reuse global tokens from base.css (`--color-*`, `--color-primary*`, `--color-border`, `--color-error`) wherever the value matches. * Page-scoped `--login-*` vars (declared on `body` below) cover the few values without a global token — the page's lighter slate background, the teal accent on the decorative blobs, the off-white field-rest fill, the slate-400 tertiary text, and rgb triplets for alpha-blended shadows. * No raw hex anywhere except inside the page-scoped token block. Loaded after Bootstrap + base.css so these rules win specificity ties. ========================================================================= */ body { /* Page-scoped tokens — see file header for rationale. */ --login-bg: #F0F4F8; --login-blob: #7FDCC0; --login-field-bg: #F8FAFC; --login-text-tertiary: #94A3B8; --login-card-shadow-rgb: 0, 0, 0; --login-truck-shadow-rgb: 15, 23, 42; /* `--color-primary` (#3B82F6) as an rgb triplet for alpha-blended focus-ring + button-drop-shadow effects. Distinct from `--bs-primary-rgb` (37,99,235 = #2563EB) — the project carries two primary blues and the login page's shadows historically use the lighter one. */ --login-primary-rgb: 59, 130, 246; /* override Bootstrap's bg-light from account/base_auth.html's */ background: var(--login-bg) !important; position: relative; } /* ── Decorative blobs ─────────────────────────────────────────────────── */ .blob { position: fixed; border-radius: 50%; background: var(--login-blob); z-index: 0; pointer-events: none; } .blob-tl { top: -80px; left: -80px; width: 260px; height: 260px; opacity: 0.55; } .blob-br { bottom: -100px; right: -60px; width: 320px; height: 320px; opacity: 0.45; } /* ── Card shell ───────────────────────────────────────────────────────── */ .login-card { position: relative; z-index: 1; background: var(--color-surface); border-radius: 16px; box-shadow: 0 8px 40px rgba(var(--login-card-shadow-rgb), .08); padding: 2.5rem 2.25rem 2.5rem 2.5rem; width: 100%; max-width: 940px; } /* ── Right-column copy ────────────────────────────────────────────────── */ .login-welcome { font-size: 32px; font-weight: 800; color: var(--color-text); letter-spacing: -.5px; margin-bottom: .5rem; } .login-subtitle { font-size: 13px; color: var(--login-text-tertiary); line-height: 1.6; margin-bottom: 1.75rem; } /* ── Icon + input field row ───────────────────────────────────────────── */ .login-field { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--login-field-bg); margin-bottom: 14px; transition: border-color .2s, box-shadow .2s; } .login-field:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--login-primary-rgb), .1); background: var(--color-surface); } .login-field.has-error { border-color: var(--color-error); } .login-field svg { color: var(--login-text-tertiary); flex-shrink: 0; } .login-field input { border: none; background: transparent; outline: none; font-size: 14px; font-family: inherit; color: var(--color-text); width: 100%; } .login-field input::placeholder { color: var(--login-text-tertiary); } .login-field-error { font-size: 12px; color: var(--color-error); margin-top: -10px; margin-bottom: 12px; } /* ── Remember me / Forgot row ─────────────────────────────────────────── */ .remember-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .remember-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); cursor: pointer; } .remember-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .forgot-link { font-size: 13px; color: var(--login-text-tertiary); text-decoration: none; transition: color .15s; } .forgot-link:hover { color: var(--color-primary); } /* ── Primary submit button ────────────────────────────────────────────── */ .btn-login { width: 100%; background: var(--color-primary); color: var(--color-surface); border: none; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; letter-spacing: .2px; transition: background .15s, transform .1s, box-shadow .15s; box-shadow: 0 4px 14px rgba(var(--login-primary-rgb), .35); } .btn-login:hover { background: var(--color-primary-dark); box-shadow: 0 6px 20px rgba(var(--login-primary-rgb), .4); } .btn-login:active { transform: scale(0.99); } /* ── Hero image showcase panel ──────────────────────────────────────── The truck PNG has a transparent background. We give it a soft tinted "stage" — the brand-primary tint — so it reads as a curated showcase rather than floating loose against the white card. The faint radial highlight adds depth without competing with the form. */ .illus-panel { position: relative; background: radial-gradient(ellipse at 50% 60%, var(--color-surface) 0%, var(--color-primary-tint) 70%); border-radius: 14px; padding: 1rem 1.25rem 0.5rem; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } /* Subtle ground shadow under the truck, so it feels grounded on the stage */ .illus-panel::after { content: ''; position: absolute; bottom: 12px; left: 12%; right: 12%; height: 12px; background: radial-gradient( ellipse, rgba(var(--login-truck-shadow-rgb), .15) 0%, rgba(var(--login-truck-shadow-rgb), 0) 70% ); pointer-events: none; } .illus-truck { position: relative; z-index: 1; width: 100%; max-width: 460px; height: auto; display: block; } /* ── Mobile: hide illustration, tighten card padding ─────────────────── */ @media (max-width: 767px) { .illus-col { display: none !important; } .login-card { padding: 2rem 1.5rem; } }