/* * The shop product page, 2026 (template-parts/product-2026.php). * * One short dark head, an opening that fits a screen, then two column lines * down the page: photos and big type on the left, the reading and the facts * on the right. 112px between sections. * * The buy panel is WooCommerce's own form with the swatch plugin's buttons, * so most of what's under "The buy panel" restyles markup this theme doesn't * write. Versioned by filemtime; every rule is scoped under .rg-p26 and wins * on specificity, never source order. */ .rg-p26 { --ink: #1c1c1c; --cream: #f8f5f0; --cream-2: #ebe6dd; --rule: #d9d3c8; --muted: #6e6a64; --muted-d: #b3aea4; --tan: #a88a6d; --display: 'Graphik Condensed Web', 'Arial Narrow', sans-serif; --body: 'MatterRegular', sans-serif; --semi: 'MatterSemiBold', sans-serif; --mono: 'MatterMonoRegular', monospace; --mono-med: 'MatterMonoMedium', monospace; --gutter: 48px; --gap: 64px; --sec: 112px; background: var(--cream); color: var(--ink); font: 400 16px/1.5 var(--body); } .rg-p26 *, .rg-p26 *::before, .rg-p26 *::after { box-sizing: border-box; } .rg-p26 a { color: inherit; font-family: inherit; line-height: inherit; text-decoration: none; } .rg-p26 button { margin: 0; font-family: inherit; color: inherit; } .rg-p26 :focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; } .rg-p26 .rg-ms { font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; flex: none; } /* Nothing on this page may push it sideways. `clip`, not `hidden`: the buy panel is sticky, and `hidden` would make this its scroller. */ .rg-p26 { overflow-x: clip; } .rg-p26 .rg-p26-wrap { padding-inline: var(--gutter); } .rg-p26 .rg-p26-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start; } .rg-p26 .rg-p26-sec { padding-top: var(--sec); } .rg-p26 > section:last-child:not(.rg-p26-brand) { padding-bottom: var(--sec); } /* ---- The head ---- */ .rg-p26 .rg-p26-head { background: var(--ink); color: var(--cream); } .rg-p26 .rg-p26-head .rg-p26-wrap { padding-block: 30px 38px; } body .rg-p26 h1.rg-p26-ttl { margin: 0; max-width: 1200px; font-size: 84px !important; line-height: .9 !important; font-weight: 700; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; color: var(--cream); } /* A long name steps down a size, so the buy panel stays in the first screen. */ body .rg-p26 h1.rg-p26-ttl.is-long { font-size: 64px !important; } .rg-p26 p.rg-p26-sub { margin: 18px 0 0; max-width: 900px; font: 500 22px/1.3 var(--mono-med); letter-spacing: 0; color: var(--cream); } /* Section heads: the display face at card-head scale. */ body .rg-p26 h2.rg-p26-h2 { margin: 0; font-size: 76px !important; line-height: .9 !important; font-weight: 700; text-transform: uppercase; text-wrap: balance; color: var(--ink); } body .rg-p26 h3.rg-p26-h3 { margin: 22px 0 10px; font-size: 32px !important; line-height: 1 !important; font-weight: 700; text-transform: uppercase; color: var(--ink); } .rg-p26 .rg-p26-over { margin: 0; font: 400 15px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; } /* Pills */ .rg-p26 a.rg-p26-pill { height: 48px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 100px; display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1 var(--mono-med); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background .15s, color .15s; } .rg-p26 a.rg-p26-pill:hover { background: var(--ink); color: var(--cream); } .rg-p26 a.rg-p26-pill.is-cream { height: 56px; padding: 0 32px; border-color: var(--cream); background: var(--cream); color: var(--ink); font-size: 18px; } .rg-p26 a.rg-p26-pill.is-cream:hover { background: transparent; color: var(--cream); } /* ---- The opening: photos ---- All of them are on the page: the first large, the rest two across beneath it. They scroll; the sheet stays beside them. */ .rg-p26 .rg-p26-open { padding-top: 40px; } .rg-p26 .rg-p26-stage { min-width: 0; } .rg-p26 .rg-p26-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rg-p26 button.rg-p26-photo { display: block; position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--cream-2); box-shadow: none; cursor: zoom-in; } .rg-p26 button.rg-p26-photo:first-child, .rg-p26 button.rg-p26-photo:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 4 / 3; } .rg-p26 .rg-p26-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .rg-p26 .rg-p26-photo.is-studio img { object-fit: contain; mix-blend-mode: multiply; } /* ---- The opening: the sheet ---- */ .rg-p26 .rg-p26-sheet { min-width: 0; position: sticky; top: min(calc(var(--rg-header-h, 96px) + 24px), calc(100vh - var(--rg-p26-sheet-h, 0px) - 24px)); } .rg-p26 p.rg-p26-price { margin: 0; font: 500 26px/1 var(--mono-med); letter-spacing: .02em; color: var(--ink); } .rg-p26 .rg-p26-price * { font: inherit; letter-spacing: inherit; color: inherit; } .rg-p26 .rg-p26-price del { color: var(--muted); margin-right: 10px; } .rg-p26 .rg-p26-price ins { text-decoration: none; } .rg-p26 .rg-p26-short { margin: 18px 0 26px; font: 400 18px/1.5 var(--body); } /* Once the script has moved the price down beside the button. */ .rg-p26.is-priced-low .rg-p26-short { margin-top: 0; } .rg-p26 .rg-p26-buy .rg-p26-pay { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0 20px; border-top: 1px solid var(--ink); } .rg-p26 .rg-p26-buy .rg-p26-pay p.rg-p26-price { margin: 0; } .rg-p26 .rg-p26-buy .rg-p26-pay p.rg-p26-later { margin: 0; text-align: right; } .rg-p26 .rg-p26-short p { margin: 0 0 12px; font: inherit; } .rg-p26 .rg-p26-short p:last-child { margin-bottom: 0; } /* The version on the shelf, for a product with nothing to choose: the options' rows, with the one value already filled in. Not buttons. */ .rg-p26 .rg-p26-version { margin: 0 0 4px; } .rg-p26 .rg-p26-version-row { padding: 22px 0 26px; border-top: 1px solid var(--ink); } .rg-p26 p.rg-p26-version-lb { margin: 0 0 20px; font: 400 15px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .rg-p26 .rg-p26-version-val { display: inline-flex; align-items: center; min-width: 52px; height: 52px; padding: 0 20px; border-radius: 100px; background: var(--ink); color: var(--cream); font: 500 14px/1 var(--mono-med); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } /* At a glance: on a product with no options, four lines of its spec sit where the options would, so the sheet isn't just a price and a button. */ .rg-p26 dl.rg-p26-glance { margin: 0 0 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--ink); } .rg-p26 dl.rg-p26-glance > div { padding: 12px 0 14px; border-bottom: 1px solid var(--rule); } .rg-p26 dl.rg-p26-glance dt { margin: 0; font: 400 14px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rg-p26 dl.rg-p26-glance dd { margin: 0; font: 400 16px/1.4 var(--body); } /* The buy panel: WooCommerce's form, in the sheet's voice. */ .rg-p26 .rg-p26-buy form.cart { margin: 0; } .rg-p26 .rg-p26-buy table.variations { width: 100%; margin: 0; border: 0; border-collapse: collapse; font: 400 15px/1.4 var(--mono); letter-spacing: .14em; } .rg-p26 .rg-p26-buy table.variations tbody { display: block; } .rg-p26 .rg-p26-buy table.variations tr { position: relative; display: block; padding: 22px 0 26px; border: 0; border-top: 1px solid var(--ink); } .rg-p26 .rg-p26-buy table.variations tr th { margin: 0 0 20px; padding: 0; border: 0; background: none; } .rg-p26 .rg-p26-buy table.variations tr td { padding: 0; border: 0; background: none; } .rg-p26 .rg-p26-buy table.variations label { font: inherit; letter-spacing: inherit; } /* "SIZE: 160": the choice is named beside its label (js/product-2026.js). The theme's own colon sits after the whole cell, so it moves to the label. */ .rg-p26 .rg-p26-buy table.variations tr th::after { content: none; } .rg-p26 .rg-p26-buy table.variations tr th label::after { content: ':'; } .rg-p26 .rg-p26-buy .rg-p26-chosen { margin-left: .6em; } .rg-p26 .rg-p26-buy ul.variable-items-wrapper { margin: 0; padding: 0; gap: 12px; align-items: center; } .rg-p26 .rg-p26-buy ul.variable-items-wrapper[data-attribute_name="attribute_pa_color"] { gap: 12px; } /* Sizes, three states and nothing else (Pete: the dashed, struck-through version was "so busy"): in stock an ink-ruled pill chosen the pill filled sold out the same round in a pale rule, the number in grey, so the row keeps its structure (bare numbers "appear too unstructured"). Still a choice: it offers Notify me, and when chosen its rule darkens. Every size sits in the same 52px round (a half size such as 43.5 touched the edge of a 48px one), ruled or not, so the row is an even grid (words such as a lens name still stretch to a pill). The swatch plugin and the theme style these from `body.woo-variation-swatches`, so these start there too. */ body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item:not(.radio-variable-item) { width: auto; min-width: 52px; height: 52px; margin: 0; padding: 0; border-radius: 100px; background: transparent; border: 1.5px solid var(--ink); box-shadow: none; outline: 0; } body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item .variable-item-span { font: 500 14px/1 var(--mono-med); letter-spacing: 0; padding: 0 4px; color: var(--ink); text-decoration: none; opacity: 1; } /* No hover bubble on these: the label is already on the button, and at the right-hand end of a row the bubble ("43.5 (Out of Stock)", 220px wide) ran past the page edge and gave the whole site a sideways scroll. */ body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item::before, body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item::after { content: none !important; display: none !important; } /* Asked for a colour (js/product-2026.js): the house note, arrow-led, in the accent. */ .rg-p26 .rg-p26-buy p.rg-p26-ask { display: none; margin: 12px 0 0; font: 500 14px/1.3 var(--mono-med); letter-spacing: .1em; text-transform: uppercase; color: #7d6247; } .rg-p26 .rg-p26-buy tr.is-asked p.rg-p26-ask { display: block; } /* Words (a lens, a freehub) need room at the ends of the pill; numbers don't. */ body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper:not([data-attribute_name="attribute_pa_size"]) .variable-item .variable-item-span { padding: 0 16px; white-space: nowrap; } body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item .variable-item-contents { opacity: 1; } body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item .variable-item-contents::before, body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item .variable-item-contents::after { display: none; } /* A real 1.5px border, not a 1px inset shadow: the hairline looked odd against the medium-weight numbers and drew unevenly round the curve. */ body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item.selected:not(.radio-variable-item):not(.no-stock) { background: var(--ink); } body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item.selected:not(.no-stock) .variable-item-span { color: var(--cream); } /* Sold out is the same ink, fainter: a warm grey rule with brown-grey numbers looked "dirty" beside the ink ones (Pete). */ body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item.no-stock:not(.radio-variable-item) { border-color: rgba(28, 28, 28, .2); box-shadow: none; } body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item.no-stock .variable-item-span { font-family: var(--mono); color: rgba(28, 28, 28, .55); } body.woo-variation-swatches .rg-p26 .rg-p26-buy ul.button-variable-items-wrapper .variable-item.no-stock.selected:not(.radio-variable-item) { border-color: rgba(28, 28, 28, .55); box-shadow: none; } .rg-p26 .rg-p26-buy a.reset_variations { display: none !important; } .rg-p26 .rg-p26-buy .single_variation_wrap { padding-top: 0; } .rg-p26 .rg-p26-buy .woocommerce-variation-price, .rg-p26 .rg-p26-buy .woocommerce-variation-description, .rg-p26 .rg-p26-buy p.stock { display: none; } .rg-p26 .rg-p26-buy div.quantity { display: none !important; } /* Add to Bag is ink, like the chosen option's pill above it (Pete, 2026-10-02: the gold fill was "no good"; "the variant pill is black, so is the button"). The stock status is said in words on the line under it. */ .rg-p26 .rg-p26-buy .single_add_to_cart_button { width: 100%; height: 56px; margin: 0; padding: 0 28px; border: 1.5px solid var(--ink); border-radius: 100px; background: var(--ink); color: var(--cream) !important; display: flex; align-items: center; justify-content: center; gap: 14px; font: 500 18px/1 var(--mono-med); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; } .rg-p26 .rg-p26-buy .single_add_to_cart_button.disabled { opacity: 1; cursor: pointer; } .rg-p26 .rg-p26-buy .rg-p26-plus { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .rg-p26 .rg-p26-buy .single_add_to_cart_button:hover .rg-p26-plus { transform: translateX(3px); } .rg-p26 .rg-p26-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rg-p26 .rg-p26-buy p.rg-p26-later { margin: 12px 0 0; text-align: center; font: 400 14px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } /* The size guide: opens in place, under the sizes it explains. */ .rg-p26 details.rg-p26-guide { margin: 0 0 20px; } .rg-p26 .rg-p26-buy tr details.rg-p26-guide { margin: 0; } .rg-p26 details.rg-p26-guide > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 1px; border-bottom: 1px solid var(--ink); font: 500 15px/1.3 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .rg-p26 details.rg-p26-guide > summary::-webkit-details-marker { display: none; } .rg-p26 .rg-p26-buy tr details.rg-p26-guide > summary { position: absolute; top: 21px; right: 0; } .rg-p26 .rg-p26-guide-table { margin-top: 18px; border-top: 1px solid var(--ink); } .rg-p26 .rg-p26-guide-row { display: grid; grid-template-columns: repeat(var(--rg-cols, 4), minmax(0, 1fr)); column-gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--rule); font: 400 16px/1.4 var(--body); letter-spacing: 0; text-transform: none; } .rg-p26 .rg-p26-guide-row.is-head { padding-block: 10px; border-bottom-color: var(--ink); font: 400 14px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .rg-p26 .rg-p26-guide-row.is-on { background: var(--cream-2); font-family: var(--semi); } /* Quiet rows: returns, shipping, and the questions. */ .rg-p26 .rg-p26-rows { margin-top: 28px; border-top: 1px solid var(--ink); } .rg-p26 details.rg-p26-row { border-bottom: 1px solid var(--ink); } .rg-p26 details.rg-p26-row > summary { list-style: none; min-height: 56px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 400 15px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .rg-p26 details.rg-p26-row > summary::-webkit-details-marker { display: none; } .rg-p26 details.rg-p26-row > summary::after { content: '+'; flex: none; font: 400 20px/1 var(--mono); letter-spacing: 0; } .rg-p26 details.rg-p26-row[open] > summary::after { content: '\2212'; } .rg-p26 .rg-p26-row-bd { padding: 0 0 20px; font: 400 16px/1.5 var(--body); } .rg-p26 .rg-p26-row-bd p { margin: 0 0 12px; font: inherit; } .rg-p26 .rg-p26-row-bd a { border-bottom: 1px solid var(--ink); } .rg-p26 .rg-p26-row-bd u { text-decoration: none; } .rg-p26 .rg-p26-questions { margin-top: 36px; } .rg-p26 .rg-p26-questions details.rg-p26-row > summary { min-height: 64px; padding: 14px 0; font: 400 20px/1.25 var(--semi); letter-spacing: 0; text-transform: none; } .rg-p26 .rg-p26-more > div:last-child > .rg-p26-questions:first-child { margin-top: 0; } /* ---- More about ---- */ .rg-p26 .rg-p26-prose { font: 400 18px/1.6 var(--body); } .rg-p26 .rg-p26-prose p { margin: 0 0 20px; font: inherit; } .rg-p26 .rg-p26-prose p:last-child { margin-bottom: 0; } .rg-p26 .rg-p26-prose a { border-bottom: 1px solid var(--ink); } /* ---- Specifications: their own strip, never beside the prose ---- */ .rg-p26 dl.rg-p26-spec { margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--ink); } .rg-p26 dl.rg-p26-spec > div { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); } .rg-p26 dl.rg-p26-spec dt { margin: 0; font: 400 14px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rg-p26 dl.rg-p26-spec dd { margin: 0; font: 400 18px/1.4 var(--body); } /* ---- A quote ---- */ .rg-p26 .rg-p26-quote blockquote { margin: 0; max-width: 1100px; padding: 0; border: 0; } .rg-p26 .rg-p26-quote blockquote p { margin: 0; font: 700 56px/.95 var(--display); text-transform: uppercase; text-wrap: balance; } .rg-p26 .rg-p26-quote blockquote footer { margin-top: 18px; font: 400 15px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---- The Finer Details: three across ---- */ .rg-p26 .rg-p26-three { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .rg-p26 .rg-p26-three[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-p26 .rg-p26-three[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 50%; } .rg-p26 .rg-p26-block-img { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--cream-2); } .rg-p26 .rg-p26-three[data-n="2"] .rg-p26-block-img, .rg-p26 .rg-p26-block-img.is-studio { aspect-ratio: 3 / 2; } .rg-p26 .rg-p26-block-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .rg-p26 .rg-p26-block-img.is-studio img { mix-blend-mode: multiply; } .rg-p26 .rg-p26-block p { margin: 0; max-width: 400px; font: 400 16px/1.5 var(--body); } /* ---- A film ---- */ .rg-p26 .rg-p26-video iframe, .rg-p26 .rg-p26-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; } /* ---- Also Explore: the shop's own card, four across ---- */ .rg-p26 .rg-p26-cards { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .rg-p26 a.rg-p26-card { display: block; min-width: 0; color: var(--ink); } .rg-p26 .rg-p26-card > span { display: block; } .rg-p26 .rg-p26-card-img { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--cream-2); } .rg-p26 .rg-p26-card-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); } .rg-p26 .rg-p26-card-img.is-studio img { object-fit: contain; mix-blend-mode: multiply; } .rg-p26 a.rg-p26-card:hover .rg-p26-card-img img { transform: scale(1.03); } .rg-p26 .rg-p26-card-brand { margin: 14px 0 4px; font: 400 14px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rg-p26 .rg-p26-card-img + .rg-p26-card-nm { margin-top: 14px; } .rg-p26 .rg-p26-card-nm { font: 500 15px/1.4 var(--mono-med); letter-spacing: 1.8px; text-transform: uppercase; text-wrap: balance; } .rg-p26 .rg-p26-card-pr { margin-top: 6px; font: 500 15px/1.4 var(--mono-med); letter-spacing: .04em; } .rg-p26 .rg-p26-card-pr * { font: inherit; letter-spacing: inherit; color: inherit; } /* ---- Stories from the Review: one lead, then the rest ---- */ .rg-p26 .rg-p26-sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .rg-p26 .rg-p26-story-grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; height: 600px; } .rg-p26 .rg-p26-story-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); height: auto; aspect-ratio: 21 / 9; } .rg-p26 .rg-p26-story-rest { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 20px; min-height: 0; } .rg-p26 a.rg-p26-story { position: relative; display: block; min-height: 0; border-radius: 4px; overflow: hidden; background: var(--ink); color: var(--cream); } .rg-p26 .rg-p26-story img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); } .rg-p26 a.rg-p26-story:hover img { transform: scale(1.03); } .rg-p26 a.rg-p26-story::after { content: ''; position: absolute; inset: 35% 0 0 0; background: linear-gradient(to bottom, rgba(28, 28, 28, 0), rgba(28, 28, 28, .88)); pointer-events: none; } .rg-p26 .rg-p26-story-tx { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 10px; } .rg-p26 .rg-p26-story-ttl { font: 400 24px/1.15 var(--semi); text-wrap: balance; } .rg-p26 .rg-p26-story-date { font: 500 15px/1 var(--mono-med); letter-spacing: .08em; } .rg-p26 .rg-p26-story.is-lead .rg-p26-story-tx { left: 32px; right: 32px; bottom: 32px; gap: 16px; max-width: 640px; } .rg-p26 .rg-p26-story.is-lead .rg-p26-story-ttl { font-size: 44px; line-height: 1.08; } /* ---- About the brand: the dark close, running into the footer ---- */ .rg-p26 .rg-p26-brand { margin-top: var(--sec); padding-block: 96px; background: var(--ink); color: var(--cream); } .rg-p26 .rg-p26-brand .rg-p26-cols { align-items: center; } .rg-p26 .rg-p26-brand .rg-p26-over { color: var(--muted-d); } .rg-p26 p.rg-p26-brand-nm { margin: 20px 0 28px; font: 700 132px/.88 var(--display); letter-spacing: 0; text-transform: uppercase; color: var(--tan); } .rg-p26 p.rg-p26-brand-tx { margin: 0 0 32px; max-width: 560px; font: 400 20px/1.5 var(--body); color: var(--cream); } .rg-p26 .rg-p26-brand-img { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; } .rg-p26 .rg-p26-brand-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* ---- Narrower laptops and tablets ---- */ @media (max-width: 1180px) { .rg-p26 { --gutter: 32px; --gap: 40px; --sec: 88px; } body .rg-p26 h1.rg-p26-ttl { font-size: 64px !important; } body .rg-p26 h1.rg-p26-ttl.is-long { font-size: 52px !important; } body .rg-p26 h2.rg-p26-h2 { font-size: 56px !important; } .rg-p26 p.rg-p26-brand-nm { font-size: 96px; } .rg-p26 dl.rg-p26-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-p26 .rg-p26-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rg-p26 .rg-p26-cards > a:nth-child(n+4) { display: none; } .rg-p26 .rg-p26-story.is-lead .rg-p26-story-ttl { font-size: 34px; } .rg-p26 .rg-p26-story-grid { height: 520px; } } /* ---- Phones: one column; photos, details and stories swipe ---- */ @media (max-width: 900px) { .rg-p26 { --gutter: 24px; --sec: 64px; } .rg-p26 .rg-p26-cols { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .rg-p26 .rg-p26-head .rg-p26-wrap { padding-block: 20px 28px; } body .rg-p26 h1.rg-p26-ttl, body .rg-p26 h1.rg-p26-ttl.is-long { font-size: 46px !important; } .rg-p26 p.rg-p26-sub { margin-top: 14px; font-size: 17px; line-height: 1.35; } body .rg-p26 h2.rg-p26-h2 { font-size: 44px !important; line-height: .92 !important; } body .rg-p26 h3.rg-p26-h3 { margin-top: 18px; font-size: 30px !important; } .rg-p26 .rg-p26-open { padding-top: 24px; } .rg-p26 .rg-p26-sheet { position: static; } .rg-p26 .rg-p26-photos { display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; } .rg-p26 .rg-p26-photos::-webkit-scrollbar { display: none; } .rg-p26 button.rg-p26-photo, .rg-p26 button.rg-p26-photo:first-child, .rg-p26 button.rg-p26-photo:last-child:nth-child(even) { flex: none; width: 88%; aspect-ratio: 1; scroll-snap-align: start; } .rg-p26 button.rg-p26-photo:only-child { width: 100%; } .rg-p26 p.rg-p26-price { font-size: 24px; } .rg-p26 .rg-p26-short { margin: 14px 0 22px; font-size: 16px; } .rg-p26 .rg-p26-buy .single_add_to_cart_button { height: 52px; font-size: 16px; } .rg-p26 details.rg-p26-row > summary { font-size: 14px; } .rg-p26 .rg-p26-questions details.rg-p26-row > summary { font-size: 19px; } .rg-p26 .rg-p26-prose { font-size: 17px; line-height: 1.55; } .rg-p26 .rg-p26-questions { margin-top: 28px; } .rg-p26 dl.rg-p26-spec { margin-top: 20px; grid-template-columns: minmax(0, 1fr); } .rg-p26 dl.rg-p26-spec > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 14px; padding: 10px 0; } .rg-p26 dl.rg-p26-spec dd { font-size: 16px; line-height: 1.45; } .rg-p26 .rg-p26-quote blockquote p { font-size: 38px; } .rg-p26 .rg-p26-three, .rg-p26 .rg-p26-three[data-n="2"] { margin-top: 22px; display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; } .rg-p26 .rg-p26-three::-webkit-scrollbar { display: none; } .rg-p26 .rg-p26-three[data-n="1"] { max-width: none; } .rg-p26 .rg-p26-three > .rg-p26-block { flex: none; width: 78%; scroll-snap-align: start; } .rg-p26 .rg-p26-three[data-n="1"] > .rg-p26-block { width: 100%; } .rg-p26 .rg-p26-cards { margin-top: 22px; display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; } .rg-p26 .rg-p26-cards::-webkit-scrollbar { display: none; } .rg-p26 .rg-p26-cards > a.rg-p26-card { flex: none; width: 60%; scroll-snap-align: start; } .rg-p26 dl.rg-p26-glance { margin-bottom: 22px; column-gap: 20px; } .rg-p26 .rg-p26-sec-hd { display: block; } .rg-p26 .rg-p26-sec-hd a.rg-p26-pill { margin-top: 18px; height: 48px; font-size: 15px; } .rg-p26 .rg-p26-story-grid, .rg-p26 .rg-p26-story-grid[data-n="1"] { margin-top: 22px; grid-template-columns: minmax(0, 1fr); gap: 12px; height: auto; aspect-ratio: auto; } .rg-p26 a.rg-p26-story.is-lead { height: 400px; } .rg-p26 .rg-p26-story.is-lead .rg-p26-story-tx { left: 20px; right: 20px; bottom: 20px; gap: 12px; } .rg-p26 .rg-p26-story.is-lead .rg-p26-story-ttl { font-size: 28px; line-height: 1.12; } .rg-p26 .rg-p26-story-rest { gap: 12px; grid-auto-rows: auto; } .rg-p26 .rg-p26-story-rest a.rg-p26-story { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; border-radius: 0; overflow: visible; background: none; color: var(--ink); } .rg-p26 .rg-p26-story-rest a.rg-p26-story::after { display: none; } .rg-p26 .rg-p26-story-rest .rg-p26-story img { position: static; width: 112px; height: 112px; border-radius: 4px; } .rg-p26 .rg-p26-story-rest a.rg-p26-story:hover img { transform: none; } .rg-p26 .rg-p26-story-rest .rg-p26-story-tx { position: static; gap: 8px; } .rg-p26 .rg-p26-story-rest .rg-p26-story-ttl { font-size: 19px; line-height: 1.2; } .rg-p26 .rg-p26-story-rest .rg-p26-story-date { font-size: 14px; color: var(--muted); } .rg-p26 .rg-p26-brand { padding-block: 56px; } .rg-p26 p.rg-p26-brand-nm { margin: 14px 0 20px; font-size: 76px; } .rg-p26 p.rg-p26-brand-tx { margin-bottom: 24px; font-size: 17px; } .rg-p26 a.rg-p26-pill.is-cream { height: 52px; padding: 0 28px; font-size: 16px; } .rg-p26 .rg-p26-brand-img { margin-top: 8px; } }