/** * HW Hellogin – Frontend Styles (JS state only) * * Visual and layout styles are handled by the theme's _hellogin.scss. * This file guarantees open/close states and JS-driven visibility, * independently of the active theme. */ /* ========================================================================== Hidden state — covers all JS-driven [hidden] elements Necessary because Bootstrap / theme CSS can override the native attribute. ========================================================================== */ [hidden] { display: none !important; } /* ========================================================================== Conditional display — driven by html.hwh-authed The class is added pre-paint by the bootstrap (flag-cookie users) and by uiState() for native WordPress users, so the correct state renders on first paint of a full-page-cached document (no flash). ========================================================================== */ html:not(.hwh-authed) [data-hwh-show-logged-in], html.hwh-authed [data-hwh-show-logged-out] { display: none; } /* ========================================================================== Account CTA — auth-state show/hide (driven by html.hwh-authed) The guest CTA and the hidden authenticated skeleton both ship in the same cached markup (no PII server-side). html.hwh-authed is added pre-paint by the bootstrap from the hwh_auth flag cookie, so the right state renders on first paint of a cached page (no flash, no guest→avatar swap → no CLS). Kept here (theme-independent) so it applies without recompiling the theme SCSS. ========================================================================== */ .hwh-nav-account__authed { display: none; } html.hwh-authed .hwh-nav-account__authed { display: flex; align-items: center; } html.hwh-authed .hwh-nav-account__guest { display: none; } /* Skeleton avatar initials are painted from the --hwh-initials custom property (set by the bootstrap / reconciliation), so no PII is rendered server-side. The avatar box is a fixed size, so filling the letters never shifts layout. */ .hwh-avatar[data-hwh-avatar]::after { content: var(--hwh-initials, ""); } /* ========================================================================== Nav account dropdown — open/close (JS-driven) Visual styles are in the theme's _hellogin.scss. This file guarantees position:fixed and open/close regardless of theme. top / right are set dynamically by navDropdown() in frontend.js. ========================================================================== */ .hwh-account-cta__dropdown { display: none; } .hwh-nav-account.is-open .hwh-account-cta__dropdown { display: block; position: fixed; /* top / right set dynamically by navDropdown() in frontend.js */ } /* ========================================================================== Loading state on theme buttons (JS-driven) Visual appearance (spinner ::after, animation) is in the theme's _hellogin.scss. ========================================================================== */ .btn.hwh-loading, .submit.hwh-loading { pointer-events: none; position: relative; } /* ========================================================================== Phone field group — prefix + national number side by side Visual styling (borders, radius, colors) handled by the theme's _hellogin.scss. ========================================================================== */ .hwh-phone-group { display: flex; gap: 8px; align-items: center; } .hwh-phone-prefix { flex: 0 0 72px; } .hwh-phone-number { flex: 1 1 0%; } /* ========================================================================== Content Gate — JS-state rules (visual styles in theme's _hellogin.scss) ========================================================================== */ /* Gate card: hidden by default, shown only inside a gated block */ .hwh-gate__card { display: none; } /* Non-authenticated: truncate locked content + reveal gate card */ .hwh-gate__locked.is-gated { max-height: 8rem; overflow: hidden; position: relative; } .hwh-gate__locked.is-gated + .hwh-gate__card { display: flex; } /* Authenticated (html.hwh-authed, set pre-paint by the bootstrap): reveal the gated content and hide the card at first paint — the content is already in the DOM, so there is no flash of the gate on a cached page. ContentGate.unlock() later removes the wrapper node purely as cosmetic cleanup. */ html.hwh-authed .hwh-gate__locked.is-gated { max-height: none; overflow: visible; } html.hwh-authed .hwh-gate__locked.is-gated + .hwh-gate__card { display: none; }