/* * ericville26 — single product (#1406) * ==================================== * Companion to single-product.php. Everything is scoped to * `.ev26.product-page` so it cannot reach the cart, the checkout or any other * surface: this file is enqueued SITE-WIDE by inc/headers/asset-loader.php * (it is second-to-last in the list, just before css/woocommerce.css), so an * unscoped `.prose`, `figure` or `.quantity` rule here would land on every * page in the theme. * * There is not one literal colour below, and not one raw px shadow. Every * value is a token from css/v26.css, which is what lets the whole surface * invert at [data-theme="dark"] with no second ruleset. The teal accent * arrives from [data-section="shop"], which header.php already sets for * is_product(). * * SURFACES FOLLOW plan/design/1421-surface-ground.md * -------------------------------------------------- * The page is ONE CONTINUOUS FIELD. Nothing here paints an opaque ground of * its own — which is the single biggest change from the file this replaces, * whose breadcrumb was a full-bleed near-black slab with a teal rule under it, * i.e. exactly the "surface as an absolute colour" #1421 removed everywhere * else. Consequently: * * - image wells (.prod-plate, .prod-plates figure) are --sunken, the * translucent RECESS, so they darken whatever ground is behind them * instead of pasting a fixed grey on it; * - the quantity field is the same recess, which is why it needs no border * to read as a field. A boundary is not solved by drawing a rule; * - nothing on this page is a raised card, so nothing here uses --raise. * The product IS the page; lifting it off itself would be meaningless. * * WHAT IS DELIBERATELY NOT HERE * ----------------------------- * - No slick-carousel rules. The old gallery pulled slick's CSS and JS off a * CDN and rendered its thumbnail strip on top of the bottom third of the * main image (visible in every #1406 `before` capture). The replacement is * a plate + a plate strip: no JS, nothing to desynchronise. * - No `position:fixed` layer. The old file had one at line 191, flagged as * unreviewed in plan/design/1421-surface-ground.md §9. It was a lightbox * backdrop for a lightbox that was never wired up. * - No `!important`. The old woocommerce.css needed it to beat basetags; * this file loads after basetags and wins on specificity honestly. */ /* ── breadcrumb ─────────────────────────────────────── * Quiet type on the page ground. Built from the product's real product_cat * terms now (the old markup printed "Printmaking Tools / Brockway 250" as * literal strings on EVERY product), so it wraps rather than truncating: a * long product name at 375 gets two lines, not a clipped one. */ .ev26.product-page .prod-crumbs{ display:flex;flex-wrap:wrap;align-items:baseline;gap:8px; padding:34px 0 0; font-family:var(--sans);font-size:var(--t-meta);letter-spacing:var(--tr-crumb);color:var(--faint); } .ev26.product-page .prod-crumbs a{color:var(--muted);text-decoration:none;transition:color var(--fast) var(--ease)} .ev26.product-page .prod-crumbs a:hover{color:var(--accent)} .ev26.product-page .prod-crumbs .sep{color:var(--faint);opacity:.6} .ev26.product-page .prod-crumbs [aria-current]{color:var(--text)} /* ── head ───────────────────────────────────────────── * The h1 sizes itself from v26-base.css (clamp(40px,4.6vw,60px)); the only * thing needed here is the clearance the old template lacked, which is why its * title overprinted the gallery at every viewport. * * `display:block` is not decoration. basetags.css carries * `h1:not(.show){display:none}` at (0,1,1) — a real rule, not a reset — so any * lower-specificity selector leaves the headline invisible. This selector is * (0,2,1) and clears it honestly, without bolting a `.show` class onto the * markup. Same fix v26-shop.css / v26-lab.css / v26-art.css each carry; it dies * with basetags in Stage 11. It cost a render to find, so it is written down. * * No eyebrow: the breadcrumb directly above already names the category, and * printing it twice, 20px apart, is the count-noise this site keeps removing. */ /* The measure goes on the H1, not on the header. `ch` resolves against the element's OWN font-size, so `max-width:22ch` on the
was 22 characters of 16px body sans — about 180px — and broke the title into five one-word lines. On the h1 it is 16 characters of 60px display serif. Same trap v26-shop.css avoids by putting `max-width:13ch` on `.shop-open h1`. */ .ev26.product-page .prod-head{padding:22px 0 42px} .ev26.product-page .prod-head h1{display:block;margin:0;max-width:16ch;color:var(--ink)} /* ── the two columns ────────────────────────────────── * Plate slightly wider than the buy column: the picture is the argument on a * page whose only text is four short paragraphs. `align-items:start` so the * buy column does not stretch to the gallery's height and float its price * into the middle of nowhere. */ .ev26.product-page .prod-main{ display:grid;grid-template-columns:1.06fr .94fr;column-gap:56px;align-items:start; } /* ── gallery ────────────────────────────────────────── * Recessed wells, per #1421. `overflow:hidden` + the radius on the FIGURE * rather than the img so a non-square photograph is cropped by the well * instead of poking out of its corners. */ .ev26.product-page .prod-plate{ margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--sunken); } .ev26.product-page .prod-plate img{width:100%;height:auto;display:block} /* No featured image: an empty well, never a placeholder illustration. Same decision as figure.empty on the shop landing — the block this theme replaced painted the same grey compass twice on a three-tile page. */ .ev26.product-page .prod-plate.empty{aspect-ratio:4/3} .ev26.product-page .prod-plates{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px; } .ev26.product-page .prod-plates figure{ margin:0;border-radius:var(--r-s);overflow:hidden;background:var(--sunken);aspect-ratio:1/1; } .ev26.product-page .prod-plates img{width:100%;height:100%;object-fit:cover;display:block} /* ── the buy column ───────────────────────────────────*/ .ev26.product-page .prod-buy{display:flex;flex-direction:column;gap:30px;max-width:48ch} .ev26.product-page .prose{font-size:var(--t-body);line-height:1.62;color:var(--text)} .ev26.product-page .prose p{margin:0 0 1em} .ev26.product-page .prose p:last-child{margin-bottom:0} .ev26.product-page .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* basetags.css renders a bare
as a 250px accent-coloured bar with a border-radius on it (`max-width:250px` — which is why overriding `width` alone does nothing; the max-width has to go too). * * Inside a product description the two rules DO separate three different * claims — what it is / what is in the file / how it is licensed — so unlike * the shop landing, which hides them inside a card, they are kept. Treatment * is the site's existing prose separator, copied exactly from * `.ev26-article .prose hr` in v26-article.css: a short centred hairline in * --line-strong. Matching the register beats inventing a second one. */ .ev26.product-page .prose hr{ border:0;border-radius:0;height:1px;width:64px;max-width:none; background:var(--line-strong);margin:1.9em auto;opacity:1; } .ev26.product-page .prose ul{margin:0 0 1em;padding-left:1.15em} .ev26.product-page .prose li{margin:.3em 0} .ev26.product-page .prose li::marker{color:var(--faint)} /* Price. Typography, not a chip. * It used to be a dark filled rectangle sitting immediately left of "Add to * cart", so the page offered what looked like two buttons and only one of them * did anything — the single worst read in the `before` capture. */ .ev26.product-page .prod-price{ font-family:var(--serif);font-size:var(--t-title);font-weight:700;letter-spacing:var(--tr-title); color:var(--ink);line-height:1;margin:0 0 16px; } .ev26.product-page .prod-price del{color:var(--faint);font-weight:500;margin-right:.5em} .ev26.product-page .prod-price ins{text-decoration:none;color:var(--accent)} .ev26.product-page .prod-price .woocommerce-Price-currencySymbol{font-weight:600} .ev26.product-page .prod-convert{margin:0} .ev26.product-page .prod-actions form.cart{ display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0; } /* The quantity input is WooCommerce's own markup. When a product is sold-individually Woo emits it as type="hidden", so this styling only ever shows on a product that can genuinely be bought more than once. A recess, not a border: see the surface note at the top of this file. */ .ev26.product-page .prod-actions .quantity{display:inline-flex} .ev26.product-page .prod-actions .quantity input[type="number"], .ev26.product-page .prod-actions .quantity input.qty{ width:76px;padding:12px 10px;border:0;border-radius:999px; background:var(--sunken);color:var(--ink); font-family:var(--sans);font-size:var(--t-meta);font-weight:600;text-align:center; -moz-appearance:textfield;appearance:textfield; } .ev26.product-page .prod-actions .quantity input:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; } /* Add to cart. The same geometry and tokens as :where(.ev26) .btn.accent in v26-components.css — restated rather than borrowed, because the element is emitted by a WooCommerce core template and cannot be given a .btn class without either editing core or filtering markup we do not own. */ .ev26.product-page .prod-actions .single_add_to_cart_button{ display:inline-flex;align-items:center;gap:9px; font-family:var(--sans);font-size:var(--t-meta);font-weight:700;letter-spacing:var(--tr-ui); padding:12px 22px;border-radius:999px;cursor:pointer; background:var(--accent);border:1px solid var(--accent);color:var(--on-accent); transition:transform var(--fast) var(--ease),background var(--fast) var(--ease); } .ev26.product-page .prod-actions .single_add_to_cart_button:hover{transform:translateY(-1px)} .ev26.product-page .prod-actions .single_add_to_cart_button:focus-visible{ outline:2px solid var(--ink);outline-offset:3px; } .ev26.product-page .prod-actions .single_add_to_cart_button:disabled{ background:var(--sunken);border-color:transparent;color:var(--faint);cursor:not-allowed;transform:none; } /* Not priced yet: the honest line rather than a disabled button, which invites a click that can never work. Same reasoning as .shop-soon on the landing. */ .ev26.product-page .prod-unavailable{ font-family:var(--sans);font-size:var(--t-meta);color:var(--muted);margin:0; } /* Woo's "View cart →" link, printed next to the button after an AJAX add. */ .ev26.product-page .added_to_cart{ font-family:var(--sans);font-size:var(--t-meta);font-weight:600;color:var(--accent); text-decoration:underline;text-underline-offset:3px; } /* ── the way out ────────────────────────────────────── * The old template dead-ended: below the fold there was nothing but empty * page. One quiet step back to the shop — a link, not a slab. #1455 removed * the closing CTA slab on /art/ for the same reason. */ .ev26.product-page .prod-back{ margin:72px 0 96px;padding-top:26px;border-top:1px solid var(--line); font-family:var(--sans);font-size:var(--t-meta); } .ev26.product-page .prod-back a{ color:var(--muted);text-decoration:none;transition:color var(--fast) var(--ease); } .ev26.product-page .prod-back a::after{content:" →";color:var(--accent)} .ev26.product-page .prod-back a:hover{color:var(--ink)} /* ── responsive ───────────────────────────────────────*/ @media (max-width:1100px){ .ev26.product-page .prod-main{column-gap:40px} /* #1484: `max-width:26ch` used to sit HERE, on the
, which is the exact trap the long note at the top of this file says was already fixed once -- `ch` resolves against the element's OWN font-size, so 26ch on the header is 26 characters of 16px body SANS (~250px), not 26 characters of the 47px display serif inside it. The h1 was being squeezed to 250px in a 936px column and breaking one word per line. It was wrong before this ticket (3 one-word lines in Instrument Sans) and the font swap made it unmissable (5). Caught by LOOKING at the 1024 render, not by the pixel diff, which only said "19.7%". The cap belongs on the h1, and the h1 already has one at 16ch -- a measure that scales with its own clamp, so it narrows on its own as the viewport drops and needs no per-breakpoint restatement. Deleted, not moved. */ } @media (max-width:860px){ /* One column. The gallery leads, because at this width the buy column would otherwise sit above the fold with nothing to buy in view. */ .ev26.product-page .prod-main{grid-template-columns:1fr;row-gap:40px} .ev26.product-page .prod-buy{max-width:none} .ev26.product-page .prod-head{padding:22px 0 32px;max-width:none} .ev26.product-page .prod-plates{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:560px){ .ev26.product-page .prod-crumbs{padding-top:24px;gap:6px} .ev26.product-page .prod-plates{grid-template-columns:repeat(3,minmax(0,1fr))} .ev26.product-page .prod-actions form.cart{gap:10px} .ev26.product-page .prod-back{margin:52px 0 72px} }