still arrives with the UA's chrome — a grey face, a border and padding — so
without this it reads as a button wearing a link's colour. Stated once here
rather than a third time beside each use. */
button.link {
padding: 0;
border: 0;
background: none;
font-family: inherit;
}
.link:hover { color: var(--link-hover-color, var(--ui-600)); }
/* The underline is painted as a background gradient on the label, not a
pseudo-element — which is what lets it animate by `background-size` and
retract to the right on hover rather than sweeping in. */
/* .link__text is the canonical carrier, but plenty of links are their own
component and never had one — the "View" in the orders table, breadcrumbs,
the drawer's navigation, product card titles, the mini cart's product names.
They join the selector list rather than having their markup rewritten: one
mechanism, one place to change it.
Each entry points at whatever actually HUGS the text. Where the component
has an inner span, that is the target; where the element is inline it paints
on itself; the two that are block-level and span their whole row get
`width: fit-content` below, because a gradient on a 432px box would draw a
432px rule under a 72px word.
`will-change` used to sit here. With ~950 .link__text alone it was already
asking the compositor for a layer per link; across this list it would be
thousands, so it is gone — the transition is a background-size tween and
does not need it. */
.link__text,
.card-product__title > span,
.panel-main-navigation__item__title,
.panel-navigation__footer__nav-link,
.legal__index-link__label,
.breadcrumb__link,
.facets__reset-block,
.woocommerce-button,
.woocommerce-orders-table__cell-order-number a,
.woocommerce-mini-cart-item a,
.mini-cart__title a,
.line-item__infos__title a,
.woocommerce-table__product-name a,
.product-summary__collection a,
.tile__link,
.reset_variations {
background-image: linear-gradient(
transparent calc(100% - 1px),
var(--link-underline-color, var(--ui-200)) 1px
);
background-repeat: no-repeat;
background-size: 0% 100%;
text-decoration: none;
transition:
background-size var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
/* Block-level and as wide as its row. */
.panel-navigation__footer__nav-link { width: fit-content; }
/* --- The two link types ----------------------------------------------------
There are exactly two, and they differ by whether the underline is there
before you touch it:
.link--underlined always underlined — a link sitting INSIDE a
sentence, where the underline is what marks it as
a link at all ("Log out", "Edit", "View details")
.link--underline-hover underlined on hover — a standalone call to action
that already reads as one from its position
("View all", "View collection")
These were `--underlined` and `--underline`: one letter apart, opposite
behaviour. The longer name now says what it does.
There is no third option. --plain used to be one — colour-only, no underline,
used by the footer menus and the drawer's language switcher — and it has been
folded into type 2: those are standalone navigation items, so they take the
underline on hover like every other standalone link.
The header is the one exception, and it needs no exception: it never used
.link at all. .header__nav-link and .header__button are its own components.
--chevron and --uppercase are orthogonal and combine with either type.
--------------------------------------------------------------------------- */
/* Type 1 — underline shown by default, retracting rightward on hover. */
.link--underlined .link__text {
/* Was a hard-coded --ui-950. That single value was the only thing stopping a
text link from working on a dark surface, so it reads the contract now. */
color: var(--link-color, var(--ui-950));
background-size: 100% 100%;
}
.link--underlined:hover .link__text {
color: var(--link-hover-color, var(--ui-950));
background-size: 0% 100%;
background-position: right;
}
/* Type 2 — the inverse: no underline until hover, drawing in from the left.
The component links listed above are all type 2: they are standalone, not
words inside a sentence. */
.link--underline-hover:hover .link__text,
.card-product__title:hover > span,
.panel-main-navigation__item:hover .panel-main-navigation__item__title,
.panel-navigation__footer__nav-link:hover,
.legal__index-link:hover .legal__index-link__label,
.breadcrumb__link:hover,
.woocommerce-button:hover,
.woocommerce-orders-table__cell-order-number a:hover,
.woocommerce-mini-cart-item a:hover,
.mini-cart__title a:hover,
.line-item__infos__title a:hover,
.woocommerce-table__product-name a:hover,
.product-summary__collection a:hover,
.tile__link:hover,
.reset_variations:hover {
background-size: 100% 100%;
background-position: left;
}
/* Arrow slides out and a second slides in — the theme's signature link. */
.link--chevron .link__icon {
display: inline-block;
transition: transform var(--duration-medium) var(--ease-out-cubic);
}
.link--chevron:hover .link__icon { transform: translateX(4px); }
/* The mirrored version, for going back. Same rule, opposite direction — the
chevron leads the label instead of following it. */
.link--chevron-back .link__icon {
display: inline-block;
transition: transform var(--duration-medium) var(--ease-out-cubic);
}
.link--chevron-back:hover .link__icon { transform: translateX(-4px); }
.link--uppercase {
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-size: var(--text-xsmall-size);
}
/* --------------------------------------------------------------------------
DARK SURFACES
Re-points the link contract once, rather than re-colouring each component
with its own descendant override — which is what the footer had been doing,
a new line per component dropped into it. .link already reads --link-color,
so it needs nothing else. Buttons name a literal colour, so they take the
--outline-white modifier instead of being silently remapped here.
-------------------------------------------------------------------------- */
.on-dark {
--link-color: var(--ui-00);
--link-hover-color: var(--ui-300);
--link-underline-color: var(--ui-00-40);
/* Same hues, lifted for a dark ground — see the note in tokens.css. */
--status-error: #f64343;
--status-success: #8fc511;
--status-muted: var(--ui-300);
}
/* --------------------------------------------------------------------------
BADGE
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
padding: 3px var(--space-xxsmall);
border-radius: var(--space-xxxsmall);
/* No default fill. The reference's .badge sets none, and the variants each
supply their own — .badge--grey and .badge--outline-grey deliberately have
none at all, so a black default turned both into filled chips. */
background-color: var(--badge-bg, transparent);
color: var(--badge-color, inherit);
font-size: var(--text-ui-small-size);
/* Line-height is 1, not --text-ui-small-lh: the badge is a pill sized to its
cap height, so the box must not carry the label's leading. Tracking is
left to .text-ui-small (0.07em) — do not restate it here as --tracking-wide
(0.06em), which is the eyebrow's value and 0.1px tighter. */
line-height: 1;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
/* Colour variants, straight from the reference. */
.badge--white { color: var(--ui-950); background-color: var(--ui-00); }
.badge--black { color: var(--ui-00); background-color: var(--ui-800); }
.badge--grey { color: var(--ui-600); }
.badge--outline-grey{ color: var(--ui-600); border: 1px solid var(--ui-200); }
.badge--ui-100 { background-color: var(--ui-100); color: var(--ui-950); }
.badge--ui-800 { background-color: var(--ui-800); color: var(--ui-00); }
.badge--beige-100 { background-color: var(--beige-100); color: var(--beige-600); }
.badge--lime { background-color: var(--lime-100); color: var(--ui-950); }
.badge--lavender { background-color: var(--lavender-100); color: var(--ui-950); }
.badge--peach { background-color: var(--peach-100); color: var(--ui-950); }
/* A price cut is the one badge that is not a tint — it is the only thing on a
card that is time-limited, so it takes a filled, saturated ground.
CONTRAST: white on --error-light measures 4.35:1, and this label is 10px
bold, which WCAG counts as normal text needing 4.5:1. It is 2% of lightness
short. Left on the token as specified rather than quietly substituted —
darkening --error-light to rgb(199 81 30) takes it to 4.54:1 if that matters
more than the token matching elsewhere. */
.badge--sale { background-color: var(--error-light); color: var(--ui-00); }
/* Alignment variants — --right is what pushes a badge to the far edge of
the card overlay. */
.badge--left { text-align: left; }
.badge--center { text-align: center; }
@media (min-width: 1024px) {
.badge { padding: var(--space-xxsmall) 5px; }
}
/* --------------------------------------------------------------------------
FORM FIELDS
-------------------------------------------------------------------------- */
/* Every field on this site puts its label inside the control.
-------------------------------------------------------------------------
This used to be a flex column with the label stacked above the input. That
costs a line of its own, and across a dozen fields it is a dozen repeats down
a column that is mostly air. Inside, the rhythm halves without the name going
away — which is the difference from a placeholder, and the reason not to use
one: a placeholder disappears the moment you start typing, exactly when you
might want to check what you are filling in.
There is no --float modifier. This IS the field. */
.field {
/* One height for every text control on the site, named once. The footer
newsletter had it first — 15px of block padding on an 18px line box inside a
1px border — and everything else was 44. Named here because the floating
label has to centre on the CONTROL, and the control's height is not
something the wrapper can be asked for: .field also holds the hint and the
error, so a percentage measures those too. */
--field-control-height: 3.125rem;
position: relative;
display: block;
}
/* Except when what it wraps is a tick. A checkbox has no room to float a label
over and nothing to float it off; those rows stay a label beside a box. The
theme's own checkbox rows use .checkbox__wrapper and never come through here,
but WooCommerce puts .field on every row it renders, so the guard is real. */
.field:has(> input[type="checkbox"]),
.field:has(> input[type="radio"]),
.field:has(> .woocommerce-input-wrapper > input[type="checkbox"]),
.field:has(> .checkbox__wrapper) {
display: flex;
flex-direction: column;
gap: var(--space-xsmall);
}
/* Woo prints its fields as …, and we author ours as
.field > .field__label. Two markups, one label: listed together so the
account and checkout forms cannot drift from login and register, which is
exactly what had happened — theirs were sentence-case 14px while these were
uppercase 12px. */
.field__label,
.form-row > label,
.woocommerce-form-row > label {
font-size: var(--text-xsmall-size);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-secondary);
}
.input {
width: 100%;
/* 15px of block padding on an 18px line box inside a 1px border: 50px.
Literal because the height is the contract — every control that has to
stand beside one of these is matched against that number, and a token
expression would hide it. */
/* 16px across, not 20. At 20 the value stood further from its own border than
the type on it is tall, and wider inside than the label floated above it.
One step down the same scale; the 15px block padding is untouched, so the
50px height contract above still holds. */
padding: 15px var(--space-medium);
/* --ui-200, a step up from --ui-100. On white that moves the outline from
1.19:1 to 1.41:1 — measured, not eyeballed. Worth knowing where that
leaves us: WCAG 1.4.11 asks 3:1 of a control's boundary, and nothing in
this palette reaches it until --ui-500 at 3.95:1, which would read as a
drawn box rather than a field. This is the step that was asked for and it
is a real improvement; the standard is a separate decision about how heavy
the forms should look. */
border: 1px solid var(--ui-200);
border-radius: var(--radius-control);
background-color: var(--ui-00);
color: var(--ui-800);
font-size: var(--text-medium-size);
line-height: var(--text-medium-lh);
transition:
box-shadow var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-tertiary); }
.input:hover { box-shadow: var(--shadow-level-1); }
.input:focus { outline: none; border-color: var(--ui-950); }
.input[aria-invalid="true"] { border-color: var(--error); }
/* --- Floating label ---------------------------------------------------------
The label lives inside the field and gets out of the way when there is
something to read.
A label stacked above its input costs a line of its own and, once a form runs
to a dozen fields, that line is repeated a dozen times down a column that is
mostly air. Putting it inside halves the vertical rhythm without taking the
name away — which is the difference from a placeholder, and the reason not to
use one: a placeholder is gone the moment you start typing, exactly when you
might want to check what you are filling in.
Measured off the reference form rather than guessed: 46px tall, asymmetric
padding so the shrunk label has somewhere to sit, and the resting label
vertically centred. Ours keeps our own type, palette and radius — the shape
is borrowed, the material is not.
:has() rather than a class toggled by script, so the field is correct before
any JavaScript runs and stays correct if none does. It is already used in
eleven places in this file.
--------------------------------------------------------------------------- */
.field > .field__label,
.field > label {
position: absolute;
/* Half the control, not half the wrapper. With a hint under the input, 50%
of .field is 10px lower than the middle of the box the label belongs to —
measured on the register form, where "Lozinka" sat visibly below its
neighbours. .field carries no padding or border, so the control's top edge
and the wrapper's are the same line and a length is exact. */
top: calc(var(--field-control-height) / 2);
left: var(--space-medium);
transform: translateY(-50%);
transform-origin: left center;
/* Sentence case at rest: it is standing in for the placeholder, and an
uppercase 12px word does not read as one. It becomes the small uppercase
label this site uses everywhere else once it floats. */
font-size: var(--text-medium-size);
line-height: var(--text-medium-lh);
letter-spacing: normal;
text-transform: none;
color: var(--text-tertiary);
pointer-events: none;
transition: transform var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
/* Focused, or holding something. The placeholder is a single space precisely so
:placeholder-shown means "empty" — see sklad_float_label_placeholder(). */
/* Descendant, not child. WooCommerce wraps its controls in a span more often
than not — .woocommerce-input-wrapper around checkout fields, .password-input
around anything with a show/hide eye — and a child combinator here quietly
skipped every one of them. Measured on the account form: the two password
fields kept symmetric padding and an unfloated label while their neighbours
floated. A select is included unconditionally because it always holds a
value, so its label is always up. */
.field:focus-within > .field__label,
.field:focus-within > label,
.field:has(.input:not(:placeholder-shown)) > .field__label,
.field:has(.input:not(:placeholder-shown)) > label,
.field:has(select) > .field__label,
.field:has(select) > label {
transform: translateY(calc(-50% - var(--space-small-plus))) scale(0.8);
color: var(--text-secondary);
}
/* The room the floated label needs, bought at the top of the field only. */
/* Same 50px, with the room the floated label needs bought at the top. 23 and 7
rather than 15 and 15 — the sum is what keeps the height, the split is what
keeps the label off the value. */
.field .input,
.field select {
padding-block: 23px 7px;
}
.field textarea.input {
padding-block: 23px var(--space-small);
}
/* The select is drawn by us, not by the browser.
-------------------------------------------------------------------------
With appearance: auto the UA adds inset padding of its own on top of ours, so
the value sat further right than the value in the text field beside it while
both declared the same padding-left. It also imposes its own content height:
the select measured 53px against the input's 50, in a row where that height
is the contract.
appearance: none drops both, and the arrow becomes an image we place — 16px
wide, 16px from the edge, the same gap the value keeps on the left. The
padding-inline-end is that gap plus the arrow plus eight, so the longest
country name stops before the arrow rather than under it. */
.field select {
appearance: none;
padding-inline-end: 40px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%231e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m4 6.5 4 4 4-4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--space-medium) center;
}
/* The hint used to be spaced by the wrapper's flex gap, which the block layout
above no longer provides. */
.field > .field__hint,
.field > .field__error { display: block; margin-block-start: var(--space-xsmall); }
.field__error { font-size: var(--text-xsmall-size); color: var(--error); }
.field__hint { font-size: var(--text-xsmall-size); color: var(--ui-500); }
/* WooCommerce's password-strength meter injects itself straight after the
password input — inside our .field — with no classes of ours on it, so the
Woo selector is the component here. Untouched it rendered as unstyled body
text saying the password was too weak, while the submit it had just disabled
still looked pressable; the pair read as "nothing happens". */
.woocommerce-password-strength,
.woocommerce-password-hint {
display: block;
margin-block-start: var(--space-xsmall);
font-size: var(--text-xsmall-size);
line-height: var(--text-xsmall-lh);
}
.woocommerce-password-hint { color: var(--ui-500); }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: var(--error); }
/* "good" is strength 3, which is the threshold Woo enforces — the submit is
live at that point, so it is not an error colour. */
.woocommerce-password-strength.good { color: var(--status-muted); }
.woocommerce-password-strength.strong { color: var(--status-success); }
/* The meter says the same thing the static hint does, only live. One or the
other, never both stacked — but the meter is created once and then merely
hidden when the field is emptied, so keying off its presence alone left an
empty field with no hint at all. Key off the field having content instead. */
.field:has(.input:not(:placeholder-shown)):has(.woocommerce-password-strength)
> .field__hint { display: none; }
/* Input paired with an inline submit button. */
.input-group { display: flex; }
.input-group .input { border-inline-end: none; }
/* --- Select -------------------------------------------------------------
Not a bordered field like .input — it is a borderless inline control that
reads as a text label with a caret, used for sorting and for the mobile
collection switcher. The caret is a background SVG rather than an element
so the control stays a bare and keeps native keyboard behaviour.
------------------------------------------------------------------------ */
.sklad-select {
width: 100%;
padding-left: var(--space-medium);
border: none;
appearance: none;
color: currentcolor;
font-family: var(--font-sans-serif);
font-size: var(--text-medium-size);
line-height: var(--text-medium-lh);
font-weight: var(--font-weight-medium);
text-align: left;
/* The control takes the surface it sits on. Without this it takes the UA's
colour for a instead, and appearance:none does not clear that:
Chrome's is white, which happened to match the button behind it, and iOS
Safari's is a light grey — so on a phone the category dropdown showed a
grey rectangle inset inside its own white pill. Reproduced by feeding
Chrome the same grey, and gone when the colour is stated here. */
background-color: transparent;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath fill='currentColor' d='m11 10-3 3-3-3zM5 6l3-3 3 3z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: left 0 center;
/* Resting at 70% is what makes it read as secondary next to the filter
button; hover is the only thing that brings it to full strength. */
opacity: 0.7;
transition: opacity var(--duration-fast) var(--ease-out);
}
.sklad-select--icon-right {
padding-left: 0;
padding-right: var(--space-medium);
background-position: right 0 center;
}
.sklad-select:not([disabled], [aria-disabled]) { cursor: pointer; }
.sklad-select:hover:not([disabled], [aria-disabled]) { opacity: 1; }
.sklad-select[disabled],
.sklad-select[aria-disabled] { opacity: 0.5; cursor: not-allowed; }
.sklad-select__label { display: inline-block; margin-bottom: var(--space-xsmall); }
/* --- Checkbox and radio ---------------------------------------------------
One element covers both: the only differences are border-radius and what
the ::after does. Both draw from `currentcolor`, so setting a colour on
.checkbox__wrapper moves the box AND its label together — which is how the
whole row highlights on hover without a second selector.
------------------------------------------------------------------------- */
/* Every control the site draws itself is below; these are the ones it does
not. WooCommerce generates its own checkboxes and radios — create account,
the legal-entity toggle, payment method, billing address, terms — and they
arrived in the browser's blue while the delivery radios two sections above
were black, because that one group had an accent-color of its own and
nothing else did.
Stated once, for both types, rather than per screen: a control that turns
up in markup this theme does not own still belongs to the same page. The
custom-drawn ones are untouched by it — accent-color paints the UA widget,
and appearance:none means there is no UA widget to paint. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--ui-950); }
.checkbox {
--checkbox-size: 14px;
position: relative;
width: var(--checkbox-size);
height: var(--checkbox-size);
flex-shrink: 0;
appearance: none;
border: 1px solid currentcolor;
border-radius: 3px;
color: currentcolor;
overflow: hidden;
transition: color var(--duration-x-fast) var(--ease-out);
}
/* Two stacked layers: ::before is the fill, ::after is the glyph. Both scale
from 0, so checking animates rather than snapping. */
.checkbox::before,
.checkbox::after {
content: "";
position: absolute;
inset: 0;
transform: scale(0);
transition: transform var(--duration-x-fast) var(--ease-out);
}
.checkbox::before { background-color: currentcolor; }
.checkbox:checked { color: var(--checkbox-color-active); }
.checkbox:checked + label { color: var(--checkbox-color-active); }
.checkbox[type="checkbox"]::after {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='transparent' viewBox='0 0 14 14'%3e%3cpath stroke='white' stroke-linecap='square' stroke-linejoin='round' stroke-width='1.4' d='M3.745 7 6.09 9.344l4.687-4.688'/%3e%3c/svg%3e") center no-repeat;
}
.checkbox[type="checkbox"]:checked::before,
.checkbox[type="checkbox"]:checked::after { transform: scale(1); }
.checkbox[type="radio"],
.checkbox[type="radio"]::before,
.checkbox[type="radio"]::after { border-radius: 50%; }
/* Everything above describes an
that wraps the input together with its text — so the label became a 14px box
that clipped its own words, and "Napravi nalog?" and the terms line rendered
as a bare tick with nothing beside it. A label wearing this class is a row,
not a box. */
label.checkbox {
--checkbox-size: auto;
display: flex;
align-items: center;
gap: var(--space-small);
width: auto;
height: auto;
appearance: none;
border: 0;
border-radius: 0;
overflow: visible;
}
label.checkbox::before,
label.checkbox::after { content: none; }
/* WooCommerce hands these labels the field label class as well, which is the
10px uppercase treatment meant for the word above an input. On a checkbox
the label is the sentence itself — "Prihvatam uslove korišćenja" — and it
was setting in micro caps next to a tick while the shipping toggle beside
it sat at 20px. They read as sentences. */
label.checkbox.field__label,
label.woocommerce-form__label-for-checkbox {
font-size: var(--text-medium-size);
line-height: var(--text-medium-lh);
text-transform: none;
letter-spacing: normal;
color: var(--ui-800);
}
/* The radio's dot is a white disc over the fill, not a hole in it. */
.checkbox[type="radio"]::after { background-color: var(--ui-00); z-index: 1; }
.checkbox[type="radio"]:checked::before { transform: scale(1); }
.checkbox[type="radio"]:checked::after { transform: scale(0.5); }
.checkbox[disabled],
.checkbox[readonly] { color: var(--checkbox-color-disabled); cursor: not-allowed; }
.checkbox[disabled] + label,
.checkbox[readonly] + label { color: var(--checkbox-color-disabled); cursor: not-allowed; }
.checkbox__wrapper {
display: flex;
align-items: center;
/* The box itself is 14px, which is the mark, not the target. The label wraps
the input, so the whole row is clickable — but at the label's natural 18px
it was a wide, short strip. 24px is the WCAG 2.5.8 minimum and costs
nothing visually, because the box and text stay centred in it. */
min-height: 24px;
/* The box and its text were touching wherever the text was a plain label
rather than a .checkbox__label — the register form's marketing row, the
checkout's four ticks. The gap belongs on the row, not on one of the two
things it separates. */
gap: var(--space-small);
color: var(--checkbox-color-default);
}
.checkbox__wrapper:hover { color: var(--checkbox-color-active); }
.checkbox__label {
display: flex;
align-items: center;
color: currentcolor;
transition: color var(--duration-x-fast) var(--ease-out);
}
.checkbox__label > * + * { margin-left: var(--space-small); }
/* --- Textarea -------------------------------------------------------------
Inherits the .input box; only the resize behaviour and height differ. */
.textarea {
min-height: calc(var(--space-xxlarge-plus) + var(--space-large));
resize: vertical;
}
/* --- Focus without zoom -----------------------------------------------------
iOS Safari zooms the whole page onto any focused control set below 16px,
and the viewport is left alone on purpose — maximum-scale would stop the
zoom by taking pinch-zoom away from everyone. So the controls themselves
go to 16px below the breakpoint; the 14px scale is untouched on desktop,
where no browser zooms a field.
Literal 16px, not a token: the number is Safari's threshold, not a step on
our type scale. The line-heights on these controls are fixed rems, so the
50px field-height contract holds; the quantity input sits in a fixed-height
box, so nothing moves but the glyphs. The search sheet's field is already
display-size and its two-class selector outranks this one. */
@media (max-width: 1023px) {
.input,
.sklad-select,
.field select,
.sklad-quantity input.sklad-quantity__value,
input.qty {
font-size: 16px;
}
}
/* --------------------------------------------------------------------------
HEADER
Three zones on the 24-column grid — nav left, logo CENTRED, nav + icons
right (9 / 6 / 9 on desktop, 6 / 6 / 6 below). Theming runs through four
custom properties that children read, so the transparent and solid states
re-point tokens instead of restating colours.
The header is `position: sticky` — the browser pins it; JS only swaps the
colour state via .is-sticky / .is-transparent.
-------------------------------------------------------------------------- */
.header {
--background-color: var(--ui-00);
--border-color: var(--ui-100);
--link-color: var(--ui-950);
--link-color-reverse: var(--ui-00);
--link-hover-color: var(--ui-600);
--highlight-background-color: var(--beige-100-50);
--highlight-hover-background-color: var(--beige-100);
/* Sticky, not JS-positioned. The browser pins it the instant its own top
edge reaches 0, which is scroll position = announcement-bar height — not a
number JS has to know. The old approach fixed the wrapper past a hardcoded
threshold of --header-height, so once the bar pushed the header down to
y=32 it would scroll 24px off-screen and then snap back. */
position: sticky;
top: 0;
z-index: var(--z-header);
height: var(--header-height);
}
.header__wrapper {
height: 100%;
width: 100%;
background: var(--background-color);
border-bottom: 1px solid var(--border-color);
transition:
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
/* Everything inside inherits the swap at the same rate, so the header reads as
one element inverting rather than a background changing under static text. */
.header__wrapper * { transition: color var(--duration-fast) var(--ease-out); }
/* .is-sticky no longer moves anything. It marks that the header has pinned, so
.is-transparent can be lifted and the colours swap back to solid. It carries
no styling of its own — the reference gives the pinned header no shadow, only
the wrapper's border-bottom — but it stays as a hook. */
.header__grid {
--padding-inline: var(--gutters-side);
height: 100%;
}
.header__left,
.header__right {
grid-column: span 6;
display: flex;
align-items: center;
}
/* The left zone carries the desktop nav from 1024 up. Below that the nav is
hidden and the burger sits at the end of the icon row on the right, so on
mobile this zone is empty — a balancing track for the centred wordmark. */
.header__left { display: flex; }
.header__center {
grid-column: span 6;
display: flex;
align-items: center;
}
.header__right {
justify-content: flex-end;
gap: var(--space-large);
}
/* Below 1024 the header stops using the page grid and sizes itself to its
contents. The burger lives at the END of the icon row (search, wishlist,
cart, burger — the side the drawer slides in from), so the left zone is
empty and collapses to 0. The logo sits flush left at the gutter, with the
icon row anchored to the right; the flexible track between them absorbs all
slack. */
@media (max-width: 1023px) {
.header__grid {
grid-template-columns: 0 auto 1fr;
/* The page gutter is for columns of content. Here it is holding a button
away from a wordmark, and the button already carries its own padding. */
column-gap: var(--space-xxsmall);
}
.header__left,
.header__center,
.header__right { grid-column: auto; }
.header__center {
justify-self: start;
margin-left: calc(-1 * var(--space-xxsmall));
}
}
@media (min-width: 1024px) {
.header__left,
.header__right { grid-column: span 9; }
.header__center { justify-content: center; }
.header__right { gap: var(--space-medium); }
}
@media (min-width: 1280px) {
.header__right { gap: var(--space-large); }
}
/* Structural: the header sits over the next section rather than above it.
Kept separate from the .is-transparent visual state, which JS toggles. */
.header--overlay + * { margin-block-start: calc(var(--header-height) * -1); }
/* On the pages whose hero the header floats over, the announcement bar and
the header are both glass, so the hero has to reach the very top of the
page — otherwise the bar's frost sits on the body's white and the two
strips read as different materials. Keyed to the static
data-header-transparent attribute rather than .is-transparent: this is
layout, and JS lifts the class the moment the header pins. The
:not([hidden]) leg gives the space back when the bar is dismissed, the
same reflow dismissing it causes today. */
.announcement-bar:not([hidden]) + .header--overlay[data-header-transparent] + * {
margin-block-start: calc((var(--header-height) + var(--announcement-bar-height)) * -1);
}
/* Over a hero: no fill, a 20%-white hairline, and white links. */
.header.is-transparent:not(.is-search-open) {
--background-color: transparent;
--border-color: var(--ui-00-20);
--link-color-reverse: var(--ui-950);
}
/* The transparent header stays truly transparent. It briefly wore the frost
button's glass here; the owner pulled it — over the hero only the
announcement bar is glass, and the header is nothing but its white marks. */
.header.is-transparent:not(.is-search-open) .header__nav-link.is-highlighted {
--highlight-background-color: var(--ui-950-6);
backdrop-filter: var(--blur-16);
}
.header.is-transparent:not(.is-search-open) .header__nav-link,
.header.is-transparent:not(.is-search-open) .header__button,
.header.is-transparent:not(.is-search-open) .header__logo { --link-color: var(--ui-00); }
/* --- Over a LIGHT hero ------------------------------------------------------
Transparent means white links, which vanish over a pale image. Measured on
the homepage hero: white text scored 2.47:1 on average and 1.0:1 against its
brightest areas — invisible, not merely low.
The reference solves this with .is-black-and-white, which flips the links to
--link-color-reverse (which .is-transparent has already set to --ui-950) and
adds a hairline so the header still has an edge. It was never ported; this
is that rule, extended to the left nav and the logo, which the reference
leaves white because its own light heroes have dark subjects on the left.
Add the class alongside data-header-transparent on any page whose hero is
pale. A scrim was the alternative and was rejected: to bring white to 4.5:1
over a pure-white pixel needs ~82% black, which is a black bar, not a scrim.
---------------------------------------------------------------------------- */
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__nav-link,
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__button,
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__logo {
--link-color: var(--link-color-reverse);
}
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__nav-link:not(.is-highlighted):hover,
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__button:not(.is-highlighted):hover {
--link-color: var(--ui-600);
}
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__count {
color: var(--link-color-reverse);
}
.header.is-black-and-white.is-transparent:not(.is-search-open) .header__wrapper {
position: relative;
border-bottom: 1px solid rgb(192 192 192 / 20%);
}
.header__nav { display: none; }
@media (min-width: 1024px) { .header__nav { display: flex; } }
/* Spacing between links belongs to the LIST, not to the links — the link
itself carries no padding at all. It narrows at 1024 and widens again
at 1280, where there is room. */
.header__nav-list {
display: flex;
align-items: center;
gap: var(--space-large);
}
@media (min-width: 1024px) { .header__nav-list { gap: var(--space-medium); } }
@media (min-width: 1280px) { .header__nav-list { gap: var(--space-large); } }
.header__nav-item {
position: relative;
display: inline-flex;
}
/* Primary nav is sentence case — uppercase is for buttons and small labels. */
.header__nav-link {
font-family: var(--font-sans-serif);
font-size: var(--text-large-size);
line-height: var(--text-large-lh);
font-weight: var(--font-weight-medium);
color: var(--link-color);
white-space: nowrap;
transition:
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
/* Hover was scoped to :not(.is-transparent), so an overlay header had no
hover state at all — the links simply did not respond. It applies in both
states now; only the target colour differs, and on a transparent header
that is white stepping back to 80%, since there is no darker white. */
.header__nav-link:not(.is-highlighted):hover {
color: var(--link-hover-color);
}
.header.is-transparent:not(.is-search-open) { --link-hover-color: var(--ui-00-80); }
/* The desktop menu opener: the "Shop" link carries a two-rule hamburger that
splits apart on hover. The negative margin pulls the icon into the gutter so
the LABEL still lines up with where it would sit without one. */
.header__nav-link--menu {
--icon-width-with-offset: calc(var(--space-medium-plus) + var(--space-xsmall));
margin-left: calc(var(--icon-width-with-offset) * -1);
display: inline-flex;
align-items: center;
}
.header__nav-link--menu .link__text {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xsmall);
}
.header__nav-link-icon {
position: relative;
width: var(--space-medium-plus);
height: var(--space-medium-plus);
display: inline-flex;
}
/* Two 1px rules rather than an icon file. */
.header__nav-link-icon::before,
.header__nav-link-icon::after {
content: "";
position: absolute;
left: 4px;
right: 4px;
height: 1px;
background: var(--link-color);
transition:
transform var(--duration-x-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.header__nav-link-icon::before { top: 7px; transform: translateY(0); }
.header__nav-link-icon::after { bottom: 7px; transform: translateY(0); }
/* They fly apart on hover. The mobile burger is the SAME element, not a second
icon — it used to be Lucide's three-line #i-menu, which sat next to a
two-rule desktop burger and read as a different mark at a different weight. */
.header__nav-link--menu:hover .header__nav-link-icon::before,
.header__button--menu:hover .header__nav-link-icon::before { transform: translateY(-100%); }
.header__nav-link--menu:hover .header__nav-link-icon::after,
.header__button--menu:hover .header__nav-link-icon::after { transform: translateY(100%); }
.header__nav-link--menu:hover .header__nav-link-icon::before,
.header__nav-link--menu:hover .header__nav-link-icon::after,
.header__button--menu:hover .header__nav-link-icon::before,
.header__button--menu:hover .header__nav-link-icon::after {
background: var(--link-hover-color);
}
/* A pill — the only nav link that has padding of its own. */
.header__nav-link.is-highlighted {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-xxsmall) var(--space-small-plus);
background: var(--highlight-background-color);
border-radius: var(--space-xsmall);
}
.header:not(.is-transparent) .header__nav-link.is-highlighted:hover {
background: var(--highlight-hover-background-color);
}
.header__icons {
display: flex;
align-items: center;
gap: var(--space-xxsmall);
}
.header__logo {
--header-logo-height: 16px;
position: relative;
display: inline-flex;
align-items: center;
z-index: 1;
color: var(--link-color);
transition: color var(--duration-fast) var(--ease-out);
}
/* The wordmark is inlined rather than an