/* ============================================================= * aird-social-login.css — Intégration visuelle Nextend Social Login * * Cible : tous les boutons Nextend sur wp-login.php (login + register) * * Scope strict : body.aird-login-page (class posée via aird-login.php §34) * → zéro fuite ailleurs sur le site * * Stratégie : override CSS uniquement, préserve Google brand guidelines * (fond clair + logo G officiel multi-couleurs intact). * Change la bordure grise Google par dorée AIRDancia + * hover premium + shadow doré. * * Design system (CLAUDE.md §28) : * Plus Jakarta Sans (body) · gradient or 135deg * --aird-al-gold #e5a93d · --aird-al-gold-light #f4c05e * --aird-al-gold-deep #d49942 · --aird-al-gold-cream #fff5dc * --aird-al-border rgba(229,169,61,0.30) * --aird-al-border-strong rgba(229,169,61,0.55) * * Variables --aird-al-* héritées du scope body.aird-login-page * (déclarées dans aird-login.css ligne 30). * * Cf. CLAUDE.md §40 NEW (social login OAuth) + §34 (re-skin wp-login). * ============================================================= */ /* ─── Wrapper Nextend : ressort vertical au-dessus du form ─── */ body.aird-login-page #nsl-custom-login-form-main { margin: 0 0 4px; padding: 0; } /* Nextend pose `display: none` sur .nsl-container initialement (cache anti-FOUC pendant que son JS init le wrapper). Une fois prêt, le JS retire la règle. On force display: block pour gérer le cas où l'ordre d'init est inversé. */ body.aird-login-page #nsl-custom-login-form-main .nsl-container { display: block !important; } body.aird-login-page #nsl-custom-login-form-main .nsl-container-buttons { justify-content: center; padding: 0; } /* ─── Bouton Google : override skin "light" Nextend ──────────── */ /* Le lien qui wrappe le bouton — désactive les surcharges Blocksy. Pattern §26 A (html body + !important sur color/box-shadow). */ body.aird-login-page #nsl-custom-login-form-main a[data-plugin="nsl"] { text-decoration: none !important; box-shadow: none !important; border: 0 !important; transition: transform 0.18s ease; } body.aird-login-page #nsl-custom-login-form-main a[data-plugin="nsl"]:hover { transform: translateY(-1px); } /* * Override du skin "light" Nextend : * - Avant : box-shadow inset gris Google (#747775) + fond blanc * - Après : bordure dorée AIRDancia + shadow doré subtil + fond blanc * * ⚠️ Le markup Nextend a `style="background-color:#fff;"` INLINE sur * .nsl-button-default → spécificité élevée + !important requis. * On garde le fond blanc (Google brand compliant) mais on change la * bordure et le shadow. */ body.aird-login-page #nsl-custom-login-form-main .nsl-button-google[data-skin="light"] { background-color: #ffffff !important; box-shadow: inset 0 0 0 1.5px var(--aird-al-border-strong), 0 2px 8px rgba(229, 169, 61, 0.10) !important; color: var(--aird-al-text) !important; border-radius: var(--aird-al-radius-sm) !important; transition: box-shadow 0.2s ease, background-color 0.2s ease !important; min-height: 44px; } body.aird-login-page #nsl-custom-login-form-main a[data-plugin="nsl"]:hover .nsl-button-google[data-skin="light"] { background-color: #fffdf7 !important; box-shadow: inset 0 0 0 1.5px var(--aird-al-gold), 0 4px 14px rgba(229, 169, 61, 0.22) !important; } /* Focus visible accessibilité (clavier) */ body.aird-login-page #nsl-custom-login-form-main a[data-plugin="nsl"]:focus-visible .nsl-button-google[data-skin="light"] { outline: 2px solid var(--aird-al-gold); outline-offset: 3px; } /* État actif (mousedown) */ body.aird-login-page #nsl-custom-login-form-main a[data-plugin="nsl"]:active .nsl-button-google[data-skin="light"] { transform: translateY(0); box-shadow: inset 0 0 0 1.5px var(--aird-al-gold-deep), 0 1px 4px rgba(229, 169, 61, 0.18) !important; } /* ─── Label "Continuer avec Google" : font AIRDancia + casse ─── */ /* Nextend force `font-family: "Roboto Medium", Roboto, ...` pour respecter Google brand. On override avec notre font système Plus Jakarta Sans (cohérence §28) tout en préservant le SVG logo G coloré officiel. */ body.aird-login-page #nsl-custom-login-form-main .nsl-button-google div.nsl-button-label-container { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; color: var(--aird-al-text); } body.aird-login-page #nsl-custom-login-form-main .nsl-button-google div.nsl-button-label-container b { font-weight: 700; } /* ─── Séparateur "OU continuer avec email" ─────────────────── */ /* Injecté par JS (cf. aird-social-login.php §2) entre le wrapper Nextend et le form natif. Pattern visuel : 2 traits fins dégradés + texte doré pâle centré, cohérent avec design system §28. */ body.aird-login-page .aird-social-separator { display: flex; align-items: center; gap: 14px; margin: 20px 0 18px; padding: 0; } body.aird-login-page .aird-social-separator__line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--aird-al-border) 50%, transparent 100%); } body.aird-login-page .aird-social-separator__text { flex: 0 0 auto; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aird-al-gold-deep); opacity: 0.82; white-space: nowrap; user-select: none; } /* ─── Cache le language switcher WP natif ──────────────────── */ /* Sélecteur "Français" + bouton "MODIFIER" qui s'affichent en bas de wp-login.php quand WP est multi-lingue (WPLANG). Sur site mono-langue FR, c'est du bruit visuel signalé par l'user (cf. screenshot register). */ body.aird-login-page .language-switcher { display: none !important; } /* ─── Mobile : compactage ───────────────────────────────────── */ @media (max-width: 640px) { body.aird-login-page #nsl-custom-login-form-main .nsl-button-google[data-skin="light"] { min-height: 42px; } body.aird-login-page #nsl-custom-login-form-main .nsl-button-google div.nsl-button-label-container { font-size: 13px; } body.aird-login-page .aird-social-separator { margin: 16px 0 14px; gap: 10px; } body.aird-login-page .aird-social-separator__text { font-size: 10px; letter-spacing: 0.15em; } } /* ─── Très petit écran (iPhone SE etc.) ────────────────────── */ @media (max-width: 360px) { body.aird-login-page #nsl-custom-login-form-main .nsl-button-google div.nsl-button-label-container { font-size: 12.5px; } body.aird-login-page .aird-social-separator__text { font-size: 9.5px; } }