/* * login.css — Plectra theme (05r-01 / WP-DESIGN-02; D3 re-brand 2026-06-16) * * Brands wp-login.php to the D3 · Open Hand register: paper background, Hanken * Grotesk, warm ink, terracotta accents. Replaces the WordPress logo with a text * wordmark (the community name, supplied via the login_headertext filter), kills * the grey card / system font / system-blue submit (UI-REVIEW P0-3). * * Colors are LOCAL custom properties defined in THIS file's :root, by design: * wp-login.php renders outside the theme's pipeline, so neither theme.json presets * nor codex.css :root vars are a safe dependency. Local vars defined here are as * resilient as literals (they exist whenever login.css loads at all) AND let the * whole surface flip to dark by redefining four values — no per-rule dark variant. * Light: paper #FAF6EF, ink #1A1A1A, terracotta #A8412A, rule #E4DCCD. * * The submit button uses --l-ink (fill) / --l-paper (label); since both invert in * dark, the button stays high-contrast in both modes with no extra rule. * * D3 re-brand: the wordmark/body font stack uses the Capsize metric face * "Hanken Grotesk Fallback" (defined in fonts.css, already enqueued before this * file) — so during the font swap the system fallback occupies Hanken's box and * the login wordmark no longer reflows (no swap-CLS). WCAG AA: ink-on-paper and * paper-on-ink exceed 4.5:1 in both modes (verified in tests/test-contrast.php). * * @package plectra-theme */ :root { --l-paper: #FAF6EF; --l-ink: #1A1A1A; --l-rule: #E4DCCD; --l-accent: #A8412A; } /* Dark — pinned mode, then OS preference when no mode is pinned. Mode is set on before paint by the no-FOUC script (functions.php), so no login flash. */ html[data-mode="dark"] { --l-paper: #2A2620; /* lightened dark paper — converged with modes.css member surfaces (was #1B1915, stale since the 2026-06-16 "lighter dark" walk round d1ed203) */ --l-ink: #FAF6EF; --l-rule: #423B31; /* converged with modes.css --color-rule dark (was #38332A) */ --l-accent: #E58361; } @media (prefers-color-scheme: dark) { html:not([data-mode="light"]):not([data-mode="dark"]) { --l-paper: #2A2620; /* keep in sync with the [data-mode="dark"] block above (converged 2026-06-17) */ --l-ink: #FAF6EF; --l-rule: #423B31; --l-accent: #E58361; } } body.login { background: var(--l-paper); color: var(--l-ink); font-family: 'Hanken Grotesk', 'Hanken Grotesk Fallback', 'Inter', 'Helvetica Neue', Arial, sans-serif; } /* Wordmark — reveal the headertext (default WP hides it with text-indent and shows a logo background-image). Strip the logo, show the community name. The metric fallback in the stack keeps it from reflowing while Hanken Grotesk loads. */ .login h1 a { background-image: none; background: none; width: auto; height: auto; margin: 0 auto 1.5rem; padding: 0; text-indent: 0; overflow: visible; font-family: 'Hanken Grotesk', 'Hanken Grotesk Fallback', 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--l-ink); } /* Form card — paper with a quiet rule border, no drop shadow. */ .login form { background: var(--l-paper); border: 1px solid var(--l-rule); border-radius: 0; box-shadow: none; font-family: inherit; } .login label { color: var(--l-ink); font-size: 0.9375rem; } .login input[type="text"], .login input[type="password"], .login input[type="email"] { background: var(--l-paper); /* 05r-05 #4: paper, not the stock white panel — field affordance carried by the rule border + terracotta focus ring */ border: 1px solid var(--l-rule); border-radius: 0; color: var(--l-ink); box-shadow: none; } .login input[type="text"]:focus, .login input[type="password"]:focus, .login input[type="email"]:focus { border-color: var(--l-accent); box-shadow: 0 0 0 1px var(--l-accent); outline: 2px solid transparent; /* visible focus carried by the ring */ } /* Submit — ink filled, terracotta on hover (matches the register's button intent). */ .wp-core-ui .button-primary { background: var(--l-ink); border: 1px solid var(--l-ink); border-radius: 0; color: var(--l-paper); box-shadow: none; text-shadow: none; font-family: inherit; font-weight: 500; } .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: var(--l-accent); border-color: var(--l-accent); color: var(--l-paper); } /* Quiet links — terracotta, never system-blue. */ .login #nav a, .login #backtoblog a, .login a { color: var(--l-accent); } .login #nav a:hover, .login #backtoblog a:hover, .login a:hover { color: var(--l-ink); } /* 05r-05 #6: password-reveal eye — stock WP renders the dashicon in system blue. Re-tone to ink (terracotta on hover/focus) so no system blue appears on the surface. */ .login .wp-hide-pw .dashicons, .login button.wp-hide-pw .dashicons { color: var(--l-ink); } .login .wp-hide-pw:hover .dashicons, .login .wp-hide-pw:focus .dashicons { color: var(--l-accent); } .login .wp-hide-pw { background: transparent; border: none; box-shadow: none; } /* 05r-05 gate residual: the "Remember Me" checkbox under the password field ships a stock white fill + harsh #1E1E1E border — the faint stock-tone box on cream Dom flagged at the gate. Re-tone to paper + rule, and carry the checked state in terracotta so no system colour shows. (accent-color paints the native check in supporting browsers; the paper/rule fallback keeps it in-register everywhere.) */ .login input[type="checkbox"] { background: var(--l-paper); border: 1px solid var(--l-rule); border-radius: 0; box-shadow: none; accent-color: var(--l-accent); } .login input[type="checkbox"]:checked { background: var(--l-accent); border-color: var(--l-accent); } .login input[type="checkbox"]:focus { border-color: var(--l-accent); box-shadow: 0 0 0 1px var(--l-accent); outline: 2px solid transparent; } /* 05r-05 gate residual: the password-strength meter (#pass-strength-result) and its hint render on the reset-password / change-password screens with WP's stock grey strip (#f0f0f1 fill, #dcdcde border). It is not on the main login form, but a member who follows "Lost your password?" lands here — keep the strip in-register: paper by default, and re-tone WP's strength states (which otherwise flash system red/yellow/green) to the terracotta/rule register. */ .login #pass-strength-result { background: var(--l-paper); border: 1px solid var(--l-rule); border-radius: 0; color: var(--l-ink); } .login #pass-strength-result.short, .login #pass-strength-result.bad, .login #pass-strength-result.good, .login #pass-strength-result.strong { background: var(--l-paper); border-color: var(--l-accent); } /* ─── Login-door footer (walk 2026-06-17) ──────────────────────────────────── The branded door had no footer — no copyright, Terms/Privacy, or curator credit (only the floating corner toggle). plectra_login_footer() (functions.php) now prints the same structured footer the rest of the site carries; style it here in the register so the door matches every other surface. Quiet, centered beneath the form (max-width aligns under the login column), a hairline top rule to seal it off, mist-toned small type. The credit links inherit the terracotta `.login a` rule above. Light + dark are both covered by the local --l-* vars (no extra dark rule). The color-mode toggle mounts into .plectra-footer__modes at the foot — no longer the fixed corner. */ .plectra-login-footer { max-width: 320px; /* aligns under the wp-login form column */ margin: 1.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--l-rule); text-align: center; font-size: 0.8125rem; line-height: 1.5; color: var(--l-ink); } .plectra-login-footer p { margin: 0; font-family: inherit; } .plectra-login-footer .plectra-footer__copy { opacity: 0.7; /* the quiet legal line */ } .plectra-login-footer .plectra-footer__credits { margin-top: 0.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; opacity: 0.85; } .plectra-login-footer .plectra-footer__sep { color: var(--l-rule); /* the bullet, quieter than the text */ } /* The mode toggle mounts here (functions.php). Center it at the foot with a little breathing room; empty (no-JS) → the slot collapses and the footer ends at the credit line. */ .plectra-login-footer .plectra-footer__modes { margin-top: 0.75rem; }