/* ═══════════════════════════════════════════════════════════════════════ apple.css. The Apple visual world for TheWatchInfo. ───────────────────────────────────────────────────────────────────── Loaded AFTER tokens.css and styles.css so it wins on cascade order, and kept in its own file so the whole redesign can be switched off by removing one . That matters here: the palette lives in 1,397 hard-coded hex values across 127 colours, so this file cannot restyle the site by itself. It sets the world; pages are migrated onto it in verified batches. Authority: DESIGN.md. Do not add a value here that is not in that file. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Surface. One flat ground, no washes. ─────────────────────────── */ --bg: #f5f5f7; --bg-elevated: #ffffff; --bg-sunken: #ebebed; --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #a1a1a6; --hairline: rgba(0, 0, 0, 0.08); /* ── Accent. Reserved for the realised-auction mark. ──────────────── */ --accent: #b8924a; --positive: #2f6a5d; --negative: #a04949; --link: #0071e3; /* ── Type. System face first: it ships optical sizing and tracking tables the web fonts do not. ──────────────────────────────────── */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; --font-num: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* ── Space. One 4px ramp. ─────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; /* ── Shape. Four radii, replacing nineteen. ───────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px; /* ── Depth. Soft, for lifted things only. ─────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.10); } /* Dark mode is OPT-IN ONLY, via an explicit data-theme, never via prefers-color-scheme. ───────────────────────────────────────────────────────────────────── This was originally bound to `prefers-color-scheme: dark` and that was a real bug: it flipped --ink to near-white while the surrounding page kept painting its own LIGHT background from the old system, so anyone whose OS was in dark mode saw a near-white price on a near-white card. The site has 124 pages and only a handful are migrated, so no media query can safely assume the whole page follows. Until every surface is Apple-world, the inks stay light-mode unless a theme is explicitly chosen. */ :root[data-theme='dark'] { --bg: #000000; --bg-elevated: #1c1c1e; --bg-sunken: #2c2c2e; --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73; --hairline: rgba(255, 255, 255, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.6), 0 16px 48px rgba(0, 0, 0, 0.5); } /* ═══ Ground ═══════════════════════════════════════════════════════════ The previous design painted 3 to 4 fixed radial gradients on 8 pages. `background-attachment: fixed` forces a full-viewport recomposite on every scroll frame, on the phone this site's user is actually holding. Pages opting into the Apple world carry `.apple` on . ══════════════════════════════════════════════════════════════════════ */ body.apple { background: var(--bg); background-attachment: scroll; color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ═══ Type scale. Tracking is size-specific: one letter-spacing value would be wrong somewhere. Large text tightens, body sits at zero. ══ */ .a-price { font-family: var(--font-num); font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.0; font-variant-numeric: tabular-nums lining-nums; /* Explicit hex, not var(--ink). This is the single most important number on the site and it must never depend on a token that a half-migrated page could redefine underneath it. A light-grey price is worse than no redesign at all. */ color: #1d1d1f; } :root[data-theme='dark'] .a-price { color: #f5f5f7; } .a-display { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; } .a-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .a-heading { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .a-body { font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; } /* The label voice. Replaces 10px all-caps at .2em tracking, which was the previous dominant register and is a hard read at arm's length. */ .a-label { font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); line-height: 1.4; } .a-caption { font-size: 0.75rem; font-weight: 400; color: var(--ink-3); line-height: 1.4; } /* At most one per page. */ .a-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); } /* Every number, everywhere. A price must not jitter as it updates. */ .a-num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; } /* ═══ Surfaces. Flat fill on the ground, no border: separation is the tonal step. The old house card was a tinted gold hairline on every edge, which is precisely the chrome Apple removes. ═══════════════════ */ .a-card { background: var(--bg-elevated); border-radius: var(--r-lg); padding: var(--s-6); border: none; } .a-card-inset { background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--s-4); } .a-lift { box-shadow: var(--shadow); } /* ═══ Chrome as material. Content scrolls beneath, it does not get a fixed strip carved out of the viewport. ═════════════════════════════ */ .a-chrome { background: color-mix(in srgb, var(--bg-elevated) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--hairline); } /* Where floating chrome meets content, fade rather than rule. */ .a-edge-fade { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); } /* ═══ Controls ════════════════════════════════════════════════════════ */ .a-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--font); font-size: 0.9375rem; font-weight: 500; padding: var(--s-3) var(--s-6); border-radius: var(--r-full); border: none; cursor: pointer; background: var(--bg-sunken); color: var(--ink); transition: transform 100ms cubic-bezier(0.32, 0.72, 0, 1), background 150ms ease, opacity 150ms ease; } .a-btn-primary { background: var(--link); color: #fff; } .a-btn:hover { opacity: 0.85; } /* Feedback on press, not on release. Apple's asymmetry: fast in, slow out. */ .a-btn:active { transform: scale(0.97); transition-duration: 60ms; } /* Hover does not exist on touch; press still must. */ @media (hover: none) { .a-btn:hover { opacity: 1; } .a-btn:active { transform: scale(0.97); } } /* Apple's exact number. */ @media (pointer: coarse) { .a-btn, .a-tap { min-height: 44px; min-width: 44px; } } /* ═══ Semantics. Never colour alone: each carries a sign or a word, so the meaning survives the most common form of colour blindness. ══════ */ .a-pos { color: var(--positive); } .a-neg { color: var(--negative); } .a-pos::before { content: '\2191\00a0'; } /* up arrow */ .a-neg::before { content: '\2193\00a0'; } /* down arrow */ .a-pos-plain::before, .a-neg-plain::before { content: none; } /* The one reserved accent: the realised-auction mark. If this colour appears anywhere unrelated to a realised auction price, it is a bug. */ .a-realized { color: var(--accent); } .a-realized-tick { background: var(--accent); } /* ═══ Links ═══════════════════════════════════════════════════════════ */ .a-link { color: var(--link); text-decoration: none; } .a-link:hover { text-decoration: underline; text-underline-offset: 2px; } /* ═══ Accessibility ═══════════════════════════════════════════════════ Reduced motion is a gentler equivalent, not the absence of feedback. */ @media (prefers-reduced-motion: reduce) { .a-btn { transition: background 150ms ease, opacity 150ms ease; } .a-btn:active { transform: none; } } @media (prefers-reduced-transparency: reduce) { .a-chrome { background: var(--bg-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .a-card { border: 1px solid var(--ink-2); } .a-label, .a-caption { color: var(--ink); } } /* Keyboard focus must always be visible, and must clear the element. */ .a-btn:focus-visible, .a-link:focus-visible, .a-tap:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════ SHARED MIGRATION PASS ───────────────────────────────────────────────────────────────────── The same four corrections were being written into each page's own