/* Meezy Ops front-of-house sign-in. A standalone, full-screen branded page (NOT the app shell). Basecoat since the one-component sweep (ADR 0321): controls are Basecoat `.input` / `.btn`, banners are the component, and colour comes from the Basecoat semantic tokens (basecoat.css + the v2 brand override), loaded before this file. This file keeps ONLY the auth layout, this screen's roomy 48px control density, and the password-reveal overlay. Forced light theme (data-theme=light on ). */ * { box-sizing: border-box; } html, body { height: 100%; } body.auth-body { margin: 0; font-family: var(--font-sans); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Layout: brand panel + form panel, single column under 900px ---- */ .auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; } @media (max-width: 900px) { .auth { grid-template-columns: 1fr; } } /* ============================ Brand panel ============================ */ /* Meezy Deep Blue (the single brand accent, --primary) carries this one screen. */ .auth-brand { position: relative; padding: 64px 64px 56px; display: flex; flex-direction: column; justify-content: space-between; color: var(--primary-foreground); background: var(--primary); } @media (max-width: 900px) { .auth-brand { padding: 40px 28px 32px; min-height: auto; } } .brand-hero { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .brand-logo { width: 76px; height: 76px; border-radius: var(--radius); flex: 0 0 auto; background: var(--background); } .brand-word { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } .brand-word small { display: block; margin-top: 8px; font-size: 0.875rem; font-weight: 400; color: rgba(255,255,255,.78); letter-spacing: .01em; } @media (max-width: 560px) { .auth-brand { padding: 16px 22px; justify-content: center; } .brand-hero { margin: 0; flex-direction: row; gap: 12px; text-align: left; } .brand-logo { width: 40px; height: 40px; border-radius: var(--radius); } .brand-word { font-size: 1.25rem; } .brand-word small { display: none; } } /* ============================ Form panel ============================ */ .auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--card); } .auth-card { width: 100%; max-width: 400px; } .auth-card h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground); margin: 0 0 6px; } .auth-card .lede { font-size: 0.9rem; color: var(--muted-foreground); margin: 0 0 26px; } /* This screen's density: roomy 48px controls (a sign-in form, not a dense work queue). */ .auth-card .input { height: 48px; padding: 0 14px; width: 100%; } .auth-card .btn { width: 100%; height: 48px; } /* ui-allow: this screen's roomy 48px sign-in density (ADR 0321) */ /* Password reveal overlay: absolutely positioned inside the relative field control. */ .with-toggle { position: relative; } .with-toggle .input { padding-right: 46px; } .reveal { position: absolute; top: 0; right: 0; height: 48px; width: 46px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--muted-foreground); border-radius: 0 var(--radius) var(--radius) 0; transition: color 0.12s ease; } .reveal:hover { color: var(--primary); } .reveal:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius); } .reveal svg { width: 19px; height: 19px; } .reveal svg[hidden] { display: none; } .reveal[hidden] { display: none; } .btn-signin { margin-top: 6px; } /* Sign in with Google: white fill so the outline control reads on the card panel. */ .btn-google { margin-bottom: 4px; background: var(--background); } .g-logo { width: 18px; height: 18px; flex: 0 0 auto; } /* "or with email" divider between the SSO button and the password form. */ .auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted-foreground); font-size: 0.75rem; letter-spacing: .02em; } .auth-or::before, .auth-or::after { content: ""; height: 1px; flex: 1; background: var(--border); } .auth-help { margin: 22px 0 0; font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; } .auth-help a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .auth-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: var(--muted-foreground); } .auth-foot a { color: var(--primary); text-decoration: none; font-weight: 500; } .auth-foot a:hover { text-decoration: underline; }