` still sticks. */ .js-reveal main#main { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal], .js-reveal .builder-page .pb-block, .js-reveal .product-card, .js-reveal .section-head, .js-reveal .listing-hero, .js-reveal .newsletter { opacity: 1; transform: none; transition: none; } } /* ---- Motion under the pointer --------------------------------------------------------- The one piece of motion every theme in the reference set has, and the one this shop had none of: a product photograph that moves a little when you point at it. It is worth having for a reason beyond decoration — the card is a link whose whole target area is a picture, and the movement is what says so. Three things keep it honest: - **It is a `transform` on the image and nothing else moves.** Growing the card would reflow the grid; growing the image inside a clipped frame does not touch layout, so a row of cards cannot jitter as the pointer crosses it. - **`@media (hover: hover)`.** On a touch screen `:hover` sticks after a tap, so without this the last card somebody touched stays zoomed until they touch another one. - **`:focus-within` gets it too**, because the card is reached by keyboard as well, and an affordance only pointers can see is one half of the users missing it. `--hover-zoom` is per theme, like `--reveal-*`: press barely moves, studio scales, depot does not move at all because a parts catalogue is a tool rather than a shop window. A theme setting `1` opts out without needing a rule to undo. */ .product-media { overflow: hidden; } .product-media img { transition: transform var(--hover-duration, 620ms) var(--hover-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); } @media (hover: hover) { .product-card:hover .product-media img, .product-card:focus-within .product-media img { transform: scale(var(--hover-zoom, 1.045)); } } @media (prefers-reduced-motion: reduce) { .product-media img { transition: none; } .product-card:hover .product-media img, .product-card:focus-within .product-media img { transform: none; } } /* ---- Menu submenus ------------------------------------------------------------------------ Structural only. Each theme styles `.site-nav` itself — seven headers genuinely do look different — so what lives here is the part that is the same everywhere: where the panel sits and what opens it. Colours come from the palette tokens, so a submenu follows light and dark without any theme writing a rule. commerce.css is linked *after* the theme stylesheet, so these win at equal specificity and a theme tweaks them from `body.theme- .nav-submenu { … }`. **No JavaScript, and that is the design.** `:hover` opens it for a pointer, `:focus-within` opens it for a keyboard. A menu that needs a script to open is a menu some people cannot open, and this one is above the fold on every page of the shop. */ .site-nav .nav-group { position: relative; display: inline-flex; align-items: center; } .site-nav .nav-group-label { cursor: default; } .site-nav .nav-submenu { position: absolute; top: 100%; left: 0; z-index: 40; display: grid; min-width: 12rem; padding: 0.4rem; gap: 0.1rem; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--c-radius-sm); box-shadow: var(--c-shadow); /* Hidden without `display: none`, so the links stay in the accessibility tree and a screen reader can still reach them — and so `:focus-within` has something to focus. */ opacity: 0; visibility: hidden; transform: translateY(-0.25rem); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; } .site-nav .nav-group:hover .nav-submenu, .site-nav .nav-group:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: none; } .site-nav .nav-submenu a { padding: 0.4rem 0.6rem; border-radius: var(--c-radius-sm); white-space: nowrap; } .site-nav .nav-submenu a:hover, .site-nav .nav-submenu a:focus-visible { background: var(--c-soft); } /* **The panel owns its ink, and the leading `body` is load-bearing.** A theme colours `.site-nav a` for the *bar* — and `voyage`'s bar is a dark chrome band, so its rule is `color: var(--color-surface)` at (0,2,2). These links are inside `.site-nav`, so on a panel grounded in `--c-bg` that is near-white ink on a near-white card: **1.0:1, in both colour schemes**, five of six links invisible, and in dark mode the same thing the other way round. Exactly what `.site-search` did on the same theme for the same reason. A bare `.site-nav .nav-submenu a` is (0,2,1) and loses; with `body` it ties at (0,2,2) and commerce is linked *after* the theme, so it wins. A theme that wants its own panel ink writes `body.theme- .site-nav .nav-submenu a`, which is (0,3,2) — and voyage does, because the honest fix there is a panel that belongs to the band rather than to the page. */ body .site-nav .nav-submenu a { color: var(--c-text); } /* **A group inside a panel is one row plus an indented list, not a second dropdown.** It only happens in `nav_overflow.js`'s "More" panel, which moves a whole top-level entry in, submenu and all. Left with the top-level rules, the group stayed `inline-flex`, so its link was only as wide as its word and the hover lit the word rather than the line every other row lights (reported on the live voyage shop: "About" in More). Its own panel stayed absolutely placed at `top: 100%` and opened whenever More did, since `.nav-group:hover .nav-submenu` matches every panel below the hovered one, so it floated over the rows under it. Static and indented is the phone drawer's shape, one level up, and it cannot run off the edge of the page the way a fly-out would. `visibility: inherit`, never `visible`: a child that says `visible` stays focusable and clickable inside a closed, transparent outer panel. (0,4,1) outranks every theme's own panel rule at (0,3,1), which is what has to lose here: a theme's shadow and ground on the inner list would draw a card inside the card. */ body .site-nav .nav-submenu .nav-group { display: grid; } body .site-nav .nav-submenu .nav-group > .nav-group-label { padding: 0.4rem 0.6rem; } body .site-nav .nav-submenu .nav-group .nav-submenu { position: static; max-height: none; overflow: visible; opacity: 1; visibility: inherit; transform: none; min-width: 0; padding: 0 0 0 0.9rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; transition: none; } /* **A panel in columns, folded into More, is that indented list too, and no wider than its words.** The rule above takes a folded panel's position, ground and shadow away and leaves its *width*, and a panel in columns has one (`min(44rem, 90vw)`, below, because as a drop-down it may not grow with its content). Inside More that made More's own panel 752px wide, hung from a word a quarter of the way across studio's header at 768px: 189px past the window. More is `visibility: hidden` until it is opened, and a hidden box still has its width, so the whole page scrolled sideways into nothing, on every page, with nothing on it visibly wrong. One column, as wide as its longest entry, which is what the phone menu makes of the same panel. (0,4,1) and (0,5,1), over the many-columns rules further down at (0,4,0) and (0,5,0). */ body .site-nav .nav-submenu .nav-group .nav-submenu-mega { display: grid; grid-template-columns: minmax(0, 1fr); width: auto; max-width: none; gap: 0; } body .site-nav .nav-submenu .nav-group .nav-submenu-mega > .nav-columns { display: contents; } body .site-nav .nav-submenu .nav-group .nav-submenu-mega .nav-column { margin-bottom: 0; } /* Its entries are rows of a list again, so they read on one line like the rows around them. */ body .site-nav .nav-submenu .nav-group .nav-submenu-mega .nav-column a { white-space: nowrap; } /* The mega panel — the same one level of nesting, laid out in columns. `menu()` only builds columns for a parent set to `mega` that has more than three children, so this never draws a wide empty box over a short list. `auto-fit` rather than a fixed count so a merchant who marks two columns gets two, not four with two empty. */ .site-nav .nav-submenu-mega { grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: 0.25rem 1.75rem; padding: 1.1rem 1.25rem 1.25rem; /* **A width, not a minimum.** It opens from its own entry (`left: auto`), so a panel sized by its content grew with every column — a menu filled from five top-level categories drew a 57rem panel from an entry halfway across the header and ran 80px off the page, on every page. Fixed at the old minimum, extra columns wrap onto a second row inside it instead, which is `auto-fit`'s job. `90vw` keeps it inside a small laptop. */ left: auto; width: min(44rem, 90vw); } .site-nav .nav-submenu-mega .nav-column { display: grid; gap: 0.1rem; align-content: start; min-width: 0; } /* **A label wraps inside its column.** A plain drop-down is as wide as its longest entry, so `nowrap` there is right: the panel grows to fit. A column has a width of its own, and the same rule there sent "Courroies & accessoires pour palmes" straight through the gutter and over the next column's links (a shop whose English labels fitted, read in French). `anywhere` is for the one long word no space will ever break. */ .site-nav .nav-submenu-mega .nav-column a { white-space: normal; overflow-wrap: anywhere; } /* The columns' wrapper is not a box until a panel needs it to be one (below), so every rule written for `.nav-submenu-mega` as the grid of columns goes on meaning what it meant. */ .site-nav .nav-submenu-mega > .nav-columns { display: contents; } /* ---- A panel that fits the window, whatever is in it -------------------------------------- Reported on a live shop with seventeen departments and sixty-one links in its Categories menu: the panel was 1,058px tall, opened 190px down a 768px laptop, and nothing could bring its lower half on screen — it is positioned from the header, so scrolling the page moved the pointer off it (and the header away with it), and once the header was pinned it did not move at all. A drop-down's length is the merchant's, and no stylesheet can know it. Two answers, and it takes both: **It may never be taller than the room under it, and scrolls inside itself when it is.** `--nav-room` is that room, measured by `static/js/nav_overflow.js` each time a panel is opened (where the header is depends on how far the page has scrolled). Without the script a wide screen still gets a cap worked out from the window; below 1101px there is none, because that is where a theme may be drawing the same panel as a list inside its phone drawer, and a list with a scrollbar of its own inside a drawer is a second bug. **A panel with many columns uses the width it has.** Three columns of sixty links is a tall panel on any screen. From the seventh column on, the panel spans most of the window and its columns are packed by the browser (`column-width`), which balances seventeen uneven groups far better than a grid's rows can: 1,058px becomes about 430. The wrapper is the multi-column box and the panel keeps the height and the scrollbar — a multi-column box that is given a maximum height grows *sideways*, so the two cannot be one element. `nav_overflow.js` still nudges the panel back inside the window from wherever its own entry happens to be. */ .site-nav .nav-submenu { max-height: var(--nav-room, none); overflow-y: auto; scrollbar-width: thin; } .site-nav .nav-submenu-mega.is-wide { display: block; width: min(72rem, 94vw); } .site-nav .nav-submenu-mega.is-wide > .nav-columns { display: block; column-width: 10.5rem; column-gap: 1.75rem; } .site-nav .nav-submenu-mega.is-wide .nav-column { break-inside: avoid; margin-bottom: 0.9rem; } @media (min-width: 1101px) { .site-nav .nav-submenu { max-height: var(--nav-room, calc(100vh - 13rem)); } .site-nav .nav-submenu-mega:has(.nav-column:nth-child(7)) { display: block; width: min(72rem, 94vw); } .site-nav .nav-submenu-mega:has(.nav-column:nth-child(7)) > .nav-columns { display: block; column-width: 10.5rem; column-gap: 1.75rem; } .site-nav .nav-submenu-mega:has(.nav-column:nth-child(7)) .nav-column { break-inside: avoid; margin-bottom: 0.9rem; } } /* ---- The menu on a phone: it scrolls, and its groups fold ---------------------------------- Everything here is behind a class `static/js/nav_phone.js` adds, so a phone that never runs it has the menu it always had: every entry open, in the flow of the page. `.nav-scroller` is whatever the burger opens — the menu itself, or the drawer a theme wraps it in — given the height from its own top edge to the bottom of the window. Before this the open menu was simply part of the header, and a header that `headroom.js` had pinned is `position: fixed`: a 2,300px menu in a fixed box cannot be scrolled by anything. The page behind is held still (`html.nav-open`) for as long as the menu is open, so a swipe that reaches the end of the list does not carry on into the shop underneath. */ html.nav-open { overflow: hidden; } .nav-scroller { max-height: var(--nav-room, none); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* A group's children are shown when somebody asks for them. The button is the script's, and is not drawn at all outside the phone menu: on a desktop the same groups open on hover. */ .nav-group-toggle { display: none; } /* The label keeps the whole row and the button is laid over its end, in the same grid row. A label squeezed into the first column drew whatever rule or hover ground its theme gives it only as far as the button, so a folding row and a plain one beside it ended in different places. `stretch`, with the label centring its own words, so that rule sits on the row's bottom edge however tall the button makes the row. **`body` and `:is()`, to (0,4,1): the row is a grid whatever a theme says a group is.** As `.site-nav.nav-phone .nav-collapsible` this was (0,3,0), and the five designs with a drawer each say `body.theme- .site-nav .nav-group { display: block }` — (0,3,1) — so on those five the row was a block and the button dropped onto a line of its own under its label. */ body .site-nav.nav-phone :is(.nav-group, .nav-column).nav-collapsible { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; align-items: stretch; } /* **The row is as wide as the menu, so the button ends it.** Five designs open their menu as a column of entries each as wide as its own words (`align-items: flex-start`), and the grid's last column is then wherever the label stops: the arrow sat against the word, at a different place on every row. Only a folding row is stretched; a plain link is left as its design drew it. */ body .site-nav.nav-phone > .nav-collapsible { align-self: stretch; } .site-nav.nav-phone .nav-collapsible > :first-child { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; min-height: 2.75rem; padding-inline-end: 2.75rem; } .site-nav.nav-phone .nav-collapsible > .nav-group-toggle { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: var(--c-radius-sm); background: transparent; color: inherit; cursor: pointer; } .site-nav.nav-phone .nav-collapsible > .nav-group-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } .site-nav.nav-phone .nav-group-toggle svg { width: 1.1rem; height: 1.1rem; transition: transform 0.15s ease; } .site-nav.nav-phone .nav-collapsible.is-open > .nav-group-toggle svg { transform: rotate(180deg); } .site-nav.nav-phone .nav-group.nav-collapsible > .nav-submenu { grid-column: 1 / -1; } .site-nav.nav-phone .nav-group.nav-collapsible:not(.is-open) > .nav-submenu { display: none; } .site-nav.nav-phone .nav-column.nav-collapsible > a:not(.nav-column-head) { grid-column: 1 / -1; } .site-nav.nav-phone .nav-column.nav-collapsible:not(.is-open) > a:not(.nav-column-head) { display: none; } @media (prefers-reduced-motion: reduce) { .site-nav.nav-phone .nav-group-toggle svg { transition: none; } } /* The column head is an ordinary link that happens to start a column, so it is marked by weight and spacing rather than by being a different kind of thing. */ .site-nav .nav-submenu-mega .nav-column-head { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; color: var(--c-muted); margin-bottom: 0.2rem; } /* A picture beside a label: a brand's logo, a department's icon. Sized by the text it sits beside (`em`), so it is the right height in a header's menu and in a panel's smaller rows without a rule per theme, and capped in width so a long wordmark cannot push the label out of its row. `contain`, never `cover`: a logo with its edges cropped is not that logo. */ .site-nav .nav-icon { display: inline-block; height: 1.3em; width: auto; max-width: 4.5em; margin-inline-end: 0.5em; object-fit: contain; vertical-align: -0.28em; flex: none; } /* A short flag beside a label. It takes the accent *pair* from the palette — never a colour a merchant types — for the reason the builder's tones give: a literal is the same value in light and dark, and no contrast test can see a per-shop override. */ .nav-badge { display: inline-block; margin-inline-start: 0.4rem; padding: 0.1rem 0.35rem; border-radius: 3px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } /* On a narrow screen there is no room beside the parent and no hover to open it with, so the panel becomes an indented list that is simply always there. A dropdown that needs a hover is a dropdown a phone cannot open. */ /* **The phone shape is structural, so it outranks the themes.** A media query adds no specificity, and every theme now styles its own panel at `body.theme- .site-nav .nav-submenu` — (0,3,1) — so a bare `.site-nav .nav-submenu` here would lose and a phone would get the desktop card: a shadowed, padded, sometimes inverted box inlined into the burger menu, on all seven. `.nav-group` in the middle takes these to (0,3,2), above any theme's panel rule; a theme that genuinely needs to tune the phone list has to say so explicitly, which is the right way round for a shape that is about the device rather than about the design. */ @media (max-width: 720px) { body .site-nav .nav-group { display: block; } /* A mega panel on a 390px screen is just a long menu, so it becomes one. */ body .site-nav .nav-group .nav-submenu-mega { grid-template-columns: 1fr; width: auto; min-width: 0; max-width: none; padding: 0; gap: 0; } body .site-nav .nav-group .nav-submenu { position: static; max-height: none; overflow: visible; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 0 0.9rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; transition: none; } } /* **The same shape, for a design whose phone menu is still its menu on a tablet.** counter, encore, linden and tally fold at 1023px, and between 721px and there the block above is not in force: a nested entry's panel was the desktop's hover-only card inside an open drawer. Each of the four carried its own copy of that block at its own breakpoint, and the copies had already lost two lines of it (`max-height`, `overflow`), so an unfolded panel there could get a scrollbar of its own inside the menu's. A design now *says* where it folds — `

