/* public/partials/site-auth.css — styling for the shared F2 account gate (site-auth.js). SINGLE SOURCE, loaded on every surface (Astro pages + admin.html + workflow.html + builder/index.html). Colors/fonts mirror the site tokens (src/styles/tokens.css): navy #032268 / navy-deep #04163F, gold #EEC011, offwhite #F4F4F3, Oswald + Epilogue. */ /* Zero-flash shield: the instant gets .f2-gated (set by site-auth.js while it loads, blocking, in ), an opaque full-screen layer covers page content BEFORE the modal is injected — so walled content never flashes, even for a split second. The injected .f2-auth-gate sits one layer above it. Both vanish when .f2-gated is removed (reveal). */ html.f2-gated { overflow: hidden; } html.f2-gated body::before { content: ''; position: fixed; inset: 0; z-index: 2147483000; background: radial-gradient(circle at 50% 32%, #0a2f7a, #04163F); } .f2-auth-gate { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: radial-gradient(circle at 50% 32%, #0a2f7a, #04163F); font-family: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif; } .f2-auth-gate[hidden] { display: none; } .f2-auth-card { width: 100%; max-width: 360px; box-sizing: border-box; background: #fff; border-radius: 16px; padding: 34px 30px 26px; box-shadow: 0 20px 60px rgba(3, 34, 104, 0.35); text-align: center; } .f2-auth-wordmark { display: block; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #032268; font-size: 1.5rem; line-height: 1; } .f2-auth-eyebrow { margin: 6px 0 0; font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #EEC011; font-size: 0.62rem; } .f2-auth-msg { margin: 14px 0 4px; color: #4a5568; font-size: 0.9rem; line-height: 1.5; } #f2-auth-form { display: block; margin-top: 10px; text-align: left; } .f2-auth-field { display: block; font-size: 0.78rem; font-weight: 600; color: #032268; margin-top: 12px; } .f2-auth-field input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 13px; border: 1px solid #d5dbe6; border-radius: 10px; font-size: 15px; font-family: inherit; color: #10203f; } .f2-auth-field input:focus { outline: none; border-color: #032268; box-shadow: 0 0 0 3px rgba(3, 34, 104, 0.12); } #f2-auth-submit { width: 100%; margin-top: 20px; padding: 12px 22px; border: none; border-radius: 300px; background: #EEC011; color: #032268; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; transition: transform 0.05s, filter 0.15s; } #f2-auth-submit:hover { filter: brightness(1.03); } #f2-auth-submit:active { transform: translateY(1px); } #f2-auth-submit:disabled { opacity: 0.6; cursor: default; } .f2-auth-error { min-height: 1.1em; margin: 12px 0 0; color: #b3121b; font-size: 0.82rem; font-weight: 600; } .f2-auth-forgot { margin-top: 6px; background: none; border: none; padding: 4px; cursor: pointer; color: #5a6b8c; font-family: inherit; font-size: 0.8rem; text-decoration: underline; } .f2-auth-forgot:hover { color: #032268; }