/* theme/templates/default/assets/css/login.css Branding for the WP login page (wp-login.php served at the custom slug from CUSTOM_LOGIN_SLUG). This is a system page — no Gutenberg, no snippet — but the design system tokens still apply because the token block in :root cascades through wp-login's too. Loaded via login_enqueue_scripts in models/signin.php. Keep all selectors WP-login-form-specific (#login, .login, .wp-core-ui) so nothing leaks into the rest of admin. */ /* Make tokens available even though _core_custom-properties.css isn't auto-loaded into wp-login. Duplicating the values here is a small cost for keeping wp-login self-contained. */ :root { --ff-bg: #0a0a0b; --ff-surface: #141416; --ff-surface-2: #1a1a1d; --ff-fg: #fafaf7; --ff-fg-muted: rgba(250, 250, 247, 0.56); --ff-fg-dim: rgba(250, 250, 247, 0.38); --ff-amber: #f5b544; --ff-amber-soft: rgba(245, 181, 68, 0.12); --ff-amber-ring: rgba(245, 181, 68, 0.28); --ff-border: rgba(255, 255, 255, 0.08); --ff-border-strong: rgba(255, 255, 255, 0.14); --ff-radius-sm: 6px; --ff-radius: 10px; --ff-radius-lg: 16px; --ff-font-sans: 'Geist', system-ui, -apple-system, sans-serif; --ff-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; } /* Pull in Geist + mono from Google Fonts so the login page matches the rest of the template. wp-login doesn't run wp_head() the same way, but @import inside an enqueued stylesheet still works. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* --- Page shell ----------------------------------------------------- */ html, body.login { background: var(--ff-bg); background-color: var(--ff-bg); color: var(--ff-fg); font-family: var(--ff-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; color-scheme: dark; } body.login { position: relative; min-height: 100vh; overflow-x: hidden; } /* Soft amber glow behind the form for a hint of warmth without committing to a banner image — same vibe as the landing hero. */ body.login::before { content: ''; position: fixed; top: 30%; left: 50%; transform: translateX(-50%); width: 90vw; height: 60vw; max-width: 900px; max-height: 600px; background: radial-gradient(ellipse at center, rgba(245, 181, 68, 0.10) 0%, transparent 60%); filter: blur(60px); pointer-events: none; z-index: 0; } #login { position: relative; z-index: 1; width: 360px; padding: 6vh 0 3rem; } /* --- Logo / heading ------------------------------------------------ WP renders

Site name

with the link text hidden behind a background-image. Use the theme logo as that image so the login page's brand mark matches the site header. */ body.login div#login h1 { margin: 0 0 1.75rem; text-align: center; } body.login div#login h1 a, body.login div#login h1 a:link, body.login div#login h1 a:visited { display: block; width: 72px !important; height: 72px !important; margin: 0 auto !important; padding: 0 !important; background-image: url('/wp-content/themes/firefly-collective/templates/default/images/logo.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; background-color: transparent !important; color: transparent !important; text-indent: 100% !important; white-space: nowrap; overflow: hidden !important; border: 0 !important; box-shadow: none !important; filter: drop-shadow(0 8px 24px rgba(245, 181, 68, 0.18)); transition: filter 240ms ease, transform 240ms ease; } body.login div#login h1 a:hover { filter: drop-shadow(0 12px 32px rgba(245, 181, 68, 0.32)); transform: translateY(-1px); } body.login div#login h1 a:focus { outline: 2px solid var(--ff-amber-ring); outline-offset: 6px; border-radius: 50%; } /* --- Form card ----------------------------------------------------- */ .login form { border: 1px solid var(--ff-border); background: var(--ff-surface); border-radius: var(--ff-radius-lg); padding: 1.75rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); margin: 0; transition: border-color 240ms ease; animation: ff-login-slide 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .login form:focus-within { border-color: var(--ff-amber-ring); } @keyframes ff-login-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Field labels */ .login label { color: var(--ff-fg-muted); font-family: var(--ff-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.375rem; display: block; } /* Inputs */ .login form .input, .login form input[type="text"], .login form input[type="password"], .login form input[type="email"] { width: 100%; padding: 0.75rem 0.875rem; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-sm); background: var(--ff-bg); color: var(--ff-fg); font-family: var(--ff-font-sans); font-size: 0.9375rem; line-height: 1.4; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; box-sizing: border-box; margin: 0 0 1rem; } .login form .input:hover, .login form input[type="text"]:hover, .login form input[type="password"]:hover, .login form input[type="email"]:hover { border-color: var(--ff-border-strong); } .login form .input:focus, .login form input[type="text"]:focus, .login form input[type="password"]:focus, .login form input[type="email"]:focus { outline: none; border-color: var(--ff-amber-ring); background: var(--ff-surface-2); box-shadow: 0 0 0 3px var(--ff-amber-soft); } .login form input::placeholder { color: var(--ff-fg-dim); } /* Remember-me checkbox row */ .login form .forgetmenot { margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; } .login form .forgetmenot label { margin: 0; color: var(--ff-fg-muted); font-family: var(--ff-font-mono); font-size: 0.75rem; text-transform: none; letter-spacing: 0.02em; cursor: pointer; } .login form input[type="checkbox"] { accent-color: var(--ff-amber); width: 14px; height: 14px; margin: 0; } /* --- Submit button (Log In) --------------------------------------- */ .wp-core-ui .button-primary, .wp-core-ui input.button-primary { width: 100%; padding: 0.75rem 1.25rem; background: var(--ff-amber) !important; color: #0a0a0b !important; border: 1px solid var(--ff-amber) !important; border-radius: var(--ff-radius-sm) !important; font-family: var(--ff-font-sans) !important; font-size: 0.9375rem !important; font-weight: 500 !important; letter-spacing: -0.005em !important; cursor: pointer; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; text-shadow: none !important; box-shadow: none !important; margin-top: 0.25rem; } .wp-core-ui .button-primary:hover, .wp-core-ui input.button-primary:hover { background: #ffc14f !important; border-color: #ffc14f !important; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 181, 68, 0.18) !important; } .wp-core-ui .button-primary:active, .wp-core-ui input.button-primary:active { transform: translateY(0); box-shadow: none !important; } .wp-core-ui .button-primary:focus, .wp-core-ui input.button-primary:focus { outline: none; box-shadow: 0 0 0 3px var(--ff-amber-soft) !important; } /* --- Bottom links (Lost password / Back to site) ------------------ */ .login #nav, .login #backtoblog { margin: 1rem 0 0; text-align: center; padding: 0 1rem; } .login #nav a, .login #backtoblog a { color: var(--ff-fg-muted); font-family: var(--ff-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-decoration: none; text-shadow: none; transition: color 180ms ease; } .login #nav a:hover, .login #backtoblog a:hover { color: var(--ff-amber); opacity: 1; } /* --- Notices / messages ------------------------------------------- */ .login .message, .login .notice, .login .success { background: var(--ff-surface-2); border: 1px solid var(--ff-border); border-left: 3px solid var(--ff-amber-ring); border-radius: var(--ff-radius-sm); padding: 0.75rem 1rem; margin: 0 0 1.25rem; color: var(--ff-fg); font-family: var(--ff-font-sans); font-size: 0.875rem; line-height: 1.5; box-shadow: none; } #login_error { background: rgba(255, 122, 122, 0.08); border-color: rgba(255, 122, 122, 0.25); border-left-color: rgba(255, 122, 122, 0.6); color: #ffb4b4; } /* --- Google sign-in / OAuth section ------------------------------- */ #oauth-signin-section { margin-top: 1rem; } .login-separator { display: flex; align-items: center; margin: 1.25rem 0; width: 100%; } .login-separator::before, .login-separator::after { content: ''; flex: 1; height: 1px; background: var(--ff-border); } .login-separator::before { margin-right: 0.75rem; } .login-separator::after { margin-left: 0.75rem; } .separator-text { color: var(--ff-fg-muted); font-family: var(--ff-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0; text-shadow: none; } .google-signin-container { margin-top: 0.75rem; } .google-signin-button { width: 100%; padding: 0.75rem 1.25rem; background: var(--ff-bg); border: 1px solid var(--ff-border); border-radius: var(--ff-radius-sm); font-family: var(--ff-font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--ff-fg); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; display: flex; align-items: center; justify-content: center; gap: 0.625rem; box-shadow: none; } .google-signin-button:hover { background: var(--ff-surface-2); border-color: var(--ff-amber-ring); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 181, 68, 0.08); } .google-signin-button:active { transform: translateY(0); box-shadow: none; } .google-icon { flex-shrink: 0; } /* --- Privacy policy link (WP 5.0+) -------------------------------- */ .login .privacy-policy-page-link { margin-top: 1rem; text-align: center; } .login .privacy-policy-page-link a { color: var(--ff-fg-dim); font-family: var(--ff-font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-decoration: none; transition: color 180ms ease; } .login .privacy-policy-page-link a:hover { color: var(--ff-amber); } /* --- Responsive --------------------------------------------------- */ @media (max-width: 480px) { #login { width: 92vw; max-width: 360px; padding: 4vh 0 2rem; } .login form { padding: 1.5rem; } }