/* ============================================================ TheriansHub — wp-login.php branding (Fase login branding) ------------------------------------------------------------ Aplica el lenguaje visual del paywall (.th-paywall__modal) a las pantallas nativas de wp-login.php: login, lostpassword, rp, confirmaction, checkemail confirmation. Sin tocar el markup HTML nativo de WP — todo es CSS sobre los selectores que WP ya imprime. Tokens y fuentes vienen de assets/css/theme.css, que se enqueue también en wp-login.php (ver inc/login.php). Por eso aquí NO se redeclara @font-face ni los :root tokens — los hereda del tema. Uso justificado de !important: - wp-admin/css/wp-admin.css y forms.css cargan antes con reglas muy específicas (body.login input, body.login #login, etc.). Sin !important pierden por specificity en varios puntos. Lo aplicamos solo donde wp-admin.css lo requiere; el resto de reglas (body, layout, color, links) sin !important. Coherencia con paywall.css: - Misma paleta del modal (--color-surface, brand-soft, etc.) - Mismo border-radius (--radius-xl en el modal, --radius-md en inputs, --radius-full en botones) - Mismo box-shadow (0 30px 80px rgba(0,0,0,0.7)) - Mismo breakpoint mobile (480px) - Mismo trato del icono circular (72px brand-soft + border) - Mismo titular con Fraunces italic verde brand - Mismo CTA primary pill verde brand ============================================================ */ /* ---------- 0) Tokens dark forzados en wp-login ---------- theme.css define los tokens dark dentro de `html.dark { ... }`, que en el frontend aplica el toggle de tema (assets/js/theme-toggle.js). Pero wp-login.php es ajeno a ese toggle: no carga el JS del tema y la clase `.dark` nunca se aplica al . Sin esto, ganan los tokens light de :root y wp-login sale en modo claro (fondo blanco, texto negro), que rompe la coherencia con el lenguaje oscuro del paywall. Decisión arquitectónica: wp-login siempre oscuro, independiente del toggle. El usuario aún no ha autenticado, no tiene preferencia. Redefinimos los tokens en el scope de body.login → todos los hijos los heredan automáticamente vía CSS custom properties. Valores copiados literalmente del bloque `html.dark` de theme.css. */ body.login { --color-bg: #0B0F0E; --color-surface: #131816; --color-surface-2: #1A211D; --color-text: #ECEDEE; --color-text-muted: #8B95A1; --color-border: #1F2A26; --color-brand-soft: rgba(43, 176, 137, 0.18); --color-like: #FF3B5C; --color-brand: #1D9E75; --color-accent: #2BB089; } /* ---------- 1) Body — fullscreen flex center con bg del tema ---------- flex-direction: column → necesario para que el link "Back to home" inyectado vía login_footer (sibling del #login) aparezca centrado DEBAJO del modal, no a su lado. */ body.login { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } /* ---------- 2) Ocultar logo WordPress por defecto ---------- El logo de TheriansHub se inyecta vía login_message en inc/login.php como primer hijo del #login (tras el logo nativo, que ocultamos aquí). Cobertura de varias versiones de WP — el logo se imprime con markup distinto según versión: a) WP moderno:

sin id ← principal b) WP legacy:

← legacy id c) Variante:

