for rows with nothing to disclose – look identical. */
.carte-item-row {
border-bottom: 1px solid var(--rn-line);
transition: background 0.1s;
}
.carte-item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 40px;
list-style: none; /* Firefox marker */
}
.carte-item-head::-webkit-details-marker { display: none; }
@media (max-width: 768px) { .carte-item-head { padding: 16px 20px; } }
.carte-item-row:hover { background: #F8F8F8; }
.carte-item-row:hover .carte-item-name { color: var(--rn-rust); }
summary.carte-item-head { cursor: pointer; }
/* The disclosure marker: the same chevron language as the carte headings. */
.carte-item-row--exp > .carte-item-head .carte-item-price::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.2s;
opacity: 0.5;
}
.carte-item-row--exp[open] > .carte-item-head .carte-item-price::after {
transform: translateY(1px) rotate(225deg);
}
.carte-item-row[open] .carte-item-name { color: var(--rn-rust); }
/* The panel itself sits under the head, inside the row's padding. */
.carte-item-row > .item-allergens { padding: 0 40px 14px; }
@media (max-width: 768px) { .carte-item-row > .item-allergens { padding: 0 20px 14px; } }
.carte-item-row[open] > .item-allergens {
display: block;
max-height: none;
opacity: 1;
margin-top: 0;
}
.carte-item-name {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.05rem;
color: var(--rn-ink);
transition: color 0.15s;
}
.carte-item-desc { font-size: 0.85rem; color: var(--rn-mute); margin-top: 2px; }
.carte-item-price {
font-family: 'DM Mono', monospace;
font-size: 0.85rem;
color: var(--rn-ink);
flex-shrink: 0;
}
@media (max-width: 768px) { .carte-item-price { font-size: 0.8rem; } }
@media (min-width: 769px) {
.item-name, .carte-item-name { font-size: 1.2rem; }
.item-desc, .carte-item-desc { font-size: 0.95rem; }
.item-price, .carte-item-price { font-size: 0.95rem; }
}
.carte-footer {
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
background: #F8F8F8;
position: relative;
}
@media (max-width: 768px) { .carte-footer { padding: 16px 20px; } }
.carte-footer-note {
font-family: 'DM Mono', monospace;
font-size: 10px;
color: #757575;
letter-spacing: 0.25em;
text-transform: uppercase;
}
/* ─── Carte sub-headings (drinks/food grouping) ──────────────────── */
.carte-head {
font-family: 'Barlow Condensed', sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rn-rust);
}
.carte-head--1 {
font-weight: 700;
font-size: 1.35rem;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 40px;
margin: 0;
border-bottom: 2px solid var(--rn-ink);
}
.carte-head--2 {
font-weight: 600;
font-size: 1.05rem;
color: var(--rn-rust);
padding-top: 8px;
padding-bottom: 4px;
padding-left: 40px;
margin: 0;
}
@media (max-width: 768px) {
.carte-head--1 { padding-left: 20px; }
.carte-head--2 { padding-left: 20px; }
}
/* Non-expandable rows (drinks have no allergen panel) shouldn't look clickable. */
.carte-item-row:not(.carte-item-row--exp) { cursor: default; }
.carte-item-row:not(.carte-item-row--exp):hover .carte-item-name { color: var(--rn-ink); }
/* Small per-item detail beside the name (ABV, volume, grape/region, …). */
.carte-item-meta {
font-family: 'DM Mono', monospace;
font-size: 0.7em;
letter-spacing: 0.04em;
color: #999;
white-space: nowrap;
margin-left: 6px;
}
/* ─── Story ──────────────────────────────────────────────────────── */
#story {
background: var(--rn-ink);
border-top: 4px solid var(--rn-rust);
}
.story-collage {
position: relative;
overflow: hidden;
padding: 64px 40px;
}
@media (max-width: 768px) { .story-collage { padding: 40px 20px; } }
.story-ghost {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
}
.story-ghost-text {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: 22vw;
color: rgba(255,255,255,0.03);
letter-spacing: -0.02em;
text-transform: uppercase;
white-space: nowrap;
user-select: none;
will-change: transform;
transition: transform 0.05s linear;
}
.story-imgs {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 4fr 5fr 3fr;
gap: 16px;
align-items: start;
}
@media (max-width: 768px) {
/* Mobile story layout: the word block rides on top across the full width
(centred), the two photos sit side by side below it – the left one a
little smaller, the right one a little bigger. display:contents lifts
col2's children into the grid so they can be re-placed. */
.story-imgs { grid-template-columns: 44fr 56fr; }
.story-col3 { display: none; }
.story-col2 { display: contents; }
.story-col2 > * { grid-column: 1 / -1; }
/* As a grid item, margin:auto (the desktop centring) would shrink-wrap the
word to its text width – the fit script then sees no room and keeps the
font small. Stretch it across the row; text-align still centres. Word
and explanation also sit tighter together here than on desktop. */
.story-col2 > .story-word { margin-left: 0; margin-right: 0; margin-bottom: 2px; }
.story-imgs .story-word-def { margin-top: 4px; }
.story-col1 { grid-column: 1; grid-row: 3; }
.story-col2 > .story-col2-img { grid-column: 2; grid-row: 3; margin-top: 0; }
}
.story-col1, .story-col3, .story-col2-img {
overflow: hidden;
}
.story-col img {
width: 100%;
height: auto; /* let aspect-ratio govern; the
![]()
height attr must not pin the box */
object-fit: cover;
display: block;
transition: transform 0.4s;
}
.story-col1:hover img, .story-col3:hover img, .story-col2-img:hover img {
transform: scale(1.05);
}
.story-col1 img { aspect-ratio: 1068/1600; }
.story-col3 { padding-top: 128px; }
.story-col3 img { aspect-ratio: 1068/1600; }
.story-quote {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(2rem, 3.5vw, 3.5rem);
color: var(--rn-paper);
letter-spacing: -0.01em;
line-height: 1.05;
margin-bottom: 16px;
}
.story-attribution {
font-family: 'DM Mono', monospace;
font-size: 10px;
color: rgba(255,255,255,0.65);
letter-spacing: 0.35em;
text-transform: uppercase;
}
/* Wierderbuch (word-of-the-page from the Menu plugin, replaces the static
quote when its library has entries): word reuses .story-quote sizing but
carries the brand rust; the explanation is a readable sentence, not the
mono attribution style; the source is a quiet one-line citation. The whole
block is centred (mobile AND desktop). Every 7s the plugin's inline script
slot-machine-spins to the next word: explanation + source fade out during
the spin (.is-veiled) and reveal again as the word settles. */
.story-word {
text-transform: uppercase;
color: var(--rn-rust);
/* Always ONE line: the plugin script shrinks the font to fit the column
(fitWord). nowrap + hidden means mid-spin glyphs can never wrap and
nudge the photos below; the settled word always fits exactly. */
white-space: nowrap;
overflow: hidden;
}
.story-word-def {
font-size: 15px;
font-style: italic;
line-height: 1.65;
color: rgba(255,255,255,0.75);
margin-top: 10px;
max-width: 46ch;
}
.story-word-src {
font-family: 'DM Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
margin-top: 12px;
max-width: 46ch;
}
/* The whole word block is centred – on desktop within its column, on mobile
across the full-width row it now occupies. */
.story-word, .story-word-def, .story-word-src {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.story-word-def, .story-word-src { transition: opacity 0.35s ease; }
.story-word-def.is-veiled, .story-word-src.is-veiled { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
/* Static for reduced motion: the script never spins here, and even if a
veil class lingered, everything stays visible with no transitions. */
.story-word-def, .story-word-src { transition: none !important; opacity: 1 !important; }
}
.story-col2-img { margin-top: 24px; }
.story-col2-img img { width: 100%; height: auto; aspect-ratio: 1600/1068; object-fit: cover; transition: transform 0.4s; }
.story-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 768px) { .story-stats { grid-template-columns: repeat(2, 1fr); } }
.story-stat {
padding: 32px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.story-stat:last-child { border-right: none; }
.story-stat-val {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: 2.5rem;
color: var(--rn-paper);
line-height: 1;
}
.story-stat-lbl {
font-family: 'DM Mono', monospace;
font-size: 10px;
color: rgba(255,255,255,0.65);
letter-spacing: 0.3em;
text-transform: uppercase;
margin-top: 6px;
}
.story-city {
position: relative;
height: 280px;
overflow: hidden;
border-top: 4px solid var(--rn-rust);
}
@media (min-width: 768px) { .story-city { height: 400px; } }
.story-city img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
transform: scale(1);
transition: transform 0.4s;
}
.story-city:hover img {
transform: scale(1.05);
}
.story-city-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 40px;
}
@media (max-width: 768px) { .story-city-text { padding: 0 20px; } }
.story-city-headline {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(3rem, 10vw, 10rem);
letter-spacing: -0.02em;
color: var(--rn-paper);
line-height: 0.85;
text-transform: uppercase;
}
/* ─── Shop ───────────────────────────────────────────────────────── */
#shop {
background: var(--rn-paper);
border-top: 4px solid var(--rn-rust);
}
/* Bistro shop header: WHITE where the headline is – ink headline with rust
accent, description UNDER the headline (also on mobile), light-grey fox
watermark right, rust rule below – then the black trust band
(markup shared via renert_wc_trust_band()). */
.shop-header {
position: relative;
overflow: hidden;
padding: 48px 40px 44px;
border-bottom: 4px solid var(--rn-rust);
}
@media (max-width: 768px) { .shop-header { padding: 40px 20px 36px; } }
.shop-heading {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(3.5rem, 9vw, 5.5rem);
color: var(--rn-ink);
letter-spacing: -0.02em;
line-height: 0.9;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.shop-desc {
font-size: 0.9rem;
color: #777;
max-width: 34rem;
line-height: 1.65;
margin-top: 22px;
position: relative;
z-index: 1;
}
/* Hero line-link to the full shop – the hero-cta pattern in rust on white. */
.shop-header__link {
font-family: 'DM Mono', monospace;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--rn-rust);
margin-top: 26px;
position: relative;
z-index: 1;
}
.shop-header__link .line { width: 24px; height: 1px; background: currentColor; transition: width 0.3s; }
.shop-header__link:hover .line { width: 40px; }
/* "Leave us a review" under the testimonials strip (Site Settings →
Testimonials – Review Link; hidden while no URL is set). */
.testimonials-review { text-align: center; padding: 8px 24px 40px; }
.testimonials-review__link {
font-family: 'DM Mono', monospace;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--rn-rust);
text-decoration: none;
}
.testimonials-review__link .line { width: 24px; height: 1px; background: currentColor; transition: width 0.3s; }
.testimonials-review__link:hover .line { width: 40px; }
/* Suited fox – light grey on the white header (ink artwork at low opacity;
filter:none overrides the global .fox-layer white-out meant for the dark
sections). Anchored low enough that the head stays visible; parallax via
.fox-layer (main.js). */
.shop-header__fox {
position: absolute;
top: 70px;
right: 2%;
width: clamp(240px, 34vw, 560px);
opacity: 0.12;
pointer-events: none;
user-select: none;
will-change: transform;
z-index: 0;
}
.shop-header__fox img { width: 100%; height: auto; display: block; filter: none; }
/* Trust / benefit band on the homepage – same rules as .rnwc-trust in
css/woocommerce.css (which the homepage does not load). Kept in literal
colours/fonts; if you restyle one, restyle the other. */
#shop .rnwc-trust {
list-style: none;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
margin: 0;
padding: 0;
background: var(--rn-ink);
border-bottom: 2px solid var(--rn-ink);
}
#shop .rnwc-trust li {
padding: 20px 28px;
border-right: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
gap: 5px;
}
#shop .rnwc-trust li:last-child { border-right: none; }
#shop .rnwc-trust__k {
font-family: 'DM Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rn-rust);
}
#shop .rnwc-trust__v {
font-family: 'Barlow', sans-serif;
font-size: 0.82rem;
color: rgba(255,255,255,0.6);
}
@media (max-width: 820px) {
#shop .rnwc-trust { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
#shop .rnwc-trust li:nth-child(2) { border-right: none; }
#shop .rnwc-trust li:nth-child(1), #shop .rnwc-trust li:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 480px) {
#shop .rnwc-trust li { padding: 14px 16px; }
#shop .rnwc-trust__v { font-size: 0.76rem; }
}
.shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-left: 2px solid var(--rn-ink);
border-top: 2px solid var(--rn-ink);
}
@media (max-width: 600px) {
.shop-grid { grid-template-columns: repeat(2, 1fr); }
.shop-product .product-info { padding: 14px; }
}
/* Phones hide the description entirely – keeps the grid compact and scannable. */
@media (max-width: 768px) {
.product-info .product-desc { display: none; }
}
/* ─── Product category filter (homepage shop · storefront · "Also Nice") ───
Lives here (not in css/woocommerce.css) so it styles the homepage too, where
the WooCommerce stylesheet does not load. Identical look everywhere. */
.rnwc-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px 40px;
background: var(--rn-paper);
border-bottom: 2px solid var(--rn-ink);
}
.rnwc-filter__pill {
font-family: 'DM Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rn-ink);
background: none;
border: 2px solid var(--rn-ink);
border-radius: 0;
padding: 10px 18px;
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
}
.rnwc-filter__pill:hover,
.rnwc-filter__pill.is-active { background: var(--rn-ink); color: var(--rn-paper); }
/* Pills sit in their own wrapper so on phones only THEY scroll under the fade
mask while the search toggle stays pinned beside the strip. On desktop the
wrapper is dissolved – layout identical to the old flat pill row. */
.rnwc-filter__pills { display: contents; }
/* Collections row (product tags): its own full-width line under the category
row – rust-accented pills so "collection" reads differently from "category".
Both rows combine: a card must match the active pill of each. */
.rnwc-filter__pills--tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
flex: 1 1 100%;
}
.rnwc-filter__pill--tag {
border-color: var(--rn-rust);
color: var(--rn-rust);
}
.rnwc-filter__pill--tag:hover,
.rnwc-filter__pill--tag.is-active { background: var(--rn-rust); color: var(--rn-paper); }
@media (max-width: 768px) {
.rnwc-filter {
padding: 12px 20px;
gap: 6px;
}
.rnwc-filter__pills {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 0;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Right-edge fade hints that more pills scroll off-screen. The extra
padding-right lets the last pill scroll clear of the faded zone. */
padding-right: 44px;
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
}
.rnwc-filter__pills::-webkit-scrollbar { display: none; }
/* Collections keep their own scroll strip on the second line. */
.rnwc-filter__pills--tags { flex: 1 1 100%; flex-wrap: nowrap; }
.rnwc-filter__pill { padding: 9px 14px; }
}
/* Teaser grids (homepage strip · "Also Nice") hold the WHOLE catalogue so the
pills can filter across all of it, but only the first data-rn-cap cards stand
until a filter is used. Server-rendered so there's no flash of the full grid;
js/shop.js strips the class on init and takes over with inline display. */
.rn-capped { display: none !important; }
.shop-product {
border-bottom: 2px solid var(--rn-ink);
border-right: 2px solid var(--rn-ink);
display: flex;
flex-direction: column;
min-width: 0; /* keep the homepage grid columns equal + contained on mobile */
}
.product-img {
position: relative;
display: block;
overflow: hidden;
background: var(--rn-grey-img);
border-bottom: 2px solid var(--rn-ink);
aspect-ratio: 1; /* the square lives on the container, so the photo is always
cropped square regardless of the source image proportions */
}
.product-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.shop-product:hover .product-img img { transform: scale(1.04); }
/* ─── Loop card carousel (products with multiple images) ───────────────────
.product-img--multi reuses the .product-img square box (aspect-ratio, border,
overflow). Inside, a scroll-snap strip swipes between full-bleed slides with
dot indicators (wired per card by initLoopCarousels() in js/shop.js). Used on the
homepage shop, the shop/category archive and related products. */
.product-img--multi { line-height: 0; }
.product-img--multi .product-img__strip {
position: absolute;
inset: 0;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.product-img--multi .product-img__strip::-webkit-scrollbar { display: none; }
.product-img__slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
display: block;
line-height: 0;
}
.product-img__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s;
}
.shop-product:hover .product-img--multi .product-img__slide img,
li.product:hover .product-img--multi .product-img__slide img { transform: scale(1.04); }
/* Dots – always visible (override the mobile-only .carousel-dots default). */
.product-img__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
position: absolute;
bottom: 12px;
left: 0;
right: 0;
z-index: 3;
pointer-events: none;
}
/* The dots are real