` — and the shape is stated here, beside the one it must match (`tests/themes/test_theme_stylesheet_rules.py` holds the two bodies equal). Two blocks rather than one because a selector cannot choose its media query; the attribute takes these to the same (0,4,1) the copies had, and this file is linked after a theme's. */ @media (max-width: 1023px) { body .site-nav[data-nav-fold="1023"] .nav-group { display: block; } body .site-nav[data-nav-fold="1023"] .nav-group .nav-submenu-mega { grid-template-columns: 1fr; width: auto; min-width: 0; max-width: none; padding: 0; gap: 0; } body .site-nav[data-nav-fold="1023"] .nav-group .nav-submenu { position: static; max-height: none; overflow: visible; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 0 0.9rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; transition: none; } } /* ---- The phone header in two rows -------------------------------------------------------- The logo with the counters, then the search box ended by a "Menu" button; the menu opens full width directly beneath, and the language picker is inside it. It was depot's own (`.dp-search-row`), written after a live shop's phone header was measured at four rows and 219px, and a shop owner then asked for every design to do the same. A design opts in: `phone-bar` on its `.container.header-inner`, `partials/_phone_bar_row.html` where its search box was, `partials/_menu_language.html` as the last thing in its `

`. **Structure here, skin in the theme.** Every structural rule starts `body`, which puts it level with a theme's `body.theme- .x` — (0,2,1) — and this file is linked after a theme's, so it wins the tie; that is the convention the menu's phone shape above already relies on. What a design may want to change (the button's border, its weight, the gaps) is written without `body`, so the theme's own rule wins that. A theme rule that out-specifies these on `.header-inner`, `.site-brand`, `.header-actions` or `.site-search` breaks the two rows, and `tests/themes/test_phone_header_and_sign_in_browser.py` is what says so. Outside the phone the row is not a box at all, and the menu's own picker is not drawn. */ .phone-bar-row { display: contents; } .nav-toggle-word { white-space: nowrap; } .site-nav > .nav-extra { display: none; } .phone-bar-row .nav-toggle { gap: 0.35rem; padding: 0 0.6rem; cursor: pointer; border: 1px solid currentColor; border-radius: var(--c-radius-sm); font-size: 0.85rem; font-weight: 700; } .phone-bar-row .nav-toggle .icon { width: 1.25rem; height: 1.25rem; flex: none; } /* Pressed: a tint of the button's own ink, which needs no second colour and so holds on a header of any ground (voyage's is one of four, or a photograph). */ .header-inner.phone-bar:has(> .nav-toggle-input:checked) .nav-toggle { background: color-mix(in srgb, currentColor 14%, transparent); } .nav-language { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--c-line); } @media (max-width: 720px) { body .header-inner.phone-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 0.6rem; } /* The brand's track takes what is left after the counters, so a long wordmark shrinks rather than pushing the basket off a 360px screen. `stretch`, so the brand is as wide as that track and a logo capped at `100%` is capped at it; `margin: 0` because an auto margin (how three designs push their brand to one side of a desktop row) would shrink it back. */ body .header-inner.phone-bar > .site-brand { grid-column: 1; grid-row: 1; justify-self: stretch; min-width: 0; margin: 0; } /* A descendant, not a child: voyage keeps its search and its counters in one box on a desktop, and that box is `display: contents` here. */ body .header-inner.phone-bar .header-actions { grid-column: 2; grid-row: 1; justify-self: end; } body .header-inner.phone-bar .header-switchers { display: none; } /* A box of its own, spanning both columns: the button is as wide as what it says and the search has everything else. `position: relative` because it is also what the suggestions are measured against — `search.js` pins its panel to the search box, which here stops a button's width short of the screen, and a panel pinned to the end of that box and wider than it started 124px off the left of the screen. Against the row it is the row's width. */ body .header-inner.phone-bar .phone-bar-row { grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; align-items: stretch; gap: 0.6rem; min-width: 0; } /* `order: 0` and no margin: every phone search is otherwise sent to the end of its header with a gap above it (`.site-search`, far above), which in this row is after the button that is meant to end it, and a step down from the button's top edge. Both stretch to the row, so their outlines are level top and bottom. */ body .phone-bar-row .site-search { position: static; order: 0; flex: 1 1 0; align-self: stretch; width: auto; min-width: 0; max-width: none; margin: 0; } body .phone-bar-row .site-search-panel { inset-inline: 0; width: auto; max-width: none; } body .phone-bar-row .nav-toggle { display: inline-flex; flex: none; align-self: stretch; align-items: center; justify-content: center; min-height: 2.75rem; } /* Closed, the menu is not there; open, it is the third row: one column, every entry as wide as the screen, so a folding row's arrow and a plain link end in the same place. A design whose menu is not a child of the bar (depot's is its own band underneath) opens it itself. */ body .header-inner.phone-bar > .site-nav { grid-column: 1 / -1; grid-row: 3; display: none; } body .header-inner.phone-bar > .nav-toggle-input:checked ~ .site-nav { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } /* Each entry is a row a finger can press. A folding row's label is 2.75rem tall already (`.nav-collapsible > :first-child`, above); a plain link beside it was as tall as its own words, so a menu was rows of two heights and the short ones were 20px targets. */ body .header-inner.phone-bar > .site-nav > a { display: flex; align-items: center; min-height: 2.75rem; } body .site-nav > .nav-extra { display: block; } /* The form draws the picker's arrow at its own right-hand edge, so it has to be as wide as the picker and no wider: stretched across the menu, the arrow sat a screen away from the box. */ body .site-nav .nav-language .language-switcher { display: inline-flex; } } /* ---------------------------------------------------------------- The shop's logo, twice `partials/_brand.html` puts both of a shop's logos in the markup when it has a version for dark backgrounds, and this picks one. The choice follows the same two inputs the palette does — the merchant's `color_scheme` (stamped on as `data-color-scheme`) and, when that is `auto`, the visitor's device — so the logo and the colours behind it can never disagree. `data-brand-ground="inverse"` flips it, for a band a theme paints in the *opposite* of the page: depot's, voyage's and encore's footers are `--color-ink`, which is dark on a light page and light on a dark one. What decides whether a logo is legible is the ground under it, not the device, and `tests/themes/test_brand_logo_browser.py` measures that ground. `data-brand-ground="accent"` is a chip painted in the accent colour (studio, tally), where neither the page nor its opposite is the answer: the palette is. `theme._brand_on_accent` emits the two `display` values beside the colour roles, in the same light and dark `:root` blocks, and `:root` in those two rules is what lets them outrank the scheme rules above. `body` is in every selector so these outrank a theme's `body.theme- .site-brand img`, and none of them sets anything but `display`: the size is still the theme's. */ body .site-brand .brand-logo-dark { display: none; } body .site-brand[data-brand-ground="inverse"] .brand-logo-light { display: none; } body .site-brand[data-brand-ground="inverse"] .brand-logo-dark { display: inline-block; } html[data-color-scheme="dark"] body .site-brand .brand-logo-light { display: none; } html[data-color-scheme="dark"] body .site-brand .brand-logo-dark { display: inline-block; } html[data-color-scheme="dark"] body .site-brand[data-brand-ground="inverse"] .brand-logo-light { display: inline-block; } html[data-color-scheme="dark"] body .site-brand[data-brand-ground="inverse"] .brand-logo-dark { display: none; } @media (prefers-color-scheme: dark) { html[data-color-scheme="auto"] body .site-brand .brand-logo-light { display: none; } html[data-color-scheme="auto"] body .site-brand .brand-logo-dark { display: inline-block; } html[data-color-scheme="auto"] body .site-brand[data-brand-ground="inverse"] .brand-logo-light { display: inline-block; } html[data-color-scheme="auto"] body .site-brand[data-brand-ground="inverse"] .brand-logo-dark { display: none; } } :root body .site-brand[data-brand-ground="accent"] .brand-logo-light { display: var(--brand-logo-on-accent-light, inline-block); } :root body .site-brand[data-brand-ground="accent"] .brand-logo-dark { display: var(--brand-logo-on-accent-dark, none); } :where(.site-brand) .brand-logo { vertical-align: middle; } /* **A wordmark is wider than the name it replaces, so it is capped by width as well.** Every theme sizes the logo by height alone (`max-height: 2–3rem; width: auto`), which is right for the shop's *name* the headers were designed around and wrong for an 8:1 wordmark: at 2.75rem tall that is 350px, which crushed counter's search box to its magnifier, pushed tally's header past the window and scrolled linden's sideways on a phone. With both maxima an image scales down proportionally, so a typical 4:1 logo is untouched and only a long one gets shorter. `vw` rather than `%`: a percentage inside a flex or grid item that sizes to its content resolves against a width the image is itself deciding — which is also how voyage's logo came out 0x0 on a phone, under every theme's `body.theme- img { max-width: 100% }`. That rule is (0,1,2), so this needs real specificity rather than `:where()`, or it is a rule in the file that never applies. `tests/themes/test_brand_logo_layout_browser.py` measures every header. */ body .site-brand .brand-logo { max-width: min(calc(15rem * var(--logo-scale, 1)), 45vw); } /* **The merchant chooses how big the logo is in the header** (Design → `logo_size`, stamped on as `data-logo-size`). Every theme writes its logo height as `calc( * var(--logo-scale, 1))`, so "Standard" is exactly the design as drawn and every other size is a multiple of *that* theme's height rather than one number forced on twelve headers of different proportions. The scale is set on `.site-header` only: the width cap above scales with it and is still bounded by the window, so a long wordmark grows until it would crowd the header and no further. */ body[data-logo-size="small"] .site-header { --logo-scale: 0.8; } body[data-logo-size="large"] .site-header { --logo-scale: 1.4; } body[data-logo-size="x-large"] .site-header { --logo-scale: 1.9; } body[data-logo-size="xx-large"] .site-header { --logo-scale: 2.5; } /* A phone header is a row shared with the menu button and the basket, so the two largest sizes are held back there: at 2.5 times its design height a logo was most of a 390px screen's first glance, and the merchant choosing "Extra large" was looking at their desktop. 780px, not 720: voyage's own three-track phone header (`theme.css`) switches on at 780px, so a shop between 721 and 780px wide was drawing the *desktop* scale inside the *phone* layout — the one width band where neither theme nor this file had scaled anything back. */ @media (max-width: 780px) { body[data-logo-size="x-large"] .site-header { --logo-scale: 1.5; } body[data-logo-size="xx-large"] .site-header { --logo-scale: 1.7; } } /* **The merchant can make the header's words bolder** (Design → `header_weight`, stamped on as `data-header-weight`). It covers the shop's name and the top-level menu links, which is what "make the header text bolder" means, and nothing else in the header: the basket and account controls are icons, and the footer draws the same brand partial and keeps the weight its design gave it (the name's selector starts at `.site-header`; the menu's at `.site-header` or depot's `.dp-navbar`, a bar of its own under the header). `standard` has no rule on purpose: it is the design as drawn. `bold` is a **floor**, never a fixed weight — each theme states its own weights as `--hw-brand` and `--hw-link`, and `max()` only ever raises them, because a fixed 700 made harbour's 800 name *lighter* when somebody asked for bolder. Only 700 is offered: most of the curated families load nothing heavier (Lora, Space Grotesk and IBM Plex have no 800 at all), so a heavier setting would render as the same 700 face. Each selector is one class deeper than the theme's own (`body.theme- .site-nav > a`), and this file is linked after the theme's, so a theme's weight cannot win. `.nav-group-label` is the top-level entry with a drop-down and no link of its own, and the "More" group nav_overflow.js builds. */ body[data-header-weight="bold"] .site-header .site-brand { font-weight: max(var(--hw-brand, 400), 700); } body[data-header-weight="bold"] :is(.site-header, .dp-navbar) .site-nav > a, body[data-header-weight="bold"] :is(.site-header, .dp-navbar) .site-nav > .nav-group > a, body[data-header-weight="bold"] :is(.site-header, .dp-navbar) .site-nav > .nav-group > .nav-group-label { font-weight: max(var(--hw-link, 400), 700); } /* **The merchant can set the header's and the footer's own font** (Header & footer → Font, stamped on as `data-header-font` / `data-footer-font`, with the family's stack in `--font-header` / `--font-footer`). Nothing is drawn when the attribute is absent: blank is the design as drawn, so a shop that never opens the screen is unchanged. One family covers a whole area, and the gate names the *chrome*: `.site-header`, depot's and voyage's wrappers (`.dp-chrome`, `.vy-chrome`, which also hold the strip above the header and, for depot, the department bar) and `.site-footer`, which holds a footer the merchant built too. The announcement bar sits above all of these and keeps the shop's fonts on purpose. A theme names its fonts two ways and both have to be taken over. Most write `font-family: var(--font-heading)`, so inside the area `--font-heading` and `--font-body` are pointed at the chosen family. Five give a face a private alias at `body` (counter `--ct-serif`, encore `--en-display`, linden `--ld-serif`, tally `--tl-display`, syllabus `--sy-mono`, which is a literal monospace stack). A custom property resolves where it is *declared*, so setting them on the chrome re-points every rule written against them below it — the way the derived colour tokens are restated on `body`. The basket drawer is a descendant of the header and is the shop's, not the header's, so it is handed the page's own fonts back. */ body[data-header-font] :is(.site-header, .dp-chrome, .vy-chrome) { --font-heading: var(--font-header); --font-body: var(--font-header); --ct-serif: var(--font-header); --en-display: var(--font-header); --ld-serif: var(--font-header); --tl-display: var(--font-header); --sy-mono: var(--font-header); font-family: var(--font-header); } body[data-footer-font] .site-footer { --font-heading: var(--font-footer); --font-body: var(--font-footer); --ct-serif: var(--font-footer); --en-display: var(--font-footer); --ld-serif: var(--font-footer); --tl-display: var(--font-footer); --sy-mono: var(--font-footer); font-family: var(--font-footer); } /* The page's own two fonts are captured on , above the chrome that re-points them, so the drawer can be handed them back. If the shop has chosen neither, they are the guaranteed-invalid value and a theme's own literal fallback (`var(--font-body, Inter, …)`) applies. */ body:is([data-header-font], [data-footer-font]) { --page-font-heading: var(--font-heading); --page-font-body: var(--font-body); } body[data-header-font] :is(.site-header, .dp-chrome, .vy-chrome) .cart-drawer { --font-heading: var(--page-font-heading); --font-body: var(--page-font-body); font-family: var(--page-font-body, system-ui, sans-serif); } /* **The footer logo is its own setting** (`footer_logo_size` / `data-footer-logo-size`), not a copy of the header's. It used to keep the design's drawn size regardless of what the header was told, on the reasoning that a logo sized to lead the page is too big for the line of small print under it — sound for the *default*, and it left no way for a merchant who wanted more weight in the footer to get it. Same variable (`--logo-scale`), scoped to `.site-footer` instead of `.site-header`, so every theme's own height calc responds to it without a second copy of that arithmetic. In a footer the brand sits in a column of known width, and at 1024px linden's is narrower than 15rem — so the column is the cap, a block column rather than the auto-sized grid track that made a percentage collapse in voyage's header. */ body[data-footer-logo-size="small"] .site-footer { --logo-scale: 0.8; } body[data-footer-logo-size="large"] .site-footer { --logo-scale: 1.4; } body[data-footer-logo-size="x-large"] .site-footer { --logo-scale: 1.9; } body[data-footer-logo-size="xx-large"] .site-footer { --logo-scale: 2.5; } body .site-footer .site-brand .brand-logo { max-width: min(calc(15rem * var(--logo-scale, 1)), 100%); } /* ---------------------------------------------------------------- Social links `partials/_social_link.html` puts the network's glyph to the left of its name, in every footer and in voyage's utility bar. The glyph is `currentColor`, so it takes whatever ink the theme gives the link — hover included — and there is no colour here to go wrong in dark mode. `inline-flex` keeps the link's outer behaviour exactly as it was (inline in a row, blockified in the footers' grid columns). The doubled class outranks a theme's `body.theme- .footer-col a` at (0,2,1) without naming any theme. */ body .social-link.social-link { display: inline-flex; align-items: center; gap: 0.5em; } body .social-link .social-icon { width: 1.05em; height: 1.05em; flex: none; } /* The name is its own element (never bare text beside the icon) so a theme with no room for it — voyage's phone utility strip — can visually hide just this and keep the glyph, without touching the link a screen reader announces. `display: inline` changes nothing here: it is what a `` already is, and this line exists so every theme that inherits this partial without overriding it has a real rule to style, not the browser default by coincidence. */ body .social-link .social-name { display: inline; } /* A saved address at checkout, with its Remove beside it. */ body .saved-address { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; } /* ---------------------------------------------------------------- Page banner `{% page_banner %}` (`apps/core/templatetags/banner_tags.py`), first child of `

` on a page with a header image set — a built page's own, else the shop's default (`StoreSettings.header_image`). No overlaid text (the heading right below it says what the page is), so this is geometry only: full-bleed, a bounded height so a merchant's portrait photograph does not push the page's own content off the first screen, and the picture itself cropped to fill it. `object-fit: cover` needs an explicit height on its box or it has nothing to fill — the same reasoning `.pb-hero-image` and the carousel's slides already follow. */ .page-banner { width: 100%; height: clamp(10rem, 24vw, 18rem); overflow: hidden; } .page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------------------------------------------------------------- Contact form & enquiries `storefront/support/_contact_form.html` is the one contact form (`/contact/`, every Contact block, the "Enquire with us" dialog); `_contact_dialog.html` is it in a `

and the groups of rows ("Coming up", "Earlier") are