/** * WP 2FA – Vaulted Shipping “Calm Premium” frontend skin. * * This stylesheet maps the public WP 2FA experience to the visual language used * by Vaulted Shipping: warm neutral page surfaces, white cards, teal actions, * serif display headings, pill controls, soft borders and restrained shadows. * It is intentionally scoped to WP 2FA components and the plugin's 2FA login * screen so the active WordPress theme is not restyled globally. */ /* -------------------------------------------------------------------------- Design tokens -------------------------------------------------------------------------- */ .wp2fa-profile, .wp2fa-setup-wizard-modal, .wp2fa-dialog-modal, .wp2fa-passkey-modal, .wp-2fa-passkey-list-table, .wp2fa-modal .modal__container, .wp-2fa-login-wrapper, .wp-2fa-login-short-code-wrapper, .wp-2fa-login-woocommerce-wrapper, body.wp-2fa-login { --wp2fa-vaulted-accent: #0f766e; --wp2fa-vaulted-accent-dark: #115e59; --wp2fa-vaulted-accent-soft: #ecfdf5; --wp2fa-vaulted-ink: #1f2933; --wp2fa-vaulted-muted: #6b7280; --wp2fa-vaulted-page: #fbfaf7; --wp2fa-vaulted-surface: #ffffff; --wp2fa-vaulted-surface-soft: #f8f7f3; --wp2fa-vaulted-border: #e2dfd5; --wp2fa-vaulted-border-soft: #efede7; --wp2fa-vaulted-success: #147d64; --wp2fa-vaulted-success-soft: #ebf8f3; --wp2fa-vaulted-warning: #9a6700; --wp2fa-vaulted-warning-soft: #fff7df; --wp2fa-vaulted-danger: #b42318; --wp2fa-vaulted-danger-soft: #fff1ef; --wp2fa-vaulted-shadow: 0 11px 34px rgba(63, 55, 36, 0.06); --wp2fa-vaulted-shadow-strong: 0 24px 60px rgba(15, 23, 28, 0.22); --wp2fa-vaulted-focus: 0 0 0 3px rgba(15, 118, 110, 0.18); } .wp2fa-profile *, .wp2fa-profile *::before, .wp2fa-profile *::after, .wp2fa-setup-wizard-modal *, .wp2fa-setup-wizard-modal *::before, .wp2fa-setup-wizard-modal *::after, .wp2fa-dialog-modal *, .wp2fa-dialog-modal *::before, .wp2fa-dialog-modal *::after, .wp2fa-passkey-modal *, .wp2fa-passkey-modal *::before, .wp2fa-passkey-modal *::after { box-sizing: border-box; } .wp2fa-profile a, .wp2fa-setup-wizard-modal a, .wp2fa-dialog-modal a, .wp2fa-passkey-modal a, .wp2fa-modal a { color: var(--wp2fa-vaulted-accent); } .wp2fa-profile a:hover, .wp2fa-profile a:focus, .wp2fa-setup-wizard-modal a:hover, .wp2fa-setup-wizard-modal a:focus, .wp2fa-dialog-modal a:hover, .wp2fa-dialog-modal a:focus, .wp2fa-passkey-modal a:hover, .wp2fa-passkey-modal a:focus, .wp2fa-modal a:hover, .wp2fa-modal a:focus { color: var(--wp2fa-vaulted-accent-dark); } /* -------------------------------------------------------------------------- Frontend profile / shortcode area -------------------------------------------------------------------------- */ .wp-2fa-shortcode-wrapper, .woocommerce-MyAccount-content .wp-2fa-shortcode-wrapper { width: 100%; min-width: 0; } .wp2fa-profile { width: 100% !important; max-width: 960px !important; min-width: 0; box-sizing: border-box !important; margin: 0 auto !important; padding: clamp(20px, 3vw, 30px) !important; border: 0 !important; border-radius: 24px !important; background: var(--wp2fa-vaulted-page) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-family: inherit !important; line-height: 1.55; } .wp2fa-profile__title { margin: 0 0 8px !important; padding: 0 !important; color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(30px, 4vw, 38px) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -0.025em; } .wp2fa-profile__desc { max-width: 690px; margin: 0 0 22px !important; color: var(--wp2fa-vaulted-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } .wp2fa-profile__summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px !important; padding: 0 !important; border: 0 !important; } .wp2fa-profile__summary-row { min-width: 0; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 5px; padding: 15px 17px !important; border: 1px solid var(--wp2fa-vaulted-border-soft); border-radius: 15px; background: var(--wp2fa-vaulted-surface); box-shadow: 0 7px 22px rgba(63, 55, 36, 0.045); } .wp2fa-profile__summary-label { min-width: 0 !important; color: var(--wp2fa-vaulted-accent) !important; font-size: 10px !important; font-weight: 750 !important; line-height: 1.2 !important; letter-spacing: 0.07em; text-transform: uppercase; } .wp2fa-profile__summary-value { min-width: 0; color: var(--wp2fa-vaulted-ink) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45; overflow-wrap: anywhere; } .wp2fa-profile__configure-now-link, .wp2fa-profile__status-text a, .wp2fa-profile-backup-codes__close-link, .wp2fa-profile__confirm-cancel-link { color: var(--wp2fa-vaulted-accent) !important; font-weight: 680; text-decoration-thickness: 1px; text-underline-offset: 2px; } .wp2fa-profile__section-title { margin: 0 0 12px !important; color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -0.02em; } .wp2fa-profile__cards { gap: 14px !important; margin: 0 0 24px !important; } .wp2fa-profile__card { min-width: 0; padding: 20px !important; border: 0 !important; border-radius: 19px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow) !important; } .wp2fa-profile__card-title, .wp2fa-profile__admin-title { margin: 0 0 14px !important; color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.25 !important; } .wp2fa-profile__btn-group { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 10px !important; } .wp2fa-profile__btn, .wp2fa-profile__totp-toggle, .wp2fa-profile__copy-btn, .wp2fa-open-wizard-btn, .wp-2fa-passkey-add-btn { min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 0 15px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 999px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-family: inherit !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; text-transform: none !important; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important; } .wp2fa-profile__btn:hover, .wp2fa-profile__totp-toggle:hover, .wp2fa-profile__copy-btn:hover, .wp2fa-open-wizard-btn:hover, .wp-2fa-passkey-add-btn:hover { border-color: #c9c4b8 !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: 0 5px 16px rgba(63, 55, 36, 0.07) !important; transform: translateY(-1px); } .wp2fa-profile__btn--primary, .wp2fa-profile__totp-toggle, .wp2fa-profile__copy-btn, .wp2fa-open-wizard-btn, .wp-2fa-passkey-add-btn { border-color: var(--wp2fa-vaulted-accent) !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; } /* Compact card actions: match the rounded Passkeys control instead of the plugin/theme's default full-width rectangular buttons. The ID-scoped selectors deliberately outrank WooCommerce and theme button rules. */ .wp2fa-profile #wp2fa-setup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn, .wp2fa-profile #wp2fa-backup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn { width: auto !important; max-width: 100% !important; height: auto !important; min-height: 44px !important; flex: 0 0 auto !important; align-self: flex-start !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 11px 20px !important; border-width: 1px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: none !important; white-space: normal !important; overflow-wrap: anywhere; } .wp2fa-profile #wp2fa-setup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn--primary, .wp2fa-profile #wp2fa-backup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn--primary { border-color: var(--wp2fa-vaulted-accent) !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; } .wp2fa-profile #wp2fa-setup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn--primary:hover, .wp2fa-profile #wp2fa-setup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn--primary:focus, .wp2fa-profile #wp2fa-backup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn--primary:hover, .wp2fa-profile #wp2fa-backup-card .wp2fa-profile__btn-group > .wp2fa-profile__btn--primary:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18) !important; } /* Permanent hooks for the two profile-card actions. These selectors use the buttons' data attributes, so the pill styling survives plugins/themes that add or replace generic WordPress button classes after page load. */ #wp2fa-profile-section #wp2fa-setup-card button[data-wp2fa-open-wizard], #wp2fa-profile-section #wp2fa-backup-card button[data-wp2fa-generate-backup-codes] { box-sizing: border-box !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px !important; flex: 0 0 auto !important; align-self: flex-start !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 11px 20px !important; border: 1px solid var(--wp2fa-vaulted-accent) !important; border-radius: 999px !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-align: center !important; text-decoration: none !important; text-shadow: none !important; text-transform: none !important; white-space: normal !important; appearance: none !important; -webkit-appearance: none !important; } #wp2fa-profile-section #wp2fa-setup-card button[data-wp2fa-open-wizard]:hover, #wp2fa-profile-section #wp2fa-setup-card button[data-wp2fa-open-wizard]:focus, #wp2fa-profile-section #wp2fa-backup-card button[data-wp2fa-generate-backup-codes]:hover, #wp2fa-profile-section #wp2fa-backup-card button[data-wp2fa-generate-backup-codes]:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18) !important; } .wp2fa-profile__btn--primary:hover, .wp2fa-profile__btn--primary:focus, .wp2fa-profile__totp-toggle:hover, .wp2fa-profile__totp-toggle:focus, .wp2fa-profile__copy-btn:hover, .wp2fa-profile__copy-btn:focus, .wp2fa-open-wizard-btn:hover, .wp2fa-open-wizard-btn:focus, .wp-2fa-passkey-add-btn:hover, .wp-2fa-passkey-add-btn:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; } .wp2fa-profile__btn--secondary { border-color: var(--wp2fa-vaulted-border) !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; } .wp2fa-profile__btn--secondary:hover, .wp2fa-profile__btn--secondary:focus { border-color: var(--wp2fa-vaulted-accent) !important; background: #f4faf9 !important; color: var(--wp2fa-vaulted-accent-dark) !important; } .wp2fa-profile__btn--danger { border-color: rgba(180, 35, 24, 0.25) !important; background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; } .wp2fa-profile__btn--danger:hover, .wp2fa-profile__btn--danger:focus { border-color: var(--wp2fa-vaulted-danger) !important; background: #ffe8e5 !important; color: #8f1d14 !important; } .wp2fa-profile__btn:focus-visible, .wp2fa-profile__totp-toggle:focus-visible, .wp2fa-profile__copy-btn:focus-visible, .wp2fa-open-wizard-btn:focus-visible, .wp-2fa-passkey-add-btn:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2) !important; outline-offset: 2px !important; } .wp2fa-profile__btn:disabled, .wp2fa-profile__btn[disabled], .wp2fa-profile__btn--disabled { opacity: 0.48 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; } .wp2fa-profile__status-text, .wp2fa-profile__admin-desc { color: var(--wp2fa-vaulted-muted) !important; font-size: 11px !important; line-height: 1.55 !important; } .wp2fa-profile__totp-details, .wp2fa-profile__admin-actions { margin: 0 0 18px !important; padding: 18px !important; border: 0 !important; border-radius: 18px; background: var(--wp2fa-vaulted-surface); box-shadow: var(--wp2fa-vaulted-shadow); } .wp2fa-profile__admin-actions { margin-top: 20px !important; } .wp2fa-profile__totp-content { margin-top: 14px !important; padding: 16px; border: 1px solid var(--wp2fa-vaulted-border-soft); border-radius: 15px; background: var(--wp2fa-vaulted-surface-soft); } .wp2fa-profile__totp-qr, .wp2fa-totp-qr-code { padding: 7px; border: 1px solid var(--wp2fa-vaulted-border-soft) !important; border-radius: 16px !important; background: #fff; } .wp2fa-profile__totp-key-wrap { padding: 7px; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 12px !important; background: #fff; } .wp2fa-profile__totp-key-input, .wp2fa-profile-backup-codes__textarea { border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; } .wp2fa-profile__totp-key-input:focus, .wp2fa-profile-backup-codes__textarea:focus { border-color: var(--wp2fa-vaulted-accent) !important; box-shadow: var(--wp2fa-vaulted-focus) !important; outline: 0 !important; } .wp2fa-profile__notice { padding: 12px 14px !important; border: 0 !important; border-radius: 15px !important; background: var(--wp2fa-vaulted-warning-soft) !important; color: var(--wp2fa-vaulted-warning) !important; font-size: 12px !important; line-height: 1.5 !important; } /* Profile confirmation and backup-code dialogs. */ .wp2fa-profile__confirm-overlay { background: rgba(15, 23, 28, 0.55) !important; padding: 20px; backdrop-filter: blur(3px); } .wp2fa-profile__confirm-dialog { max-width: 460px !important; padding: 24px !important; border: 0 !important; border-radius: 20px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow-strong) !important; } .wp2fa-profile__confirm-dialog h3 { margin: 0 0 8px !important; color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.2 !important; } .wp2fa-profile__confirm-dialog p { color: var(--wp2fa-vaulted-muted) !important; font-size: 13px !important; line-height: 1.55 !important; } .wp2fa-profile__confirm-icon, .wp2fa-profile-backup-codes__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--wp2fa-vaulted-accent-soft); color: var(--wp2fa-vaulted-accent); } /* -------------------------------------------------------------------------- New setup wizard -------------------------------------------------------------------------- */ .wp2fa-setup-wizard-overlay { padding: 20px; background: rgba(15, 23, 28, 0.55) !important; backdrop-filter: blur(4px); } .wp2fa-setup-wizard-modal, .default_styling.wp2fa-setup-wizard-modal { width: min(94%, 680px) !important; max-width: 680px !important; max-height: min(90vh, 860px) !important; border: 0 !important; border-radius: 24px !important; background: var(--wp2fa-vaulted-page) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow-strong) !important; overflow: auto; } .wp2fa-setup-wizard-header { padding: 25px 28px 10px !important; border: 0 !important; background: transparent !important; } .wp2fa-setup-wizard-header-logo-row { margin-bottom: 10px !important; } .wp2fa-setup-wizard-header-logo { max-height: 44px !important; } .wp2fa-setup-wizard-title, .default_styling .wp2fa-setup-wizard-title { margin: 0 !important; color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(27px, 5vw, 34px) !important; font-weight: 500 !important; line-height: 1.12 !important; letter-spacing: -0.025em; } .wp2fa-setup-wizard-close, .default_styling .wp2fa-setup-wizard-close { top: 17px !important; inset-inline-end: 18px !important; width: 36px; height: 36px; display: grid !important; place-items: center; padding: 0 !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 50% !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-muted) !important; font-size: 22px !important; box-shadow: 0 4px 13px rgba(63, 55, 36, 0.05); } .wp2fa-setup-wizard-close:hover, .wp2fa-setup-wizard-close:focus, .default_styling .wp2fa-setup-wizard-close:hover, .default_styling .wp2fa-setup-wizard-close:focus { border-color: #c9c4b8 !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; transform: translateY(-1px); } .wp2fa-setup-wizard-body, .default_styling .wp2fa-setup-wizard-body { margin-top: 0 !important; padding: 20px 28px 26px !important; color: var(--wp2fa-vaulted-ink) !important; font-family: inherit !important; font-size: 13px; line-height: 1.6; } .wp2fa-setup-wizard-body h2, .wp2fa-setup-wizard-body h3, .wp2fa-setup-wizard-body h4, .wp2fa-wizard-backup-select-title, .wp2fa-wizard-completion-content h2, .wp2fa-wizard-completion-content h3 { color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: -0.015em; } .wp2fa-setup-wizard-body p, .wp2fa-wizard-method-description, .default_styling .wp2fa-wizard-method-description, .wp2fa-wizard-backup-select-description, .wp2fa-email-setup-description, .wp2fa-email-help-text, .wp2fa-totp-verify-description, .wp2fa-email-verify-description, .wp2fa-backup-codes-intro, .wp2fa-backup-codes-display-intro, .wp2fa-wizard-completion-content { color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-wizard-methods-list, .wp2fa-email-options-list, .wp2fa-oob-options-list, .wp2fa-email-backup-options-list { display: grid; gap: 10px; } .wp2fa-wizard-method-item, .wp2fa-email-option-item, .wp2fa-oob-option-item, .wp2fa-email-backup-option-item { margin: 0 !important; } .wp2fa-wizard-method-label, .default_styling .wp2fa-wizard-method-label, .wp2fa-email-option-label, .default_styling .wp2fa-email-option-label, .wp2fa-oob-option-label, .wp2fa-email-backup-option-label { min-height: 68px; padding: 14px 16px !important; border: 1px solid var(--wp2fa-vaulted-border-soft) !important; border-radius: 15px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: 0 5px 18px rgba(63, 55, 36, 0.035); transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important; } .wp2fa-wizard-method-label:hover, .default_styling .wp2fa-wizard-method-label:hover, .wp2fa-email-option-label:hover, .default_styling .wp2fa-email-option-label:hover, .wp2fa-oob-option-label:hover, .wp2fa-email-backup-option-label:hover { border-color: rgba(15, 118, 110, 0.42) !important; background: #fff !important; box-shadow: 0 8px 22px rgba(63, 55, 36, 0.055); transform: translateY(-1px); } .wp2fa-wizard-method-label:has(.wp2fa-wizard-method-radio:checked), .default_styling .wp2fa-wizard-method-label:has(.wp2fa-wizard-method-radio:checked), .wp2fa-email-option-label:has(input:checked), .default_styling .wp2fa-email-option-label:has(input:checked), .wp2fa-oob-option-label:has(input:checked), .wp2fa-email-backup-option-label:has(input:checked) { border-color: var(--wp2fa-vaulted-accent) !important; background: var(--wp2fa-vaulted-accent-soft) !important; box-shadow: 0 8px 22px rgba(15, 118, 110, 0.07); } .wp2fa-wizard-method-radio, .wp2fa-email-option-radio, .wp2fa-oob-option-radio, .wp2fa-email-backup-option-radio { width: 18px !important; height: 18px !important; accent-color: var(--wp2fa-vaulted-accent) !important; } .wp2fa-wizard-method-name, .default_styling .wp2fa-wizard-method-name, .wp2fa-email-option-text, .wp2fa-oob-option-text, .wp2fa-email-backup-option-text { color: var(--wp2fa-vaulted-ink) !important; font-size: 13px !important; font-weight: 720 !important; line-height: 1.35 !important; } .wp2fa-wizard-method-description { margin-top: 3px; font-size: 11px !important; line-height: 1.5 !important; } .wp2fa-wizard-method-unavailable { opacity: 0.58; } .wp2fa-wizard-hint-toggle, .default_styling .wp2fa-wizard-hint-toggle { border-radius: 50% !important; color: var(--wp2fa-vaulted-accent) !important; } .wp2fa-wizard-hint-toggle:hover, .wp2fa-wizard-hint-toggle.wp2fa-wizard-hint-active, .default_styling .wp2fa-wizard-hint-toggle:hover, .default_styling .wp2fa-wizard-hint-toggle.wp2fa-wizard-hint-active { border-radius: 50% !important; background: rgba(15, 118, 110, 0.1) !important; } .wp2fa-wizard-method-hint, .default_styling .wp2fa-wizard-method-hint { padding: 11px 13px !important; border: 0 !important; border-radius: 12px !important; background: var(--wp2fa-vaulted-surface-soft) !important; color: var(--wp2fa-vaulted-muted) !important; font-size: 11px !important; line-height: 1.55 !important; } .wp2fa-setup-wizard-footer, .default_styling .wp2fa-setup-wizard-footer { gap: 9px; padding: 16px 28px 24px !important; border-top: 1px solid var(--wp2fa-vaulted-border-soft) !important; background: rgba(255, 255, 255, 0.6) !important; } .wp2fa-wizard-btn, .wp2fa-setup-wizard-modal .button, .wp2fa-setup-wizard-modal .button-primary, .wp2fa-setup-wizard-modal .button-secondary { min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 0 16px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 999px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-family: inherit !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; text-shadow: none !important; text-transform: none !important; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important; } .wp2fa-wizard-btn:hover, .wp2fa-setup-wizard-modal .button:hover, .wp2fa-setup-wizard-modal .button-secondary:hover { border-color: #c9c4b8 !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: 0 5px 16px rgba(63, 55, 36, 0.07) !important; transform: translateY(-1px); } .wp2fa-wizard-btn-primary, .wp2fa-setup-wizard-modal .button-primary { border-color: var(--wp2fa-vaulted-accent) !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; } .wp2fa-wizard-btn-primary:hover, .wp2fa-wizard-btn-primary:focus, .wp2fa-setup-wizard-modal .button-primary:hover, .wp2fa-setup-wizard-modal .button-primary:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; } .wp2fa-wizard-btn-secondary { border-color: var(--wp2fa-vaulted-border) !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; } .wp2fa-wizard-btn-secondary:hover, .wp2fa-wizard-btn-secondary:focus { border-color: var(--wp2fa-vaulted-accent) !important; background: #f4faf9 !important; color: var(--wp2fa-vaulted-accent-dark) !important; } .wp2fa-wizard-btn-close-later { border-color: rgba(180, 35, 24, 0.2) !important; background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; } .wp2fa-wizard-btn-close-later:hover, .wp2fa-wizard-btn-close-later:focus { border-color: var(--wp2fa-vaulted-danger) !important; background: #ffe8e5 !important; color: #8f1d14 !important; } .wp2fa-wizard-btn:focus-visible, .wp2fa-setup-wizard-modal .button:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.2) !important; outline-offset: 2px !important; } .wp2fa-wizard-btn:disabled, .wp2fa-wizard-btn[disabled], .wp2fa-setup-wizard-modal .button:disabled { opacity: 0.48 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; } .wp2fa-totp-setup-wrapper { gap: 22px !important; } .wp2fa-totp-step-item { color: var(--wp2fa-vaulted-ink) !important; font-size: 13px !important; } .wp2fa-totp-step-item::before, .default_styling .wp2fa-totp-step-item::before, .wp2fa-passkey-steps li::before { background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 6px 15px rgba(15, 118, 110, 0.14); } .wp2fa-totp-key-wrapper, .default_styling .wp2fa-totp-key-wrapper { padding: 9px 12px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 12px !important; background: #fff !important; } .wp2fa-totp-key-input { color: var(--wp2fa-vaulted-ink) !important; } .wp2fa-totp-key-copy { color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-totp-key-copy:hover { color: var(--wp2fa-vaulted-accent) !important; } .wp2fa-copy-tooltip { border-radius: 8px !important; background: var(--wp2fa-vaulted-ink) !important; } .wp2fa-setup-wizard-modal input[type="text"], .wp2fa-setup-wizard-modal input[type="email"], .wp2fa-setup-wizard-modal input[type="tel"], .wp2fa-setup-wizard-modal input[type="number"], .wp2fa-setup-wizard-modal input[type="password"], .wp2fa-setup-wizard-modal select, .wp2fa-setup-wizard-modal textarea, .wp2fa-totp-verify-input, .wp2fa-email-verify-input, .wp2fa-email-custom-input, .wp2fa-backup-codes-textarea, .default_styling .wp2fa-backup-codes-textarea { min-height: 44px; padding: 10px 12px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-family: inherit; font-size: 14px !important; line-height: 1.35 !important; } .wp2fa-setup-wizard-modal textarea, .wp2fa-backup-codes-textarea { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; line-height: 1.7 !important; } .wp2fa-setup-wizard-modal input:focus, .wp2fa-setup-wizard-modal select:focus, .wp2fa-setup-wizard-modal textarea:focus, .wp2fa-totp-verify-input:focus, .wp2fa-email-verify-input:focus, .wp2fa-email-custom-input:focus, .default_styling .wp2fa-totp-verify-input:focus, .default_styling .wp2fa-email-verify-input:focus, .default_styling .wp2fa-email-custom-input:focus { border-color: var(--wp2fa-vaulted-accent) !important; box-shadow: var(--wp2fa-vaulted-focus) !important; outline: 0 !important; } .wp2fa-email-notice, .default_styling .wp2fa-email-notice, .wp2fa-oob-mail-note { padding: 11px 13px !important; border: 0 !important; border-radius: 15px !important; background: var(--wp2fa-vaulted-warning-soft) !important; color: var(--wp2fa-vaulted-warning) !important; font-size: 11px !important; line-height: 1.5 !important; } .wp2fa-wizard-verification-response, .default_styling .wp2fa-wizard-verification-response { padding: 11px 13px !important; border: 0 !important; border-radius: 15px !important; font-size: 11px !important; line-height: 1.5 !important; } .wp2fa-wizard-verification-response.wp2fa-response-success { background: var(--wp2fa-vaulted-success-soft) !important; color: var(--wp2fa-vaulted-success) !important; } .wp2fa-wizard-verification-response.wp2fa-response-error { background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; } .wp2fa-resend-code-link, .default_styling .wp2fa-resend-code-link { color: var(--wp2fa-vaulted-accent) !important; font-weight: 680; text-underline-offset: 2px; } .wp2fa-wizard-spinner, .default_styling .wp2fa-wizard-spinner { border-color: var(--wp2fa-vaulted-border) !important; border-top-color: var(--wp2fa-vaulted-accent) !important; } .wp2fa-wizard-success-icon, .wp2fa-wizard-backup-select-success .wp2fa-wizard-success-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 16px !important; border-radius: 50%; background: var(--wp2fa-vaulted-success-soft); color: var(--wp2fa-vaulted-success); } .wp2fa-wizard-success-icon svg { width: 50px; height: 50px; } .wp2fa-wizard-success-icon svg circle:first-child { fill: var(--wp2fa-vaulted-success-soft) !important; } .wp2fa-wizard-success-icon svg circle:nth-child(2) { fill: #d9f1e8 !important; } .wp2fa-wizard-success-icon svg path { stroke: var(--wp2fa-vaulted-success) !important; } .wp2fa-wizard-confirm-overlay { background: rgba(15, 23, 28, 0.55) !important; backdrop-filter: blur(3px); } .wp2fa-wizard-confirm-dialog, .default_styling .wp2fa-wizard-confirm-dialog { padding: 24px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow-strong) !important; } .wp2fa-wizard-confirm-body h3 { color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 23px !important; font-weight: 500 !important; } .wp2fa-wizard-confirm-body p { color: var(--wp2fa-vaulted-muted) !important; font-size: 13px !important; } /* -------------------------------------------------------------------------- Unified dialogs -------------------------------------------------------------------------- */ .wp2fa-dialog-overlay { padding: 20px; background: rgba(15, 23, 28, 0.55) !important; backdrop-filter: blur(4px); } .wp2fa-dialog-modal, .wp2fa-dialog-overlay--large .wp2fa-premium-dialog-modal { border: 0 !important; border-radius: 20px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow-strong) !important; } .wp2fa-dialog-header, .wp2fa-premium-dialog-modal .wp2fa-dialog-header { padding: 22px 24px 0 !important; } .wp2fa-dialog-title, .wp2fa-premium-dialog-modal .wp2fa-dialog-title { color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.02em; } .wp2fa-dialog-title-highlight { color: var(--wp2fa-vaulted-accent) !important; } .wp2fa-dialog-close, .wp2fa-premium-dialog-modal .wp2fa-dialog-close { width: 34px; height: 34px; display: grid; place-items: center; padding: 0 !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 50% !important; background: #fff !important; color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-dialog-close:hover, .wp2fa-dialog-close:focus, .wp2fa-premium-dialog-modal .wp2fa-dialog-close:hover, .wp2fa-premium-dialog-modal .wp2fa-dialog-close:focus { border-color: #c9c4b8 !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; } .wp2fa-dialog-body, .wp2fa-premium-dialog-modal .wp2fa-dialog-body { padding: 16px 24px 22px !important; color: var(--wp2fa-vaulted-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } .wp2fa-dialog-buttons { gap: 9px !important; padding: 0 24px 22px !important; } .wp2fa-dialog-buttons .button, .wp2fa-premium-dialog-cta { min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 16px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 999px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-family: inherit !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; text-shadow: none !important; text-transform: none !important; } .wp2fa-dialog-buttons .button-primary, .wp2fa-premium-dialog-cta { border-color: var(--wp2fa-vaulted-accent) !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; } .wp2fa-dialog-buttons .button-primary:hover, .wp2fa-dialog-buttons .button-primary:focus, .wp2fa-premium-dialog-cta:hover, .wp2fa-premium-dialog-cta:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; } .wp2fa-dialog-note { color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-premium-dialog-intro, .wp2fa-premium-dialog-description, .wp2fa-premium-dialog-list-description { color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-premium-dialog-list-title { color: var(--wp2fa-vaulted-ink) !important; } .wp2fa-premium-dialog-list-icon { background: var(--wp2fa-vaulted-accent) !important; } .wp2fa-premium-dialog-screenshot { border-color: var(--wp2fa-vaulted-border) !important; border-radius: 15px !important; background: var(--wp2fa-vaulted-surface-soft) !important; } /* -------------------------------------------------------------------------- Passkeys profile table and modal -------------------------------------------------------------------------- */ .wp2fa-profile__passkeys, .wp2fa-profile__passkeys > .wp-2fa-admin, .wp2fa-profile__passkey-table-wrap { width: 100%; max-width: 100%; min-width: 0; } .wp2fa-profile__passkeys { position: relative; display: block; margin-top: 8px; clear: both; } .wp2fa-profile__passkeys > .wp-2fa-admin { position: relative; display: flow-root; } .wp2fa-profile__passkeys .wp-2fa-admin--heading { margin: 0 0 8px !important; color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -0.02em; } .wp2fa-profile__passkeys .description, .wp2fa-profile__passkeys .wp-2fa-passkey-empty-message { max-width: 690px; color: var(--wp2fa-vaulted-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } .wp2fa-profile__passkey-table-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } /* Keep the table in normal document flow. Some frontend themes use a generic .fixed utility for position: fixed, which otherwise pulls this table out of the WP2FA card and stretches it across the viewport. */ .wp2fa-profile .wp2fa-profile__passkey-table-wrap > .wp-2fa-passkey-list-table { position: static !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; clear: both !important; transform: none !important; margin-inline: 0 !important; } .wp-2fa-passkey-list-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; table-layout: fixed !important; margin-top: 12px !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--wp2fa-vaulted-shadow) !important; overflow: hidden; } .wp-2fa-passkey-list-table thead th, .wp-2fa-passkey-list-table tfoot th { padding: 11px 15px !important; border: 0 !important; border-bottom: 1px solid var(--wp2fa-vaulted-border-soft) !important; background: var(--wp2fa-vaulted-surface-soft) !important; color: var(--wp2fa-vaulted-muted) !important; font-size: 10px !important; font-weight: 740 !important; letter-spacing: 0.045em; text-transform: uppercase; } .wp-2fa-passkey-list-table tfoot th { border-top: 1px solid var(--wp2fa-vaulted-border-soft) !important; border-bottom: 0 !important; } .wp-2fa-passkey-list-table tbody tr, .wp-2fa-passkey-list-table.striped > tbody > tr:nth-child(odd), .wp-2fa-passkey-list-table.striped > tbody > tr:nth-child(even) { background: #fff !important; } .wp-2fa-passkey-list-table tbody tr + tr { border-top: 1px solid var(--wp2fa-vaulted-border-soft) !important; } .wp-2fa-passkey-list-table td { padding: 14px 15px !important; overflow-wrap: anywhere; border: 0 !important; color: var(--wp2fa-vaulted-ink) !important; font-size: 12px !important; } .wp-2fa-passkey-list-table th.sortable a:hover, .wp-2fa-passkey-list-table th.sorted a:hover, .wp-2fa-passkey-list-table .button-link.enable_styling, .wp-2fa-passkey-list-table .button-link.enable_styling:hover, .wp-2fa-passkey-list-table .button-link.enable_styling:focus { color: var(--wp2fa-vaulted-accent) !important; } .wp-2fa-passkey-list-table .button-link.enable_styling { font-weight: 680; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Compact passkey row actions. Dedicated classes and strongly scoped selectors prevent WooCommerce or theme button rules from enlarging them. */ .wp2fa-profile .wp-2fa-passkey-list-table td.wp2fa-passkey-actions { white-space: nowrap; } .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 24px !important; min-height: 24px !important; margin: 2px 5px 2px 0 !important; padding: 0 7px !important; border: 1px solid rgba(15, 118, 110, 0.20) !important; border-radius: 999px !important; background: #f1f8f7 !important; color: var(--wp2fa-vaulted-accent-dark) !important; box-shadow: none !important; font-family: inherit !important; font-size: 10px !important; font-style: normal !important; font-weight: 720 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-decoration: none !important; text-indent: 0 !important; text-shadow: none !important; text-transform: none !important; vertical-align: middle !important; white-space: nowrap !important; transform: none !important; } .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action--revoke.button-link.enable_styling, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action--revoke.button-link.enable_styling { margin-inline-end: 0 !important; border-color: rgba(180, 35, 24, 0.16) !important; background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; } .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling:hover, .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling:focus, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling:hover, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling:focus { border-color: var(--wp2fa-vaulted-accent) !important; background: #e7f4f2 !important; color: var(--wp2fa-vaulted-accent-dark) !important; box-shadow: 0 3px 9px rgba(15, 118, 110, 0.10) !important; text-decoration: none !important; } .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action--revoke.button-link.enable_styling:hover, .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action--revoke.button-link.enable_styling:focus, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action--revoke.button-link.enable_styling:hover, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action--revoke.button-link.enable_styling:focus { border-color: rgba(180, 35, 24, 0.35) !important; background: #fbe9e7 !important; color: var(--wp2fa-vaulted-danger) !important; box-shadow: 0 3px 9px rgba(180, 35, 24, 0.08) !important; } .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling:focus-visible, .woocommerce-MyAccount-content .wp2fa-profile .wp-2fa-passkey-list-table button.wp2fa-passkey-action.button-link.enable_styling:focus-visible { outline: 0 !important; box-shadow: var(--wp2fa-vaulted-focus) !important; } .wp-2fa-passkey-status--enabled, .wp-2fa-passkey-status--disabled, .wp-2fa-passkey-status--revoked { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 10px !important; font-weight: 720 !important; } .wp-2fa-passkey-status--enabled { background: var(--wp2fa-vaulted-success-soft); color: var(--wp2fa-vaulted-success); } .wp-2fa-passkey-status--disabled { background: #eef2f1; color: #60706d; } .wp-2fa-passkey-status--revoked { background: var(--wp2fa-vaulted-danger-soft); color: var(--wp2fa-vaulted-danger); } .wp2fa-passkey-overlay { padding: 20px; background: rgba(15, 23, 28, 0.55) !important; backdrop-filter: blur(4px); } .wp2fa-passkey-modal { width: min(94vw, 640px) !important; max-width: 640px !important; border: 0 !important; border-radius: 20px !important; background: var(--wp2fa-vaulted-surface) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow-strong) !important; } .wp2fa-passkey-modal__header { padding: 21px 24px 14px !important; border-bottom: 1px solid var(--wp2fa-vaulted-border-soft) !important; } .wp2fa-passkey-modal__title, .wp2fa-passkey-success__title { color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 25px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.02em; } .wp2fa-passkey-modal__close { width: 34px; height: 34px; display: grid; place-items: center; padding: 0 !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 50% !important; background: #fff !important; color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-passkey-modal__close:hover, .wp2fa-passkey-modal__close:focus { border-color: #c9c4b8 !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; outline: 0 !important; } .wp2fa-passkey-modal__body { padding: 22px 24px !important; } .wp2fa-passkey-modal__body p, .wp2fa-passkey-success__description { color: var(--wp2fa-vaulted-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } .wp2fa-passkey-steps-heading { color: var(--wp2fa-vaulted-ink) !important; font-size: 12px !important; font-weight: 740 !important; } .wp2fa-passkey-steps li { color: var(--wp2fa-vaulted-ink) !important; font-size: 13px !important; } .wp2fa-passkey-modal__footer { padding: 16px 24px 21px !important; border-top: 1px solid var(--wp2fa-vaulted-border-soft) !important; } .wp2fa-passkey-modal__cancel { color: var(--wp2fa-vaulted-accent) !important; font-weight: 680; } .wp2fa-passkey-modal .button, .wp2fa-passkey-modal .button-primary, .wp2fa-passkey-success__submit { min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 15px !important; border: 1px solid var(--wp2fa-vaulted-accent) !important; border-radius: 999px !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; font-family: inherit !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; text-shadow: none !important; text-transform: none !important; } .wp2fa-passkey-modal .button:hover, .wp2fa-passkey-modal .button:focus, .wp2fa-passkey-success__submit:hover, .wp2fa-passkey-success__submit:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; outline: 0 !important; } .wp2fa-passkey-success { padding: 24px 12px 30px !important; } .wp2fa-passkey-success__icon { width: 72px !important; height: 72px !important; background: var(--wp2fa-vaulted-success-soft) !important; color: var(--wp2fa-vaulted-success) !important; } .wp2fa-passkey-success__input { min-height: 44px; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; } .wp2fa-passkey-success__input:focus { border-color: var(--wp2fa-vaulted-accent) !important; box-shadow: var(--wp2fa-vaulted-focus) !important; } .wp2fa-passkey-success__input.is-invalid, .wp2fa-passkey-success__error, .wp2fa-passkey-modal__error, .cell-error { color: var(--wp2fa-vaulted-danger) !important; } /* -------------------------------------------------------------------------- WP 2FA second-step login screen -------------------------------------------------------------------------- */ body.wp-2fa-login { min-height: 100vh; background: var(--wp2fa-vaulted-page) !important; color: var(--wp2fa-vaulted-ink) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } body.wp-2fa-login #login { width: min(92vw, 430px) !important; padding: clamp(32px, 8vh, 74px) 0 36px !important; } body.wp-2fa-login #login h1 { margin-bottom: 18px; } body.wp-2fa-login #login h1 a { max-width: 230px; height: 64px; margin: 0 auto; background-size: contain; } body.wp-2fa-login #loginform { margin-top: 0 !important; padding: 28px !important; border: 0 !important; border-radius: 22px !important; background: var(--wp2fa-vaulted-surface) !important; box-shadow: var(--wp2fa-vaulted-shadow) !important; overflow: visible; } body.wp-2fa-login #loginform > p:first-of-type, body.wp-2fa-login #loginform > div:first-of-type { margin-top: 0; } body.wp-2fa-login #loginform p, body.wp-2fa-login #loginform div { color: var(--wp2fa-vaulted-muted); font-size: 13px; line-height: 1.55; } body.wp-2fa-login #loginform label { display: block; margin-bottom: 7px; color: var(--wp2fa-vaulted-ink) !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1.35; } body.wp-2fa-login #loginform input.input, body.wp-2fa-login #loginform input[type="text"], body.wp-2fa-login #loginform input[type="tel"], body.wp-2fa-login #loginform input[type="email"], body.wp-2fa-login #loginform input[type="password"] { min-height: 48px !important; margin: 0 0 16px !important; padding: 10px 13px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 13px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-size: 18px !important; } body.wp-2fa-login #loginform input.input:focus, body.wp-2fa-login #loginform input[type="text"]:focus, body.wp-2fa-login #loginform input[type="tel"]:focus, body.wp-2fa-login #loginform input[type="email"]:focus, body.wp-2fa-login #loginform input[type="password"]:focus { border-color: var(--wp2fa-vaulted-accent) !important; box-shadow: var(--wp2fa-vaulted-focus) !important; outline: 0 !important; } body.wp-2fa-login #loginform .submit { margin: 8px 0 0 !important; padding: 0 !important; } body.wp-2fa-login #loginform #wp-submit, body.wp-2fa-login #loginform .button-primary { width: 100%; min-height: 44px !important; padding: 0 18px !important; border: 1px solid var(--wp2fa-vaulted-accent) !important; border-radius: 999px !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; font-size: 13px !important; font-weight: 680 !important; line-height: 1 !important; text-shadow: none !important; } body.wp-2fa-login #loginform #wp-submit:hover, body.wp-2fa-login #loginform #wp-submit:focus, body.wp-2fa-login #loginform .button-primary:hover, body.wp-2fa-login #loginform .button-primary:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; } body.wp-2fa-login #loginform .wp-2fa-email-resend { margin: 10px 0 0 !important; } body.wp-2fa-login #loginform .wp-2fa-email-resend .button { width: 100%; min-height: 40px !important; padding: 0 15px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 999px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 680 !important; } body.wp-2fa-login #loginform .wp-2fa-email-resend .button:hover, body.wp-2fa-login #loginform .wp-2fa-email-resend .button:focus { border-color: var(--wp2fa-vaulted-accent) !important; background: #f4faf9 !important; color: var(--wp2fa-vaulted-accent-dark) !important; } body.wp-2fa-login #login_error, body.wp-2fa-login .message, body.wp-2fa-login .success { margin: 0 0 14px !important; padding: 12px 14px !important; border: 0 !important; border-radius: 15px !important; box-shadow: none !important; font-size: 12px !important; line-height: 1.5 !important; } body.wp-2fa-login #login_error { background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; } body.wp-2fa-login .message, body.wp-2fa-login .success { background: var(--wp2fa-vaulted-success-soft) !important; color: var(--wp2fa-vaulted-success) !important; } body.wp-2fa-login .backup-methods-wrap { margin-top: 12px !important; padding: 0 8px !important; text-align: center; } body.wp-2fa-login .backup-methods-wrap a, body.wp-2fa-login #backtoblog a, body.wp-2fa-login #nav a { color: var(--wp2fa-vaulted-accent) !important; font-weight: 650; text-decoration: none !important; } body.wp-2fa-login .backup-methods-wrap a:hover, body.wp-2fa-login #backtoblog a:hover, body.wp-2fa-login #nav a:hover { color: var(--wp2fa-vaulted-accent-dark) !important; text-decoration: underline !important; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- Passkey buttons embedded in login / WooCommerce forms -------------------------------------------------------------------------- */ .wp-2fa-login-wrapper, .wp-2fa-login-short-code-wrapper, .wp-2fa-login-woocommerce-wrapper { width: 100%; min-width: 0; margin-top: 18px !important; padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid var(--wp2fa-vaulted-border-soft) !important; background: transparent !important; color: var(--wp2fa-vaulted-ink); text-align: center; } .wp-2fa-login-woocommerce-wrapper, .wp-2fa-login-short-code-wrapper { padding: 18px !important; border: 1px solid var(--wp2fa-vaulted-border-soft) !important; border-radius: 18px; background: var(--wp2fa-vaulted-surface) !important; box-shadow: var(--wp2fa-vaulted-shadow); } .wp-2fa-login-via-passkey, .wp-2fa-login-standard, .wp-2fa-login-short-code-wrapper .wp-2fa-login-via-passkey, .wp-2fa-login-woocommerce-wrapper .wp-2fa-login-via-passkey, .wp-2fa-login-woocommerce-wrapper .wp-2fa-login-standard { width: 100%; min-height: 42px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 16px !important; border: 1px solid var(--wp2fa-vaulted-accent) !important; border-radius: 999px !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; font-family: inherit !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; text-shadow: none !important; text-transform: none !important; } .wp-2fa-login-via-passkey:hover, .wp-2fa-login-via-passkey:focus, .wp-2fa-login-short-code-wrapper .wp-2fa-login-via-passkey:hover, .wp-2fa-login-woocommerce-wrapper .wp-2fa-login-via-passkey:hover { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; } .wp-2fa-login-standard, .wp-2fa-login-woocommerce-wrapper .wp-2fa-login-standard { border-color: var(--wp2fa-vaulted-border) !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; } .wp-2fa-login-standard:hover, .wp-2fa-login-standard:focus, .wp-2fa-login-woocommerce-wrapper .wp-2fa-login-standard:hover, .wp-2fa-login-woocommerce-wrapper .wp-2fa-login-standard:focus { border-color: var(--wp2fa-vaulted-accent) !important; background: #f4faf9 !important; color: var(--wp2fa-vaulted-accent-dark) !important; } .wp-2fa-login-wrapper .notice, .wp-2fa-login-short-code-wrapper .notice, .wp-2fa-login-woocommerce-wrapper .notice, .wp-2fa-login-woocommerce-wrapper .wc-block-components-notice-banner { margin: 0 0 12px !important; padding: 11px 13px !important; border: 0 !important; border-radius: 15px !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.5 !important; text-align: start !important; } .wp-2fa-login-wrapper .notice-success, .wp-2fa-login-short-code-wrapper .notice-success, .wp-2fa-login-woocommerce-wrapper .notice-success { background: var(--wp2fa-vaulted-success-soft) !important; color: var(--wp2fa-vaulted-success) !important; } .wp-2fa-login-wrapper .notice-error, .wp-2fa-login-short-code-wrapper .notice-error, .wp-2fa-login-woocommerce-wrapper .notice-error { background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; } /* -------------------------------------------------------------------------- Legacy frontend wizard / MicroModal fallback -------------------------------------------------------------------------- */ .wp2fa-modal { font-family: inherit !important; } .wp2fa-modal .modal__overlay { padding: 20px; background: rgba(15, 23, 28, 0.55) !important; backdrop-filter: blur(4px); } .wp2fa-modal .modal__container { width: min(94vw, 760px) !important; max-width: 760px !important; max-height: 88vh !important; padding: 26px !important; border: 0 !important; border-radius: 22px !important; background: var(--wp2fa-vaulted-page) !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: var(--wp2fa-vaulted-shadow-strong) !important; } .wp2fa-modal .modal__title, .wp2fa-modal h3, .wp2fa-modal h4, .wp2fa-modal.enable_styling h3, .wp2fa-modal.enable_styling h4 { color: var(--wp2fa-vaulted-ink) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 25px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.02em; } .wp2fa-modal .modal__close { top: 16px !important; right: 16px !important; width: 34px; height: 34px; display: grid; place-items: center; padding: 0 !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 50% !important; background: #fff !important; color: var(--wp2fa-vaulted-muted) !important; } .wp2fa-modal .modal__content, .wp2fa-modal .modal__content p, .wp2fa-modal .modal__content label, .wp2fa-modal .modal__content p.description { color: var(--wp2fa-vaulted-muted) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; } .wp2fa-modal .modal__content input:not([type="radio"]):not([type="checkbox"]):not(.app-key), .wp2fa-modal .modal__content select, .wp2fa-modal .modal__content textarea, .wp2fa-modal.enable_styling .modal__content input:not([type="radio"]):not(.app-key) { min-width: 0 !important; min-height: 44px !important; padding: 10px 12px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 500 !important; } .wp2fa-modal .modal__content input:focus, .wp2fa-modal .modal__content select:focus, .wp2fa-modal .modal__content textarea:focus { border-color: var(--wp2fa-vaulted-accent) !important; box-shadow: var(--wp2fa-vaulted-focus) !important; outline: 0 !important; } .wp2fa-modal .modal__content code.app-key { padding: 9px 12px !important; border: 1px solid var(--wp2fa-vaulted-border-soft); border-radius: 10px; background: var(--wp2fa-vaulted-surface-soft) !important; color: var(--wp2fa-vaulted-ink) !important; } .wp2fa-modal .verification-response:not(:empty) { padding: 11px 13px !important; border: 0 !important; border-radius: 15px !important; background: var(--wp2fa-vaulted-danger-soft) !important; color: var(--wp2fa-vaulted-danger) !important; font-size: 11px !important; line-height: 1.5 !important; } .wp2fa-modal .wp-2fa-button-primary, .wp2fa-modal .wp-2fa-button-secondary, .wp2fa-modal .modal__btn, .wp-2fa-configuration-form .button.enable_styling, .enable_styling .wp-2fa-button-primary, .enable_styling .wp-2fa-button-secondary { min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 15px !important; border: 1px solid var(--wp2fa-vaulted-border) !important; border-radius: 999px !important; background: #fff !important; color: var(--wp2fa-vaulted-ink) !important; box-shadow: none !important; font-family: inherit !important; font-size: 12px !important; font-weight: 680 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; text-shadow: none !important; text-transform: none !important; } .wp2fa-modal .wp-2fa-button-primary, .wp2fa-modal .modal__btn-primary, .wp2fa-modal .button-confirm, .enable_styling .wp-2fa-button-primary { border-color: var(--wp2fa-vaulted-accent) !important; background: var(--wp2fa-vaulted-accent) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.14) !important; } .wp2fa-modal .wp-2fa-button-primary:hover, .wp2fa-modal .wp-2fa-button-primary:focus, .wp2fa-modal .modal__btn-primary:hover, .wp2fa-modal .modal__btn-primary:focus, .enable_styling .wp-2fa-button-primary:hover, .enable_styling .wp-2fa-button-primary:focus { border-color: var(--wp2fa-vaulted-accent-dark) !important; background: var(--wp2fa-vaulted-accent-dark) !important; color: #fff !important; } .wp2fa-modal .wp-2fa-button-secondary:hover, .wp2fa-modal .wp-2fa-button-secondary:focus, .enable_styling .wp-2fa-button-secondary:hover, .enable_styling .wp-2fa-button-secondary:focus { border-color: var(--wp2fa-vaulted-accent) !important; background: #f4faf9 !important; color: var(--wp2fa-vaulted-accent-dark) !important; } /* -------------------------------------------------------------------------- Responsive refinements -------------------------------------------------------------------------- */ @media (max-width: 782px) { .wp2fa-profile { padding: 20px !important; border-radius: 20px !important; } .wp2fa-profile__summary { grid-template-columns: 1fr; } .wp2fa-profile__summary-row { gap: 4px !important; } .wp2fa-profile__cards, .woocommerce-MyAccount-content .wp2fa-profile__cards { grid-template-columns: 1fr !important; } .wp-2fa-passkey-list-table { display: block; box-shadow: none !important; background: transparent !important; } .wp-2fa-passkey-list-table tbody, .wp-2fa-passkey-list-table tr { display: block; } .wp-2fa-passkey-list-table tbody tr { margin-bottom: 10px; border: 0 !important; border-radius: 15px; box-shadow: var(--wp2fa-vaulted-shadow); overflow: hidden; } .wp-2fa-passkey-list-table td { min-height: 47px; padding: 12px 13px 12px 50% !important; border-top: 1px solid var(--wp2fa-vaulted-border-soft) !important; } .wp-2fa-passkey-list-table td:first-child { border-top: 0 !important; } .wp-2fa-passkey-list-table td::before { inset-inline-start: 13px !important; color: var(--wp2fa-vaulted-muted); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; } } @media (max-width: 600px) { .wp2fa-setup-wizard-overlay, .wp2fa-dialog-overlay, .wp2fa-passkey-overlay { padding: 0 !important; } .wp2fa-setup-wizard-modal, .default_styling.wp2fa-setup-wizard-modal { width: 100% !important; max-width: none !important; max-height: 100vh !important; min-height: 100vh; border-radius: 0 !important; } .wp2fa-setup-wizard-header, .wp2fa-setup-wizard-body, .wp2fa-setup-wizard-footer { padding-inline-start: 18px !important; padding-inline-end: 18px !important; } .wp2fa-setup-wizard-footer { align-items: stretch !important; flex-direction: column-reverse; } .wp2fa-setup-wizard-footer .wp2fa-wizard-btn { width: 100%; } .wp2fa-totp-setup-wrapper { align-items: stretch !important; } .wp2fa-totp-qr-wrapper { align-self: center; } .wp2fa-dialog-modal, .wp2fa-passkey-modal { width: calc(100% - 24px) !important; max-height: calc(100vh - 24px) !important; border-radius: 18px !important; } .wp2fa-passkey-modal__footer { align-items: stretch !important; flex-direction: column-reverse; } .wp2fa-passkey-modal__footer-actions { align-items: stretch !important; flex-direction: column; } .wp2fa-passkey-modal__footer-actions .button, .wp2fa-passkey-modal__cancel { width: 100%; } } @media (max-width: 480px) { .wp2fa-profile { padding: 17px !important; border-radius: 18px !important; } .wp2fa-profile__title { font-size: 29px !important; } .wp2fa-profile__card { padding: 17px !important; } .wp2fa-profile__confirm-buttons, .wp2fa-wizard-confirm-footer, .wp2fa-dialog-buttons { align-items: stretch !important; flex-direction: column !important; } .wp2fa-profile__confirm-buttons .wp2fa-profile__btn, .wp2fa-wizard-confirm-footer .wp2fa-wizard-btn, .wp2fa-dialog-buttons .button { width: 100%; } body.wp-2fa-login #loginform { padding: 22px !important; border-radius: 19px !important; } } @media (prefers-reduced-motion: reduce) { .wp2fa-profile *, .wp2fa-setup-wizard-modal *, .wp2fa-dialog-modal *, .wp2fa-passkey-modal *, .wp2fa-modal *, .wp-2fa-login-wrapper *, body.wp-2fa-login * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- Theme-proof profile card actions -------------------------------------------------------------------------- Some storefront themes apply aggressive global styles to native