/* ========================================================================== Auth-dialog — ÅF-service login (design-eval stub). Generic dialog mechanics live in dialog.css; this file only carries: - inner layout for the password form - menu state classes that show/hide gated items based on the cookie ========================================================================== */ .dialog.auth > .text-block { --mw: var(--mw-text-sm); --gap: 0; } .dialog.auth > .container { --mw: var(--mw-sm); width: 100%; } .dialog.auth > .auth-help { margin: 0; max-width: var(--mw-text-sm); text-align: center; font-size: var(--font-size-sm); } /* --- Menu separator + auth-role visibility + post-login flash ----------- */ .menu-separator { align-self: stretch; height: 0; margin-block: var(--s-8); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); } /* Show only the items matching the current auth state. Body class is set server-side from the haga_af cookie and toggled client-side by auth-dialog.js after login/logout. */ body.haga-auth-out [data-auth-role="in"] { display: none; } body.haga-auth-in [data-auth-role="out"] { display: none; } .haga-auth-content { display: contents; } .text-block .haga-auth-content > :first-child:is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0.25em; } .text-block > .haga-auth-content > .cta-block { margin-top: var(--gap); } /* Keep the desktop dropdown open during the post-login flash so the user sees the new items appear without having to re-hover the hub. */ .site-header nav > .item.is-auth-flash .group { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } @keyframes auth-gated-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } [data-gated="1"].is-new { animation: auth-gated-flash 0.8s ease-in-out 3; } @media (prefers-reduced-motion: reduce) { [data-gated="1"].is-new { animation: none; } } /* --- Gated /af/* full-screen lock --------------------------------------- When the server detects an unauth'd visit to a gated /af/* page it adds .haga-af-gated to . The dialog auto-opens and the page content below is hidden behind the dialog's backdrop until login succeeds. */ body.haga-af-gated .wp-site-blocks, body.haga-af-gated main { visibility: hidden; } body.haga-af-gated .dialog.auth { /* Soften the dialog so the user sees the form, not the close button. */ } body.haga-af-gated .dialog.auth [data-close] { display: none; }