/* Guest / auth pages — minimal layout (Bootstrap handles forms) */ /* Bootstrap reboot underlines all anchors; restore marketing header to match homepage */ nav.site-public-nav { font-family: Roboto, system-ui, sans-serif; } nav.site-public-nav a { text-decoration: none; } nav.site-public-nav a:hover, nav.site-public-nav a:focus { text-decoration: none; } /* * Header logo: site inline styles sit before Bootstrap in ; Bootstrap’s * img { max-width:100%; height:auto } can interact badly with width/height attrs. * Lock the same dimensions as layouts.site inline .site-nav-logo img. */ nav.site-public-nav .site-nav-logo img.brand-logo { height: 2.75rem; width: auto; max-width: min(72vw, 260px); object-fit: contain; vertical-align: middle; } @media (min-width: 768px) { nav.site-public-nav .site-nav-logo img.brand-logo { height: 3.35rem; max-width: 320px; } } @media (min-width: 1024px) { nav.site-public-nav .site-nav-logo img.brand-logo { height: 3.75rem; max-width: 360px; } } .auth-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; background: #0f1419; color: #e8eaed; } .auth-page__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 229, 255, 0.12), transparent), linear-gradient(180deg, #0f1419 0%, #10131c 100%); pointer-events: none; } .auth-page__main { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .auth-card { width: 100%; max-width: 26rem; background: rgba(28, 32, 40, 0.95); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 0.75rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .auth-card--wide { max-width: 32rem; } .auth-card__body { padding: 2rem 1.5rem; } .auth-brand { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 1.25rem; } /* Same visual scale as header logo; block + auto margins beats Bootstrap/float edge cases */ .auth-brand .brand-logo.auth-brand__logo { display: block; flex: 0 0 auto; margin-left: auto; margin-right: auto; height: 2.75rem; width: auto; max-width: min(72vw, 260px); object-fit: contain; } @media (min-width: 768px) { .auth-brand .brand-logo.auth-brand__logo { height: 3.35rem; max-width: 320px; } } @media (min-width: 1024px) { .auth-brand .brand-logo.auth-brand__logo { height: 3.75rem; max-width: 360px; } } .auth-title { color: #e8eaed; font-weight: 700; } .auth-sub { color: #9aa0a6; font-size: 0.95rem; } .auth-footer { position: relative; text-align: center; padding: 1rem; font-size: 0.875rem; color: #9aa0a6; } .auth-footer a { color: #00e5ff; text-decoration: none; } .auth-footer a:hover { text-decoration: underline; } /* Form controls on dark card */ .auth-card .form-control { background-color: #181c24; border-color: rgba(132, 147, 150, 0.35); color: #e0e2ee; } .auth-card .form-control:focus { background-color: #181c24; border-color: #00e5ff; color: #e0e2ee; box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.2); } .auth-card .form-floating > label { color: #9aa0a6; } .auth-card .form-check-label { color: #bac9cc; } .auth-btn { background: #00e5ff; border: none; color: #00363d; font-weight: 700; } .auth-btn:hover { background: #33ebff; color: #00363d; } .auth-aux-btn { border-color: rgba(0, 229, 255, 0.35); color: #00e5ff; } .auth-aux-btn:hover { background: rgba(0, 229, 255, 0.08); border-color: #00e5ff; color: #9cf0ff; } .auth-link { color: #00e5ff; }