/* * WooAffi Dropdown — front-end styles * Namespace: lp- */ .lp-header-account-wrap { display: flex; align-items: center; position: relative; font-family: inherit; line-height: 1.2; } .lp-account-item { position: relative; display: inline-block; } /* Trigger button */ .lp-account-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: none; cursor: pointer; padding: 6px 10px; margin: 0; font-family: inherit; color: #1a1a1a; transition: color 0.2s ease; } .lp-account-trigger:hover, .lp-account-trigger:focus-visible { color: #1756ff; } .lp-account-trigger:focus-visible { outline: 2px solid #1756ff; outline-offset: 3px; border-radius: 4px; } .lp-account-icon { display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } .lp-account-text { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } /* * Dropdown panel. * * This panel is moved to a direct child of by script.js and * positioned with `position: fixed` using JS-calculated top/left * values (see positionPanel() in script.js). It deliberately does * NOT use position: absolute anchored to .lp-account-item, because * many theme headers apply overflow: hidden or a transform to their * header wrapper (common for sticky-header effects), which clips or * re-anchors absolutely-positioned descendants the moment they * extend past the header's box — causing the menu to visually vanish * as soon as the cursor moved into it. Fixed positioning + a body-level * parent avoids that entirely. */ .lp-dropdown { list-style: none; margin: 0; padding: 8px; position: fixed; top: 0; left: 0; min-width: 210px; max-width: calc(100vw - 16px); background: #ffffff; background-clip: padding-box; border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 20, 43, 0.14), 0 2px 8px rgba(20, 20, 43, 0.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 99999; } .lp-dropdown[hidden] { display: block; /* keep it measurable/transitionable; visibility handles concealment */ } .lp-account-item.is-open .lp-dropdown, .lp-dropdown.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .lp-dropdown-item { margin: 0; padding: 0; } .lp-dropdown-link { display: block; padding: 10px 12px; border-radius: 8px; color: #1a1a1a; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .lp-dropdown-link:hover, .lp-dropdown-link:focus-visible { background-color: #f2f5ff; color: #1756ff; } .lp-dropdown-link:focus-visible { outline: 2px solid #1756ff; outline-offset: -2px; } /* Mobile */ @media (max-width: 600px) { .lp-account-trigger { padding: 6px 8px; } .lp-account-text { font-size: 10px; } .lp-dropdown { min-width: 180px; } }