/* ========================================================================== Vireli — styles.css Layout language: full-bleed image tiles, large regular-weight display type, pill buttons, generous whitespace, minimal chrome. Vireli's own palette and typography sit on top of it. The block marked CRITICAL at the top is duplicated inline in the of index.html so the first screen paints without waiting on this request. If you change a rule above the END CRITICAL marker, change it in both places. ========================================================================== */ /* --------------------------------------------------------------- CRITICAL */ :root { --plum: #4B2E45; --plum-deep: #38222F; --bg: #F6F3EF; --bg-2: #FBFAF8; --ink: #232227; --muted: #7C7267; /* brand muted — decorative rules, large text */ --muted-ink: #6B6157; /* darkened from --muted so body copy clears WCAG AA */ --accent: #E8875D; /* terracotta — non-text accents only, used sparingly */ --line: rgba(35, 34, 39, 0.13); --line-soft: rgba(35, 34, 39, 0.07); --edge: 8px; /* gutter between full-bleed tiles */ --pad: 20px; /* side padding for text blocks */ --radius: 16px; --radius-sm: 10px; --maxw: 1360px; --shadow: 0 2px 8px rgba(35, 34, 39, 0.07), 0 18px 44px rgba(35, 34, 39, 0.12); --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --header-h: 62px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :target, #shop, #inside, #faq, #contact { scroll-margin-top: calc(var(--header-h) + 14px); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; color: var(--plum); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } button { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Display scale ----------------------------------------------------------- */ /* The clamp minimums have to survive a very narrow viewport — at 280px a 2.6rem minimum made "reconsidered." wider than its panel. break-word is the backstop: on a long word it is better to wrap than to clip. */ .display { font-size: clamp(2rem, 8.5vw, 5rem); line-height: 0.98; letter-spacing: -0.038em; } .h2 { font-size: clamp(1.6rem, 5.4vw, 3.2rem); letter-spacing: -0.032em; } .h3 { font-size: clamp(1.15rem, 3vw, 1.6rem); letter-spacing: -0.022em; } .display, .h2, .h3, .spec__name { overflow-wrap: break-word; } .eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-ink); margin: 0 0 14px; } .lede { font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--muted-ink); max-width: 52ch; } /* Containers -------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .bleed { width: 100%; padding-inline: var(--edge); } .section { padding: 64px 0; } .section--tight { padding: 40px 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%); z-index: 100; background: var(--plum); color: var(--bg); padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; font-size: 0.875rem; } .skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; } /* Buttons ----------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 30px; border: 1px solid transparent; border-radius: 999px; background: var(--plum); color: var(--bg); font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease); } .pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--plum-deep); } .pill:active { transform: translateY(0); } .pill[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .pill--block { width: 100%; } .pill--light { background: var(--bg-2); color: var(--plum); } .pill--light:hover { background: #fff; } .pill--outline { background: transparent; color: var(--plum); border-color: var(--line); } .pill--outline:hover { background: rgba(75, 46, 69, 0.05); border-color: var(--plum); } /* Announcement ------------------------------------------------------------ */ .announce { position: relative; background: var(--plum); color: var(--bg); overflow: hidden; padding: 8px 0; } .announce__track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .announce.is-paused .announce__track { animation-play-state: paused; } .announce__group { display: flex; align-items: center; flex: none; } .announce__item { display: inline-flex; align-items: center; gap: 8px; padding-inline: 20px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .announce__pause { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(246, 243, 239, 0.16); color: var(--bg); cursor: pointer; opacity: 0.5; transition: opacity 200ms var(--ease), background-color 200ms var(--ease); } .announce__pause:hover, .announce__pause:focus-visible { opacity: 1; background: rgba(246, 243, 239, 0.3); } .announce__pause svg { width: 9px; height: 9px; } .announce__pause:focus-visible { outline-color: var(--bg); } /* Header ------------------------------------------------------------------ */ .header { position: sticky; top: 0; z-index: 40; background: rgba(246, 243, 239, 0.9); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line-soft); } .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--header-h); gap: 12px; } .wordmark { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--plum); } .wordmark__mark { width: 30px; height: 19px; flex: none; } .wordmark__word { font-size: clamp(1.45rem, 4.5vw, 2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; } .nav { grid-column: 1; display: none; gap: 24px; align-items: center; } .nav a { text-decoration: none; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 6px 0; position: relative; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--plum); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease); } .nav a:hover::after { transform: scaleX(1); } .header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; } .icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--plum); transition: background-color 200ms var(--ease); } .icon-btn:hover { background: rgba(75, 46, 69, 0.07); } .icon-btn svg { width: 20px; height: 20px; } .basket-btn { position: relative; } .badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 999px; background: var(--plum); color: var(--bg); font-size: 0.65rem; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .badge[hidden] { display: none; } .badge.is-pop { animation: badge-pop 480ms var(--ease); } @keyframes badge-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 135, 93, 0.6); } 35% { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(232, 135, 93, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 135, 93, 0); } } /* Tiles ------------------------------------------------------------------- */ .tile { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); isolation: isolate; } .tile img { width: 100%; height: 100%; object-fit: cover; } .tile--fade::after { content: ''; position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, rgba(20, 12, 18, 0) 0%, rgba(20, 12, 18, 0.66) 100%); pointer-events: none; } /* Over a studio shot a near-black scrim goes muddy grey, so studio tiles get a plum one instead. It also has to work harder: darken resolves the photo's background to the page colour, so the label now sits on cream rather than on a dark gradient. Measured at 4.0:1 with the old ramp — fine at 1440 where the label is exactly 24px, but it shrinks below 24px under a 1000px viewport and then needs 4.5:1. This ramp holds it near 6.9:1. */ .tile--fade.media--studio::after { inset: 25% 0 0 0; background: linear-gradient(180deg, rgba(75, 46, 69, 0) 0%, rgba(75, 46, 69, 0.55) 50%, rgba(75, 46, 69, 0.95) 100%); } .tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 38px); z-index: 2; } .tile__label { font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; color: #fff; margin: 0; } /* Hero -------------------------------------------------------------------- */ .hero { display: grid; gap: var(--edge); } .hero__panel { position: relative; overflow: hidden; min-height: 62vh; } .hero__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* A scrim under the copy, so the headline stays readable whatever photograph ends up behind it. */ .hero__panel::after { content: ''; position: absolute; inset: 18% 0 0 0; z-index: 1; pointer-events: none; } /* Measured against the actual photograph: a lamp and a bright window sit right behind the headline, and a 0.74 scrim left it at 3.53:1 — passing for large text but far too close for the biggest line on the page. This holds it near 5.4:1 at the worst pixel. */ .hero__panel--dark::after { background: linear-gradient(180deg, rgba(20, 12, 18, 0) 0%, rgba(20, 12, 18, 0.58) 45%, rgba(20, 12, 18, 0.92) 100%); } .hero__panel--light::after { background: linear-gradient(180deg, rgba(246, 243, 239, 0) 0%, rgba(246, 243, 239, 0.95) 72%); } .hero__copy { position: relative; z-index: 2; padding: clamp(24px, 4vw, 52px); display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; } .hero__panel--dark .display, .hero__panel--dark .hero__sub { color: var(--bg); } .hero__sub { font-size: 1rem; max-width: 34ch; margin: 16px 0 26px; color: var(--muted-ink); } .hero__panel--dark .hero__sub { color: rgba(246, 243, 239, 0.86); } .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .hero__price { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-ink); margin: 0 0 10px; } .hero__panel--dark .hero__price { color: rgba(246, 243, 239, 0.72); } /* Studio product shots ---------------------------------------------------- The product photography is shot on pure #FFFFFF, which sits as a visible white box on the warm off-white page. SHIPPED: mix-blend-mode: darken over a flat #F6F3EF container. darken keeps min(photo, backdrop) per channel, so every pure-white background pixel resolves to exactly the page colour — the box does not soften, it ceases to exist. Anything darker than the page colour, which is the whole product, passes through untouched. Also tried and rejected: - multiply on a white container: a no-op against white, so you just get a white card sitting on cream. - a radial alpha mask feathering the edges: still leaves a visible rectangle, and it did nothing at all on the hero, where object-fit: contain plus padding draws the photo well inside the element the mask is sized to. - multiply on a cream container: flattened the white shell into the background and cost the product most of its form. The backdrop MUST stay a flat colour. A gradient wash behind a darken blend re-introduces a seam wherever the wash is brighter than the photo. Specificity is deliberate: .gallery__main and .tile set their own background later in this file, so a bare .media--studio would lose to them. */ .hero__panel.media--studio, .gallery__main.media--studio, .tile.media--studio { background: var(--bg); } .media--studio > img, .media--studio img { mix-blend-mode: darken; } /* The hero's right panel carries both finishes side by side. Both shots are on pure white, so darken over the flat panel colour dissolves their backgrounds entirely and they read as two objects on the page rather than two cards. */ .hero__panel--light { background: var(--bg); } .hero__duo { position: absolute; inset: 5% 4% 32%; z-index: 0; display: flex; align-items: center; justify-content: center; gap: clamp(2px, 1vw, 16px); } .hero__panel .hero__duo img { position: static; inset: auto; width: auto; height: 100%; /* 50% each plus the gap would overrun the row, so leave room for it. */ max-width: calc(50% - clamp(1px, 0.5vw, 8px)); object-fit: contain; mix-blend-mode: darken; } /* Below the 900px split the right panel is a single narrow column, and the copy is much taller than it is on desktop: price, headline, two lines of sub and a button. Absolutely positioning the two product shots behind that copy left them running straight through the headline — measured at 375px, the images ended 143px below the top of the price line, and the panel's scrim is only about half opaque that high up, so the text sat on top of the product. Rather than re-tune the percentage insets (which only holds for one text length at one font size), the duo stops being absolutely positioned here and becomes a normal block above the copy. Overlap is then impossible whatever the copy reflows to. The scrim exists only to protect text sitting over a photograph, so with nothing behind the text it is switched off. */ @media (max-width: 899px) { .hero__panel--light { display: flex; flex-direction: column; } .hero__panel--light .hero__duo { position: static; inset: auto; height: clamp(160px, 30vh, 260px); margin: clamp(18px, 6vw, 30px) clamp(16px, 4vw, 24px) 0; flex: 0 0 auto; } .hero__panel--light .hero__copy { min-height: 0; flex: 1 1 auto; } .hero__panel--light::after { content: none; } } /* The gallery swaps between studio shots and a lifestyle shot; only the studio ones get the blend, and the lifestyle one fills the frame instead. */ .gallery__main:not(.media--studio) img { object-fit: cover; } /* Reveal ------------------------------------------------------------------ */ /* Scroll reveals. Nothing here hides anything on its own. .will-reveal is added by initReveal() in script.js, and only to elements it has measured as being below the fold. So if that script never loads, never runs, or misses an element, the content is simply visible — which is the only acceptable failure mode. An earlier version hid every .reveal up front and relied on JS to un-hide them; opening the page on a #fragment jumped past whole sections that were then never observed, and the middle of the page stayed blank. */ .reveal.will-reveal { opacity: 0; transform: translateY(20px); } .reveal.will-reveal.is-in { opacity: 1; transform: none; transition: opacity 560ms var(--ease), transform 560ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } /* Already scrolled past — show it outright, there is nothing to animate. */ .reveal.will-reveal.is-instant { transition: none; transition-delay: 0s; } /* Basket drawer (hidden state is critical — stops it flashing on load) ----- */ .overlay { position: fixed; inset: 0; z-index: 50; background: rgba(35, 34, 39, 0.45); opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease), visibility 300ms; } .overlay.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--shadow); transform: translateX(100%); visibility: hidden; transition: transform 340ms var(--ease), visibility 340ms; } .drawer.is-open { transform: none; visibility: visible; } body.no-scroll { overflow: hidden; } /* ----------------------------------------------------- END CRITICAL BLOCK */ /* Promo band -------------------------------------------------------------- */ .band { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--plum); color: var(--bg); padding: clamp(40px, 7vw, 92px) clamp(24px, 5vw, 76px); } .band__inner { max-width: min(700px, 100%); position: relative; z-index: 2; } .band .h2 { color: var(--bg); max-width: 16ch; } .band p { color: rgba(246, 243, 239, 0.82); margin: 22px 0 0; max-width: 54ch; font-size: 1rem; } .band .pill { margin-top: 30px; } .tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(246, 243, 239, 0.35); border-radius: 999px; padding: 6px 14px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 243, 239, 0.9); margin-bottom: 24px; } .tag svg { width: 12px; height: 12px; color: var(--accent); } /* Four-up tiles ----------------------------------------------------------- */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--edge); } .tiles .tile { aspect-ratio: 4 / 5; } /* Glyph cards. Each carries a different warm tint so the four read as a set rather than four identical boxes, and the corner index ties them to the numbered spec rows further down the page. */ .tile--icon { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--line-soft); text-decoration: none; transition: transform 340ms var(--ease), box-shadow 340ms var(--ease), border-color 340ms var(--ease); } .tile--icon:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(75, 46, 69, 0.22); } .t-heat { background: linear-gradient(168deg, #FAF1EA 0%, var(--bg-2) 68%); } .t-knead { background: linear-gradient(168deg, #F4EEF3 0%, var(--bg-2) 68%); } .t-light { background: linear-gradient(168deg, #FBF5E8 0%, var(--bg-2) 68%); } .t-vibe { background: linear-gradient(168deg, #EFEDF2 0%, var(--bg-2) 68%); } .tile__num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted-ink); } .tile__glyph { flex: 1; display: grid; place-items: center; color: var(--plum); padding: 12px 0; } .tile__glyph svg { width: min(48%, 116px); height: auto; aspect-ratio: 1 / 1; transition: transform 420ms var(--ease); } .tile--icon:hover .tile__glyph svg { transform: scale(1.06); } .tile--icon .tile__body { position: static; padding: 0; } .tile--icon .tile__label { display: block; color: var(--plum); font-size: clamp(1.1rem, 2.3vw, 1.45rem); letter-spacing: -0.022em; } .tile__sub { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: var(--muted-ink); } /* Inside the Pulse — full-width spec index -------------------------------- No image: the rows carry the section on their own. The dotted leader between the name and the spec is what stops five wide rows reading as a bare list. */ .feature__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 60px); } .feature__lede { color: var(--muted-ink); font-size: clamp(0.98rem, 2vw, 1.1rem); max-width: 48ch; } .spec { border-top: 1px solid var(--line); } .spec__row { display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "icon head" ". spec"; align-items: center; column-gap: 16px; row-gap: 6px; padding: 20px 12px; margin-inline: -12px; border-radius: 12px; border-bottom: 1px solid var(--line-soft); transition: background-color 320ms var(--ease); } .spec__row:hover { background: rgba(75, 46, 69, 0.04); } .spec__icon { grid-area: icon; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(75, 46, 69, 0.07); color: var(--plum); transition: background-color 320ms var(--ease), transform 320ms var(--ease); } .spec__icon svg { width: 24px; height: 24px; } .spec__row:hover .spec__icon { background: rgba(75, 46, 69, 0.13); transform: translateY(-2px); } .spec__head { grid-area: head; display: flex; align-items: baseline; gap: 14px; min-width: 0; } .spec__index { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted-ink); flex: none; transition: color 320ms var(--ease); } .spec__row:hover .spec__index { color: var(--accent); } .spec__name { font-size: clamp(1.35rem, 4.2vw, 2.3rem); letter-spacing: -0.028em; color: var(--plum); } .spec__leader { display: none; } .spec__spec { grid-area: spec; margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted-ink); } /* How it compares --------------------------------------------------------- A real so the row and column headers mean something to a screen reader; the scroll container keeps it off the page's own horizontal scroll on a narrow screen. The Vireli column is tinted rather than bolded alone so the eye lands on it without the table shouting. */ .compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .compare__table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; } .compare__table th, .compare__table td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); } .compare__table thead th { font-weight: 400; color: var(--plum); font-size: 0.95rem; line-height: 1.25; letter-spacing: -0.015em; border-bottom: 1px solid var(--line); padding-top: 0; } .compare__table thead th span { color: var(--muted-ink); font-size: 0.82rem; } .compare__table tbody th { font-weight: 400; color: var(--muted-ink); font-size: 0.82rem; white-space: nowrap; } .compare__table td { color: var(--muted-ink); } .compare__table b { color: var(--plum); font-weight: 500; } /* The column that is ours */ .compare__table .is-us { background: rgba(75, 46, 69, 0.055); } .compare__table thead .is-us { background: rgba(75, 46, 69, 0.09); border-radius: 10px 10px 0 0; font-weight: 500; } .compare__table tbody tr:last-child .is-us { border-radius: 0 0 10px 10px; } .compare__note { margin: 18px 0 0; font-size: 0.76rem; line-height: 1.6; color: var(--muted-ink); max-width: 62ch; } @media (min-width: 900px) { .compare__table { font-size: 0.95rem; } .compare__table th, .compare__table td { padding: 20px 18px; } } /* Editorial pair ---------------------------------------------------------- */ .pair { display: grid; gap: var(--edge); } .pair .tile { aspect-ratio: 4 / 3; } /* Shop / product block ---------------------------------------------------- */ .shop { background: var(--bg-2); border-block: 1px solid var(--line-soft); } .shop__grid { display: grid; gap: 30px; } .gallery { display: grid; gap: 8px; } .gallery__main { order: 1; position: relative; background: var(--bg); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; } .gallery__main img { width: 100%; height: 100%; object-fit: contain; transition: opacity 260ms var(--ease); } .thumbs { order: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } /* `hidden` alone loses to the display:flex above, so say it explicitly. */ .thumbs[hidden] { display: none; } .thumbs::-webkit-scrollbar { display: none; } .thumb { flex: 0 0 auto; width: 66px; height: 66px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; cursor: pointer; transition: border-color 200ms var(--ease), transform 200ms var(--ease); } .thumb img { width: 100%; height: 100%; object-fit: contain; } .thumb:hover { transform: translateY(-2px); } .thumb[aria-current='true'] { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); } .product__title { font-size: clamp(2rem, 5.6vw, 3rem); } .product__price { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 18px; } .product__price strong { font-size: 1.5rem; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; } .product__price span { font-size: 0.85rem; color: var(--muted-ink); } .product__intro { color: var(--muted-ink); font-size: 0.98rem; margin: 0 0 24px; max-width: 46ch; } .field { margin-bottom: 18px; } .field__label { display: flex; align-items: baseline; gap: 8px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-ink); margin-bottom: 10px; } .field__value { letter-spacing: 0; text-transform: none; font-size: 0.9rem; color: var(--ink); } .swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { position: relative; } .swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .swatch label { display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.9rem; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); } .swatch label:hover { border-color: var(--muted); } .swatch input:checked + label { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); } .swatch input:focus-visible + label { outline: 2px solid var(--plum); outline-offset: 3px; } .swatch input:disabled + label { opacity: 0.5; cursor: not-allowed; } .swatch__chip { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); flex: none; } .swatch__chip--white { background: linear-gradient(145deg, #ffffff, #ece7e1); } .swatch__chip--wood { background: linear-gradient(145deg, #c9a173, #8a5f3b 60%, #b98c5e); } .swatch__note { margin: 10px 0 0; font-size: 0.78rem; color: var(--muted-ink); } .swatch__note:empty { display: none; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg); } .qty button { width: 46px; height: 50px; border: 0; background: none; cursor: pointer; color: var(--plum); font-size: 1.1rem; line-height: 1; transition: background-color 180ms var(--ease); } .qty button:hover { background: rgba(75, 46, 69, 0.06); } .qty button:disabled { opacity: 0.3; cursor: not-allowed; } .qty input { width: 40px; height: 50px; border: 0; background: none; text-align: center; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--ink); -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .buy-row { display: grid; gap: 12px; margin-top: 22px; } .buy-row .field { margin-bottom: 0; } .ship-badge { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 12px 16px; border: 1px solid rgba(75, 46, 69, 0.16); border-radius: 999px; background: rgba(75, 46, 69, 0.045); font-size: 0.82rem; line-height: 1.45; color: var(--muted-ink); } .ship-badge svg { width: 22px; height: 22px; flex: none; color: var(--plum); } .ship-badge b { color: var(--plum); font-weight: 500; } .trustline { font-size: 0.8rem; color: var(--muted-ink); margin: 14px 0 0; line-height: 1.55; } .trustline .dot { opacity: 0.45; margin-inline: 0.4em; } /* Payment marks. These are the brands' own assets, so they are rendered at a common HEIGHT with width:auto — every mark keeps its published proportions and nothing is stretched, recoloured or boxed. The gap doubles as clear space around each mark. */ .pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 0; } .pay > li { flex: 0 0 auto; display: flex; align-items: center; } .pay__icon { display: block; height: 24px; width: auto; max-width: none; } .disclaimer { margin-top: 26px; padding: 14px 16px; border: 1px solid var(--line-soft); border-left: 2px solid var(--muted); border-radius: var(--radius-sm); background: var(--bg); font-size: 0.78rem; line-height: 1.6; color: var(--muted-ink); } .noscript-note { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--plum); border-radius: var(--radius-sm); background: var(--bg); font-size: 0.86rem; line-height: 1.6; } .noscript-note a { color: var(--plum); text-underline-offset: 3px; } /* Without JS the swatches, thumbnails and basket have nothing behind them. */ html:not(.js) .field, html:not(.js) .swatch__note, html:not(.js) .buy-row, html:not(.js) .trustline, html:not(.js) .thumbs, html:not(.js) .basket-btn { display: none; } /* FAQ --------------------------------------------------------------------- */ .faq { max-width: 860px; margin-inline: auto; } .faq__item { border-bottom: 1px solid var(--line); } .faq__item:first-child { border-top: 1px solid var(--line); } .faq__q { margin: 0; } .faq__btn { width: 100%; display: flex; align-items: center; gap: 18px; text-align: left; background: none; border: 0; padding: 26px 2px; cursor: pointer; font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 400; letter-spacing: -0.015em; color: var(--plum); line-height: 1.35; } .faq__sign { margin-left: auto; flex: none; width: 22px; height: 22px; position: relative; } .faq__sign::before, .faq__sign::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--plum); border-radius: 2px; transition: transform 300ms var(--ease); } .faq__sign::after { transform: rotate(90deg); } .faq__btn[aria-expanded='true'] .faq__sign::after { transform: rotate(0deg); } /* Without JS every answer stays open and readable. */ .faq__panel { overflow: hidden; transition: height 320ms var(--ease); } .js .faq__panel { height: 0; } .faq__panel-inner { padding: 0 44px 28px 2px; color: var(--muted-ink); font-size: 0.97rem; } /* Reviews placeholder ----------------------------------------------------- */ .reviews-slot { display: none; } /* Drawer internals -------------------------------------------------------- */ .drawer__head { display: flex; align-items: center; gap: 12px; padding: 16px var(--pad); border-bottom: 1px solid var(--line-soft); } .drawer__title { font-size: 1.1rem; margin-right: auto; } .drawer__count { font-size: 0.8rem; color: var(--muted-ink); } .drawer__close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; color: var(--plum); transition: background-color 200ms var(--ease), border-color 200ms var(--ease); } .drawer__close:hover { background: rgba(75, 46, 69, 0.06); border-color: var(--plum); } .drawer__close svg { width: 15px; height: 15px; } .drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--pad) 18px; } .line { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); } .line__media { width: 70px; height: 70px; border-radius: 12px; background: var(--bg-2); overflow: hidden; } .line__media img { width: 100%; height: 100%; object-fit: contain; } .line__name { font-size: 0.95rem; font-weight: 500; color: var(--plum); margin: 0; } .line__style { font-size: 0.8rem; color: var(--muted-ink); margin: 2px 0 10px; } .line__foot { display: flex; align-items: center; gap: 12px; } .line__price { margin-left: auto; font-size: 0.95rem; font-variant-numeric: tabular-nums; } .line__remove { border: 0; background: none; padding: 0; font-size: 0.78rem; color: var(--muted-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .line__remove:hover { color: var(--plum); } .line .qty button { width: 34px; height: 34px; font-size: 1rem; } .line .qty input { width: 34px; height: 34px; font-size: 0.85rem; } .empty { text-align: center; padding: 52px 10px; } .empty svg { width: 40px; height: 40px; margin: 0 auto 16px; color: var(--muted); opacity: 0.8; } .empty p { color: var(--muted-ink); font-size: 0.92rem; margin-bottom: 20px; } .drawer__foot { border-top: 1px solid var(--line-soft); padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom)); background: var(--bg-2); } .subtotal { display: flex; align-items: baseline; justify-content: space-between; font-size: 1rem; margin-bottom: 4px; } .subtotal strong { font-size: 1.2rem; font-weight: 500; font-variant-numeric: tabular-nums; } .ship-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.9rem; margin: 0 0 6px; color: var(--muted-ink); } .ship-row[hidden] { display: none; } .ship-row__value { display: inline-flex; align-items: baseline; gap: 8px; } .ship-row__was { color: #B3261E; text-decoration-thickness: 1.5px; } .ship-row__free { font-weight: 600; color: var(--plum); letter-spacing: 0.02em; } .subtotal-note { font-size: 0.76rem; color: var(--muted-ink); margin: 0 0 14px; } .checkout-trust { display: grid; gap: 5px; margin: 12px 0 14px; font-size: 0.76rem; color: var(--muted-ink); text-align: center; } .checkout-trust .pay { justify-content: center; margin: 0 0 10px; gap: 8px 12px; } .checkout-trust .pay__icon { height: 21px; } .checkout-trust span { display: flex; align-items: center; justify-content: center; gap: 6px; } .checkout-trust svg { width: 13px; height: 13px; color: var(--plum); } .drawer__note { font-size: 0.72rem; color: var(--muted-ink); text-align: center; margin: 12px 0 0; } /* Legal pages ------------------------------------------------------------- Long-form reading, so a narrower measure and a clear heading rhythm. */ .legal { max-width: 760px; } .legal__meta { font-size: 0.8rem; color: var(--muted-ink); margin: 14px 0 0; } .legal h2 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: 44px 0 12px; letter-spacing: -0.02em; } .legal p, .legal li { color: var(--muted-ink); font-size: 0.95rem; line-height: 1.7; } .legal p { margin: 0 0 14px; } .legal ul, .legal ol { margin: 0 0 16px; padding-left: 1.2em; } .legal ul { list-style: disc; } .legal ol { list-style: decimal; } .legal li { margin-bottom: 8px; padding-left: 4px; } .legal b { color: var(--plum); font-weight: 500; } .legal a { color: var(--plum); text-underline-offset: 3px; } .legal__draft { margin: 26px 0 10px; padding: 16px 18px; border: 1px solid rgba(232, 135, 93, 0.5); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: rgba(232, 135, 93, 0.07); } .legal__draft p { margin: 0; font-size: 0.88rem; color: var(--ink); } .legal__table { width: 100%; border-collapse: collapse; margin: 0 0 18px; } .legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem; line-height: 1.6; color: var(--muted-ink); } .legal__table th { font-weight: 400; color: var(--plum); width: 34%; padding-right: 20px; } /* Footer ------------------------------------------------------------------ */ .footer { background: var(--plum); color: var(--bg); padding: 64px 0 32px; } .footer a { color: rgba(246, 243, 239, 0.86); text-decoration: none; } .footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer__top { display: grid; gap: 40px; } .footer__word { font-size: clamp(3rem, 14vw, 8rem); letter-spacing: -0.05em; line-height: 0.85; color: rgba(246, 243, 239, 0.14); margin: 0 0 8px; } .footer h2 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 243, 239, 0.64); /* 0.55 landed at 4.43:1 over plum — under AA */ font-weight: 400; margin-bottom: 16px; } .footer__links { display: grid; gap: 12px; font-size: 0.9rem; } .footer__cols { display: grid; gap: 34px; } .footer__note { font-size: 0.78rem; color: rgba(246, 243, 239, 0.66); line-height: 1.6; max-width: 46ch; } /* Trader identity — required on every page for UK distance selling. */ .footer__business { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(246, 243, 239, 0.16); font-style: normal; font-size: 0.76rem; line-height: 1.75; color: rgba(246, 243, 239, 0.66); max-width: 46ch; } .footer__business strong { font-weight: 500; color: rgba(246, 243, 239, 0.9); } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(246, 243, 239, 0.16); display: grid; gap: 18px; font-size: 0.76rem; color: rgba(246, 243, 239, 0.66); } .footer__bottom .pay { margin: 0; } /* Motion preferences ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal.will-reveal { opacity: 1; transform: none; } .announce__track { animation: none; width: 100%; } .announce__group:nth-child(2) { display: none; } .announce { overflow-x: auto; } .announce__pause { display: none; } } /* Breakpoints ------------------------------------------------------------- */ @media (min-width: 640px) { :root { --pad: 30px; --edge: 10px; } .section { padding: 84px 0; } .pair { grid-template-columns: 1fr 1fr; } .footer__cols { grid-template-columns: repeat(3, 1fr); } .footer__bottom { grid-template-columns: 1fr auto; align-items: center; } .buy-row { grid-template-columns: auto 1fr; align-items: end; } } @media (min-width: 900px) { :root { --header-h: 74px; --pad: 40px; } body { font-size: 17px; } .nav { display: flex; } .hero { grid-template-columns: 1.05fr 1fr; } .hero__panel { min-height: calc(100vh - var(--header-h) - 36px); max-height: 860px; } /* Once the hero splits in two, each headline only has about half the viewport to live in — so the display type can no longer be sized off full vw or it overflows its panel and gets clipped. */ .hero .display { font-size: clamp(2.4rem, 6.2vw, 5.5rem); } .hero .h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); } .tiles { grid-template-columns: repeat(4, 1fr); } .feature__head { grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: end; } .shop__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } .gallery { position: sticky; top: calc(var(--header-h) + 20px); } .section { padding: 104px 0; } .footer__top { grid-template-columns: 1fr 1.2fr; gap: 64px; } } @media (min-width: 1200px) { .gallery { grid-template-columns: 80px 1fr; align-items: start; } .gallery__main { order: 2; } .thumbs { order: 1; flex-direction: column; overflow: visible; } .thumb { width: 80px; height: 80px; } .pay__icon { height: 28px; } } /* ============================================================================= ADVERTORIAL (advertorial.html) An article-style page for paid traffic. Same tokens, same type scale, same reveal animation as the storefront — just set as a single reading column. Nothing here is used by index.html, so it can be deleted with the page. ========================================================================== */ /* The legally-required "Advertisement" label. It must be visible without scrolling, so it sits directly under the header, full width, in the plum band — not in the footer and not as small print. Do not move it. */ .adv-label { background: var(--plum); color: var(--bg); text-align: center; padding: 9px 20px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } /* Header with the wordmark only. This page deliberately has no nav. */ .header--bare .header__inner { grid-template-columns: 1fr auto 1fr; } .header--bare .header__actions { grid-column: 3; } .adv { padding: 40px 0 0; } /* ~65 characters per line at the body size. */ .adv__col { width: 100%; max-width: 65ch; margin-inline: auto; padding-inline: var(--pad); } .adv__head { margin-bottom: 40px; } .adv__title { font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.02; margin-bottom: 18px; } .adv__standfirst { font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.5; font-weight: 500; color: var(--muted-ink); letter-spacing: -0.01em; } .adv__rule { border: 0; border-top: 1px solid var(--line); margin: 36px 0; } .adv__body { font-size: 1.0625rem; line-height: 1.78; color: var(--ink); } .adv__body p { margin: 0 0 1.35em; } .adv__body strong { font-weight: 600; color: var(--plum); } .adv__body h2 { font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.12; margin: 2em 0 0.7em; } .adv__body h2:first-child { margin-top: 0; } /* The four-therapy run-through. A list, not a card grid — the storefront deliberately avoids card grids of small blurbs and so does this. */ .adv__points { margin: 0 0 1.35em; } .adv__points li { margin-bottom: 1.1em; } .adv__points li:last-child { margin-bottom: 0; } .adv__points strong { display: inline; } .adv__figure { margin: 44px 0; } .adv__figure figcaption { margin-top: 12px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); } /* Figure images. The studio shots carry media--studio, whose darken blend needs the flat page colour behind them — so the figure sets no background of its own. Do not give it one. */ .adv__figure img { width: 100%; height: auto; border-radius: var(--radius); } .adv__figure.media--studio img { border-radius: 0; } .adv__cta { margin: 56px 0 8px; text-align: center; } .adv__cta .pill { font-size: 1rem; padding-inline: 38px; } .adv__disclaimer { margin-top: 28px; font-size: 0.85rem; line-height: 1.6; color: var(--muted); font-style: italic; } .adv-footer { border-top: 1px solid var(--line-soft); margin-top: 64px; padding: 40px 0; } .adv-footer address { font-style: normal; font-size: 0.85rem; line-height: 1.7; color: var(--muted); margin-bottom: 18px; } .adv-footer__copy { font-size: 0.8rem; color: var(--muted); margin: 0; } @media (min-width: 700px) { .adv { padding-top: 64px; } .adv__figure { margin: 60px 0; } } /* Inside the Pulse, wide --------------------------------------------------- From 900px the row opens out into four columns and the dotted leader appears between the name and the spec, which is what fills the width. Not lower: at 768px the longest name and the nowrap spec together overran the row by 16px. */ @media (min-width: 900px) { .spec__row { grid-template-columns: 58px auto 1fr auto; grid-template-areas: "icon head leader spec"; column-gap: 24px; padding: 26px 16px; margin-inline: -16px; } .spec__icon { width: 58px; height: 58px; } .spec__icon svg { width: 29px; height: 29px; } .spec__leader { display: block; grid-area: leader; align-self: end; margin-bottom: 0.62em; border-bottom: 1px dotted rgba(35, 34, 39, 0.28); transition: border-color 320ms var(--ease); } .spec__row:hover .spec__leader { border-bottom-color: var(--accent); } .spec__leader { min-width: 28px; } .spec__spec { text-align: right; font-size: 0.92rem; white-space: nowrap; } } @media (min-width: 1100px) { .spec__row { padding: 32px 20px; margin-inline: -20px; column-gap: 32px; } }