/* * ericville26 — Shop landing (section landing / browse, tuned for commerce) * ========================================================================= * Companion to page-shop.php. Everything is scoped to `.ev26.shop-landing` * so it cannot reach any other surface — and that scoping is not optional * here: this file is enqueued site-wide by inc/headers/asset-loader.php, and * it loads BEFORE css/woocommerce.css, css/page-product.css and * css/basetags.css. An unscoped `.cell` or `.price` rule in this file would * land on the cart, the checkout and every product page. Cart and checkout * are #1406 and are React-rendered core blocks; nothing in this file may * touch them. * * There is not one literal colour below. The page the design replaces carried * two hardcoded slabs — a teal intro and a near-black product field — and both * ignored the light/dark toggle entirely. The cyan-teal accent arrives from * [data-section="shop"] in css/v26.css, which header.php already sets for * is_shop(); verified at /shop/?ev26theme=dark. * * What this adds on top of css/v26-components.css, which already supplies * .grid, .cell, .shead, .btn, .more and .inverse: * * .shop-open the opening block (h1 left, deck baseline-aligned right) * .shop-group a group: section rule, bottom rhythm, scroll margin * .cell.feat the lead product, horizontal, with a price chip and prose * .grid.list the list variant used by the shelf and the maker rows * .shop-soon the one-line "in the works" note * * BORDERS, DELIBERATELY SPARSE (house rule: a rule earns its place only by * separating two things that would otherwise be confused). The whole page has * three kinds of rule: the terms row's bottom hairline, one top rule per group * via .shead, and the 2px accent bar that wipes in on a live cell. The two *
s inside the Brockway short description are HIDDEN rather than styled — * inside a card they are scaffolding, and basetags.css would otherwise render * each as a 250px accent-coloured bar. * * PROMOTION NOTE (for #1413 / the component-layer cleanup) * -------------------------------------------------------- * Five rules below are generic primitives that /lab/ needs identically and * currently owns privately under `.lab-landing`: * .shead h2 restated as sans .grid.list base geometry * .cell .meta .cell p line-clamp * figure.empty * They are written here rather than pointed at `.lab-landing`, which would be * a cross-page dependency, and rather than copy-pasted from it. The real fix * is to lift all five into css/v26-components.css under neutral names; that * file is not owned by this task. Do not "fix" a future duplicate by making * one page depend on the other's stylesheet. */ /* ── opening ────────────────────────────────────────── * Authored as CORE blocks in the page content (group > paragraph.micro, * heading, paragraph.deck) so Eric edits the words in Gutenberg. The layout * lives here, keyed off the group's className, so the editor stays plain. */ .ev26.shop-landing .shop-open{ display:grid;grid-template-columns:1.25fr .75fr;column-gap:56px; padding:74px 0 40px;align-items:end;margin:0; } /* A classic (non-block) theme makes core/group emit an extra .wp-block-group__inner-container between the group and its children, so the grid would have exactly one child and the deck would fall under the headline. display:contents lifts the real children into the grid without asking Eric to keep a layout class in the editor, and degrades to the stacked order if it is ever unsupported. */ .ev26.shop-landing .shop-open > .wp-block-group__inner-container{display:contents} /* basetags.css carries `h1:not(.show){display:none}` at (0,1,1) — a real rule, not a reset — so a lower-specificity selector renders the headline invisible. (0,3,1) here clears it honestly, without bolting a .show class onto content Eric edits. Dies with basetags in Stage 11. */ .ev26.shop-landing .shop-open h1{ display:block;grid-column:1;grid-row:2;max-width:13ch;margin:0;color:var(--ink); } .ev26.shop-landing .shop-open .shop-kind{ grid-column:1;grid-row:1;margin:0 0 18px; display:flex;align-items:center;gap:12px;color:var(--accent); } /* The kind marker from the article head: a 28px accent rule, then the label. */ .ev26.shop-landing .shop-open .shop-kind::before{ content:"";width:28px;height:2px;background:var(--accent);flex:0 0 28px; } .ev26.shop-landing .shop-open .deck{ grid-column:2;grid-row:2;max-width:36ch;margin:0 0 10px; } /* ── terms, where a filter row would go ─────────────── * /lab/ puts jump chips in this slot because it is a 6,500px page with 59 * entries. This page has four products, and a filter for four items is * scaffolding. The three things a small shop has to answer before anyone will * buy go here instead. Each is read out of the live store configuration * (downloadable product, one free_shipping zone, guest checkout on) — see the * spec; if the store settings change, this copy has to change with it. * * The bottom hairline is the one rule that earns its place at the top of the * page: it separates the claim from the goods. */ /* ── groups ─────────────────────────────────────────── * basetags.css puts var(--space-xl) margins and var(--space-m) padding on * every
; the rhythm here is owned by the group, so that is reset * rather than fought. scroll-margin-top keeps a jumped-to group clear of the * sticky glass header. */ .ev26.shop-landing .shop-group{margin:0 0 56px;padding:0;scroll-margin-top:96px} .ev26.shop-landing .shop-group:last-of-type{margin-bottom:26px} .ev26.shop-landing .shop-group .grid{margin:0} /* The terms row already draws a hairline directly above the first group, so .shead's own top rule would be a second line 34px below the first. */ .ev26.shop-landing .shop-group:first-of-type .shead{border-top:0;padding-top:34px} /* The heading outline here is h1 > h2 (group) > h4 (item). This file used to restate the group header's type against h2 because the component was written against h3; the component now takes both tags from --shead-*, so the promote rule is gone (#1450). */ /* The in .shead is a fact about the group, so it must not wrap into the flexible hairline and must not shrink the heading. */ .ev26.shop-landing .shead b{flex:0 0 auto;text-align:right} /* ── the lead product ───────────────────────────────── * One full-width horizontal card. The free press plans are the reason anyone * arrives at this page — 63 downloads against a catalog where nothing else has * ever sold — so they get the only large composition on the page, and the rest * of the shop steps down in density beneath it. */ .ev26.shop-landing .grid.lead{grid-template-columns:1fr;margin:0 0 6px} /* align-items:center, not stretch. The press photo is square and the description is six short lines, so a stretched row left ~180px of dead space under the copy with the action stranded at the bottom of it. Centring the body against the picture closes the gap without cropping the photograph. */ .ev26.shop-landing .cell.feat{flex-direction:row;gap:34px;align-items:center} .ev26.shop-landing .cell.feat figure{margin:0;flex:0 0 44%;aspect-ratio:auto;min-height:290px} .ev26.shop-landing .cell.feat .body{display:flex;flex-direction:column;flex:1;padding:4px 0;min-width:0} .ev26.shop-landing .cell.feat h4{ font-size:var(--t-head);font-weight:600;line-height:1.06;letter-spacing:var(--tr-head);margin:14px 0 12px; } /* Stretched link. The lead card is a
, not an , because its short description contains real links and nested anchors make the HTML parser close the outer one — see the long note in page-shop.php. The title anchor paints a transparent layer over the whole cell so the card is still one click, and the prose links are lifted above it. .cell is already position:relative in the component layer, which is what inset:0 resolves against. */ .ev26.shop-landing .cell.feat .stretch::after{content:"";position:absolute;inset:0;z-index:0} /* Only the links are lifted, not the whole .prose: the body copy should still pass a click through to the card. */ .ev26.shop-landing .cell.feat .prose a{position:relative;z-index:2} .ev26.shop-landing .cell.feat .stretch:focus-visible{outline:none} .ev26.shop-landing .cell.feat .stretch:focus-visible::after{outline:2px solid var(--accent);outline-offset:3px} /* The price is the single most important word on a shop card, and on the page this replaces it rendered as an unreadable grey bar. A filled accent-soft pill states it once, in the section accent, above the title — where a reader's eye lands before the picture resolves. */ .ev26.shop-landing .price-chip{ align-self:flex-start; font-family:var(--sans);font-size:var(--t-label);font-weight:700;letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--accent);background:var(--accent-soft); border-radius:999px;padding:6px 13px; } /* WooCommerce wraps a price in and, for a range or a sale, in /. Neutralise the theme's legacy Woo colour so the chip stays one colour, and keep from inheriting basetags' underline. */ .ev26.shop-landing .price-chip .amount, .ev26.shop-landing .price-chip ins{color:inherit;text-decoration:none;background:none} .ev26.shop-landing .price-chip del{opacity:.55;margin-right:6px} /* The product short description, rendered as real rich text. * Woo's short description is author-editable HTML; the Brockway one carries a * link, a contents list and two
s. */ .ev26.shop-landing .cell.feat .prose{ font-size:var(--t-body);line-height:1.62;color:var(--muted);max-width:56ch; } .ev26.shop-landing .cell.feat .prose p{margin:0 0 12px;font-size:var(--t-body);line-height:1.62;color:var(--muted)} .ev26.shop-landing .cell.feat .prose p:last-child{margin-bottom:0} /* basetags.css renders every
as a 250px, 2px, accent-coloured bar with 50px margins. Two of those inside a card are scaffolding, not information — the space they were separating is set explicitly instead. */ .ev26.shop-landing .cell.feat .prose hr{display:none} .ev26.shop-landing .cell.feat .prose hr + *{margin-top:16px} .ev26.shop-landing .cell.feat .prose ul{ list-style:none;margin:10px 0 12px;padding:0;border:0; display:flex;flex-wrap:wrap;gap:6px 8px; } .ev26.shop-landing .cell.feat .prose li{ margin:0;font-size:var(--t-meta);font-weight:600;color:var(--muted); background:var(--sunken);border-radius:999px;padding:4px 11px;line-height:1.35; } /* Inline links inside the description are real links and should look it. The component layer's `.ev26 a{text-decoration:none}` strips basetags' underline from every link on the page, which is right for cards and wrong here. */ .ev26.shop-landing .cell.feat .prose a{ color:var(--accent); box-shadow:inset 0 -1.5px 0 color-mix(in oklab,var(--accent) 35%,transparent); } /* basetags.css sets `:where(p) strong{background-color:#ffe70099}` — a hardcoded yellow highlighter that would land on any bolded phrase Eric adds to a short description. */ .ev26.shop-landing .cell.feat .prose strong{background:none;color:var(--ink);font-weight:600} /* The action sits directly under the copy it belongs to, left-aligned on the text column. Pinned to the card's bottom-right it was a footnote, which is the wrong weight for the only primary call to action on the page. */ .ev26.shop-landing .cell.feat .meta{ margin-top:22px;padding-top:0;display:flex;justify-content:flex-start; align-items:center;gap:12px; } /* PRODUCT PHOTOGRAPHY IS NOT DECORATION. * * The component layer desaturates every .cell image and colours it up on * hover, which is right for a portfolio index — it unifies forty-four * unrelated thumbnails into one field. It is wrong for a shop: a customer is * deciding whether they want the thing in the picture, and a hover state is * not available on a phone at all. Products render in colour. The maker * logos below keep the treatment, because four other people's brand images * genuinely do need unifying and they are references, not goods. */ .ev26.shop-landing .cell.feat figure img, .ev26.shop-landing .grid.list.wares .cell figure img{filter:none} .ev26.shop-landing .cell.feat:hover figure img, .ev26.shop-landing .grid.list.wares .cell:hover figure img{filter:none} /* ── "in the works" ─────────────────────────────────── * Two published products have no price, no image and no description. As cards * they were two grey plates with empty price chips — two thirds of the old * page's product row. As a link they would be a dead end. One line. */ .ev26.shop-landing .shop-soon{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; margin:20px 0 0;padding:0 22px;font-size:var(--t-meta);color:var(--faint); } .ev26.shop-landing .shop-soon .micro{color:var(--accent)} /* ── list variant: the shelf and the maker rows ─────── * PROMOTE (base geometry). A single purchasable product besides the lead reads * as two missing cards in a three-up grid, and a place is one line of fact * rather than a picture — so both are rows. The page steps lead → row → list, * three densities, which is what lets the eye find its place without a rule * between every item. */ .ev26.shop-landing .grid.list{grid-template-columns:1fr;gap:4px} .ev26.shop-landing .grid.list.two{grid-template-columns:1fr 1fr} .ev26.shop-landing .grid.list .cell{flex-direction:row;align-items:center;gap:18px;padding:15px 20px} .ev26.shop-landing .grid.list .cell figure{margin:0;flex:0 0 64px;aspect-ratio:1/1;border-radius:var(--r-s)} .ev26.shop-landing .grid.list .cell .body{flex:1;min-width:0} .ev26.shop-landing .grid.list .cell h4{margin:0 0 4px} /* PROMOTE (clamp). Excerpts vary from one line to a paragraph and an unclamped one drags its whole row taller. Titles are never clamped — truncating a title loses the thing the reader came for. */ .ev26.shop-landing .grid.list .cell p{ line-height:1.45;margin:0;color:var(--faint); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* PROMOTE. No thumbnail: a quiet well, never a placeholder illustration. */ .ev26.shop-landing .cell figure.empty{background:var(--sunken)} /* The shelf row is bigger than a maker row: this one is a thing you can buy, so the picture and the price both get room, and the price sits at the end of the row where a scanning eye expects it. */ .ev26.shop-landing .grid.list.wares .cell{gap:22px;padding:18px 20px} .ev26.shop-landing .grid.list.wares .cell figure{flex:0 0 96px} .ev26.shop-landing .grid.list.wares .cell h4{margin:0 0 6px} .ev26.shop-landing .grid.list.wares .cell p{color:var(--muted)} .ev26.shop-landing .grid.list.wares .price{ margin-left:auto;flex:0 0 auto;white-space:nowrap; font-family:var(--serif);font-size:var(--t-lead);font-weight:700;letter-spacing:var(--tr-lead); color:var(--ink);font-variant-numeric:tabular-nums; transition:color var(--fast) var(--ease); } .ev26.shop-landing .grid.list.wares .cell:hover .price{color:var(--accent)} .ev26.shop-landing .grid.list.wares .price .amount, .ev26.shop-landing .grid.list.wares .price ins{color:inherit;text-decoration:none;background:none} .ev26.shop-landing .grid.list.wares .price del{ color:var(--faint);font-weight:500;font-size:var(--t-meta);margin-right:8px; } /* The external-link mark rides the title, so it sits next to the thing it describes rather than at the end of the row. Drawn in CSS with the text variation selector (U+FE0E) appended: as a bare character in the markup the browser picks the EMOJI presentation of U+2197 and every external row grows a blue sticker. It is decoration either way, so it belongs in the stylesheet rather than the DOM. */ .ev26.shop-landing .grid.list .cell.is-external h4::after{ content:"\2197\FE0E";font-family:var(--sans);font-size:var(--t-label);font-weight:600; color:var(--faint);margin-left:7px;vertical-align:2px; font-variant-emoji:text;transition:color var(--fast) var(--ease); } .ev26.shop-landing .grid.list .cell.is-external:hover h4::after{color:var(--accent)} /* The maker-community standfirst. Eric's copy, kept verbatim. */ .ev26.shop-landing .shop-lede{ font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:64ch;margin:0 0 18px;padding:0 22px; } /* ── empty state ────────────────────────────────────── * A group with nothing in it prints one quiet line rather than a bare rule * with a hole under it. Real possibility: the maker list is one Eric curates, * and the catalog is four products deep. */ .ev26.shop-landing .shop-none{ font-size:var(--t-meta);color:var(--faint);margin:0;padding:18px 22px 26px; } /* ── closing ────────────────────────────────────────── * Navigation, not a newsletter. There is no newsletter, and a button that does * nothing is worse than no button. The two destinations are the ones the shop * actually argues for. */ /* Colours restated at real specificity. basetags.css sets `.inverse h2` and `.inverse a` to ericville25's accent-light at (0,1,1), which out-ranks the component layer's :where(.ev26) .inverse rules and leaves the heading and both buttons the wrong colour on the inverted ground. */ /* .inverse paints its buttons in --bg on --ink; the ghost needs its border and label pulled back onto the inverse ground instead of the page ground. */ /* ── focus ──────────────────────────────────────────── * Every cell on this page is a link and none of them had a focus ring. */ .ev26.shop-landing .cell:focus-visible, .ev26.shop-landing .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ── responsive: 1440 / 1024 / 768 / 375 ────────────── * 1440 and 1024 both run the same structure — the content column caps at * 1120px, so a 1024 viewport only loses gutter. */ @media (max-width:1000px){ .ev26.shop-landing .shop-open{grid-template-columns:1fr;padding:58px 0 32px} .ev26.shop-landing .shop-open h1{grid-column:1;grid-row:2;max-width:16ch} .ev26.shop-landing .shop-open .deck{grid-column:1;grid-row:3;max-width:52ch;margin:20px 0 0} } @media (max-width:900px){ /* Three facts across a tablet leave a 20-character measure, so they stack into a single column and read as a short list instead. */ .ev26.shop-landing .grid.list.two{grid-template-columns:1fr} .ev26.shop-landing .cell.feat figure{flex:0 0 40%;min-height:230px} .ev26.shop-landing .cell.feat h4{font-size:var(--t-title)} .ev26.shop-landing .shop-group{margin-bottom:46px} } @media (max-width:600px){ /* On a phone the section head ran heading | hairline | fact across ~330px, which wrapped "Printmaking Tools" onto two lines and squeezed the fact into a four-line column beside it. The hairline is the first thing to go — it is the decorative part — and the fact takes its own line. */ .ev26.shop-landing .shead{flex-wrap:wrap;gap:6px 12px} .ev26.shop-landing .shead i{display:none} .ev26.shop-landing .shead b{flex:1 1 100%;text-align:left} .ev26.shop-landing .shop-open{padding:40px 0 26px} .ev26.shop-landing .shop-open h1{max-width:none} /* Stacked, the lead is a card with a bigger title. The 4/3 crop comes back because a 290px-tall band above a phone-width column is a wall, not a photograph. */ .ev26.shop-landing .cell.feat{flex-direction:column;gap:0;align-items:stretch} .ev26.shop-landing .cell.feat figure{flex:none;aspect-ratio:4/3;min-height:0;margin:0 0 16px} .ev26.shop-landing .cell.feat h4{margin-top:0} .ev26.shop-landing .cell.feat .prose p{font-size:var(--t-meta)} /* On a phone the shelf row's 96px thumbnail took a third of the usable width and squeezed the title into a four-line column, and the price had nowhere to sit. The price moves under the title; the picture shrinks. */ .ev26.shop-landing .grid.list.wares .cell{flex-wrap:wrap;gap:16px} .ev26.shop-landing .grid.list.wares .cell figure{flex:0 0 72px} .ev26.shop-landing .grid.list.wares .cell h4{font-size:var(--t-body)} .ev26.shop-landing .grid.list.wares .price{ margin-left:0;flex:1 1 100%;order:3;font-size:var(--t-body); } .ev26.shop-landing #makers .cell figure{flex:0 0 48px} .ev26.shop-landing .shop-lede, .ev26.shop-landing .shop-soon{padding:0 16px} }