/* ============================================================= SYA LOUNGE — Design system ------------------------------------------------------------- 1. Tokens 2. Reset & base 3. Typography 4. Layout primitives 5. Buttons & forms 6. Header / navigation 7. Footer 8. Bag drawer 9. Page sections 10. Motion ============================================================= */ /* ---------- 1. Tokens ---------------------------------------- */ :root { /* Surfaces */ --cream: #f7f4f1; --sand: #efe9e3; --linen: #e6ddd4; /* Ink */ --ink: #2a1810; --ink-soft: #6b5546; --ink-faint: #9b8877; /* Brand */ --cocoa: #4a2c1d; --champagne: #dac0a8; --wine: #4e1319; --gold: #a9814c; --gold-light: #d6b98c; /* Accent — retinted by the colourway rail. Cocoa is the default. */ --accent: #4a2c1d; --accent-soft: #4a2c1d1a; --swatch: #4a2c1d; /* Lines — the piping of the layout */ --hair: rgba(42, 24, 16, 0.14); --hair-gold: rgba(169, 129, 76, 0.42); /* Type */ --display: "Prata", "Times New Roman", serif; --body: "Jost", "Helvetica Neue", Arial, sans-serif; --script: "Cormorant Garamond", Georgia, serif; /* Space & measure */ --gutter: 1.375rem; --max: 1240px; --section: 4.5rem; /* Motion. Three durations, chosen by how far a thing travels, and two curves. Feedback must land inside the cursor's dwell time — a 400ms hover reads as lag, not luxury. Entrances may take their time; the things that answer a click may not. */ --dur-fast: 160ms; /* hover, tint, border — feedback */ --dur-base: 340ms; /* small local moves — scale, underline */ --dur-slow: 600ms; /* things that cross the screen — drawers, reveals */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* arriving: decelerate */ --ease-in: cubic-bezier(0.55, 0, 0.85, 0.35); /* leaving: accelerate */ /* Retained so older rules keep resolving. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } @media (min-width: 700px) { :root { --gutter: 2.5rem; --section: 6.5rem; } } @media (min-width: 1100px) { :root { --gutter: 3.5rem; --section: 8rem; } } /* Colourway retinting. Set data-colorway on . */ [data-colorway="cocoa"] { --accent: #4a2c1d; --accent-soft: rgba(74, 44, 29, 0.1); --swatch: #4a2c1d; } /* The champagne accent is deepened to bronze so small caps stay legible on cream; the swatch itself keeps the true fabric colour. */ [data-colorway="champagne"] { --accent: #8a6438; --accent-soft: rgba(138, 100, 56, 0.12); --swatch: #dac0a8; } [data-colorway="wine"] { --accent: #5b1620; --accent-soft: rgba(91, 22, 32, 0.1); --swatch: #4e1319; } /* ---------- 2. Reset & base ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-weight: 300; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } /* Components set their own display, which silently defeats the hidden attribute. This has to win. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--accent); color: var(--cream); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 200; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--cream); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; } .skip-link:focus { top: 1rem; } /* ---------- 3. Typography ------------------------------------ */ h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .display-xl { font-size: clamp(2.5rem, 8vw, 4.75rem); letter-spacing: 0.02em; } .display-lg { font-size: clamp(1.9rem, 4.6vw, 3.1rem); } .display-md { font-size: clamp(1.45rem, 3vw, 2.05rem); } .display-sm { font-size: clamp(1.15rem, 2vw, 1.35rem); } /* Eyebrow: a tracked cap label sitting on a piping rule. */ .eyebrow { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.75rem; font-family: var(--body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); } .eyebrow::before, .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hair-gold); } .eyebrow--start::before { display: none; } .eyebrow--start { justify-content: flex-start; } .eyebrow--start::after { max-width: 5rem; } .script { font-family: var(--script); font-style: italic; font-weight: 300; letter-spacing: 0.01em; } .lede { font-size: 1.0625rem; color: var(--ink-soft); max-width: 40ch; } .muted { color: var(--ink-soft); } .caps { font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; } /* ---------- 4. Layout primitives ----------------------------- */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 780px; } .section { padding-block: var(--section); } .section--sand { background: var(--sand); } .section--tight { padding-block: calc(var(--section) * 0.62); } .rule { height: 1px; background: var(--hair); border: 0; margin: 0; } .grid { display: grid; gap: 2rem; } @media (min-width: 760px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } } /* A framed image: the piping motif drawn as an inset gold hairline. */ .framed { position: relative; overflow: hidden; background: var(--linen); } .framed::after { content: ""; position: absolute; inset: 0.55rem; border: 1px solid rgba(247, 244, 241, 0.34); pointer-events: none; z-index: 2; } .framed img { width: 100%; height: 100%; object-fit: cover; } .ratio-portrait { aspect-ratio: 3 / 4; } .ratio-tall { aspect-ratio: 2 / 3; } .ratio-square { aspect-ratio: 1 / 1; } /* ---------- 5. Buttons & forms ------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 2.1rem; font-family: var(--body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; text-align: center; border: 1px solid var(--accent); background: var(--accent); color: var(--cream); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .btn:hover { background: var(--ink); border-color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair); } .btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--cream); } .btn--full { width: 100%; } /* "Not yet" rather than faded — the label has to stay readable. */ .btn[disabled] { background: var(--linen); border-color: var(--linen); color: var(--ink-soft); cursor: not-allowed; } /* A quiet text link with a rule that draws in on hover. */ .link { display: inline-block; position: relative; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; padding-bottom: 0.35rem; } .link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform-origin: right; transform: scaleX(1); transition: transform var(--dur-base) var(--ease-out); } .link:hover::after { transform-origin: left; animation: link-redraw var(--dur-base) var(--ease-out); } @keyframes link-redraw { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } .field { margin-bottom: 1.5rem; } .field label { display: block; margin-bottom: 0.55rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field textarea, .field select { width: 100%; padding: 0.95rem 1.05rem; font-family: var(--body); font-size: 0.95rem; font-weight: 300; color: var(--ink); background: var(--cream); border: 1px solid var(--hair); border-radius: 0; transition: border-color var(--dur-fast) var(--ease-out); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; } .field textarea { min-height: 9rem; resize: vertical; } /* ---------- 6. Header / navigation --------------------------- */ .header { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); } .header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.25rem; } @media (min-width: 900px) { .header__bar { height: 5.25rem; } } .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.34em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .wordmark__fleuron { width: 0.85rem; height: 0.85rem; fill: var(--gold); flex: none; } .wordmark__sub { display: block; font-family: var(--body); font-size: 0.6875rem; letter-spacing: 0.34em; color: var(--ink-soft); margin-top: 0.28rem; } .nav { display: none; gap: 2.25rem; } .nav a { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; position: relative; padding-block: 0.4rem; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } @media (min-width: 900px) { .nav { display: flex; } } .header__actions { display: flex; align-items: center; gap: 1.25rem; } .bag-btn { /* Was 66x21 — under the 44px touch minimum. */ display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding-inline: 0.35rem; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .bag-btn__count { display: inline-block; color: var(--accent); } /* The one moment the shopper has committed to something. Worth a beat. */ .bag-btn__count.is-bumped { animation: bag-bump var(--dur-base) var(--ease-out); } @keyframes bag-bump { 0% { transform: none; } 35% { transform: scale(1.32); } 100% { transform: none; } } .menu-btn { /* Was 24x24. The bars stay 24px wide; the target around them grows to meet the thumb. */ display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 44px; height: 44px; padding-left: 20px; } .menu-btn span { display: block; height: 1px; width: 100%; background: var(--ink); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } @media (min-width: 900px) { .menu-btn { display: none; } } .mobile-nav { position: fixed; inset: 0; z-index: 95; background: var(--cream); padding: 6rem var(--gutter) 3rem; transform: translateY(-100%); visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow); } .mobile-nav.is-open { transform: translateY(0); visibility: visible; } .mobile-nav a { display: block; padding: 1.15rem 0; border-bottom: 1px solid var(--hair); font-family: var(--display); font-size: 1.5rem; } .mobile-nav__close { position: absolute; top: 1.4rem; right: var(--gutter); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; } /* ---------- 7. Footer ---------------------------------------- */ .footer { background: var(--ink); color: var(--linen); padding-block: 4rem 0; } .footer a:hover { color: var(--gold-light); } .footer__top { display: grid; gap: 2.75rem; padding-bottom: 3.5rem; } @media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } } .footer .wordmark { color: var(--cream); } .footer h4 { font-family: var(--body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.1rem; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 0.6rem; font-size: 0.9rem; } .footer__note { max-width: 34ch; font-size: 0.9rem; color: rgba(230, 221, 212, 0.72); margin-top: 1.25rem; } .footer__band { border-top: 1px solid rgba(230, 221, 212, 0.16); padding-block: 1.5rem 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(230, 221, 212, 0.62); } /* ---------- 8. Bag drawer ------------------------------------ */ .drawer-scrim { position: fixed; inset: 0; z-index: 98; background: rgba(42, 24, 16, 0.4); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); } .drawer-scrim.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99; width: min(26rem, 100%); display: flex; flex-direction: column; background: var(--cream); border-left: 1px solid var(--hair); transform: translateX(100%); visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow); } .drawer.is-open { transform: translateX(0); visibility: visible; } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem var(--gutter); border-bottom: 1px solid var(--hair); } .drawer__body { flex: 1; overflow-y: auto; padding: 1.6rem var(--gutter); } .drawer__foot { padding: 1.5rem var(--gutter) 2rem; border-top: 1px solid var(--hair); } .bag-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--hair); } .bag-line img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .bag-line__meta { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.6; } .bag-line__title { font-family: var(--display); font-size: 1rem; color: var(--ink); } .bag-line__remove { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; } .bag-line__remove:hover { color: var(--accent); } .drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; } .drawer__total strong { font-family: var(--display); font-size: 1.15rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; } /* Shopify status message. */ .notice { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--accent-soft); border-left: 2px solid var(--accent); font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft); } .notice[hidden] { display: none; } /* ---------- 9. Page sections --------------------------------- */ /* --- Hero --- */ .hero { padding-block: 2.5rem calc(var(--section) * 0.8); overflow: hidden; } /* Keep the swatch rail in view on load — it is how the page is read. */ @media (min-width: 900px) { .hero .switcher__stage { aspect-ratio: auto; height: min(64vh, 600px); } .hero .switcher__stage img { object-position: center top; } } .hero__inner { display: grid; gap: 2.75rem; align-items: center; } @media (min-width: 900px) { .hero__inner { grid-template-columns: 1fr 1.05fr; gap: 4.5rem; } } .hero__lockup { font-family: var(--display); font-size: clamp(3rem, 11vw, 5.5rem); line-height: 0.95; letter-spacing: 0.14em; margin: 0 0 0.35rem; text-indent: 0.14em; } .hero__lockup-sub { display: block; font-family: var(--body); font-size: 0.7rem; font-weight: 300; letter-spacing: 0.58em; text-indent: 0.58em; color: var(--ink-soft); margin-top: 0.9rem; } .hero__tagline { font-family: var(--script); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.35; color: var(--ink); margin: 2rem 0 1.25rem; max-width: 22ch; } .hero__copy { max-width: 34ch; color: var(--ink-soft); margin-bottom: 2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; } /* The colour-switching frame: three stacked images, one visible. */ .switcher { position: relative; } .switcher__stage { position: relative; aspect-ratio: 3 / 4; background: var(--linen); overflow: hidden; } @media (min-width: 900px) { .switcher__stage { aspect-ratio: 4 / 5; } } .switcher__stage::after { content: ""; position: absolute; inset: 0.7rem; border: 1px solid rgba(247, 244, 241, 0.38); pointer-events: none; z-index: 3; } /* The colourway change. Cross-fading both frames at once let the cream background show through the middle of the transition, so two garments and two faces overlapped — a double exposure on the site's signature interaction. Instead the outgoing frame is held fully opaque underneath and cut only after the incoming one has finished arriving, and the incoming frame is drawn across like a bolt of cloth being unrolled rather than dissolved into place. */ .switcher__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; opacity: 0; z-index: 1; /* Hold, then cut — never fade out underneath the incoming frame. */ transition: opacity 0s linear var(--dur-slow); } .switcher__stage img.is-active { opacity: 1; z-index: 2; transition: none; animation: fabric-draw var(--dur-slow) var(--ease-out); } @keyframes fabric-draw { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } /* The swatch rail — the signature element. */ .rail { display: flex; align-items: flex-start; gap: 0.35rem; margin-top: 1.25rem; } .rail__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.85rem 0.3rem 0.75rem; border-top: 1px solid var(--hair); text-align: center; transition: border-color var(--dur-base) var(--ease-out); } .rail__item[aria-pressed="true"] { border-top-color: var(--accent); } .rail__dot { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(42, 24, 16, 0.14); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .rail__item:hover .rail__dot { transform: scale(1.12); } .rail__item[aria-pressed="true"] .rail__dot { box-shadow: inset 0 0 0 1px rgba(42, 24, 16, 0.2), 0 0 0 1px var(--cream), 0 0 0 2px var(--accent); } .rail__name { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); } .rail__item[aria-pressed="true"] .rail__name { color: var(--ink); } /* --- Marquee of virtues --- */ .virtues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.5rem; text-align: center; } @media (min-width: 860px) { .virtues { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } .virtue svg { width: 1.75rem; height: 1.75rem; margin: 0 auto 1rem; stroke: var(--accent); fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-base) var(--ease-out); } .virtue h3 { font-family: var(--body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.5rem; } .virtue p { font-size: 0.875rem; color: var(--ink-soft); max-width: 24ch; margin-inline: auto; } /* --- Construction detail strip --- */ .details-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } @media (min-width: 700px) { .details-strip { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; /* Capped so each column lands near the images' native 334px rather than upscaling them across a full-width grid. */ max-width: 1040px; margin-inline: auto; } } .detail__name { margin: 0.9rem 0 0.4rem; font-family: var(--body); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; } .detail p { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); } /* --- Colourway cards --- */ .card { display: flex; flex-direction: column; } .card__media { position: relative; overflow: hidden; background: var(--linen); } .card__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); } .card:hover .card__media img { transform: scale(1.035); } .card__swatch { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(247, 244, 241, 0.7); } .card__body { padding-top: 1.25rem; } .card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .card__title h3 { font-size: 1.3rem; } .card__price { font-size: 0.8125rem; color: var(--ink-soft); white-space: nowrap; } .card p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1.25rem; } .card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; } .card__actions .btn { flex: 1; min-width: 8.5rem; /* "Shop Vintage Wine" wraps to two lines where the others do not, which left one card's buttons taller than its neighbours'. */ min-height: 3.4rem; padding-inline: 0.85rem; } /* The folded shots are 366px native. Displaying them larger than that is what made the photography read as soft. */ .split .switcher__stage { max-width: 440px; margin-inline: auto; } /* --- Editorial split --- */ .split { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; } .split--wide-left { grid-template-columns: 1.15fr 1fr; } .split__media--last { order: 2; } } /* --- Quiet CTA band --- */ .band { background: var(--ink); color: var(--cream); text-align: center; padding-block: calc(var(--section) * 0.8); } .band .eyebrow { color: rgba(230, 221, 212, 0.7); justify-content: center; } .band .eyebrow::before, .band .eyebrow::after { background: rgba(214, 185, 140, 0.4); max-width: 4.5rem; } .band h2 { margin-bottom: 1.25rem; } .band p { color: rgba(230, 221, 212, 0.78); max-width: 44ch; margin-inline: auto; margin-bottom: 2.25rem; } .band .btn { background: var(--cream); border-color: var(--cream); color: var(--ink); } .band .btn:hover { background: var(--gold-light); border-color: var(--gold-light); } /* --- Page masthead (interior pages) --- */ .masthead { padding-block: 2.5rem 1.75rem; border-bottom: 1px solid var(--hair); } .masthead h1 { margin-bottom: 0.75rem; } .masthead p { max-width: 46ch; color: var(--ink-soft); } .crumbs { /* Was 0.65rem in --ink-faint: 10.4px at 3.1:1, under both the 11px floor and the 4.5:1 contrast minimum. */ font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.5rem; } .crumbs a:hover { color: var(--accent); } /* --- Product detail page --- */ .pdp { display: grid; gap: 2.5rem; padding-block: 2.5rem var(--section); } @media (min-width: 900px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; } .pdp__gallery { position: sticky; top: 6.5rem; } } .pdp__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.6rem; } .pdp__thumbs button { position: relative; overflow: hidden; background: var(--linen); opacity: 0.62; transition: opacity var(--dur-fast) var(--ease-out); } .pdp__thumbs button[aria-pressed="true"], .pdp__thumbs button:hover { opacity: 1; } .pdp__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .pdp__price { font-family: var(--display); font-size: 1.35rem; margin: 0.75rem 0 1.5rem; } .option { margin-bottom: 1.75rem; } .option__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } .option__value { color: var(--ink); } .swatch-row { display: flex; gap: 0.85rem; } .swatch { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 0.35rem; } .swatch__dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(42, 24, 16, 0.14); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .swatch:hover .swatch__dot { transform: scale(1.08); } .swatch[aria-pressed="true"] .swatch__dot { box-shadow: inset 0 0 0 1px rgba(42, 24, 16, 0.2), 0 0 0 2px var(--cream), 0 0 0 3px var(--accent); } .size-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .size { min-width: 3.25rem; padding: 0.7rem 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-align: center; border: 1px solid var(--hair); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .size:hover { border-color: var(--accent); } .size[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--cream); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--hair); } .qty button { width: 2.75rem; height: 2.75rem; font-size: 1rem; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); } .qty button:hover { color: var(--accent); } .qty output { min-width: 2.5rem; text-align: center; font-size: 0.9rem; } .pdp__actions { display: grid; gap: 0.75rem; margin-block: 2rem 1.5rem; } /* Accordion for description / fabric / care */ .acc { border-top: 1px solid var(--hair); } .acc__item { border-bottom: 1px solid var(--hair); } .acc__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.15rem 0; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; text-align: left; } .acc__sign { position: relative; width: 0.7rem; height: 0.7rem; flex: none; } .acc__sign::before, .acc__sign::after { content: ""; position: absolute; background: var(--accent); transition: transform var(--dur-slow) var(--ease-out); } .acc__sign::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); } .acc__sign::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%) scaleY(1); } .acc__trigger[aria-expanded="true"] .acc__sign::after { transform: translateX(-50%) scaleY(0); } /* Collapses on grid-template-rows rather than max-height: it animates to the content's real height, so no JS measurement and no guessed ceiling that clips long copy. */ .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); } .acc__panel.is-open { grid-template-rows: 1fr; } /* The grid item clips its own overflow so the 0fr state can collapse. It must carry no padding of its own: padding on a clipped grid item is what the collapsed track cannot shrink away, and it also skews the max-content contribution the 1fr state is sized from. Spacing below the content is a margin on the last child instead, which the clip removes cleanly when closed. */ .acc__panel-inner { overflow: hidden; min-height: 0; font-size: 0.9rem; color: var(--ink-soft); } .acc__panel-inner > *:last-child { margin-bottom: 1.4rem; } .acc__panel ul { margin: 0; padding: 0; list-style: none; } .acc__panel li { position: relative; padding-left: 1.1rem; margin-bottom: 0.5rem; } .acc__panel li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 1px; background: var(--gold); } .fabric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; padding-block: 1.25rem; border-block: 1px solid var(--hair); } .fabric-row div { text-align: center; } .fabric-row dt { font-family: var(--display); font-size: 1.15rem; margin-bottom: 0.2rem; } .fabric-row dd { margin: 0; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } /* Shopify Buy Button mount point */ .buy-button-mount:empty { display: none; } /* --- About / prose --- */ .prose p { font-size: 1.0625rem; line-height: 1.85; color: var(--ink-soft); max-width: 62ch; } .prose h2 { margin-block: 2.75rem 1rem; } .prose h2:first-child { margin-top: 0; } .pullquote { font-family: var(--script); font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.4; color: var(--ink); max-width: 24ch; margin: 0; padding-left: 1.5rem; border-left: 1px solid var(--hair-gold); } /* --- Contact --- */ .contact-grid { display: grid; gap: 3rem; } @media (min-width: 880px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 4.5rem; } } .contact-list { list-style: none; margin: 0; padding: 0; } .contact-list > div { padding-block: 1.15rem; border-bottom: 1px solid var(--hair); } .contact-list dt { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.35rem; } .contact-list dd { margin: 0; font-size: 0.95rem; } /* --- Policies --- */ .policy-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-bottom: 2.5rem; } .policy h2 { margin-bottom: 0.9rem; } .policy + .policy { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--hair); } /* ---------- 10. Motion --------------------------------------- */ /* Scroll entrances. 600ms, not 900 — long enough to read as considered, short enough that a fast scroller never catches content still arriving. */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } /* Anything already on screen at load has nothing to reveal — showing it late is withholding, not choreography. */ .reveal.is-immediate { transition: none; } /* Children of a revealing group arrive in sequence. Six cards landing together is one event; 70ms apart is a sequence the eye can follow left to right, the way it would read a rail of garments. */ .reveal.is-in > * { animation: reveal-child var(--dur-slow) var(--ease-out) both; } .reveal.is-immediate > * { animation: none; } .reveal.is-in > *:nth-child(2) { animation-delay: 70ms; } .reveal.is-in > *:nth-child(3) { animation-delay: 140ms; } .reveal.is-in > *:nth-child(4) { animation-delay: 210ms; } .reveal.is-in > *:nth-child(5) { animation-delay: 280ms; } .reveal.is-in > *:nth-child(6) { animation-delay: 350ms; } @keyframes reveal-child { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------- 11. The buy moment ------------------------------- */ /* Shown in the bag, above the total. These answer the questions a shopper is actually asking at the moment of commitment: when does it arrive, what if it doesn't fit, what will I actually pay. */ .assurances { list-style: none; margin: 0 0 1.4rem; padding: 0 0 1.3rem; border-bottom: 1px solid var(--hair); } .assurances[hidden] { display: none; } .assurances li { position: relative; padding-left: 1.1rem; margin-bottom: 0.5rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); } .assurances li:last-child { margin-bottom: 0; } .assurances li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.4rem; height: 1px; background: var(--gold); } .drawer__continue { display: block; width: 100%; margin-top: 0.9rem; padding: 0.6rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); } .drawer__continue:hover { color: var(--accent); } /* An undo offered inside a notice. */ .link-inline { font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Size guide --------------------------------------- */ .size-guide-toggle { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out); } .size-guide-toggle:hover { color: var(--accent); } .size-table { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; font-size: 0.85rem; } .size-table th, .size-table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 1px solid var(--hair); font-weight: 400; } .size-table thead th { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .size-table tbody th { font-family: var(--display); font-size: 0.95rem; } .size-note { font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 0.6rem; } /* ---------- 12. Closing ------------------------------------- */ /* The last thing before the footer used to be a full-width dark band with an eyebrow, a heading, a line of copy and a button — the most template-shaped block on the site, sitting in the position the peak-end rule says carries the most weight. This says one thing. */ .closing { padding-block: calc(var(--section) * 0.9); text-align: center; border-top: 1px solid var(--hair-gold); } .closing__line { font-family: var(--script); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.35; color: var(--ink); max-width: 20ch; margin: 0 auto 2.5rem; }