/**
* Public/CSS/Auth/Login.css
* -------------------------
* Styles for View/Auth/Login.ejs only. Loaded via:
*
* Assumes Plus Jakarta Sans is linked in the EJS (Google Fonts).
*/
/* -------------------------------------------------------------------------- */
/* Design tokens (CSS custom properties)
* Centralize colors and shadows so tweaks stay in one place and stay consistent
* with the login card / Microsoft-style button.
* -------------------------------------------------------------------------- */
:root {
/* Page background base (slate-100-ish) — sits under layered radial gradients on body */
--bg-0: #f1f5f9;
/* Card surface */
--card: #ffffff;
/* Primary text (slate-900) */
--text: #0f172a;
/* Secondary / supporting text (slate-500) */
--text-muted: #64748b;
/* Hairline border on card and footnote divider — low-contrast slate */
--border: rgba(15, 23, 42, 0.08);
/* Elevation for the card — large soft shadow reads “floating panel” */
--shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12);
/* Microsoft-style button label color (dark gray, not brand blue — matches common MS button spec) */
--ms-blue: #2f2f2f;
/* Hover fill for the Microsoft button */
--ms-hover: #f3f3f3;
/* Focus ring for keyboard users (matches primary blue accent) */
--ring: rgba(37, 99, 235, 0.35);
}
/* -------------------------------------------------------------------------- */
/* Global box model
* border-box: padding and border count inside width/height — predictable layout for flex/grid.
* -------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
/* -------------------------------------------------------------------------- */
/* Page shell
* Full viewport height, centers the login card. min-height: 100dvh uses dynamic viewport
* height on mobile (better than 100vh when browser chrome shows/hides).
* -------------------------------------------------------------------------- */
body {
margin: 0;
min-height: 100dvh;
/* Font stack: webfont first, then system UI fallbacks if Google Fonts fail */
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
color: var(--text);
/* Solid base + layered soft radial gradients for a modern “glow” without heavy images */
background-color: var(--bg-0);
background-image:
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 100% 0%, rgba(99, 102, 241, 0.08), transparent),
radial-gradient(ellipse 50% 30% at 0% 100%, rgba(14, 165, 233, 0.06), transparent);
/* Center .shell horizontally and vertically */
display: flex;
align-items: center;
justify-content: center;
/* Breathing room on very small screens so the card does not touch viewport edges */
padding: 1.5rem;
/* Slightly thinner strokes on macOS/iOS for crisper text at small sizes */
-webkit-font-smoothing: antialiased;
}
/* -------------------------------------------------------------------------- */
/* Layout wrapper
* max-width keeps the card readable; width 100% lets it shrink on narrow viewports.
* -------------------------------------------------------------------------- */
.shell {
width: 100%;
max-width: 26rem;
}
/* -------------------------------------------------------------------------- */
/* Main card panel
* overflow: hidden clips the top accent bar (::before) to the card’s rounded corners.
* -------------------------------------------------------------------------- */
.card {
background: var(--card);
border-radius: 1.25rem;
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 2.25rem 2rem 2rem;
position: relative;
overflow: hidden;
}
/* Thin gradient strip along the top edge — visual anchor / brand accent */
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2563eb, #6366f1, #0ea5e9);
opacity: 0.9;
}
/* -------------------------------------------------------------------------- */
/* Decorative lock icon container (matches .mark in Login.ejs)
* Flex centers the SVG; gradient + shadow echo the top accent bar.
* -------------------------------------------------------------------------- */
.mark {
width: 3rem;
height: 3rem;
border-radius: 0.875rem;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.35);
}
.mark svg {
width: 1.35rem;
height: 1.35rem;
color: white;
}
/* -------------------------------------------------------------------------- */
/* Typography — page title */
/* -------------------------------------------------------------------------- */
h1 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 0.5rem;
}
/* -------------------------------------------------------------------------- */
/* Supporting paragraph under the title (.lede)
* Slightly smaller, muted color, extra bottom margin before the CTA.
* -------------------------------------------------------------------------- */
.lede {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 1.75rem;
}
/* -------------------------------------------------------------------------- */
/* Primary CTA — styled as Microsoft “Sign in” / Continue button
* Full width for thumb-friendly tap targets; flex aligns logo + label.
* font-family: inherit keeps button text in Plus Jakarta Sans when used on .
* -------------------------------------------------------------------------- */
.microsoft-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
padding: 0.8125rem 1.25rem;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
color: var(--ms-blue);
text-decoration: none;
background: #fff;
border: 1px solid #8c8c8c;
border-radius: 0.5rem;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.microsoft-btn:hover {
background: var(--ms-hover);
border-color: #616161;
}
/* Keyboard focus only — avoids ring on mouse click (better UX than :focus on all devices) */
.microsoft-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ring);
}
/* Prevent the SVG from shrinking when the label wraps in edge cases */
.ms-logo {
flex-shrink: 0;
}
/* -------------------------------------------------------------------------- */
/* Footnote — small legal/UX copy below the CTA
* Separator line visually groups the main action from secondary information.
* -------------------------------------------------------------------------- */
.footnote {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
font-size: 0.75rem;
line-height: 1.5;
color: var(--text-muted);
text-align: center;
}
/* -------------------------------------------------------------------------- */
/* Narrow screens
* Tighter card padding; slightly smaller heading to reduce vertical stack height.
* -------------------------------------------------------------------------- */
@media (max-width: 420px) {
.card {
padding: 1.75rem 1.5rem 1.5rem;
}
h1 {
font-size: 1.35rem;
}
}