/* ═══════════════════════════════════════════════════════════════════════════ Memory Studio Warm paper. Two page backgrounds. One hero moment, then quiet. Motion is opt-in: nothing animates until an inline script in adds `.motion` to , which it only does when the user has not asked for reduced motion. Everything below therefore describes the *final, readable* state first, and the animated state second. Turning motion off cannot hide content, because content never starts hidden. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { /* Two page backgrounds, per the PRD. Everything else is a surface. */ --paper: #efeae1; --paper-deep: #e5dccc; --card: #fdfaf3; --ink: #2b2622; --ink-soft: #4b4238; --muted: #6f6357; --faint: #938475; --line: rgba(43, 38, 34, 0.14); --line-soft: rgba(43, 38, 34, 0.07); --terracotta: #b4593b; --terracotta-dark: #8e4229; --blush: #e3c9c2; /* The drawn box */ --art-1: #e7dbc7; --art-2: #efe5d5; --art-3: #f1e8da; --art-shade: #cbbaa0; --art-line: rgba(70, 58, 45, 0.45); --art-photo: #d6c9b4; --art-photo-2: #c3b39a; --art-ribbon: #b4593b; --art-ribbon-dark: #8e4229; --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --hand: "Caveat", "Segoe Script", cursive; --gutter: clamp(20px, 5vw, 72px); --measure: 62ch; --radius: 6px; --shadow: 0 1px 3px rgba(43, 38, 34, 0.07), 0 12px 32px -18px rgba(43, 38, 34, 0.3); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The nav is sticky, so anything jumped to by id has to clear it. */ scroll-padding-top: 88px; } [id] { scroll-margin-top: 88px; } body { background: var(--paper); color: var(--ink); font: 400 clamp(15px, 0.55vw + 13.6px, 17px) / 1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--terracotta); text-underline-offset: 0.22em; text-decoration-thickness: 1px; } a:hover { color: var(--terracotta-dark); } :focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; } ul, ol { list-style: none; padding: 0; } /* Several components toggle `hidden` on elements whose class sets a display value. Without this the attribute is silently ignored. */ [hidden] { display: none !important; } /* ── Utilities ──────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; top: -100px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); } .skip:focus { top: 12px; } .section-head { max-width: var(--measure); margin-bottom: clamp(28px, 4vw, 48px); } .section-head--center { margin-inline: auto; text-align: center; } .section-h { font: 400 clamp(28px, 3.4vw, 46px) / 1.12 var(--serif); letter-spacing: -0.01em; color: var(--ink); } .section-sub { margin-top: 12px; color: var(--muted); max-width: 56ch; } .section-head--center .section-sub { margin-inline: auto; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border: 1px solid transparent; border-radius: 999px; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .btn--primary { background: var(--terracotta); color: #fff; } .btn--primary:hover { background: var(--terracotta-dark); color: #fff; } .btn--secondary { background: var(--card); border-color: var(--line); color: var(--ink-soft); } .btn--secondary:hover { border-color: var(--terracotta); color: var(--terracotta-dark); } .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); } .btn--quiet { background: transparent; color: var(--muted); padding-inline: 10px; text-transform: none; letter-spacing: 0; font-size: 0.9rem; } .btn--quiet:hover { color: var(--terracotta-dark); } .btn--block { width: 100%; } .motion .btn--primary:hover, .motion .btn--secondary:hover { transform: translateY(-1px); } /* Pills ------------------------------------------------------------------ */ .pill { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.82rem; cursor: pointer; text-decoration: none; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .pill:hover { border-color: var(--faint); color: var(--ink); } .pill--active, .pill[aria-pressed="true"] { background: var(--paper-deep); border-color: transparent; color: var(--ink); } .pill--lg { padding: 11px 20px; font-size: 0.92rem; background: var(--card); } .pills { display: flex; flex-wrap: wrap; gap: 8px; } /* ── Nav ────────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line-soft); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav--transparent { background: transparent; border-bottom-color: transparent; } /* "transparent, thickens on scroll" — set by app.js past the first screen. */ .nav.is-stuck { background: rgba(239, 234, 225, 0.88); backdrop-filter: blur(10px); border-bottom-color: var(--line-soft); box-shadow: 0 1px 20px -12px rgba(43, 38, 34, 0.5); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--gutter); } .nav__mark { font: 400 1.35rem/1 var(--serif); color: var(--ink); text-decoration: none; } .nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); } .nav__link { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; } .nav__link:hover, .nav__link[aria-current] { color: var(--ink); } .nav__cta { padding: 8px 17px; border-radius: 999px; background: var(--paper-deep); color: var(--ink-soft); font-size: 0.74rem; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; } .nav__cta:hover { background: var(--terracotta); color: #fff; } .nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; } .nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after { display: block; width: 16px; height: 1.5px; background: var(--ink); margin-inline: auto; content: ""; } .nav__toggle-bars::before { transform: translateY(-5px); } .nav__toggle-bars::after { transform: translateY(3.5px); } .nav__drawer { display: flex; flex-direction: column; padding: 6px var(--gutter) 20px; background: var(--paper); border-top: 1px solid var(--line-soft); } .nav__drawer a { padding: 13px 0; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line-soft); font: 400 1.15rem/1 var(--serif); } @media (max-width: 760px) { .nav__links { display: none; } .nav__toggle { display: block; } } /* ── 01 + 02 · The unwrap ───────────────────────────────────────────────── */ .unwrap { position: relative; padding: clamp(30px, 6vw, 60px) 0 clamp(50px, 8vw, 90px); } .unwrap__stage { display: grid; place-items: center; padding-inline: var(--gutter); } .unwrap__inner { display: grid; justify-items: center; gap: clamp(10px, 1.8vw, 22px); width: min(880px, 100%); text-align: center; } .unwrap__h { position: relative; font: 400 clamp(30px, 5.4vw, 62px) / 1.1 var(--serif); letter-spacing: -0.015em; color: var(--ink); } .unwrap__h em { font-style: italic; } /* The headline has two states. At rest — no JS, or reduced motion — only the first is shown: it is the line that works whether the box is open or shut, so nothing about the page reads as broken when the swap never happens. */ .unwrap__line { display: block; } .unwrap__line--open { display: none; } .unwrap__art { position: relative; width: min(600px, 100%); } .box { width: 100%; height: auto; overflow: visible; } /* The resting state — no JS, or reduced motion — is the box already opened. Its lid and bow are therefore not part of the picture; leaving them on would draw four things hovering above a box that is still tied shut. */ html:not(.motion) [data-box="unwrap"] .box__lid, html:not(.motion) [data-box="unwrap"] .box__bow { display: none; } .box--small { width: min(260px, 60%); margin-inline: auto; } .unwrap__cue { display: none; flex-direction: column; align-items: center; gap: 9px; color: var(--faint); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .unwrap__cue-arrow { width: 1px; height: 26px; background: linear-gradient(var(--faint), transparent); } .box-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 4px; } .box-links__link { font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; } .box-links__link:hover { color: var(--terracotta-dark); border-color: currentColor; } .unwrap__track { display: none; } /* The scrubbed version. Only reachable with JS *and* motion allowed. */ .motion .unwrap { padding: 0; } .motion .unwrap__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; /* Clears the fixed nav. Without it the headline slides under the blur. */ padding-top: 68px; } /* Inside the pinned stage the drawing is sized off the viewport *height*, not its width — a short laptop window is the case that overflows, and an overflowing sticky stage clips the headline rather than scrolling it. */ .motion .unwrap__art { width: min(680px, 92vw, 54vh); /* The drawing carries headroom for the contents to rise into, which at rest reads as a hole between the headline and the box. Pull it up by roughly that much; by the time anything occupies the space, the headline has gone. */ margin-top: clamp(-110px, -9vh, -46px); } .motion .unwrap__track { display: block; height: 190vh; } .motion .unwrap__h { display: grid; } .motion .unwrap__line { grid-area: 1 / 1; transition: opacity 0.45s var(--ease); } .motion .unwrap__line--open { display: block; opacity: 0; } .motion .unwrap__cue { display: inline-flex; transition: opacity 0.4s var(--ease); } .motion .box-links { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; } .motion .unwrap.is-open .box-links { opacity: 1; transform: none; pointer-events: auto; } /* Ribbon breathes; the bow loosens as the pointer nears it. */ .motion .box__bow-inner { transform-box: fill-box; transform-origin: 50% 62%; animation: breathe 5.5s var(--ease) infinite; transition: transform 0.5s var(--ease); } .motion [data-unwrap] .box__bow-inner { transform: rotate(var(--bow-tilt, 0deg)) scale(var(--bow-scale, 1)); animation-play-state: var(--bow-breathe, running); } @keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.022; } } /* Tap-to-open replaces the scrub where a scrub is a bad idea — a phone, or any coarse pointer. Same drawing, same 0→1, supplied three taps at a time. */ .unwrap__tap { margin-top: 4px; } .motion .unwrap.is-tap { padding: clamp(30px, 6vw, 60px) 0 clamp(50px, 8vw, 90px); } .motion .unwrap.is-tap .unwrap__stage { position: static; height: auto; min-height: 0; } .motion .unwrap.is-tap .unwrap__track { display: none; } /* ── 03 · The three promises ────────────────────────────────────────────── */ .promises { padding: clamp(40px, 6vw, 72px) var(--gutter); background: var(--paper-deep); } .promises__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(24px, 4vw, 56px); max-width: 1080px; margin-inline: auto; } .promises__item { display: grid; gap: 6px; align-content: start; } .promises__value { font: 400 clamp(30px, 3.6vw, 46px) / 1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; } .promises__label { color: var(--muted); font-size: 0.92rem; } /* ── 04 · Catalogue ─────────────────────────────────────────────────────── */ .catalogue { padding: clamp(56px, 9vw, 120px) var(--gutter); max-width: 1280px; margin-inline: auto; } .tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .tabs__tab { padding: 12px 2px 14px; margin-right: 26px; border: 0; background: transparent; color: var(--faint); font-size: 0.78rem; letter-spacing: 0.11em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .tabs__tab:hover { color: var(--ink); } .tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--terracotta); } .pills[data-pills-for] { margin-bottom: clamp(24px, 3vw, 40px); } .catalogue__note { margin-top: 22px; color: var(--faint); font-size: 0.86rem; } .grid__empty { padding: 48px 0; color: var(--muted); max-width: 46ch; } /* Cards ------------------------------------------------------------------ */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: clamp(18px, 2.4vw, 34px); } /* Cards must be the same size as each other, whatever is in them. Two things make them ragged: photographs of different ratios (solved on .card__media), and summaries of different lengths pushing the price line to a different height in each card. The grid row stretches every card to the tallest, then the body pushes its meta row to the bottom, so the prices line up. */ .card { position: relative; display: grid; } .card__link { display: grid; grid-template-rows: auto 1fr; gap: 14px; color: inherit; text-decoration: none; } .card__media { position: relative; display: block; /* The card owns the ratio, not the photograph. Sources are a mix of portrait and landscape and will stay that way; a grid where every row is a different height reads as broken rather than as editorial. */ aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--paper-deep); } /* Scoped to beat `.shot { position: relative }`, which is declared later. */ .card__media .card__shot--back { position: absolute; inset: 0; opacity: 0; } .card__body { display: flex; flex-direction: column; gap: 6px; } .card__name { font: 400 1.28rem/1.25 var(--serif); color: var(--ink); } .card__summary { color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; font-size: 0.82rem; color: var(--faint); } .card__price { color: var(--ink-soft); } /* "hover a card → it tilts a few degrees and the second photo fades in, like turning something over in your hands" */ .motion .card__media, .motion .card__shot--back { transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), box-shadow 0.5s var(--ease); } .motion .card__link:hover .card__media, .motion .card__link:focus-visible .card__media { transform: rotate(-1.6deg) scale(1.014); box-shadow: var(--shadow); } .card__link:hover .card__media .card__shot--back, .card__link:focus-visible .card__media .card__shot--back { opacity: 1; } /* Photograph slots ------------------------------------------------------- */ .shot { position: relative; width: 100%; background: var(--paper-deep); overflow: hidden; } .shot--fill { height: 100%; } .shot__img { width: 100%; height: 100%; object-fit: cover; background-size: cover; } .shot--pending { display: grid; place-items: center; padding: 18px; background: repeating-linear-gradient( 43deg, #e7ded0 0 7px, #efe8dc 7px 14px ); } .shot__grain { position: absolute; inset: 0; background-image: radial-gradient(rgba(70, 58, 45, 0.14) 1px, transparent 1px); background-size: 4px 4px; opacity: 0.5; } .shot__note { position: relative; max-width: 24ch; color: #8a7c6c; font: 400 0.72rem/1.45 ui-monospace, Menlo, monospace; text-align: center; } /* ── 05 · How it's made ─────────────────────────────────────────────────── */ .process { position: relative; background: var(--paper-deep); } .process__pin { padding: clamp(56px, 9vw, 110px) 0; } .process__head { padding-inline: var(--gutter); margin-bottom: clamp(28px, 4vw, 48px); } .process__rail { display: flex; gap: clamp(18px, 2.4vw, 34px); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .step { flex: 0 0 min(340px, 76vw); scroll-snap-align: start; padding: clamp(22px, 2.6vw, 32px); background: var(--card); border-radius: var(--radius); border: 1px solid var(--line-soft); } .step__n { display: block; font: 400 0.74rem/1 ui-monospace, Menlo, monospace; letter-spacing: 0.14em; color: var(--terracotta); margin-bottom: 14px; } .step__title { font: 400 1.55rem/1.15 var(--serif); margin-bottom: 10px; } .step__body { color: var(--muted); font-size: 0.94rem; } .process__track { display: none; } /* Pinned only where there is room for it to be pleasant. */ @media (min-width: 900px) { .motion .process__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* Track length is set against how far the rail actually travels — a long pin that moves the cards 200px reads as the page having jammed. */ .motion .process__track { display: block; height: 120vh; } .motion .process__rail { overflow: visible; will-change: transform; } .motion .step { flex: 0 0 min(420px, 36vw); } } /* ── 06 · Customise ─────────────────────────────────────────────────────── */ .customise { padding: clamp(56px, 9vw, 120px) var(--gutter); max-width: 1180px; margin-inline: auto; } .customise__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; } .customise__preview { padding: clamp(20px, 3vw, 40px); background: var(--paper-deep); border-radius: var(--radius); } .preview { width: 100%; height: auto; --preview-paper: #e6dbcb; --preview-paper-dark: #d6c8b2; --preview-ribbon: #b4593b; --preview-ribbon-dark: #8e4229; } .motion .preview rect, .motion .preview path { transition: fill 0.45s var(--ease); } .preview__text { font: 400 19px/1 var(--hand); fill: var(--muted); } .customise__controls { display: grid; gap: clamp(18px, 2.4vw, 26px); align-content: start; } .customise__controls .btn { justify-self: start; } .swatches { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .swatches__legend { width: 100%; padding: 0; margin-bottom: 10px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .swatch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.88rem; color: var(--muted); } .swatch input { position: absolute; opacity: 0; width: 0; height: 0; } .swatch__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s var(--ease); } .swatch input:checked + .swatch__dot { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--terracotta); } .swatch input:focus-visible + .swatch__dot { outline: 2px solid var(--terracotta); outline-offset: 3px; } .swatch input:checked ~ .swatch__label { color: var(--ink); } /* Fields ----------------------------------------------------------------- */ .field { display: grid; gap: 7px; /* Side-by-side fields where only one carries a note must not stretch the other one's input to match. */ align-content: start; } .field__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .field__input { width: 100%; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); } .field__input:focus-visible { border-color: var(--terracotta); outline: none; box-shadow: 0 0 0 3px rgba(180, 89, 59, 0.16); } .field__input--area { resize: vertical; font-family: inherit; } .field__note { color: var(--faint); font-size: 0.82rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* ── 07 · Stories ───────────────────────────────────────────────────────── */ .stories { padding: clamp(56px, 9vw, 120px) var(--gutter); background: var(--paper-deep); } .stories .section-head { max-width: 1180px; margin-inline: auto; margin-bottom: clamp(28px, 4vw, 48px); } .polaroids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(20px, 3vw, 40px); max-width: 1180px; margin-inline: auto; } .polaroid { display: grid; gap: 12px; padding: 12px 12px 20px; background: #fffdf8; border: 1px solid var(--line-soft); box-shadow: var(--shadow); rotate: var(--tilt, 0deg); } .polaroid__photo .shot { border-radius: 2px; } .polaroid__quote { color: var(--muted); font-size: 0.9rem; line-height: 1.55; } .polaroid__caption { font: 400 1.25rem/1.2 var(--hand); color: var(--terracotta); } /* "polaroids develop from grey as they enter view" */ .motion .polaroid .shot, .motion .polaroid__quote { filter: grayscale(1) contrast(0.86); opacity: 0.55; transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); } .motion .polaroid.is-developed .shot, .motion .polaroid.is-developed .polaroid__quote { filter: none; opacity: 1; } /* ── 08 · Finder ────────────────────────────────────────────────────────── */ .finder { padding: clamp(56px, 9vw, 120px) var(--gutter); } .finder__panel { max-width: 900px; margin-inline: auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .finder__q { font: italic 400 clamp(22px, 2.6vw, 32px) / 1.2 var(--serif); margin-bottom: 20px; } .finder__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; } .finder__lede { font: 400 clamp(18px, 2vw, 24px) / 1.4 var(--serif); color: var(--ink); margin-bottom: 24px; } .finder__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; text-align: left; margin-bottom: 26px; } .finder__card { display: grid; gap: 5px; padding: 16px; background: var(--paper); border-radius: var(--radius); color: inherit; text-decoration: none; } .finder__card:hover { background: var(--paper-deep); } .finder__card-name { font: 400 1.15rem/1.25 var(--serif); color: var(--ink); } .finder__card-meta { font-size: 0.82rem; color: var(--faint); } .finder__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .finder__steps > .finder__step[hidden] { display: none; } /* ── 09 · FAQ ───────────────────────────────────────────────────────────── */ .faq { padding: clamp(56px, 9vw, 120px) var(--gutter); background: var(--paper-deep); } .faq__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 80px); max-width: 1180px; margin-inline: auto; align-items: start; } .faq__delivery { margin-top: 18px; color: var(--muted); } .qa { border-bottom: 1px solid var(--line); } .qa__q { padding: 18px 34px 18px 0; cursor: pointer; list-style: none; position: relative; font: 400 1.15rem/1.4 var(--serif); color: var(--ink); } .qa__q::-webkit-details-marker { display: none; } .qa__q::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; color: var(--faint); font-family: var(--sans); font-size: 1.1rem; } .qa[open] .qa__q::after { content: "–"; } .qa__a { padding-bottom: 20px; color: var(--muted); max-width: 58ch; } /* ── 10 · Close ─────────────────────────────────────────────────────────── */ .close { display: grid; justify-items: center; gap: 18px; padding: clamp(60px, 10vw, 140px) var(--gutter); text-align: center; } .close__art { width: min(300px, 62%); margin-bottom: 6px; } .close__h { font: italic 400 clamp(30px, 4.4vw, 54px) / 1.1 var(--serif); } .close__sub { max-width: 44ch; color: var(--muted); } .close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } /* ── Footer + mobile bar ────────────────────────────────────────────────── */ .footer { padding: clamp(48px, 6vw, 76px) var(--gutter) 34px; background: var(--paper-deep); border-top: 1px solid var(--line-soft); } .footer__inner { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); max-width: 1180px; margin-inline: auto; } .footer__mark { font: 400 1.5rem/1 var(--serif); margin-bottom: 12px; } .footer__line { color: var(--muted); font-size: 0.9rem; max-width: 34ch; } .footer__col { display: grid; gap: 9px; align-content: start; } .footer__h { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); font-weight: 400; margin-bottom: 4px; } .footer__col a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; } .footer__col a:hover { color: var(--terracotta-dark); } .footer__fine { max-width: 1180px; margin: clamp(32px, 4vw, 56px) auto 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.8rem; } /* "WhatsApp button sticks to the bottom edge after section 04" */ .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(239, 234, 225, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line-soft); } @media (min-width: 761px) { .mobile-bar { display: none; } } .motion .mobile-bar { transform: translateY(100%); transition: transform 0.35s var(--ease); } .motion .mobile-bar.is-shown { transform: none; } /* ── Interior pages ─────────────────────────────────────────────────────── */ .page-head { padding: clamp(40px, 7vw, 92px) var(--gutter) clamp(24px, 3vw, 40px); max-width: 1280px; margin-inline: auto; } .page-head--narrow { max-width: 820px; } .page-head__h { font: 400 clamp(34px, 5vw, 60px) / 1.08 var(--serif); letter-spacing: -0.015em; } .page-head__sub { margin-top: 14px; color: var(--muted); max-width: 54ch; } .crumbs { display: flex; gap: 8px; margin-bottom: 16px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .crumbs a { text-decoration: none; } .cat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(14px, 2vw, 24px); padding: 0 var(--gutter) clamp(20px, 3vw, 36px); max-width: 1280px; margin-inline: auto; } .cat-strip__item { display: grid; gap: 8px; align-content: start; padding: clamp(18px, 2.2vw, 26px); background: var(--paper-deep); border-radius: var(--radius); color: inherit; text-decoration: none; } .cat-strip__item:hover { background: #ded4c2; } .cat-strip__h { font: 400 1.4rem/1.15 var(--serif); } .cat-strip__blurb { color: var(--muted); font-size: 0.88rem; } .cat-strip__count { color: var(--faint); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .occasion-list { display: grid; gap: 2px; max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); } .occasion-list__link { display: grid; gap: 8px; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; } .occasion-list__h { font: 400 clamp(24px, 3vw, 34px) / 1.15 var(--serif); transition: color 0.2s var(--ease); } .occasion-list__link:hover .occasion-list__h { color: var(--terracotta-dark); } .occasion-list__blurb { color: var(--muted); max-width: 62ch; } .occasion-list__count { color: var(--faint); font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; } .occasion__picks, .occasion__rest, .occasion__who, .product__related { padding: clamp(32px, 5vw, 64px) var(--gutter); max-width: 1280px; margin-inline: auto; } .occasion__who .pills { margin-top: 18px; } .pills--static { display: flex; flex-wrap: wrap; gap: 9px; } /* Product page ----------------------------------------------------------- */ .product { padding-top: clamp(28px, 4vw, 48px); } .product .crumbs { padding-inline: var(--gutter); max-width: 1280px; margin-inline: auto; } .product__top { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 72px); padding: 0 var(--gutter); max-width: 1280px; margin-inline: auto; align-items: start; } .product__gallery { display: grid; gap: 12px; } .product__hero { border-radius: var(--radius); } /* auto-fill, not auto-fit: a product with one extra photograph should get one thumbnail, not one thumbnail stretched across the whole row. */ .product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .product__thumbs .shot { border-radius: var(--radius); } .product__info { display: grid; gap: 20px; align-content: start; position: sticky; top: 96px; } .product__name { font: 400 clamp(32px, 4vw, 50px) / 1.08 var(--serif); letter-spacing: -0.015em; } .product__summary { color: var(--muted); font-size: 1.05rem; } .product__facts { display: grid; gap: 12px; padding: 20px 0; border-block: 1px solid var(--line); } .fact { display: grid; grid-template-columns: 10rem 1fr; gap: 12px; align-items: baseline; } .fact dt { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .fact dd { color: var(--ink-soft); } .product__pricing-note { color: var(--faint); font-size: 0.88rem; max-width: 46ch; } .product__actions { display: flex; flex-wrap: wrap; gap: 10px; } .product__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 4vw, 64px); padding: clamp(48px, 7vw, 96px) var(--gutter) 0; max-width: 1280px; margin-inline: auto; } .product__section { display: grid; gap: 14px; align-content: start; } .product__h { font: 400 1.5rem/1.2 var(--serif); } .product__story { color: var(--muted); max-width: 54ch; } .ticks { display: grid; gap: 10px; } .ticks li { position: relative; padding-left: 22px; color: var(--muted); } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 1.5px; background: var(--terracotta); } .options { display: grid; gap: 16px; } .option { display: grid; gap: 7px; } .option__label { color: var(--ink-soft); } .option__swatches { display: flex; gap: 7px; } .option__swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--line); } .option__note { color: var(--faint); font-size: 0.85rem; } .product__custom-note { color: var(--faint); font-size: 0.88rem; max-width: 50ch; } /* Prose ------------------------------------------------------------------ */ .prose { max-width: 68ch; margin-inline: auto; padding: 0 var(--gutter) clamp(40px, 6vw, 80px); color: var(--ink-soft); } .prose p + p { margin-top: 1.1em; } .prose__lede { font: 400 clamp(19px, 1.9vw, 23px) / 1.55 var(--serif); color: var(--ink); margin-bottom: 1.2em; } .prose__h { font: 400 clamp(22px, 2.4vw, 29px) / 1.2 var(--serif); color: var(--ink); margin: 2em 0 0.6em; } .prose__sign { margin-top: 2em; font: 400 1.7rem/1.2 var(--hand); color: var(--terracotta); } /* Enquiry ---------------------------------------------------------------- */ /* Line the page heading up with the form below it, not with the narrower prose measure this class is normally used for. */ .page-enquire .page-head--narrow { max-width: 1080px; } .enquire { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 72px); max-width: 1080px; margin-inline: auto; padding: 0 var(--gutter) clamp(48px, 7vw, 96px); align-items: start; } .enquire__form { display: grid; gap: 20px; } .enquire__how { border: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; } .enquire__actions { display: flex; flex-wrap: wrap; gap: 10px; } .enquire__aside { padding: clamp(22px, 3vw, 34px); background: var(--paper-deep); border-radius: var(--radius); display: grid; gap: 14px; align-content: start; } .enquire__art { margin-bottom: 4px; } .enquire__aside-h { font: 400 1.4rem/1.2 var(--serif); } .enquire__aside-p { color: var(--muted); font-size: 0.92rem; } .enquire__aside-p--fine { font-size: 0.84rem; color: var(--faint); } .enquire__links { display: grid; gap: 8px; } /* Honeypot. Off-screen rather than display:none, which some bots skip. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .enquire__sent { padding: 11px 14px; border-radius: var(--radius); background: var(--paper-deep); color: var(--ink-soft); font-size: 0.92rem; } /* ── Reveals ──────────────────────────────────────────────────────────────── Small, cheap and everywhere: content arrives, it does not announce itself. Anything marked for reveal is fully visible if JS never runs. */ .motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .motion [data-reveal].is-in { opacity: 1; transform: none; } /* ── Narrow screens ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { .customise__grid, .faq__inner, .enquire, .product__top { grid-template-columns: 1fr; } .product__info { position: static; } .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { /* A wrapped tab row leaves the active underline stranded above the rule. One scrolling line instead — the wireframe's "sticky pill row". */ .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs__tab { flex: none; margin-right: 20px; } } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } /* Two per row: 25 pieces at one card per screen is a very long catalogue. */ .grid { grid-template-columns: 1fr 1fr; gap: 14px; } .card__name { font-size: 1.1rem; } .card__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; } .card__lead { display: none; } .footer__inner { grid-template-columns: 1fr; } .fact { grid-template-columns: 1fr; gap: 2px; } .close__actions .btn, .product__actions .btn { flex: 1 1 100%; } } /* Room for the pinned WhatsApp bar once it is showing. */ body.has-mobile-bar { padding-bottom: 74px; } @media (min-width: 761px) { body.has-mobile-bar { padding-bottom: 0; } } /* ── Reduced motion ───────────────────────────────────────────────────────── Not a fallback — the same layout, arrived at without transforms. The .motion class is never added in the first place, so the scrubbed sections render in their resting (open) state. This block catches anything CSS-only. */ @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; } }