/* Atelier Watch — product site, page-specific components. The design system itself lives in style.css (synced from the repo root by `npm run design`). Nothing here replaces it; everything sits on top. THE DIRECTION — "The Commission" (approved 2026-09-01). The site is built the way the app is: five stations in the order a watch is commissioned, and one light source for the whole page — the same −135° the watch itself is lit by (AtelierKit's WatchLight.angle). The only colour on the page comes from the dials, exactly as the main site's only colour comes from the app icons. */ :root { /* 1 · THE PAPER. #F5F5F7 is a screen grey; a maker's documentation is printed. Barely a shift in isolation, and it changes the register of the whole page. Still fully monochrome — no hue is introduced. */ --bg: #F3F2EF; --surface: #FFFFFF; --ink: #1C1B1A; --ink-soft: #6C6862; --line: #E2E0DB; --line-strong: #C7C4BD; /* 2 · THE PROSE FACE. Every string in the app is set in `design: .serif`. New York is Apple's system serif — the app's own voice, and still zero webfonts, so DESIGN.md §3 holds. Headings and UI stay on the house sans; only prose changes. */ --font-prose: ui-serif, "New York", Georgia, "Times New Roman", serif; /* 3 · THE LIGHT. One source for the page, the one the watch is lit by. Every shadow here falls to the bottom-right because the light arrives from the top-left. Nothing on this page is lit from anywhere else — that agreement is the whole subject of station II. */ --light: -135deg; } /* The theme colour in must match the paper, or iOS paints the wrong grey behind the status bar on scroll. */ /* --- product chrome ----------------------------------------------------- */ .product-mark { display: inline-flex; align-items: center; gap: 10px; } .product-mark-icon { inline-size: 28px; block-size: 28px; border-radius: 22.5%; } @media (max-width: 519px) { .product-mark-name { display: none; } } /* --- hero --------------------------------------------------------------- */ .product-title { max-inline-size: 20ch; } .hero-plate { /* The margin is small because the render carries 90pt of transparent padding of its own — that space is the watch's shadow, not empty file. */ margin: clamp(16px, 3vw, 32px) auto 0; max-inline-size: 590px; } .hero-plate img { inline-size: 100%; block-size: auto; display: block; } .hero-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-start: 26px; } .hero-status .chip { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 3px; padding: 5px 9px; } .hero-status .price { font-family: var(--font-prose); color: var(--ink-soft); } /* --- the stations ------------------------------------------------------- */ /* Roman numerals, because the dials use them and the app's own assembly stations use them. The numbering is a catalogue order — the sequence a watch is actually specified in — not decoration. */ .station { padding-block: clamp(56px, 10vw, 104px); } .station-head { display: flex; align-items: baseline; gap: 18px; padding-block-end: 14px; margin-block-end: clamp(28px, 4vw, 40px); border-block-end: 1px solid var(--line); } .station-num { font-family: var(--font-prose); font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .station-head h2 { margin: 0; } .station-note { margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } @media (max-width: 700px) { .station-note { display: none; } } .station-lede { font-family: var(--font-prose); font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.35rem); line-height: 1.55; color: var(--ink); max-inline-size: 36em; margin: 0 0 clamp(32px, 5vw, 52px); } .station-lede em { font-style: italic; } /* --- the plate: a dial beside its annotations --------------------------- */ .plate { display: grid; gap: clamp(28px, 5vw, 60px); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .plate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* The dial holds its place while the notes beside it scroll past. */ .plate .dial-figure { position: sticky; top: clamp(24px, 8vh, 72px); } } .dial-figure { margin: 0; position: relative; } .dial-figure img { display: block; inline-size: 100%; max-inline-size: 615px; block-size: auto; margin-inline: auto; /* **No CSS shadow here, deliberately.** The dial already casts one: the app draws it, from the same −135° this page is lit by, and the render carries it. Adding a second shadow put two of them at slightly different angles — the exact collage the watch itself was fixed to stop being. The size is larger than the dial because the render includes the shadow's room: 640pt of watch inside an 820pt frame, so 615 here draws a 480pt dial. */ } /* The sheen: one slow pass at the light angle as the plate arrives — the gesture of turning a watch under a lamp. It is the page's only animation and it runs once per dial. It moves `background-position`, not `transform`. Translating the overlay carried it outside the figure, and an animation that ends off-screen is 80px of horizontal page scroll on a phone — it drags the whole document sideways. Moving the gradient inside a static box looks identical and no geometry leaves the element. */ .dial-figure::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(var(--light), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.30) 50%, rgba(255, 255, 255, 0) 62%); background-size: 280% 280%; background-position: 100% 0%; opacity: 0; pointer-events: none; mix-blend-mode: screen; } .dial-figure.lit::after { animation: sheen 1500ms ease-out 1 both; } @keyframes sheen { 0% { opacity: 0; background-position: 100% 0%; } 35% { opacity: 1; } 100% { opacity: 0; background-position: 0% 100%; } } @media (prefers-reduced-motion: reduce) { .dial-figure.lit::after { animation: none; } } /* --- the annotations ---------------------------------------------------- */ /* Hairline rules and mono micro-labels are both house components. At this density, and carrying real values from the code rather than adjectives, they read as a maker's technical plate. Every number here is measured. */ .callouts { list-style: none; margin: 0; padding: 0; } .callout { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 18px; padding-block: 18px; border-block-start: 1px solid var(--line); } .callout:last-child { border-block-end: 1px solid var(--line); } .callout-value { font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.55; letter-spacing: 0.02em; color: var(--ink); font-variant-numeric: tabular-nums; padding-block-start: 0.3em; } .callout h3 { font-size: 0.98rem; margin: 0 0 4px; } .callout p { font-family: var(--font-prose); font-size: 0.98rem; line-height: 1.62; color: var(--ink-soft); margin: 0; max-inline-size: 46ch; } @media (max-width: 560px) { .callout { grid-template-columns: minmax(0, 1fr); gap: 6px; } .callout-value { padding-block-start: 0; } } /* --- the collection grid (station I) ------------------------------------ */ .collections { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .collection img { inline-size: 100%; block-size: auto; display: block; /* Same reason: the shadow is in the render. See .dial-figure img. */ margin-block-end: 8px; } .collection h3 { font-size: 1.05rem; margin: 0 0 3px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .collection h3 .tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 3px; padding: 2px 6px; } .collection p { font-family: var(--font-prose); font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin: 0; } /* --- the delivery table ------------------------------------------------- */ .tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .tier { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 18px; padding-block: 20px; border-block-start: 1px solid var(--line); } .tiers .tier:last-child { border-block-end: 1px solid var(--line); } .tier-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding-block-start: 0.35em; } .tier h3 { font-size: 1rem; margin: 0 0 4px; } .tier p { font-family: var(--font-prose); font-size: 0.98rem; line-height: 1.62; color: var(--ink-soft); margin: 0; max-inline-size: 54ch; } @media (max-width: 560px) { .tier { grid-template-columns: minmax(0, 1fr); gap: 6px; } .tier-label { padding-block-start: 0; } } /* --- the request row ---------------------------------------------------- */ /* The same invitation the app carries under its collection picker, in the same words. Someone who reads this far has an answer to the question. */ .request { display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin-block-start: clamp(32px, 5vw, 48px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 6px 6px 20px rgba(28, 27, 26, 0.05); text-decoration: none; color: inherit; } .request:hover { border-color: var(--line-strong); } .request h3 { font-size: 1.02rem; margin: 0 0 2px; } .request p { font-family: var(--font-prose); font-size: 0.95rem; color: var(--ink-soft); margin: 0; } .request .go { margin-inline-start: auto; color: var(--ink-soft); } /* --- prose blocks ------------------------------------------------------- */ .note { font-family: var(--font-prose); font-size: 1rem; line-height: 1.65; color: var(--ink-soft); max-inline-size: 60ch; margin-block-start: clamp(28px, 4vw, 40px); } .note strong { color: var(--ink); font-weight: 600; } /* --- the story page ----------------------------------------------------- */ /* A reading page, not a plate page. The product page is scanned; this one is read start to finish, so it drops to a single column at a comfortable measure and lets the prose set the rhythm. Same paper, same serif, same light — only the density changes. */ /* 40em lands the serif at about 60 characters a line — measured, not guessed. At 34 it was 51, which is tight enough to make a long read feel like a column of a newspaper. */ .essay { max-inline-size: 40em; margin-inline: auto; } .essay > * { margin-inline: 0; } .essay p { font-family: var(--font-prose); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem); line-height: 1.72; margin-block: 0 1.15em; } .essay p strong { color: var(--ink); font-weight: 650; } .essay em { font-style: italic; } .essay h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: -0.015em; margin-block: clamp(48px, 7vw, 78px) 18px; padding-block-end: 12px; border-block-end: 1px solid var(--line); } /* The essay's own first line, set larger — the only place on either page where the prose face is used at display size. */ .essay-open { font-family: var(--font-prose); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem) !important; line-height: 1.5 !important; color: var(--ink); margin-block-end: 1.4em !important; } /* A dial dropped into the prose to show what a paragraph is describing. Narrower than the plates, because here it illustrates rather than presents. */ .essay figure { margin: clamp(30px, 5vw, 48px) 0; } .essay figure img { display: block; inline-size: 100%; max-inline-size: 420px; block-size: auto; margin-inline: auto; } .essay figcaption { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink-soft); margin-block-start: 14px; text-align: center; } /* The measured numbers, pulled out of the sentence they came from. */ .measure { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-block: 16px; margin-block: 26px; border-block: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .measure b { color: var(--ink); font-weight: 500; } /* The closing note — the trademark boundary, which is not part of the story but has to travel with it. */ .essay-foot { margin-block-start: clamp(48px, 7vw, 72px); padding-block-start: 22px; border-block-start: 1px solid var(--line); font-family: var(--font-prose); font-size: 0.95rem !important; color: var(--ink-soft); }