/* ==========================================================================
OstuGrupp — header account menu
The panel that opens from the header account icon (inc/account-menu.php).
SPEAKS THE SAME LANGUAGE AS THE MINI-CART. Every shared value below is copied
from assets/css/cart-widget.css on purpose, so the two panels that hang off
the same header row cannot drift apart:
panel radius --radius-lg cart-widget.css:98
panel shadow --shadow-card-hover cart-widget.css:99
panel border 1px solid --border cart-widget.css:97
open animation .18s ease, from -8px / .98 scale, origin top right
head 12px 16px, border-bottom, background --muted
head title --font-display, 700, 16px, --slate-dark
row hover background --muted
Every var() below carries a LITERAL fallback equal to the value main.css and
tokens.css actually define. Not decoration: an undefined custom property does
not fall back to "no declaration", it makes the whole declaration invalid at
computed-value time, so `color` would inherit and `background` would go
transparent. This panel is `position: fixed` over the page — if the token
sheets ever fail to arrive (a bad W3TC minify pass is the realistic way), an
unstyled floating box is on every page of the shop. The fallbacks mean the
worst case is "styled correctly anyway".
NOT copied: the positioning. The mini-cart is rendered inside the header by
header.php's own hook, so it can be `position: absolute` against the header
box. This panel is rendered in wp_footer (header.php has no account hook and
is not this module's file), so it is `position: fixed` and its top/left are
written by assets/js/account-menu.js from the trigger's bounding box — the
same mechanism .mini-cart-floating-root uses at cart-widget.css:79-88.
⛔ Contains no gateway selector of any kind. Every rule is fenced on either
`.og-acct*` or `.site-header .header-account`, so nothing here can reach a
control on the checkout even if W3 Total Cache combines the sheets.
========================================================================== */
/* ==========================================================================
A · The trigger
========================================================================== */
/* CONTAINING BLOCK for the caret below. main.css:215 gives .header-account no
`position` at all and nothing else in the theme does either (checked: only
main.css:215-216, nav.css:42/49/53/58/72/78 and motion.css:460/467 name this
class). (0,2,0) — `.site-header` + `.header-account` — because a bare
`.header-account` at (0,1,0) is the exact shape CLAUDE.md trap 1 says loses
on pages carrying the `woocommerce-page` body class. There is no competing
`position` declaration to beat here; the prefix is insurance, and it costs
nothing. `display` is NOT touched: the trigger stays `inline-flex`. */
.site-header .header-account { position: relative; }
/* THE CARET — AND WHY IT COSTS ZERO WIDTH.
.header-account is `display: inline-flex` (main.css:215), so a ::after would
normally become a FLEX ITEM and widen the button. It does not, because an
absolutely-positioned child of a flex container is taken out of flow and
does not participate in flex layout at all (CSS Flexbox 1, section 4.1).
`position: absolute` is therefore load-bearing here, not decoration — drop it
and the header row grows.
Why zero growth matters, with the numbers already recorded in nav.css:104-128:
the >=1024px header row needs ~1141px of content and a 1024px viewport gives
.container only 976px, i.e. it is SHORT BY ~165px before anything is added.
nav.css:147 pins `.site-header__actions { flex-shrink: 0 }`, so any width
added to this button comes straight out of the primary menu.
GEOMETRY, measured against the box main.css:215 + nav.css:53 actually build:
padding 8px 12px, min-height 44px, gap 4px, one 20px icon in flow
(.header-account__label is position:absolute at nav.css:49, so it is out of
flow and contributes nothing to the line)
-> border box 12 + 20 + 12 = 44px wide, max(44, 8+20+8) = 44px tall
-> the icon occupies x 12..32, y 12..32
The caret is a 5x5 box at right:4 bottom:9, so x 35..40, y 30..35; rotated 45
degrees about its own centre its bounding box grows to 5 * sqrt(2) = 7.07px,
i.e. x 34..41, y 29..36. It clears the icon (34 > 32) and stays inside the
button (41 < 44, 36 < 44). Nothing overlaps and nothing overflows.
currentColor, so it inherits the link colour and follows hover / open state.
pointer-events:none so it can never swallow the click.
Left unconditional on purpose. Below 1024px nav.css:78 sets the whole trigger
to `display: none`, so this pseudo-element is not rendered there either — and
if that decision is ever revisited, the caret comes back with the button
instead of being forgotten in a media query. */
.site-header .header-account::after {
content: "";
position: absolute;
right: 4px;
bottom: 9px;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: .55;
pointer-events: none;
transition: transform .18s ease, opacity .18s ease;
}
/* Open state. (0,3,0) beats main.css:216 `.header-account:hover` (0,2,0) and
motion.css:467 `.header-account:active` (0,2,0), so the button stays visibly
"on" while the panel is open even when the pointer moves away. Same tint the
header already uses for hover, so no new colour enters the header. */
.site-header .header-account.is-open { background: var(--muted, #f1f5f9); color: var(--green, #047857); }
.site-header .header-account.is-open::after { transform: rotate(225deg); opacity: .9; }
/* ==========================================================================
B · Panel shell
========================================================================== */
/* z-index 1180 is picked, not guessed. The fixed layers on this site:
.site-header.is-sticky 200 nav.css:9
.live-search dropdown 300 live-search.css:23
.sticky-atc 1150 cart-widget.css last line
.og-drawer scrim 1190 nav.css:421
.og-drawer 1200 nav.css:429
.og-bottomnav 1200 engagement.css:19
.og-popup 1300 engagement.css:63
1180 sits above everything in the header chrome and below the drawer, the
bottom nav and the newsletter popup, which are the three surfaces that are
meant to cover the page. No value here ties with another layer: an exact tie
is decided by DOM order, and DOM order is what CLAUDE.md trap 1 says never to
depend on. */
.og-acct {
position: fixed;
top: 0;
left: 0;
z-index: 1180;
width: min(340px, calc(100vw - 32px));
/* Never taller than the space under the header, so the footer block (Logi
välja / Loo konto) is reachable on a short laptop screen in a split window.
dvh, not vh: on a phone browser vh is the tall-chrome value and the bottom
of the panel would sit under the URL bar. */
max-height: calc(100dvh - 96px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* THE HIDE SWITCH. The user-agent sheet's `[hidden] { display: none }` is
beaten by ANY author `display` declaration, and this file gives .og-acct none
— but a future edit adding one would silently make the panel permanently
visible in the corner of every page. Restating it at (0,2,0) removes that
possibility. Same guard cart-widget.css:70 carries. */
.og-acct[hidden] { display: none; }
.og-acct__panel {
background: #fff;
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-lg, 16px);
box-shadow: var(--shadow-card-hover, 0 2px 4px rgb(15 23 42/.08),0 8px 24px rgb(15 23 42/.12));
overflow: hidden;
transform-origin: top right;
animation: og-acct-in .18s ease;
}
@keyframes og-acct-in {
from { opacity: 0; transform: translateY(-8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* The panel takes focus on open (account-menu.js) so a screen reader announces
the dialog and its title. It is a container, not a control — the visible
focus ring belongs on the links inside it, not around the whole box. */
.og-acct__panel:focus { outline: none; }
/* ==========================================================================
C · Head
========================================================================== */
/* align-items:center rather than flex-start, and the close button carries no
vertical margin. That is deliberate: with `center` the head's content height
is simply max(headings, button) = max(~41px, 44px) = 44px, so the head is a
flat 12 + 44 + 12 = 68px and the button cannot be pushed past either edge.
The flex-start version needed a negative top margin to line the button up
with the title, and a negative margin is a thing that has to be re-derived
every time the title's line-height changes. */
.og-acct__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12, 12px);
padding: var(--space-12, 12px) var(--space-16, 16px);
border-bottom: 1px solid var(--border, #e2e8f0);
background: var(--muted, #f1f5f9);
}
.og-acct__headings { display: flex; flex-direction: column; gap: var(--space-2, 2px); min-width: 0; }
.og-acct__title {
font-family: var(--font-display, 'Space Grotesk','Segoe UI',sans-serif);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: var(--slate-dark, #1e293b);
/* A long first name must shorten, not push the close button off the panel. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* This line WRAPS on purpose — no nowrap, no ellipsis. Logged out it carries a
whole sentence ("Logi sisse, et näha oma tellimusi ja andmeid.") which must
be readable in full; logged in it carries an e-mail address, and an address
with no spaces in it would otherwise run past the panel edge, which is what
overflow-wrap:anywhere prevents. The title above is the opposite case (one
short line, ellipsised) — the two are not a copy-paste of each other. */
.og-acct__sub {
font-size: 13px;
line-height: 1.4;
color: var(--slate-500, #64748b);
overflow-wrap: anywhere;
}
/* 44px, not the mini-cart's 32px box. This one is opened by touch on a tablet
in landscape (>=1024px is where the trigger exists, and an iPad Pro in
portrait is exactly 1024px), and 44px is the measured WCAG 2.5.5 minimum.
The only negative margin is horizontal: -8px pulls the 44px box into the
head's 16px padding so the glyph does not sit marooned in the middle of the
corner, while the box still stops 8px short of the panel border — inset, not
overflowing. */
.og-acct__close {
flex: none;
width: var(--tap-min, 44px);
height: var(--tap-min, 44px);
margin-right: -8px;
background: transparent;
border: 0;
border-radius: var(--radius-8, 8px);
color: var(--slate-500, #64748b);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s, color .2s;
}
.og-acct__close:hover { background: #fff; color: var(--slate-dark, #1e293b); }
.og-acct__close svg { display: block; }
/* ==========================================================================
D · Body
========================================================================== */
.og-acct__body { padding: var(--space-12, 12px); }
/* The one primary action, full width. (0,2,0) so it beats main.css:163-169
`.btn-primary` (0,1,0) AND controls-d1-d2.css:187, which reads
`:where(body:not(...)) .btn-primary` — :where() contributes ZERO to
specificity, so that selector is also only (0,1,0) however long it looks.
Only the box is changed here; the colour, radius and shadow stay whatever the
shared button layer says, which is the point of reusing .btn-primary. */
.og-acct__panel .btn-primary.og-acct__cta {
display: flex;
width: 100%;
min-height: 48px;
margin-bottom: var(--space-12, 12px);
font-size: 15px;
}
.og-acct__list { list-style: none; margin: 0; padding: 0; }
.og-acct__item + .og-acct__item { border-top: 1px solid var(--border, #e2e8f0); }
/* THE ROW. `display: flex` on an is safe — CLAUDE.md trap 11 is about a
non-table display on a | , which generates an anonymous table cell in
column 1. There is no table anywhere in this panel and no pseudo-element on
this flex container, so nothing can be turned into a flex item behind our
backs.
(0,2,0) on the row and everything inside it. A bare `.og-acct__row` at
(0,1,0) would be at the mercy of any plugin's `.woocommerce a` (0,1,1) on the
shop, cart, checkout and account pages — the exact shape of CLAUDE.md trap 1.
Height: 10px + 10px padding around a two-line text block (15px * 1.35 = 20.25
plus 12.5px * 1.35 = 16.9, plus a 2px gap = ~39px) gives ~59px, comfortably
over the 44px touch minimum without a min-height that could clip a wrapped
label. */
.og-acct__panel .og-acct__row {
display: flex;
align-items: center;
gap: var(--space-12, 12px);
padding: 10px;
border-radius: var(--radius, 12px);
color: var(--fg, #0f172a);
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.og-acct__panel .og-acct__row:hover { background: var(--muted, #f1f5f9); }
.og-acct__panel .og-acct__row:hover .og-acct__row-title { color: var(--green, #047857); }
.og-acct__panel .og-acct__row:hover .og-acct__row-arrow { color: var(--green, #047857); transform: translateX(2px); }
/* flex:none on the icon and the arrow, flex:1 + min-width:0 on the text. That
min-width is what lets a long description ellipsis instead of forcing the row
wider than the panel — a flex item's default min-width is auto, i.e. its
min-content size, which for a nowrap line is the whole line. */
.og-acct__row-icon {
flex: none;
width: 36px;
height: 36px;
border-radius: var(--radius-8, 8px);
background: var(--brand-a1, rgb(4 120 87/.06));
color: var(--green, #047857);
display: inline-flex;
align-items: center;
justify-content: center;
}
.og-acct__row-icon svg { display: block; }
.og-acct__row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2, 2px); }
.og-acct__row-title {
font-size: 15px;
font-weight: var(--fw-semibold, 600);
line-height: 1.35;
color: var(--slate-dark, #1e293b);
transition: color .15s ease;
}
.og-acct__row-desc {
font-size: 12.5px;
line-height: 1.35;
color: var(--slate-500, #64748b);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.og-acct__row-arrow {
flex: none;
color: var(--slate-300, #cbd5e1);
display: inline-flex;
transition: color .15s ease, transform .15s ease;
}
.og-acct__row-arrow svg { display: block; }
/* ==========================================================================
E · Foot — the separated block
========================================================================== */
.og-acct__foot {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-8, 8px);
padding: var(--space-12, 12px) var(--space-16, 16px);
border-top: 1px solid var(--border, #e2e8f0);
background: var(--muted, #f1f5f9);
font-size: 14px;
}
.og-acct__foot-text { color: var(--slate-600, #475569); }
.og-acct__panel .og-acct__foot-link {
color: var(--green, #047857);
font-weight: var(--fw-semibold, 600);
text-decoration: underline;
text-underline-offset: 3px;
/* The link sits in a 14px line, which is well under the 44px touch minimum on
its own. Block padding lifts the hit area to 12 + 20 + 12 = 44px without
changing where the text sits, because the foot centres its children. */
padding-block: 12px;
display: inline-flex;
align-items: center;
}
.og-acct__panel .og-acct__foot-link:hover { color: var(--green-dark, #035e43); }
/* Logout is a full-width quiet button rather than a link: it is the only
destructive-ish action in the panel and it should not read as another row. */
.og-acct__panel .og-acct__logout {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8, 8px);
width: 100%;
min-height: var(--tap-min, 44px);
border-radius: var(--radius, 12px);
background: #fff;
border: 1px solid var(--border, #e2e8f0);
color: var(--slate-600, #475569);
font-size: 14px;
font-weight: var(--fw-semibold, 600);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.og-acct__panel .og-acct__logout:hover { color: var(--danger-dark, #b91c1c); border-color: var(--danger, #ef4444); background: #fff; }
.og-acct__logout-icon { display: inline-flex; }
.og-acct__logout-icon svg { display: block; }
/* ==========================================================================
F · Narrow viewports
Below 1024px nav.css:78 hides the trigger entirely, so this panel cannot be
opened there today and the block below never runs on this shop as it stands.
It exists so the panel DEGRADES rather than breaks if that ever changes:
width already clamps to `calc(100vw - 32px)` in section B, and here the row
description is allowed to wrap instead of being cut, because a 300px panel
cannot hold "Vaata oma tellimuste ajalugu" on one line.
========================================================================== */
@media (max-width: 400px) {
.og-acct__row-desc { white-space: normal; }
.og-acct__title { white-space: normal; }
}
/* ==========================================================================
G · Reduced motion
Every transition and the open animation are removed, and the caret still
flips — the STATE change survives, only the movement stops. That is the same
contract motion.css keeps for the rest of the site.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.og-acct__panel { animation: none; }
.site-header .header-account::after,
.og-acct__close,
.og-acct__panel .og-acct__row,
.og-acct__row-title,
.og-acct__row-arrow,
.og-acct__panel .og-acct__logout { transition: none; }
.og-acct__panel .og-acct__row:hover .og-acct__row-arrow { transform: none; }
}
|