← raro d) Defensa: primer h1 hijo directo de #login ← fallback Nuestro es seguro porque: - NO tiene role="banner" (es decorativo, no banner ARIA) - NO tiene id (es solo .th-paywall__title) - Viene DESPUÉS del logo en el orden de inyección de login_message, así que NO es :first-of-type mientras WP imprima el logo nativo (que es siempre en instalaciones default). !important defensa contra reglas de visibilidad de wp-admin.css. */ body.login #login > h1[role="banner"], body.login #login > h1:first-of-type, body.login #login-logo, body.login h1#wp-login { display: none !important; } /* ---------- 3) #login → modal del paywall ---------- */ body.login #login { width: 100%; max-width: 400px; padding: 40px 32px 32px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); text-align: center; } /* ---------- 4) Logo + Title + Text inyectados por login_message ---------- .th-login-logo es exclusiva del wp-login (no se reusa del paywall). .th-paywall__title / __text vienen del paywall (coherencia 1:1) y se redeclaran aquí porque paywall.css NO se enqueue en wp-login (login.css es autónomo para minimizar bytes; paywall arrastra .th-peek__* que no usamos). */ body.login .th-login-logo { display: block; width: auto; height: auto; max-width: 220px; margin: 0 auto 24px; } body.login .th-paywall__title { color: var(--color-text); font-size: 1.5rem; /* Peso 500 (más fino que el paywall en 700) — match con mockup oficial. Override solo en login scope; paywall.css mantiene 700. */ font-weight: 500; margin: 0 0 12px; letter-spacing: -0.015em; line-height: 1.25; } body.login .th-paywall__title em { font-family: var(--font-serif); font-style: italic; color: var(--color-brand); font-weight: 500; } body.login .th-paywall__text { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.55; margin: 0 0 24px; } /* ---------- 5) Form fields (loginform, registerform [BP intercepta], lostpasswordform, resetpassform) ---------- Selectores nativos de wp-login. NO inyectamos clases custom en el HTML (que requeriría reescribir el form vía login_form action). Atacamos los inputs por type para coherencia entre flujos. */ /* wp-admin/login.css mete background/border/box-shadow al
nativo. Lo neutralizamos en los 4 forms para que el contenedor sea transparente y los inputs se vean directamente sobre la superficie del modal. !important porque wp-admin.css aplica con specificity de id (#loginform). */ body.login #loginform, body.login #lostpasswordform, body.login #registerform, body.login #resetpassform { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 0 !important; } body.login form { margin: 0; padding: 0; background: transparent; box-shadow: none; } body.login form p { margin: 0 0 14px; text-align: left; } body.login form label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; text-align: left; } body.login input[type="text"], body.login input[type="email"], body.login input[type="password"] { width: 100% !important; padding: 12px 16px !important; /* Bg --color-bg (más sutil, match con mockup). En :focus invertimos a --color-surface-2 para dar feedback visual del campo activo. */ background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; font-family: var(--font-sans) !important; font-size: 0.9375rem !important; color: var(--color-text) !important; box-shadow: none !important; margin: 0 !important; line-height: 1.4; transition: border-color 0.15s ease, background 0.15s ease; } body.login input[type="text"]:focus, body.login input[type="email"]:focus, body.login input[type="password"]:focus { outline: none !important; border-color: var(--color-brand) !important; background: var(--color-surface-2) !important; box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15) !important; } /* ---------- 6) Remember me checkbox row ---------- */ body.login p.forgetmenot { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-text-muted); margin: 0 0 16px; } body.login p.forgetmenot label { display: inline; margin: 0; padding: 0; font-weight: 400; color: var(--color-text-muted); } body.login p.forgetmenot input[type="checkbox"] { margin: 0; accent-color: var(--color-brand); } /* ---------- 7) Submit pill verde brand ---------- #wp-submit es el id de wp-login; el selector form p.submit input cubre variantes de otros forms (lostpassword/resetpass también lo usan). */ body.login p.submit { margin: 8px 0 0; } body.login input#wp-submit, body.login p.submit input[type="submit"] { width: 100% !important; background: var(--color-brand) !important; color: #fff !important; border: 1px solid var(--color-brand) !important; border-radius: var(--radius-full) !important; padding: 13px 24px !important; font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 0.9375rem !important; line-height: 1 !important; height: auto !important; cursor: pointer; text-shadow: none !important; box-shadow: none !important; transition: opacity 0.2s ease; } body.login input#wp-submit:hover, body.login p.submit input[type="submit"]:hover, body.login input#wp-submit:focus-visible, body.login p.submit input[type="submit"]:focus-visible { opacity: 0.92; } /* ---------- 8) Nav links (Lost password / Register / Back) ---------- #nav y #backtoblog son nativos de wp-login. El "back to home" del paywall se inyecta aparte vía login_footer como .th-paywall__back. */ body.login #nav, body.login #backtoblog { text-align: center; margin: 16px 0 0; padding: 0; } /* Ocultar el p#backtoblog nativo de WP ("← Go to TheriansHub") porque inc/login.php inyecta nuestro propio link "← Back to home" con .th-paywall__back vía login_footer. */ body.login p#backtoblog { display: none !important; } body.login #nav a, body.login #backtoblog a { color: var(--color-text-muted); font-size: 0.8125rem; text-decoration: none; transition: color 0.15s ease; } body.login #nav a:hover, body.login #backtoblog a:hover { color: var(--color-brand); } body.login .th-paywall__back { display: inline-block; color: var(--color-text-muted); font-size: 0.8125rem; text-decoration: none; margin-top: 18px; transition: color 0.15s ease; } body.login .th-paywall__back:hover, body.login .th-paywall__back:focus-visible { color: var(--color-text); } /* Restilar el p#nav nativo de WP ("Register | Lost your password?") para que aparezca DEBAJO del submit como link muted, en lugar de ocultarlo. El "Register" se oculta (duplicaría con nuestro CTA secundario "Create a free account"); el "Lost your password?" queda como único link visible. El separador "|" se vacía vía filter en inc/login.php (login_link_separator → empty). */ body.login p#nav { display: block; text-align: center; margin: 12px 0 0; padding: 0; background: transparent; } /* Ocultar el primer link (Register) cuando hay 2+ links presentes. :first-of-type + :not(:last-of-type) evita ocultarlo si por algún motivo solo apareciese un link (caso defensivo, raro en wp-login). */ body.login p#nav a:first-of-type:not(:last-of-type) { display: none; } /* El link visible (Lost your password?) se restila como nav muted */ body.login p#nav a { color: var(--color-text-muted); font-size: 0.8125rem; text-decoration: none; transition: color 0.15s ease; } body.login p#nav a:hover, body.login p#nav a:focus-visible { color: var(--color-brand); } /* ---------- 8.b) CTAs secundarios (clases del paywall) ---------- .th-paywall__cta base + .th-paywall__cta--secondary modifier. Inyectado vía login_form action en inc/login.php (solo flujo login). Visualmente queda DEBAJO del submit nativo del form. */ body.login .th-paywall__cta { display: block; padding: 12px 24px; text-decoration: none; border-radius: var(--radius-full); font-family: var(--font-sans); font-weight: 500; font-size: 0.9375rem; margin-top: 10px; border: 1px solid transparent; text-align: center; transition: background 0.15s ease, opacity 0.15s ease; } body.login .th-paywall__cta--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); } body.login .th-paywall__cta--secondary:hover, body.login .th-paywall__cta--secondary:focus-visible { background: rgba(255, 255, 255, 0.03); color: var(--color-text); } /* ---------- 9) Errores y mensajes nativos de WP ---------- wp-admin/css/forms.css aplica `border-left: 4px solid #2271b1` (barra azul) y `padding-left: 12px` a .message/.notice. Esos visuales chocan con nuestro modal. Aquí los neutralizamos completamente y aplicamos el lenguaje del paywall: - #login_error → caja roja (error de credenciales, etc.) - p.message → caja brand-soft (confirmaciones, info) - .notice + variants → mismas reglas (raros pero posibles en algunos flujos como confirmaction o setup wizards) Reutilizamos --color-like como rojo de error; sin crear --color-error nuevo de momento — un solo token de acción negativa basta para esta fase. Reset agresivo (`border-left: 0` + border completo redibujado) para anular cualquier resto del wp-admin.css con su barra lateral. */ /* Base común: estructura del modal-message (resetea barra azul) */ body.login #login_error, body.login p.message, body.login div.message, body.login .notice, body.login .notice-info, body.login .notice-success, body.login .notice-warning, body.login .notice-error { border-left: 0 !important; border-top: 1px solid var(--color-border) !important; border-right: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; padding: 12px 14px !important; border-radius: var(--radius-md) !important; font-size: 0.8125rem !important; line-height: 1.5 !important; margin: 0 0 16px !important; text-align: left !important; box-shadow: none !important; background: var(--color-surface-2) !important; color: var(--color-text) !important; } /* Variante ERROR — solo #login_error y .notice-error */ body.login #login_error, body.login .notice-error { background: rgba(255, 59, 92, 0.08) !important; border-color: rgba(255, 59, 92, 0.25) !important; color: var(--color-like) !important; } /* Variante SUCCESS/INFO — p.message, div.message y .notice neutros. wp-login usa p.message en checkemail confirmation y resetpass. */ body.login p.message, body.login div.message, body.login .notice-success, body.login .notice-info { background: var(--color-brand-soft) !important; border-color: rgba(43, 176, 137, 0.3) !important; color: var(--color-accent) !important; } /* Links dentro de los mensajes (ej. "Click here to log in" tras reset) */ body.login #login_error a, body.login p.message a, body.login div.message a, body.login .notice a { color: inherit !important; text-decoration: underline; font-weight: 600; } body.login #login_error a:hover, body.login p.message a:hover, body.login div.message a:hover, body.login .notice a:hover { opacity: 0.85; } /* ---------- 10) Privacy policy link (si aparece en register/lost) ---------- */ body.login .privacy-policy-page-link { margin-top: 16px; font-size: 0.75rem; text-align: center; } body.login .privacy-policy-page-link a { color: var(--color-text-muted); text-decoration: none; } body.login .privacy-policy-page-link a:hover { color: var(--color-text); } /* ---------- 11) Language switcher de WP (si activo) ---------- wp-login imprime un
al final. Lo dejamos pequeño y muted para no competir con nuestro UI. */ body.login .language-switcher { margin-top: 20px; text-align: center; } body.login .language-switcher select { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 10px; color: var(--color-text); font-family: var(--font-sans); font-size: 0.75rem; } /* ---------- 12) Mobile @480 ---------- */ @media (max-width: 480px) { body.login #login { padding: 32px 24px 24px; } body.login .th-login-logo { max-width: 180px; margin-bottom: 20px; } body.login .th-paywall__title { font-size: 1.375rem; } }