/**
* User Dropdown
*
* Header avatar + dropdown menu for logged-in members.
*
* IMPORTANT: When open, the dropdown menu is moved out of the header's
* stacking context (z-index: 1002) and appended to . JS handles
* the position via inline `position: fixed` styles. CSS values for
* top/right are not used in the open state.
*/
.user-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
/* Trigger button (the avatar circle in the header). */
.user-dropdown__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: none;
cursor: pointer;
border-radius: var(--radius-circle);
transition: transform var(--transition-duration);
}
.user-dropdown__trigger:hover,
.user-dropdown__trigger:focus-visible {
transform: scale(1.05);
outline: none;
}
/* Avatar circle — small in the header trigger. */
.user-dropdown__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--radius-circle);
background-color: var(--primary);
color: var(--white);
font-size: var(--text-xs);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
}
/* Larger avatar inside the dropdown identity card. */
.user-dropdown__avatar--large {
width: 44px;
height: 44px;
font-size: var(--text-m);
}
/* The dropdown panel.
z-index 1004 sits above the header (1002) and the backdrop (1003).
When closed, [hidden] sets display:none (default attribute behavior).
When open, opacity + transform handle the visible animation; the
.is-closing class is added by JS during the close fade-out. */
.user-dropdown__menu {
width: min(320px, calc(100vw - var(--gutter) * 2));
background-color: var(--white);
border-radius: var(--radius-xl);
box-shadow: var(--box-shadow-2);
padding: var(--space-s);
z-index: 1004;
transition: opacity 180ms ease, transform 180ms ease;
}
.user-dropdown__menu[hidden] {
display: none;
}
.user-dropdown__menu.is-opening {
opacity: 0;
transform: translateY(-4px);
}
.user-dropdown__menu.is-closing {
opacity: 0;
transform: translateY(-4px);
}
/* Identity card at top. */
.user-dropdown__identity {
display: flex;
align-items: center;
gap: var(--space-s);
border-bottom: 1px solid var(--neutral-ultra-light);
line-height: 1;
padding-block-end: var(--space-xs);
}
.user-dropdown__identity-text {
min-width: 0;
flex: 1;
line-height: 1.35
}
.user-dropdown__name {
font-weight: 500;
color: var(--text-dark);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: calc(.95*var(--text-m));
}
.user-dropdown__email {
font-size: var(--text-xs);
color: var(--neutral-semi-dark);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.user-dropdown__list {
list-style: none;
margin: var(--space-s) 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
.user-dropdown__item {
margin: 0;
}
.user-dropdown__link {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: calc(var(--space-xs)*.5);
color: var(--text-dark);
text-decoration: none;
font-size: calc(.9*var(--text-m));
border-radius: var(--radius-s, 4px);
transition: background-color var(--transition-duration);
}
.user-dropdown__link:hover,
.user-dropdown__link:focus-visible {
outline: none;
color: var(--neutral-ultra-dark);
}
/* Right arrow — appears on hover/focus. Hidden when an icon (e.g. sign out) is present. */
.user-dropdown__link::after {
content: "";
flex-shrink: 0;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-duration), transform var(--transition-duration);
}
.user-dropdown__link:hover::after,
.user-dropdown__link:focus-visible::after {
opacity: 1;
transform: translateX(0);
}
/* Suppress the arrow on links that have their own icon (e.g. sign out). */
.user-dropdown__link:has(.user-dropdown__link-icon)::after {
display: none;
}
.user-dropdown__link-icon {
flex-shrink: 0;
color: var(--neutral-dark);
transition: color var(--transition-duration);
}
.user-dropdown__link:hover .user-dropdown__link-icon,
.user-dropdown__link:focus-visible .user-dropdown__link-icon {
color: var(--text-dark);
}
/* Backdrop — sits between the header (1002) and the menu (1004).
Uses opacity instead of display so it can fade in/out. */
.user-dropdown__backdrop {
position: fixed;
inset: 0;
z-index: 1003;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
cursor: default;
transition: opacity 200ms ease;
}
.user-dropdown__backdrop.is-active {
opacity: 1;
pointer-events: auto;
}
/* Lock body scroll while the dropdown is open. */
body.has-user-dropdown-open {
overflow: hidden;
}