/* ========================================================================== iMagnet · layout and components Every color and size comes from tokens.css. Nothing hardcoded. Written with CSS logical properties throughout so the same rules serve Hebrew RTL, Arabic RTL and English LTR without a second stylesheet. ========================================================================== */ /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* No browser or WordPress/Hello-Elementor default may flash a coloured highlight when a finger taps brand chrome. -webkit-tap-highlight-color is inherited, so setting it transparent here clears it for every element — the header logo, the opening mark/disc, the stage, every link and button. This is the fix for the owner's "coloured circle appears around the logo on tap" on the live site: the disc was cleared last round, but the header logo (which plays the opening on tap) still carried the device default. */ -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-he); font-size: var(--t-body); font-weight: var(--fw-light); line-height: 1.85; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } /* HELLO ELEMENTOR'S reset.css IS A STARTER SKIN, NOT A RESET. Neutralised 2026-08-18. It ships, in the parent theme this store is a child of: a { color: #c36 } a:hover, a:active { color: #336 } [type=button], [type=submit], button{ border: 1px solid #c36; color: #c36 } ...:focus, ...:hover { background-color: #c36; color: #fff } #c36 is rgb(204, 51, 102), and it is the pink in the owner's two photographs: the credit-card trigger in the first, the menu's close button in the second. It walked between them because ON A PHONE A TAP IS :focus, and :focus stays until something else is tapped. Our components all answer :hover, so hover was covered by accident. :focus never was. Neither was the border: measured on the live checkout, five of the nine buttons were carrying a 1px magenta border at rest, including both wallet buttons and the credit-card trigger. Written in the SAME selector shape as the rules it answers, so it wins on order alone and any component with a class still outranks it, and touching only the three properties that leak. No padding, no radius, no geometry, so nothing moves. This replaces an earlier attempt that named four controls one by one (see the gallery focus ring in woo-brand.css). A list can only ever cover what somebody remembered; this covers every button on the site, including tomorrow's. AND THE REASON OUR EXISTING RESET NEVER HELD: `button { color: inherit }` a few lines above is specificity (0,0,1), while Hello writes the SAME rule as `[type=button], [type=submit], button`, and an attribute selector counts at class level. So for every button carrying type="button" or type="submit" — which is every button this theme prints, including .nav-toggle and .pay__trigger — Hello's (0,1,0) outranked our (0,0,1) and the magenta text colour won. Matching the selector shape is what makes this hold. */ [type="button"], [type="submit"], button { border-color: transparent; color: inherit; } [type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover { background-color: transparent; color: inherit; } a:hover, a:active { color: inherit; } :focus-visible { outline: 2px solid var(--c-ring); outline-offset: 3px; } /* The ring's colour is inherited, not chosen per component: --c-ring is the deep green at :root (12.95:1 on ivory) and flips to gold inside anything painted on the deep green (8.23:1 there). Before this, the ring was the gold everywhere and measured 1.57:1 on ivory — under the 3:1 WCAG 2.4.11 asks of a focus indicator, so keyboard focus was effectively invisible across most of the store. Listing the dark containers here rather than each control inside them means a control added to the footer or the header tomorrow is correct with no further thought. */ .band-dark, .topbar, .site-header { --c-ring: var(--c-accent); } /* A ring is shown ONLY for genuine keyboard focus (:focus-visible above, kept for WCAG 2.4.7). Any focus left by a pointer press — a mouse click or a tap — gets no ring, globally, so no UA/theme default can leak a coloured outline onto the opening's interactive elements. This is the desktop half of the owner's "ring around the logo": the header logo's click is preventDefault-ed to play the opening, so focus stays on it, and without this the gold accent ring drew a rectangle around the logo on a plain click. Higher specificity than a bare a:focus / button:focus theme default, so it wins the reset. */ :focus:not(:focus-visible) { outline: none; } /* --- Primitives ----------------------------------------------------------- */ .container { max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--s-7); } .section--tight { padding-block: var(--s-6); } /* Pulls a section up toward the one above it. Used on the collection so it sits closer to the value strip. */ .section--flush-top { padding-block-start: var(--s-5); } .band-dark { background: var(--c-primary); color: var(--c-on-dark); } /* A green band that carries a jungle-and-gold scene instead of a flat fill, so the section reads as part of the same world as the hero rather than a slab of colour. The foliage is a real photograph; a flat near-black-green scrim rides over it so the ivory copy keeps its contrast (the scrim is darker than the base green, so text is at least as legible as it was, verified on rendered pixels). The scene stays subordinate: present as depth and light, never loud enough to fight the words. */ .band-dark--scene { /* The same transparent foliage frame and the same green as the top banner, so every green scene band across the site reads as one identical treatment. */ background: url(../../assets/web/scene-shop-frame.webp) center / cover no-repeat, #0b2013; } /* --- Scene banners on interior pages (visual audit 2026-07-23) ------------- A generated jungle-and-gold scene behind a page's opening title, so no interior page opens on bare ivory. scene-shop / scene-story each carry a dark ramp baked into the RIGHT of the frame (the RTL copy side), so only a light overall wash is added here and contrast is measured on real pixels. */ .page-hero { display: grid; align-content: center; min-block-size: 340px; /* Run full-bleed up under the fixed header (cancelling the body's top pad), then pad the copy back down so it clears the header. Same move the home hero makes, so the header floats on the banner and its logo/pills flip to the on-dark treatment via the is-dark marker the script reads. */ margin-block-start: calc(-1 * var(--chrome-h, 76px)); padding-block: calc(var(--chrome-h, 76px) + var(--s-6)) var(--s-7); background: center / cover no-repeat var(--c-primary); color: var(--c-on-dark); border-block-end: 1px solid var(--c-line-on-dark); } /* The banner opens over the header, so the header starts in on-dark mode; the script then flips --np back to 1 as the ivory grid scrolls under the bar. */ html:has(.page-hero) { --np: 0; } .page-hero .eyebrow { color: var(--c-accent); } .page-hero .title { margin-block-end: var(--s-3); } .page-hero .lede { color: var(--c-on-scene-muted); max-inline-size: 54ch; } /* The shop banner is a transparent foliage frame laid over the solid brand green (the green is the CSS colour, not baked into the art), with the copy centred in the clean middle the leaves frame. */ .page-hero--shop { background-image: url(../../assets/web/scene-shop-frame.webp); /* Matched to the green the lower scene band actually renders (side-1 under its 0.18 scrim), so the two green bands on the page read as one colour. */ background-color: #0b2013; text-align: center; } .page-hero--shop .lede { margin-inline: auto; } /* UNUSED as of P4, kept only so a future banner-style story page has its treatment ready. The APPROVED story page has no .page-hero at all: it is copy on the ivory page framed by .foliage-rail down each outer edge (see the Story page block further down). Worth stating, because the P4 brief was written believing this rule was the story page's hero and sent the contrast check after a scrim that nothing renders. If you are measuring the story page, measure the rails against the LINE BOXES of the copy, not this. */ .page-hero--story { background-image: linear-gradient(to left, rgba(10, 22, 14, 0.62), rgba(10, 22, 14, 0.16) 55%, rgba(10, 22, 14, 0.04)), url(../../assets/web/scene-story.webp); background-position: center 40%; } [dir="ltr"] .band-dark--scene { background-position: center; } /* The muted copy on a scene band is over a photograph, not a flat fill, so it takes the on-scene muted value (0.78) the hero already uses, never the flat 0.62 which is calibrated for solid green and drops below the 4.5:1 floor on the lit gold of the scene. Measured worst case on the band: 5.15:1. */ .band-dark--scene .lede, .band-dark--scene .story__body { color: var(--c-on-scene-muted); } /* On a phone the scene band showed no foliage at all: scene-shop-frame is a foliage FRAME with a clear centre, and a narrow viewport with `cover` crops straight to that empty middle, so the leaves at the edges are lost. On the phone, use the full foliage scene (the same image the story-page hero uses) under a flat dark scrim instead — the plants are actually visible, and the scrim keeps the muted ivory copy legible over the lit leaves. The scrim is 0.78, not lighter: measured on the rendered pixels, the copy sits over a blown-out leaf highlight (~rgb(252,256,243)), and only a scrim this dark keeps the 0.78-muted copy clear of the 4.5:1 floor there (worst 5.6:1; a 0.62 scrim failed at 3.4:1). The foliage still reads clearly as texture underneath. */ @media (max-width: 900px) { .band-dark--scene { background: linear-gradient(rgba(10, 22, 14, 0.78), rgba(10, 22, 14, 0.78)), url(../../assets/web/scene-story.webp) center / cover no-repeat, #0b2013; } } /* Gold fails contrast on ivory, so the eyebrow is green on light and gold only on the deep green, where it measures 8.2:1. */ .eyebrow { font-size: var(--t-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-primary); margin-block-end: var(--s-4); } /* Every deep-green surface, not only .band-dark. The hero paints the same green from its own rule, so an eyebrow there was #14301F on #14301F: a 1:1 ratio and literally invisible. Gold on the green measures 8.2:1. */ .band-dark .eyebrow, .hero .eyebrow { color: var(--c-accent); } /* The brand wordmark. Always the Latin display face, mixed case (never the eyebrow's uppercase), so MaxVolmer reads as a name, not a shout. */ .brand { font-family: var(--f-la); text-transform: none; letter-spacing: 0.02em; white-space: nowrap; } /* When the brand IS the eyebrow (hero, collection), it keeps the eyebrow colour but drops the uppercase and heavy tracking, which suit the sans, not a serif. */ .eyebrow--brand { font-family: var(--f-la); text-transform: none; letter-spacing: 0.05em; font-size: 1.05rem; } /* Skip to content. Standard 5568 asks that a keyboard user be able to pass the navigation, and the store ships an accessibility statement, so this is a requirement rather than a nicety. Off screen until it takes focus. */ .skip-link { position: fixed; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: 50; padding: 0.7rem 1.3rem; background: var(--c-accent); color: var(--c-primary); font-size: var(--t-small); font-weight: var(--fw-medium); border-radius: var(--radius-sm); translate: 0 -400%; } .skip-link:focus { translate: 0 0; } /* Visually hidden, still read aloud. Carries state that color alone implies. */ .vh { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Latin scent names. Never uppercase the brand name with this class. */ .latin { font-family: var(--f-la); font-weight: var(--fw-medium); letter-spacing: var(--tr-latin); text-transform: uppercase; } .title { font-size: var(--t-title); font-weight: var(--fw-light); line-height: 1.25; } .lede { font-size: var(--t-subtitle); font-weight: var(--fw-light); line-height: 1.7; color: var(--c-muted-text); } .band-dark .lede { color: var(--c-on-dark-muted); } .rule { border: 0; border-block-start: 1px solid var(--c-hairline); margin: 0; } .band-dark .rule { border-block-start-color: var(--c-line-on-dark); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.95rem 2.1rem; font-size: var(--t-small); font-weight: var(--fw-medium); letter-spacing: 0.04em; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .btn--gold { background: var(--c-accent); color: var(--c-primary); } .btn--gold:hover, .btn--gold:focus { background: var(--c-accent-soft); } .btn--ghost { background: transparent; color: var(--c-accent); border-color: var(--c-line-on-dark); } .btn--ghost:hover, .btn--ghost:focus { border-color: var(--c-accent); background: rgba(var(--rgb-accent), 0.08); } .btn--ink { background: var(--c-primary); color: var(--c-on-dark); } .btn--ink:hover, .btn--ink:focus { background: var(--c-primary-soft); } /* Secondary action on ivory. Gold text on ivory fails contrast, so the light-background outline button uses the green ink instead. */ .btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); } .btn--outline:hover, .btn--outline:focus { background: var(--c-primary); color: var(--c-on-dark); } /* --- The arch ------------------------------------------------------------- */ /* The signature form. Taken from the logo mark: two uprights joined by a semicircular crown. Used in exactly two places, hairline only, never filled: the hero frame and the scent card. */ .arch { position: relative; border: 1px solid var(--c-arch-on-dark); background: rgba(244, 237, 225, 0.035); border-radius: var(--arch-crown) var(--arch-crown) var(--radius) var(--radius); display: grid; place-items: end center; overflow: hidden; transition: border-color 0.5s var(--ease); } .arch::before { /* light held inside the arch. The brand promise is a presence that stays in the air, so the bottle sits in a glow rather than on a gradient. */ content: ""; position: absolute; inset-block-end: 12%; inset-inline-start: 50%; translate: -50% 0; inline-size: 82%; aspect-ratio: 1; background: radial-gradient(circle, rgba(var(--rgb-accent), 0.20) 0%, transparent 68%); pointer-events: none; } /* The interior deepens toward its floor. Enki is near-white glass, and on the flat ivory it had almost nothing to sit against: the card read as a hole rather than as a bottle. A vertical wash gives every bottle a floor to stand on, costs no request, and applies to all six cards equally so the grid still reads as one set. Measured on rendered screenshots rather than judged by eye: the interior was flat to within 1.2 luminance points before this and runs 8.3 points deeper at the floor after it. 0.16 was tried and rejected. It separates the bottle better still, but it turns the arch into a grey-green panel and this arch is specified as hairline only, never filled. */ .arch--light { border-color: rgba(var(--rgb-accent), 0.45); background: linear-gradient(180deg, rgba(var(--rgb-primary), 0.012) 0%, rgba(var(--rgb-primary), 0.10) 100%); } .arch--light::before { background: radial-gradient(circle, rgba(var(--rgb-accent), 0.18) 0%, transparent 68%); } .arch__bottle { position: relative; inline-size: 76%; margin-block-end: 8%; filter: drop-shadow(0 22px 34px rgba(var(--rgb-primary), 0.30)); } /* A boxed shot is a 1000 square while the arch is portrait, so it cannot use the bottle's sizing: at 76% of the arch width a square composition renders the bottle inside it tiny. It sits wider and lower instead. */ .arch__pack { position: relative; inline-size: 94%; margin-block-end: 12%; filter: drop-shadow(0 18px 28px rgba(var(--rgb-primary), 0.26)); } /* Placeholder for packshots still in transit. Every product now has real photography, so this survives only for a future product added before its shoot lands. */ .arch__pending { position: relative; display: grid; justify-items: center; gap: var(--s-3); margin-block-end: 26%; text-align: center; } .arch__pending img { inline-size: 96px; opacity: 0.26; } .arch__pending span { font-size: var(--t-meta); letter-spacing: 0.08em; color: var(--c-muted-text); } /* --- Header --------------------------------------------------------------- */ /* Deep green, and on the home page it runs straight into the hero so the two read as one field. */ /* The header is fixed now, so the document has to make room for it or every page but the home page starts underneath it. --chrome-h is measured at runtime rather than written down, because the preview flag counts toward it and will not exist in the theme. The fallback is the header's own height at its usual size, so a page with the script blocked is merely a few pixels off rather than broken. The opening cancels this padding on purpose: running under the header is the whole point of a transparent one. */ body { padding-block-start: var(--chrome-h, 76px); } /* Fixed and transparent, so the opening frame is a full screen of photograph with the brand floating on it rather than a photograph with a green bar stapled above it. It earns a background only once there is content behind it to separate from. backdrop-filter is the part doing the work: over foliage a flat translucent panel turns leaf detail into noise behind the nav, and the blur turns it back into a surface. -webkit- prefix included because Safari still wants it. */ .site-header { position: fixed; /* Below the preview flag, which is also fixed and paints above this. At 0 the two overlapped and the flag covered the top half of the header: on desktop they cleared each other by luck, and at 390px the flag wraps to two lines and swallowed the nav entirely. --flag-h is 0 in the theme, where the flag does not exist, so this line costs production nothing. */ inset-block-start: var(--flag-h, 0px); inset-inline: 0; z-index: 100; color: var(--c-on-dark); /* The bar itself is never a surface on desktop: no fill, no hairline, no frame. The only surfaces in the header are the pills, so the photograph runs unbroken behind it. That moves a real problem onto the pills rather than removing it. A bar used to be solid here because a transparent one measured 1.53:1 over the ivory sections, and ivory links on light glass over ivory is the same failure. --np is the answer: see the nav pill below. */ background: transparent; border-block-end: 0; transition: background 0.35s var(--ease), border-color 0.35s var(--ease); } /* "What is under the header right now." 0 means a dark region is behind it, so the mark can be the light one and the pills can stay a thin smoked glass that lets the scene through. 1 means it is over something light, so the mark flips to the dark one and the pills bring their own darkness, because ivory links on light glass over ivory is ivory on ivory. Everything in the bar reads this one number. The script keeps it current as you scroll past each section. These two are the value before it runs and the value it falls back to: light is the safe default because pills that carry their own darkness are legible on anything, and a page that opens on the photograph says so up front. Both of these sit on the root, which is also where the script writes, so the live value simply overrides them as an inline style. On body they would win against it for everything inside body, which is the whole page. */ :root { --np: 1; } /* Static defaults for the fixed-chrome heights. site.js measures the exact values at runtime and overrides these inline on , but a permanent strip now ships in the theme (the announcement ticker) and on every preview page (the approval flag), so the first paint — and any no-JS visitor — must already lay out under both the strip and the header: without these the header would render at top:0 beneath the fixed strip and the body padding would be short by the strip's height. The strip is one --t-meta line inside var(--s-2) padding top and bottom; 76px is the header's resting height, the value the rest of the file falls back to. */ :root { --header-h: 76px; /* 2.5rem = 40px, the strip's height, and it closes exactly: 2 x var(--s-2) padding = 2 x 0.5rem = 1.0000rem one --t-meta line at line-height 1.85 = 0.8125 x 1.85 = 1.5031rem total = 2.5031rem The TEXT line box sets it. Not the icon: at 1.15em the icon is 0.9344rem (~15px), well inside the ~24px text line, so it never governs — worth being exact about, because the next person to tighten the strip's line-height will trust this comment, and a plausible-but-wrong derivation is how the earlier 2.25rem (4px short, leaving the first paint that much out until site.js measured the real value) survived as long as it did. Kept in rem, not px, because every input above is root-relative, so the strip genuinely scales with a visitor's text size and a px default would drift the moment anyone changed it. Verified identical for every promise at 360/390/430/768/1440/2560 — they share one grid cell, so that is structural rather than lucky. */ --flag-h: 2.5rem; --chrome-h: calc(76px + 2.5rem); } html:has(.journey) { --np: 0; } /* Opt in only where a full-bleed dark scene runs underneath. :has() is load bearing and also chosen for how it fails: a browser without it keeps the solid header, which is legible on every page. */ /* The preview flag is position:static above a fixed header, so the page needs to be pushed down by the header's own height or the first section hides under it. Only pages that are not the journey need this: the journey is deliberately full-bleed under the header. */ /* Three columns rather than space-between, because the nav has to be centred on the bar and not merely placed between two groups: with space-between it drifts whenever the cart label or the language segment changes width, and it would move again the day a third link is added. The outer columns are equal and flexible, the nav is its own width, so the centre is the centre. In RTL the first column is the right one, which is why the toggle sits first in the markup: on a phone it wants the far side from the cart, and on desktop it is not there at all and the logo takes the column. */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); padding-block: var(--s-3); } .site-header__logo { justify-self: start; position: relative; display: inline-flex; } .site-header__logo img { block-size: 52px; inline-size: auto; display: block; } /* The second mark stacks on the first and the two cross fade on --np, the same number that darkens the pills. The first one is what sizes the link, so it stays in flow and only the second is lifted out of it. */ .site-header__logo img + img { position: absolute; inset-block-start: 0; inset-inline-start: 0; } .logo--on-dark { opacity: calc(1 - var(--np, 1)); } .logo--on-light { opacity: var(--np, 1); } .site-header__logo img { transition: opacity 0.3s var(--ease); } /* The links sit on their own surface rather than directly on the photograph. Glass and not a solid fill: the bar is over foliage that is meant to be seen, so the pill lifts the text off it without cutting a black hole in the scene. It reads as almost nothing over a dark plate, which is the intent, and it is what carries the links' contrast once the bar behind it went transparent. */ .nav { position: relative; display: flex; align-items: center; justify-self: center; gap: var(--s-5); font-size: var(--t-small); padding: 0.7rem var(--s-5); border-radius: 999px; /* The brand green, not a smoked black. Glass here means tinted and blurred, and the tint is the brand's own colour so the bar belongs to the palette rather than reading as a grey panel dropped on the photograph. It is a tint and not a veil of ivory: a light veil brightened the leaf behind the links and pushed the gold of the active one to 4.48:1, under the floor. */ background-color: rgba(20, 48, 31, 0.62); border: 1px solid rgba(244, 237, 225, 0.12); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } /* The rest of the darkness, for when there is nothing dark behind the pill. It is a layer rather than a second colour on the element because a background cannot cross fade and this has to: the tone changes while you scroll past a section edge, and a step there is visible. */ .nav::before, .lang-switch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(20, 48, 31, 0.92); opacity: var(--np, 1); transition: opacity 0.3s var(--ease); pointer-events: none; } /* Positioned, so they paint above the layer rather than under it. */ .nav > *, .lang-switch > * { position: relative; } .nav a { padding-block: var(--s-1); border-block-end: 1px solid transparent; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .nav a:hover, .nav a[aria-current="page"] { color: var(--c-accent); border-block-end-color: var(--c-accent); } .site-header__end { display: flex; align-items: center; justify-self: end; gap: var(--s-3); font-size: var(--t-small); } /* A switch, so it has to look like one thing with two halves rather than like two links that happen to be adjacent. The filled half is where you are and the empty half is the one tap that changes it. */ .lang-switch { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; /* Same two layers as the nav pill, and for the same reason. */ background-color: rgba(10, 22, 14, 0.34); background-image: linear-gradient( rgba(10, 22, 14, calc(var(--np, 1) * 0.62)), rgba(10, 22, 14, calc(var(--np, 1) * 0.62))); border: 1px solid rgba(244, 237, 225, 0.12); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } .lang-switch__seg { display: grid; place-items: center; min-inline-size: 34px; block-size: 28px; padding-inline: 0.5rem; border-radius: 999px; font-size: var(--t-meta); letter-spacing: 0.06em; /* The on-scene 78%, never the flat 62%. This bar is over a photograph and the flat value measured 4.30:1 on a lit leaf, under the 4.5:1 floor. */ color: var(--c-on-scene-muted); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .lang-switch__seg.is-on { background: var(--c-accent); color: var(--c-primary); font-weight: var(--fw-medium); } .lang-switch__seg:not(.is-on):hover { color: var(--c-on-dark); } /* The one filled control on the bar. Gold, pill, and the only thing here that is not glass, because it is the only thing here that is an action. */ .cart-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.62rem 1.3rem; border-radius: 999px; background: var(--c-accent); color: var(--c-primary); font-size: var(--t-small); font-weight: var(--fw-medium); letter-spacing: 0.04em; white-space: nowrap; transition: background-color 0.3s var(--ease); } .cart-btn:hover, .cart-btn:focus { background: var(--c-accent-soft); } /* The cart sits at the far side of the button, which in RTL means last in the markup. It is the object the button is about, so it is the larger of the two things in there and the word is the caption. */ .cart-btn__cart { position: relative; display: block; flex: none; inline-size: 24px; block-size: 24px; } .cart-btn__icon { inline-size: 24px; block-size: 24px; display: block; } /* On the cart, not next to it. Pulled up and out so it reads as a badge stuck on the corner rather than as part of the drawing. */ .cart-btn__count { position: absolute; inset-block-start: -7px; inset-inline-end: -8px; display: grid; place-items: center; min-inline-size: 17px; block-size: 17px; padding-inline: 3px; border-radius: 999px; background: var(--c-primary); color: var(--c-accent); font-size: 11px; line-height: 1; font-weight: var(--fw-medium); } /* Below 900px the nav was simply display:none, which left a phone with no navigation at all: six links unreachable, and the only way to any of them was the one CTA in the hero. This is the missing half of that rule. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; inline-size: 44px; /* a real 44px target, not a 24px icon */ block-size: 44px; padding: 0; background: none; border: 0; cursor: pointer; } .nav-toggle span { display: block; inline-size: 24px; block-size: 2px; margin-inline: auto; border-radius: var(--radius-sm); background: var(--c-on-dark); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Hero ----------------------------------------------------------------- */ /* One full-bleed photograph that the copy and the bottle stand inside. It was a 360px framed arch first, and that was wrong: a whole generated scene was showing through a 48px strip down each side of the bottle, which reads as a texture rather than as a place. The plates are now generated with a deliberate empty half and the copy sits in it. */ .hero { position: relative; isolation: isolate; /* keeps the plate and scrim out of the page's stacking order */ display: grid; align-items: center; min-block-size: min(80vh, 780px); background: var(--c-primary); color: var(--c-on-dark); padding-block: var(--s-6) var(--s-7); overflow: hidden; } /* The wrapper exists only to carry the art direction, so it must not become a box between .hero and the image it positions. */ .hero picture { display: contents; } .hero__plate { position: absolute; inset: 0; z-index: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* Anchored to the empty half, not centred. When the viewport is proportionally narrower than the plate, cover crops horizontally, and centring would walk the foliage into the copy at exactly the widths nobody tests. Anchoring here keeps the empty half whole and takes the crop out of the foliage, where it costs a narrower band behind the bottle and nothing else. */ object-position: 100% 50%; } /* Hebrew and Arabic both set the copy on the right, which is where the plate's empty half already is. English arrives in early August and flips the layout, and one mirror handles it: object-position resolves before the transform, so the crop still keeps the empty half and the mirror simply moves it to the left, under the copy. Foliage has no handedness, so nothing looks reversed. */ [dir="ltr"] .hero__plate { transform: scaleX(-1); } /* Contrast here is a legal requirement, not a preference, so it is enforced in CSS rather than left to whatever the generator produced. Measured on the shipped plate by check-plate-deadzone.mjs: the wide plate's copy zone is already 15.87:1 for solid ivory and 6.63:1 for the 62% muted colour with no scrim at all, so on desktop this is insurance for odd viewport ratios. On the phone plate it is load bearing: the muted colour measures 3.01:1 bare and 4.80:1 under the scrim. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to left, rgba(10, 22, 14, 0.55) 0%, rgba(10, 22, 14, 0.34) 34%, rgba(10, 22, 14, 0) 66%); } [dir="ltr"] .hero::after { background: linear-gradient(to right, rgba(10, 22, 14, 0.55) 0%, rgba(10, 22, 14, 0.34) 34%, rgba(10, 22, 14, 0) 66%); } .hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr 0.65fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); } .hero__title { font-size: var(--t-display); font-weight: var(--fw-light); line-height: 1.14; margin-block-end: var(--s-4); text-wrap: balance; } .hero__sub { font-size: var(--t-subtitle); /* Not --c-on-dark-muted. This line sits on a photograph now, and the flat background value fails the contrast floor on a phone. See tokens.css. */ color: var(--c-on-scene-muted); max-inline-size: 40ch; margin-block-end: var(--s-5); } /* Two hero actions: the featured bottle (gold) and the full collection (ghost, which is built for the dark scene). They wrap on a narrow phone. */ .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); } .hero__figure { justify-self: center; margin: 0; } /* Free standing in the scene rather than inside a frame. The shadow is black and not the green used on ivory cards, because here it falls on foliage: its job is separating the glass from the leaves behind it, not implying a floor the photograph does not contain. */ .hero__bottle { display: block; /* 300 rather than 340. The opening rests the bottle at 0.92 of this, so what is actually on screen goes from 313px to 276px: present, and no longer competing with the foliage for the picture. The vw arm is untouched. It only takes over below about 480px, which is a width where the phone rules have replaced this sizing anyway. */ inline-size: min(300px, 62vw); block-size: auto; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.60)); } /* --- The opening ---------------------------------------------------------- */ /* A full screen of foliage with the mark standing in it, which resolves into the hero as you scroll: the leaves recede, the mark grows and dissolves, the photograph underneath takes over, and the copy and the bottle rise into it. Built by wrapping the hero rather than rebuilding it, deliberately. The hero is the finished state, its contrast is measured on rendered pixels, and this only decides when it becomes visible. That also means the reduced-motion path is not a second design to maintain: it is the hero, unwrapped. One number crosses the JS/CSS seam, --p, the scroll progress from 0 to 1. Everything else is a band expressed here, so the timing is tunable in the stylesheet by whoever is looking at it rather than buried in a script. */ .journey { position: relative; background: var(--c-primary); /* Scrub distance is the part beyond one screen. 130vh means the opening takes a little over one full flick on a phone. */ block-size: calc(100vh + 130vh); block-size: calc(100svh + 130vh); margin-block-start: calc(-1 * var(--chrome-h, 76px)); /* sit under the fixed header */ } .journey__stage { position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100svh; /* svh so mobile browser chrome cannot jump the stage */ overflow: hidden; } /* The header floats over the photograph, so the photograph has to give it something to sit on. This plate's upper left is its brightest area, which is exactly where the cart and language links sit, and a translucent bar plus a blur was not enough: the nav measured below the 4.5:1 floor there. Sits above the intro rather than under it so it holds at every point of the opening, not only once the plate has dissolved. It stops short of the header's own height plus a soft tail, so it reads as light falling off rather than as a band. */ .journey__stage::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 8; block-size: calc(var(--chrome-h, 76px) + 72px); background: linear-gradient(to bottom, rgba(10, 22, 14, 0.78) 0%, rgba(10, 22, 14, 0.62) 46%, rgba(10, 22, 14, 0) 100%); pointer-events: none; } .journey .hero { block-size: 100%; min-block-size: 0; /* Centre the copy in the screen the visitor sees, not in the whole stage. The stage is a full 100svh and runs up under the fixed header, but the base .hero centres its content in that whole height, so the header's 132px counts as empty space above the copy and the copy is pulled up into it: measured, the eyebrow sat 76px below the header with 240px of void under the button, top heavy enough that the eyebrow lined up with the logo. Offsetting the top padding by the chrome height moves the centre of the padding box down to the middle of [chrome, stage bottom], which is the middle of the visible area. The symmetric s-5 is breathing room on each side of that region. --chrome-h is measured and includes the preview flag, so this follows the flag out in production and re-centres on the header alone, with the 92px fallback covering the first paint before the measure lands. */ padding-block: calc(var(--chrome-h, 92px) + var(--s-5)) var(--s-5); } /* The opening hero is locked to one screen (the sticky stage), so on a short desktop viewport its copy and bottle scale down to fit rather than clipping the bottle base and the buttons at the fold. The added announcement ticker makes the chrome taller, which is what tightened this on laptop-height screens. The bottle becomes height-driven (inline-size auto) so it keeps its aspect ratio. */ @media (min-width: 901px) and (max-height: 820px) { .journey .hero__title { font-size: clamp(1.85rem, 4.6vh, var(--t-display)); } .journey .hero__sub { margin-block-end: var(--s-4); } .journey .hero__bottle { inline-size: auto; block-size: min(46vh, 466px); } } /* The site opens as one photograph with the mark in it and nothing else. The header, and the preview strip above it, arrive on the same gesture that takes the mark away: the chrome assembles itself as the brand dissolves, instead of sitting over the picture from the first frame. The band starts where the mark starts leaving, 0.24, and completes before the mark is fully gone at 0.46, so the two read as one handover rather than as a gap with nothing on screen. Opacity only, never display or visibility: --chrome-h is measured from these two elements, and the negative pull that lets the photograph run under the header is derived from it. Taking them out of flow would move the thing they sit on and the opening would jump at the moment it is meant to settle. Scoped to .has-journey, so reduced motion and a failed script get the header they always had, fully visible, immediately. */ html.has-journey .site-header, html.has-journey .preview-flag, html.has-journey .topbar { opacity: clamp(0, calc((var(--p, 0) - 0.24) / 0.22), 1); } /* A keyboard reaches the nav before a scroll does. Following focus into a header that cannot be seen is worse than showing it early, so focus brings it back whatever the scroll position. */ html.has-journey .site-header:focus-within { opacity: 1; } .journey__intro { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; overflow: hidden; pointer-events: none; /* Holds full until 0.24, gone by 0.54, so the mark has the screen to itself before anything starts resolving. */ opacity: clamp(0, calc((0.54 - var(--p, 0)) / 0.30), 1); } /* With the film running the opening is one continuous camera move that ends on the hero, so the intro must NOT dissolve halfway: it plays the whole scrub and hands over at the very end. The last frame matches the hero plate to a mean of 5.2/255, so that handover is a crossfade between two near-identical pictures and reads as nothing at all. Ending on the real plate rather than on the canvas is deliberate: the resting hero is the one whose contrast is measured, and it stays that way. */ html.has-film .journey__intro { opacity: clamp(0, calc((0.90 - var(--p, 0)) / 0.12), 1); } .journey__intro picture { display: contents; } /* display:contents hands the picture's children to the parent's layout, and a is one of those children. In a block box that costs nothing, so this went unnoticed. In this grid it became a second row: two auto rows, the free space split between them by the default stretch, and the mark pushed 115px below the centre place-items asked for. It was landing below its own pocket, the ring of shadow that exists to keep gold legible on lit leaves, which is the part that made this worth chasing rather than a matter of taste. Found by the press target, which is centred by the box model and therefore did not inherit the same mistake: 230 against 345 in one measurement. */ .journey__intro picture > source, .hero picture > source { display: none; } .journey__intro img.journey__plate { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* A slow push in. The leaves come toward you as they dissolve, which is what makes the hero underneath feel like it was always further back. */ transform: scale(calc(1 + var(--p, 0) * 0.14)); } /* The plate keeps its CSS push even once the film is running. Cancelling it looked tidier and was worse: .has-film lands mid scroll, so the plate would snap back from its zoom while the canvas was still fading in over it. It is fully covered by then anyway, so there is nothing to gain and a visible jump to lose. */ /* The camera move. Covers the stage exactly as the plate does, and is painted only once the script has frames to paint, so it never flashes empty over the plate it is standing on. */ .journey__film { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; opacity: 0; transition: opacity 240ms linear; } html.has-film .journey__film { opacity: 1; } /* Gold on foliage is the one contrast case here that no plate solves, because every plate has lit leaf edges somewhere. So the mark carries its own pocket of shadow rather than depending on where the leaves happened to fall. */ .journey__pocket { position: absolute; inset: 0; background: radial-gradient(46% 46% at 50% 50%, rgba(10, 22, 14, 0.82) 0%, rgba(10, 22, 14, 0.58) 52%, rgba(10, 22, 14, 0) 100%); } /* The pocket exists to hold the mark, so it has to leave with the mark. It used to get that for free from the intro dissolving at 0.54; now that the intro stays for the whole move, a shadow with nothing in it would ride the camera all the way down. Same band as the mark, deliberately. */ html.has-film .journey__pocket { opacity: clamp(0, calc((0.42 - var(--p, 0)) / 0.24), 1); } .journey__mark { position: relative; z-index: 2; /* Sized for a full screen rather than for a slot. At 340px it read as a logo dropped on a photograph; the opening is the one moment the brand gets the whole screen, and the mark should take it. */ inline-size: min(36vw, 440px); block-size: auto; /* The mark gets the screen to itself first. It holds at full opacity while it grows, and only once it has grown does it start to go, which is also when the camera starts moving and the chrome arrives. Three things on one beat rather than a logo that is already dissolving before it has been read. Leaves a touch before the plate does, so the screen is foliage alone for a moment rather than cutting from logo straight to copy. */ opacity: clamp(0, calc((0.46 - var(--p, 0)) / 0.22), 1); /* Starts clearly under full size and grows through the whole opaque beat, so the entrance reads as "the mark grows in" rather than a logo that is already at full size and merely dissolves. 0.66 at rest -> ~1.02 by 0.24 (still fully opaque, the moment it lands at full) -> ~1.35 as it fades out by 0.46. */ transform: scale(calc(0.66 + var(--p, 0) * 1.5)); } /* The opening is driven by scrolling and by nothing else — there is no press-to- play control any more (it was removed along with the phone auto-play, so the whole opening has one driver, the scroll). The stage therefore shows no pointer: it is not a click target. While the opening is still scrubbing, the hero's real copy and call to action sit underneath the film at opacity 0 but are still in the layout, and the film above them has pointer-events:none, so a click during the scrub would fall through and could navigate off an invisible link. They are held non-interactive until the hero has settled (.is-done), at which point they fade in and become clickable together. */ html.has-journey .journey:not(.is-done) .hero__copy, html.has-journey .journey:not(.is-done) .hero__figure { pointer-events: none; } /* The copy and the bottle arrive last, and share one band so they move as one thing rather than as two elements that happen to animate. */ .journey .hero__copy, .journey .hero__figure { --r: clamp(0, calc((var(--p, 0) - 0.46) / 0.30), 1); opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 26px)); } /* Later with the film, because the camera is still travelling at 0.46 and copy riding a moving frame reads as a caption on someone else's footage. It starts where the handover above ends rather than under it. The intro is a layer above the hero, so copy that rises while the film is still opaque rises invisibly: the first cut of this had the band at 0.74 and the whole hero appeared in one jump in the last few percent, which is the pop this timing exists to avoid. Finishes at 0.90, not 1.0, and that is the whole point of this change. The opening used to assemble on the very last pixel of the scrub: measured frame by frame, both clips are dead still from about 0.88 on, diff from the last frame under 1/255, yet the bottle only reached full size at 1.0. So the one moment the hero was whole was the moment the section released, and on a phone, which is flicked rather than nudged, you went straight past it. Ending the rise at 0.90 leaves 0.90 to 1.0 as a hold: the finished hero, pinned, while there is still scroll left to rest on it. */ html.has-film .journey .hero__copy, html.has-film .journey .hero__figure { --r: clamp(0, calc((var(--p, 0) - 0.78) / 0.12), 1); } /* The bottle is not a third line of copy, so it stops sharing the copy's move. It comes up from below the frame, slightly small, and reaches full size as it arrives, which reads as the object being set down in the pocket the camera opened rather than being switched on in place. It starts a little before the copy and travels further, so it leads and the words settle around it. The origin is the base of the bottle, not its centre: growing from the centre makes glass inflate, growing from the foot makes it stand up. */ html.has-film .journey .hero__figure { /* Rises 0.76 to 0.90, a touch ahead of the copy, and comes to rest where the camera does. It is the element the owner could not see on a phone, because it finished at 1.0 with no scroll left to hold it. It now finishes at 0.90 and is held, at full size, through the last tenth of the scrub. It still starts behind the intro, which is opaque until 0.78 and gone by 0.90, so it spends its first sliver hidden and then emerges rising as the film clears rather than popping in once it has. */ --r: clamp(0, calc((var(--p, 0) - 0.76) / 0.14), 1); transform-origin: 50% 100%; /* Starts smaller and comes to rest below full size, so the arrival is a real change of scale and the bottle sits in the scene rather than filling it. 0.70 to 0.92, not 0.86 to 1: the travel is more than twice what it was and the resting size leaves the foliage room to be the picture. */ transform: translateY(calc((1 - var(--r)) * 96px)) scale(calc(0.70 + var(--r) * 0.22)); } /* The load-time rise animation would fight the scroll reveal for the same properties, and it has nothing to add here: the journey is the entrance. */ .journey .rise { animation: none; opacity: 1; transform: none; } /* Without JS there is no --p, so every band would sit at its zero and the page would open on foliage with the copy invisible and no way to reveal it. The journey therefore only exists once a script has confirmed it can drive it. Everything above is scoped to that class; this is the state before it. */ /* The negative pull is deliberately NOT reset here. It was at first, and that left the transparent header floating over the bare strip of body background that the padding had opened, with nothing behind its links: measured at 1.53:1 for every pixel of the bar. A transparent header needs the dark photograph underneath it in every state, not only when the opening runs. */ html:not(.has-journey) .journey { block-size: auto; } html:not(.has-journey) .journey__stage { position: static; block-size: auto; } html:not(.has-journey) .journey__intro { display: none; } html:not(.has-journey) .journey .hero { block-size: auto; min-block-size: min(80vh, 780px); } html:not(.has-journey) .journey .hero__copy, html:not(.has-journey) .journey .hero__figure { --r: 1; } /* Reduced motion lands on exactly the same place as no JS: the finished hero, with its measured contrast, and no scroll hijack. The script does not add .has-journey when the query matches, so this needs no rules of its own. */ /* --- Value strip ---------------------------------------------------------- */ .values { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--c-hairline); } .values__item { display: flex; flex-direction: column; align-items: center; padding: var(--s-5) var(--s-4); text-align: center; font-size: var(--t-small); color: var(--c-text); } .values__item + .values__item { border-inline-start: 1px solid var(--c-hairline); } /* The four store reassurances carry the same line-icon language as the product page trust bar: check-circle, delivery, padlock, gift box. */ .values__icon { inline-size: 26px; block-size: 26px; fill: none; stroke: var(--c-primary); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-block-end: var(--s-3); } .values__item strong { display: block; font-weight: var(--fw-medium); margin-block-end: var(--s-1); } .values__item span { color: var(--c-muted-text); } /* Four marks wrap to a 2x2 on a phone. The single-row inline dividers would then land in the wrong places, so the odd cells drop their start border and the second row gains a top border. */ @media (max-width: 720px) { .values { grid-template-columns: 1fr 1fr; } .values__item:nth-child(odd) { border-inline-start: 0; } .values__item:nth-child(n+3) { border-block-start: 1px solid var(--c-hairline); } } /* --- Section head --------------------------------------------------------- */ .section-head { max-inline-size: 62ch; margin-block-end: var(--s-6); } .section-head--center { margin-inline: auto; text-align: center; } .section-head .title { margin-block-end: var(--s-3); } /* --- Scent grid ----------------------------------------------------------- */ .scents { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); } /* A column, so the price rule can be pinned to the bottom. Hook lines differ in length between scents, and with plain blocks a two-line hook pushed that card's price 25px below its neighbours' and broke the row's baseline. */ .scent { display: flex; flex-direction: column; block-size: 100%; } .scent .arch { aspect-ratio: 3 / 3.9; margin-block-end: var(--s-4); } /* The signature interaction: the bottle is pulled up toward the crown of the arch. The brand is called iMagnet. */ @media (prefers-reduced-motion: no-preference) { .scent .arch__bottle { transition: transform 0.55s var(--ease), opacity 0.45s var(--ease); } .scent .arch__box { transition: opacity 0.45s var(--ease); } .scent:hover .arch__bottle, .scent:focus-visible .arch__bottle { transform: translateY(-14px); } } .scent:hover .arch--light { border-color: var(--c-accent); } /* Hovering reveals the box the bottle comes in. Savour and Pour Homme are the same olive at card size, and the box is what separates them: a different colour each, and five of six carry a readable name. It is also the gifting proof, which is this store's commercial angle. This rides the gesture that already lifts the bottle instead of adding a second signature: the bottle is pulled away and what is under it is the box. Two deliberate choices. It is a background rather than an , so a screen reader hears each product once instead of twice. And it lives inside a hover query, so a phone never downloads 221KB of boxes it has no way to reveal. Which is also the limit: on a phone this does nothing at all. */ /* display:none on a touch device, so the box is never even fetched there. Paired with loading="lazy" this keeps 221KB of boxes off a phone that has no way to reveal them. It was first built as a background-image driven by a custom property, which was wrong: a relative url() inside a custom property resolves against the stylesheet consuming the var(), not the document declaring it, so ../assets/ resolved from css/ and pointed at site-preview/assets, which does not exist. An src has no such trap. */ .arch__box { display: none; } @media (hover: hover) and (pointer: fine) { .scent .arch__box { display: block; position: absolute; inset-block-end: 10%; /* Centred with inset-inline + auto margins, never with inset-inline-start:50% plus translate:-50%. That idiom shifts twice in the same direction under RTL and threw the box almost entirely outside the arch, where overflow:hidden ate it. The same trap is documented for .info__bubble further down this file. */ inset-inline: 0; margin-inline: auto; inline-size: 94%; opacity: 0; pointer-events: none; } .scent:hover .arch__box, .scent:focus-visible .arch__box { opacity: 1; } /* :not(:only-child) — the bottle only fades out when there is a box to fade IN behind it. A card whose arch holds the bottle alone (the related-scent strip on the product page, and any live product with a featured image but no gift-box gallery shot) would otherwise hover to an empty arch. */ .scent:hover .arch__bottle:not(:only-child), .scent:focus-visible .arch__bottle:not(:only-child) { opacity: 0; } } .scent__cat { font-size: var(--t-meta); letter-spacing: 0.1em; color: var(--c-muted-text); margin-block-end: var(--s-1); } /* The brand line sits above each scent name, in the brand green rather than the muted gender line, so the card reads brand then product. It is a dedicated line because more brands than MaxVolmer may join the shelf later. */ .scent__brand { font-size: var(--t-meta); font-weight: var(--fw-medium); letter-spacing: 0.14em; color: var(--c-primary); margin-block-end: var(--s-2); } .scent__name { font-size: 1.05rem; color: var(--c-primary); margin-block-end: var(--s-2); } .scent__hook { font-size: var(--t-small); line-height: 1.7; margin-block-end: var(--s-3); text-wrap: pretty; } .scent__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-start: auto; /* pins the price rule to the card's bottom edge */ padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-hairline); } .scent__price { font-size: 1.15rem; font-weight: var(--fw-book); color: var(--c-primary); } .scent__family { font-size: var(--t-meta); color: var(--c-muted-text); } /* --- Story ---------------------------------------------------------------- */ .story__inner { max-inline-size: 60ch; margin-inline: auto; text-align: center; } .story__inner .title { margin-block-end: var(--s-4); } .story__body { color: var(--c-muted-text); font-size: var(--t-subtitle); margin-block-end: var(--s-5); text-wrap: pretty; } /* On the deep green the body flips to the on-dark muted ink. The home page's #story teaser is a dark band and reads the same as before; the story page adds light sections, where the ivory-on-ivory default would be invisible. */ .band-dark .story__body { color: var(--c-on-dark-muted); } .story__inner .btn { display: inline-flex; } /* Story page: tropical foliage rails down both outer edges. iMagnet jungle foliage, colour-matched to the site leaves and rebuilt as a vertically seamless mirror loop (transparent PNGs in ../assets/story-page/). The rails sit ABOVE the flat section colours and BELOW the text, so the leaves spill from the green bands onto the ivory sections as one continuous motif down the scroll. They reach UP behind the transparent fixed header so the foliage begins at the very top of the page, not below the menu. */ .page-story main { position: relative; } .foliage-rail { position: absolute; inset-block-start: calc(-1 * var(--chrome-h, 76px)); /* start at the page top, behind the header */ inset-block-end: 0; inline-size: clamp(72px, 15vw, 280px); /* full opacity at every size, incl. mobile */ z-index: 0; pointer-events: none; background-repeat: repeat-y; background-size: 100% auto; } /* WebP, not the PNG masters. The masters are 806x5376 RGBA at ~4.95 MB EACH, and the rail renders at most 280px wide (56px on a phone), so shipping them made the story page a 10.3 MB cold load on mobile for two decorative tiles: 98% of the page's weight, at a 14x oversample. Re-encoded by scripts/build-rail-webp.mjs, which mirrors the top half rather than resizing the whole tile, because these are exact vertical mirrors and that symmetry is what makes repeat-y seamless. Phones take a 160px cut instead (below). */ .foliage-rail--left { left: 0; background-image: url(../../assets/story-page/foliage-rail-left.webp); background-position: left top; } .foliage-rail--right { right: 0; background-image: url(../../assets/story-page/foliage-rail-right.webp); background-position: right top; } /* The copy stays centred and its width tracks the viewport, so it always sits in the clear centre the two rails frame and never touches a leaf, on mobile or desktop. 58vw leaves ~21vw of clear gutter each side; the leaves reach at most ~12vw in, so there is always daylight between the words and the plants. */ .page-story .container { position: relative; z-index: 1; } .page-story .page-head, .page-story .story__inner { max-inline-size: min(56ch, 58vw); margin-inline: auto; text-align: center; } .page-story .page-head .lede { max-inline-size: min(52ch, 56vw); margin-inline: auto; } /* Bold words inside the running copy carry the full ink (not the muted body colour) so the emphasis actually pops and guides the eye. */ .story__body strong, .lede strong { font-weight: var(--fw-medium); color: var(--c-text); } .band-dark .story__body strong, .band-dark .lede strong { color: var(--c-on-dark); font-weight: var(--fw-medium); } /* On phones the leaves stay at full strength but slim, and the copy narrows to a centred column with clear daylight on both sides. */ @media (max-width: 720px) { /* Owner, 2026-07-28: the leaves should read bigger on a phone. 56px -> 88px. The constraint is not taste, it is the 5568 contrast floor: the rails sit BEHIND the copy (z-index 0 against the container's 1), so a leaf that reaches under a line of text stops that text sitting on flat ivory and the measured worst pixel moves off the background it was cleared against. The copy column therefore narrows in step, from 56vw to 54vw. 88px was tried first and gave the leaves the presence he asked for, but at 50vw the h1 broke into six two-word lines on a 390px phone, which is a worse page than the one that started with thinner leaves. 72px is a visible +29% and costs the copy almost nothing. Re-measured on rendered pixels at 320/360/390/430: every worst pixel still the flat ivory. */ .foliage-rail { inline-size: 72px; } /* A 56px rail has no use for a 560px tile. The phone cut is 160px (still ~2.9x for any DPR) and about a seventh of the bytes, which matters most exactly where the connection is worst. */ .foliage-rail--left { background-image: url(../../assets/story-page/foliage-rail-left-sm.webp); } .foliage-rail--right { background-image: url(../../assets/story-page/foliage-rail-right-sm.webp); } .page-story .page-head, .page-story .story__inner, .page-story .page-head .lede { max-inline-size: 54vw; } } /* The scene-frame bands (home story teaser, shop hero + closing CTA) carry the leaves baked into the background at the section edges. On phones the cover crop pulls those leaves inward, so the copy takes extra side room to keep clear daylight between the words and the plants. */ @media (max-width: 720px) { .band-dark--scene .container, .page-hero .container { padding-inline: 18vw; } } /* On the story page the side rails run up behind the header, so the logo (at the container's right edge) would otherwise sit under the right rail's leaves. Nudge it inward, tied to the rail's own reach (~15vw), capped so it never drifts too far on wide screens where the leaves are already clear. */ .page-story .site-header__logo { margin-inline-start: clamp(0px, 11vw, 130px); } /* --- Gifting -------------------------------------------------------------- */ .gift { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); background: var(--c-surface); border: 1px solid var(--c-hairline); border-radius: var(--radius); padding: clamp(2rem, 5vw, 4rem); } .gift__title { margin-block-end: var(--s-3); } .gift__body { color: var(--c-muted-text); margin-block-end: var(--s-5); } .gift__figure .arch { inline-size: min(280px, 70vw); aspect-ratio: 3 / 3.6; margin-inline: auto; } /* --- Closing + footer ----------------------------------------------------- */ .closing { text-align: center; padding-block: var(--s-7); } .closing .title { margin-block-end: var(--s-5); } /* Every page ends with a dark band directly above this dark footer, and two green blocks in a row read as one undifferentiated field: the closing call to action was being swallowed. A gold hairline is the only separator this palette needs. */ .site-footer { padding-block: var(--s-5) var(--s-4); border-block-start: 1px solid var(--c-line-on-dark); } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); padding-block-end: var(--s-4); } .site-footer__logo img { block-size: 56px; inline-size: auto; margin-block-end: var(--s-2); } .site-footer__tag { font-size: var(--t-small); color: var(--c-on-dark-muted); max-inline-size: 32ch; } /* The social row sits under the brand: line icons that pick up the muted value and warm to gold on hover, the same affordance as the link lists. */ .site-footer__social { display: flex; gap: var(--s-3); list-style: none; padding: 0; margin-block-start: var(--s-3); } .site-footer__social a { display: inline-flex; color: var(--c-on-dark-muted); transition: color .15s ease; } .site-footer__social a:hover { color: var(--c-accent); } .site-footer__social svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* WhatsApp reads clearest as its solid glyph, so it opts out of the stroke treatment the monoline icons share. */ .site-footer__social svg.is-solid { fill: currentColor; stroke: none; } .site-footer h3 { font-size: var(--t-meta); font-weight: var(--fw-medium); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--s-3); } .site-footer li { margin-block-end: var(--s-2); font-size: var(--t-small); } .site-footer li a:hover { color: var(--c-accent); } .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-line-on-dark); font-size: var(--t-meta); color: var(--c-on-dark-muted); } .site-footer__by { display: inline-flex; align-items: center; gap: 0.6ch; } .site-footer__webside { block-size: 15px; inline-size: auto; display: inline-block; vertical-align: middle; opacity: 0.85; } /* --- Shop page ------------------------------------------------------------ */ .page-head { padding-block: var(--s-6) var(--s-5); border-block-end: 1px solid var(--c-hairline); } .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-5); } .filter { padding: 0.5rem 1.25rem; font-size: var(--t-small); border: 1px solid var(--c-hairline); border-radius: 999px; background: transparent; cursor: pointer; transition: all 0.3s var(--ease); } .filter:hover { border-color: var(--c-accent); } /* Two selectors for one state. In the static preview a filter is a