/* 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; } /* ---- B7 forgot / sent states (same visual language as sign-in) --------------------------- */ /* Password field collapses smoothly when entering forgot mode — no layout jump. */ .f2-auth-pw { overflow: hidden; max-height: 5.5rem; opacity: 1; transition: max-height 0.28s ease, opacity 0.18s ease, margin-top 0.28s ease; } .f2-auth-card.mode-forgot .f2-auth-pw { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; } /* Sent (confirmation) is a composed screen: hide the prompt/form/error/forgot, show the panel. */ .f2-auth-sent { display: none; } .f2-auth-card.mode-sent #f2-auth-msg, .f2-auth-card.mode-sent #f2-auth-form, .f2-auth-card.mode-sent #f2-auth-error, .f2-auth-card.mode-sent #f2-auth-forgot { display: none; } .f2-auth-card.mode-sent .f2-auth-sent { display: block; animation: f2AuthFade 0.25s ease both; } @keyframes f2AuthFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .f2-auth-sent-mark { width: 46px; height: 46px; margin: 8px auto 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(238, 199, 17, 0.18); color: #032268; } .f2-auth-sent-title { margin: 14px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600; color: #032268; font-size: 1.05rem; letter-spacing: 0.01em; } .f2-auth-sent-body { margin: 8px 0 0; color: #4a5568; font-size: 0.9rem; line-height: 1.5; } .f2-auth-sent #f2-auth-back { margin-top: 18px; } @media (prefers-reduced-motion: reduce) { .f2-auth-pw { transition: none; } .f2-auth-card.mode-sent .f2-auth-sent { animation: none; } }