/* * Business login layout. * * Full-page centered card. Inherits all component styles (buttons, inputs, * badges) from plugin-base.css — this file is layout only. * * The cyan wash on a navy background echoes the dashboard CTA gradient so * the visual language carries across the auth → dashboard transition. */ body.pmd-login-body { margin: 0; padding: 0; min-height: 100vh; background: var(--pmd-navy); font-family: var(--pmd-font-body); color: var(--pmd-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } .pmd-login, .pmd-login * { box-sizing: border-box; } .pmd-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: radial-gradient(circle at 20% 10%, rgba(var(--pmd-cyan-rgb), 0.14) 0%, rgba(var(--pmd-cyan-rgb), 0) 46%), radial-gradient(circle at 90% 110%, rgba(var(--pmd-cyan-rgb), 0.10) 0%, rgba(var(--pmd-cyan-rgb), 0) 50%), var(--pmd-navy); } .pmd-login a { color: var(--pmd-navy); } /* AUD-01 link-state guard (2026-07-13): GeneratePress's Customizer dynamic * CSS sets `a:hover, a:focus, a:active { color: var(--contrast-3) }` at * (0,1,1) — the SAME specificity as `.pmd-login-footer-note a` — and it * prints later in , so on hover/keyboard-focus auth links flipped to * #7eddea (~1.4:1 on white; measured live on the challenge's "Cancel and * start over"). This (0,2,1) rule wins the tie in every order. Colour only: * per-link decorations (hover underline etc.) still come from their own * rules. Covers the login/forgot/reset/challenge steps AND the invite page * (invite.php shares the .pmd-login wrapper). */ .pmd-login a:hover, .pmd-login a:focus, .pmd-login a:active { color: var(--pmd-navy); } .pmd-login a:focus-visible, .pmd-login button:focus-visible { outline: 2px solid var(--pmd-focus-ring); outline-offset: 2px; border-radius: var(--pmd-radius-sm); } .pmd-login-main { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .pmd-login-logo { display: block; text-decoration: none; } .pmd-login-logo .pmd-logo-img { height: 104px; /* The logo artwork has dark elements — on the navy page background we rely on the white outline in the PNG for contrast. No filter needed. */ } .pmd-login-card { width: 100%; background: var(--pmd-white); border-radius: var(--pmd-radius-lg); padding: 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.30); color: var(--pmd-text); } .pmd-login-head { text-align: center; margin-bottom: 22px; } .pmd-login-head h1 { font-family: var(--pmd-font-display); font-weight: 600; font-size: 22px; margin: 0 0 6px; color: var(--pmd-navy); } .pmd-login-head p { margin: 0; font-size: 14px; color: var(--pmd-text-muted); } .pmd-login-form { display: flex; flex-direction: column; gap: 0; } .pmd-btn-block { width: 100%; } .pmd-login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; } .pmd-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pmd-text-muted); cursor: pointer; user-select: none; } .pmd-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pmd-navy); margin: 0; } .pmd-login-forgot { font-size: 13.5px; color: var(--pmd-navy); text-decoration: none; font-weight: 500; } .pmd-login-forgot:hover { text-decoration: underline; text-decoration-color: var(--pmd-cyan-dark); } .pmd-login-footer-note { text-align: center; margin: 18px 0 0; font-size: 13.5px; color: var(--pmd-text-muted); } .pmd-login-footer-note a { color: var(--pmd-navy); font-weight: 500; text-decoration: none; } .pmd-login-footer-note a:hover { text-decoration: underline; text-decoration-color: var(--pmd-cyan-dark); } .pmd-login-hint { margin: 10px 0 18px; font-size: 13px; color: var(--pmd-text-muted); text-align: center; } .pmd-login-hint a { color: var(--pmd-navy); } .pmd-login-support { margin: 0; font-size: 13px; color: rgba(var(--pmd-white-rgb), 0.70); text-align: center; } .pmd-login-support a { color: var(--pmd-cyan); text-decoration: none; } .pmd-login-support a:hover { text-decoration: underline; } /* -------------------------------------------------------------------- * Alerts * ------------------------------------------------------------------ */ .pmd-alert { padding: 12px 14px; border-radius: var(--pmd-radius-md); font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; } .pmd-alert-error { background: var(--pmd-danger-bg); color: var(--pmd-danger); border: 1px solid var(--pmd-danger); } .pmd-alert a { color: inherit; font-weight: 600; text-decoration: underline; } /* Small screens */ @media (max-width: 480px) { .pmd-login { padding: 24px 16px; } .pmd-login-card { padding: 26px 22px; } .pmd-login-head h1 { font-size: 20px; } .pmd-login-row { flex-direction: column; align-items: flex-start; } } /* Reduced motion is handled by the single plugin-wide guard in plugin-base.css (IMPECCABLE-AUDIT.md P2) — no per-file block needed. */ /* --- AS-2a Stage 2: passkey branch on the challenge step ----------------- */ /* The block ships hidden; twofactor-login.js reveals it after WebAuthn feature-detect. Styles piggyback the existing button classes. */ /* Spacing per the drawn CH1 (set-c .pk margin-top:16px — the ident-to-button breath; operator-caught cramped on live 2026-07-21). */ .pmd-2fa-passkey { margin: 16px 0 0; } /* M-11 (P2-25 split): the passkey message base is NEUTRAL ink — a cancel is not an error. Failures/verify-rejections add .is-err (danger). The drawn 21px min-height reserve is restored (set-c .pk-msg): the empty message holds its line so the ladder below never jumps when a cancel note lands. */ .pmd-2fa-passkey-msg { margin: 10px 0 0; font-size: 13px; color: var(--pmd-text); line-height: 1.5; min-height: 21px; } .pmd-2fa-passkey-msg.is-err { color: var(--pmd-danger, #a82020); } /* CH2/CH3 reveal demotion (C12 never-co-equal): the drawn btn-quiet weight — white, navy ink, input-weight ring. JS toggles this on foldForm(false). Ring is an inset box-shadow, not a border: .pmd-btn ships border:0, so a real border would grow the button 3px on state toggle. Specificity (0,3,0) beats button.pmd-btn.pmd-btn-primary (0,2,1) — measured, both states. */ .pmd-login .pmd-2fa-passkey .pmd-2fa-pk-quiet { background: var(--pmd-white); color: var(--pmd-navy); box-shadow: inset 0 0 0 1.5px #c9cede; } /* Hover hold at (0,6,0): the primary's cyan hover selector sits at (0,5,1) and would flash the demoted button cyan on hover without this. */ .pmd-login .pmd-2fa-passkey .pmd-2fa-pk-quiet:hover:not([disabled]):not(.is-disabled) { background: var(--pmd-white); color: var(--pmd-navy); box-shadow: inset 0 0 0 1.5px #aeb4c6; } .pmd-2fa-passkey-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--pmd-text-muted); font-size: 13px; } .pmd-2fa-passkey-divider::before, .pmd-2fa-passkey-divider::after { content: ""; flex: 1; border-top: 1px solid #e3e6ee; } /* ======================================================================== * M-8 / M-13 / M-14 — the Unit-C challenge skin (2FA recovery map, wave 2). * * The challenge step diverges from the login-page skin BY RULING (the C-skin * won the A/B 34/26): light canvas, ink threshold band with the seam, the * emblem, the graded exit ladder. Login/forgot/reset keep the navy skin above * untouched. Everything here is scoped at two-class-or-better specificity — * the CASCADE-GUARD convention (map-plan amendment): GeneratePress Customizer * rules (headings, inputs, links at (0,1,1)+) must lose to these on live, and * a mockup-clean rule is not assumed live-clean. * ====================================================================== */ /* The canvas: challenge renders on the light surface (P2-20: ships as --pmd-surface; no desk token blessed). Support line flips to muted-on-light. */ .pmd-login[data-step="challenge"] { background: var(--pmd-surface); } /* The light canvas carries the for-light BUSINESS lockup (operator-ruled 2026-07-21; sized to the established light-ground precedent — the 72px email-shell header — not the retired 34px horizontal-lockup slot). */ .pmd-login[data-step="challenge"] .pmd-logo-img--challenge { height: 72px; width: auto; } .pmd-login[data-step="challenge"] .pmd-login-support { color: var(--pmd-text-muted); } .pmd-login[data-step="challenge"] .pmd-login-support a { color: var(--pmd-navy); } /* The card: rest elevation (soft navy-tinted two-stop — never the hard black overlay shadow), zero padding (the threshold + work sections own it). */ .pmd-login[data-step="challenge"] .pmd-login-card { padding: 0; background: transparent; box-shadow: 0 1px 2px rgba(28,25,45,.04), 0 4px 14px rgba(28,25,45,.06); border-radius: var(--pmd-radius-lg); max-width: 460px; } .pmd-login[data-step="challenge"] .pmd-login-main { max-width: 460px; } /* The threshold: ink band + THE SEAM (the sanctioned cyan junction line — DESIGN.md Cyan-Is-A-Signal; 2px light-line where ink meets paper). */ .pmd-login .pmd-2fa-threshold { background: linear-gradient(160deg, var(--pmd-navy) 0%, #241f3a 70%, #171426 100%); color: #fff; border-radius: var(--pmd-radius-lg) var(--pmd-radius-lg) 0 0; padding: 20px 26px 18px; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; /* the seam stays inside the radius */ } .pmd-login .pmd-2fa-threshold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #6fdcef, #a5e4e0 45%, rgba(165,228,224,0) 85%); } /* Emblem slot floor (BANKED RULING: never below 44px on any viewport; the guard pins width/height against theme img max-width/height:auto rules). */ .pmd-login .pmd-2fa-threshold .pmd-2fa-emblem { width: 48px; height: 48px; min-width: 44px; min-height: 44px; max-width: none; flex: none; display: block; } .pmd-login .pmd-2fa-lede { font-family: var(--pmd-font-display); font-weight: 600; font-size: 16px; /* Title rung (M-16 snap from 15.5) */ line-height: 1.35; color: #fff; margin: 0; } /* The work panel (paper below the seam). */ .pmd-login .pmd-2fa-work { background: var(--pmd-white); border-radius: 0 0 var(--pmd-radius-lg) var(--pmd-radius-lg); padding: 26px 26px 24px; text-align: left; } .pmd-login .pmd-2fa-work.pmd-2fa-solo { border-radius: var(--pmd-radius-lg); /* CH8 terminal panel, no threshold */ } /* Type: challenge h1 24px (the expansion scale) — heading guard vs GP Customizer heading selectors (HIGHEST-RISK cascade element, enumerated). */ .pmd-login .pmd-2fa-work h1 { font-family: var(--pmd-font-display); font-weight: 600; font-size: 24px; /* sheet-blessed (set-c:40 draws 24; recorded at M-16, not drift) */ letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 8px; color: var(--pmd-navy); text-align: left; text-wrap: balance; } .pmd-login .pmd-2fa-sub { color: var(--pmd-text-muted); font-size: 14.5px; margin: 0; } .pmd-login .pmd-2fa-ident { font-size: 13px; color: var(--pmd-text-muted); margin: 4px 0 0; } /* The code field — DATA register (mono), cyan focus wash, danger error ring. */ .pmd-login .pmd-2fa-form { margin-top: 16px; } .pmd-login .pmd-2fa-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--pmd-text); } .pmd-login .pmd-2fa-input { font-family: var(--pmd-font-mono); font-weight: 500; font-size: 17px; letter-spacing: 0.15em; width: 100%; padding: 11px 14px; border: 1px solid #868c9c; border-radius: var(--pmd-radius-md); color: var(--pmd-text); caret-color: var(--pmd-text); background: var(--pmd-white); } .pmd-login .pmd-2fa-input::placeholder { color: var(--pmd-text-muted); } .pmd-login .pmd-2fa-input:focus { outline: none; border-color: var(--pmd-cyan-dark); box-shadow: 0 0 0 3px rgba(var(--pmd-cyan-rgb), .35); /* The 0.25.29 pattern (phase-4 measured live 2026-07-21): GP's Customizer * input:focus (0,2,1) sets background-color: var(--base-2) — pale green — * and outranks the (0,2,0) rest rule while focused. The focus state must * OWN background + color. */ background: var(--pmd-white); color: var(--pmd-text); } .pmd-login .pmd-2fa-input.is-err { border-color: var(--pmd-danger); box-shadow: 0 0 0 3px rgba(168,32,32,.12); } /* AUD-20 autofill neutralizer, carried forward (regression repair 0.26.8): * the rebuilt input dropped the .pmd-input class and with it this shipped * protection — an OTC autofill (e.g. SMS-code fill on mobile) must not paint * the field yellow/blue on a trust surface. Mirrors plugin-base. */ .pmd-login .pmd-2fa-input:-webkit-autofill, .pmd-login .pmd-2fa-input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px var(--pmd-white) inset; -webkit-text-fill-color: var(--pmd-text); caret-color: var(--pmd-text); } .pmd-login .pmd-2fa-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 3px rgba(var(--pmd-cyan-rgb), .35), 0 0 0 1000px var(--pmd-white) inset; -webkit-text-fill-color: var(--pmd-text); caret-color: var(--pmd-text); } .pmd-login .pmd-2fa-input:focus-visible { outline: 2px solid var(--pmd-focus-ring); outline-offset: 2px; } .pmd-login .pmd-2fa-hint { font-size: 13px; color: var(--pmd-text-muted); margin: 6px 0 0; } .pmd-login .pmd-2fa-field-err { font-size: 13px; color: var(--pmd-danger); margin: 8px 0 0; } .pmd-login .pmd-2fa-verify { margin-top: 14px; } /* Q5 mode toggle — a field-input-mode switch, NOT a recovery rung (operator ruling): field-tied, left-aligned, small, underlined. Ships hidden; JS reveals (no-JS: the field accepts both code types, noscript hint carries the live backup-code line). */ .pmd-login .pmd-2fa-mode-toggle { display: block; background: none; border: none; cursor: pointer; font: 400 13px/1.5 var(--pmd-font-body); color: var(--pmd-text-muted); text-decoration: underline; padding: 8px 0 0; margin: 0; text-align: left; } .pmd-login .pmd-2fa-mode-toggle:focus-visible { outline: 2px solid var(--pmd-focus-ring); outline-offset: 2px; } /* The exit ladder (P3-6, graded): action rung = ghost button · question rung = muted underline · exit rung = 14px muted behind the divider. Cyan stays Verify's alone. */ .pmd-login .pmd-2fa-another { margin-top: 26px; text-align: center; } .pmd-login .pmd-btn-2fa-ghost { background: var(--pmd-white); color: var(--pmd-navy); border: 1px solid #cfd3de; } .pmd-login .pmd-2fa-lost { margin-top: 12px; text-align: center; } .pmd-login .pmd-2fa-lost a, .pmd-login .pmd-2fa-lost button { font: 400 13px/1.55 var(--pmd-font-body); color: var(--pmd-text-muted); text-decoration: underline; background: none; border: none; cursor: pointer; padding: 12px 10px; margin: -12px -10px; display: inline-block; } .pmd-login .pmd-2fa-lost a:hover, .pmd-login .pmd-2fa-lost a:focus, .pmd-login .pmd-2fa-lost a:active { color: var(--pmd-text-muted); } .pmd-login .pmd-2fa-lost a:focus-visible, .pmd-login .pmd-2fa-lost button:focus-visible { outline: 2px solid var(--pmd-focus-ring); outline-offset: 2px; } .pmd-login .pmd-2fa-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e3e6ee; text-align: center; } .pmd-login .pmd-2fa-foot a { color: var(--pmd-text-muted); text-decoration: underline; font-size: 14px; font-weight: 400; padding: 12px 10px; margin: -12px -10px; display: inline-block; } .pmd-login .pmd-2fa-foot a:hover, .pmd-login .pmd-2fa-foot a:focus, .pmd-login .pmd-2fa-foot a:active { color: var(--pmd-text-muted); } /* Challenge-scoped alert (CH10 locked): danger text on tint, no border — distinct from the bordered login-page .pmd-alert-error, per the drawing. */ .pmd-login .pmd-2fa-alert { background: var(--pmd-danger-bg); color: var(--pmd-danger); border-radius: var(--pmd-radius-md); padding: 12px 14px; font-size: 13px; margin-top: 14px; } /* CH9b/CH9c request-sent: TEXT-ONLY success register (de-nested by ruling — no green card inside the challenge panel). */ .pmd-login .pmd-2fa-sent { color: var(--pmd-success); font-weight: 600; font-size: 14px; margin-top: 14px; } /* CH11 in-flight: spinner + aria-busy treatment (double-submit guard). */ .pmd-login .pmd-2fa-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(28,25,45,.25); border-top-color: var(--pmd-navy); border-radius: 50%; margin-right: 8px; vertical-align: -2px; animation: pmd-2fa-spin .7s linear infinite; } @keyframes pmd-2fa-spin { to { transform: rotate(360deg); } } .pmd-login .pmd-btn[aria-busy="true"] { opacity: .7; cursor: progress; } @media (prefers-reduced-motion: reduce) { .pmd-login .pmd-2fa-spin { animation: none; } } @media (max-width: 500px) { .pmd-login[data-step="challenge"] .pmd-login-card { max-width: 100%; } .pmd-login .pmd-2fa-work { padding: 22px 20px 20px; } .pmd-login .pmd-2fa-threshold { padding: 18px 20px 16px; } }