/* ══════════════════════════════════════════════════════════════════════════════════════════════ casepeat.com/epk - Apple-design refinements ADDITIVE. Loads after epk.css, so removing this tag and the script before reverts the page exactly. Source: emilkowalski/skills -> skills/apple-design/SKILL.md (MIT). ⚠️ WHAT THIS DELIBERATELY DOES NOT DO The main sites got a typography block (size-specific tracking and leading). The EPK does NOT, and must not: it already carries **18 hand-set letter-spacing declarations**, including `-.045em` on `.list-panel h3 / .release-heading` and values from `.07em` to `.18em` on the small-caps labels. A generic `h1/h2/h3 { letter-spacing }` rule would silently flatten every one of those deliberate choices. Measured before writing this file - that is the whole reason the block is absent rather than merely unused. It also leaves the PDF alone. The press kit renders from a SEPARATE page, /epk/print/?lang=.., with its own print.css (tools/build_pdfs.py:257), so nothing here reaches it - and everything below is @media screen anyway, because a pressed state has no meaning on paper. ══════════════════════════════════════════════════════════════════════════════════════════════ */ @media screen { /* ── §1 RESPONSE - kill latency ──────────────────────────────────────────────────────────── Measured on this page: 28 clickable elements, and epk.css carries exactly TWO transitions, so nothing acknowledges a press at all today. Targets are matched by ROLE rather than by class name - the main sites shipped a guessed list first and missed 14 of 24 elements including their own navigation, which is a mistake worth not repeating here. Real targets measured at 375px: button 169x48, role-card 347x251, lang-button 40x27, skip-link 144x39. Only `.brand` (112x17) falls under the 24px floor, correctly - it is a wordmark, not a control. */ .epk-pressable { transition: transform 100ms ease-out, filter 100ms ease-out; -webkit-tap-highlight-color: transparent; } /* CORRECTED 2026-09-08. This block previously claimed the EPK was a LIGHT surface and darkened on press. That premise was wrong: epk/index.html:7 sets `color-scheme: dark` and :38-41 set `--bg: #151515`, `--surface: #181817`, `--ink: #f5f5f2`. The EPK is DARK, on the same #151515 as the other two sites. brightness(0.94) on #151515 lands on #141414 - a change of one step per channel, which is invisible, so the press feedback added here never actually rendered. Brightening is the only direction a near-black surface can show, as on the PIF site. */ .epk-pressed { transform: scale(0.96); filter: brightness(1.18) saturate(1.05); } /* Percentages read larger on a large surface, so scale the effect to the target. */ .role-card.epk-pressed, .list-panel.epk-pressed, .contact-channel.epk-pressed { transform: scale(0.988); filter: brightness(1.09); } /* A fingertip covers a small control, so on touch the surface tints rather than shrinks. Tint direction corrected with the block above: a black wash is invisible on #151515. */ @media (hover: none) { .epk-pressed { transform: none; filter: brightness(1.14); box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.07); } .role-card.epk-pressed, .list-panel.epk-pressed, .contact-channel.epk-pressed { transform: scale(0.99); } } /* ── §14 REDUCED MOTION & ACCESSIBILITY ──────────────────────────────────────────────────── Measured: this page answers prefers-reduced-motion, prefers-contrast and prefers-reduced-transparency in ZERO places. For a press kit that is worth fixing - it is the page a promoter or a journalist opens once, on whatever device and settings they have. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-transparency: reduce) { /* Three elements on this page use backdrop-filter. Someone who asked the OS to stop rendering translucency cannot read them. */ [style*="backdrop-filter"], .glass, .sticky-header, .epk-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } @media (prefers-contrast: more) { .role-card, .list-panel, .contact-channel, button, .header-pdf { /* Was rgba(0,0,0,0.55), from the same wrong light-surface premise. Composited on #151515 that computes to 1.11:1 - LOWER than the 1.39:1 default `--line` it replaced, so the rule actively reduced contrast for the one group that asked for more of it. rgba(255,255,255,0.55) composites to #969696 for 6.30:1, clearing the 3:1 of 1.4.11. */ border: 1px solid rgba(255, 255, 255, 0.55) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } a { text-decoration-thickness: 2px; } } /* ── §7 SPATIAL CONSISTENCY - keep the page's own curve ──────────────────────────────────── epk.css already moves on `cubic-bezier(.2, .7, .2, 1)`. Anything added here uses that same curve rather than introducing a second motion vocabulary on one page. */ .role-card, .contact-channel { transition: transform .7s cubic-bezier(.2, .7, .2, 1), border-color .2s, filter 100ms ease-out; } /* ── SCROLL REVEAL ──────────────────────────────────────────────────────────────────────── Fail-open by construction: the hiding rule needs `.epk-reveal-on`, which the script adds only once its observer is live, and a sweep reveals anything on screen regardless. A broken or blocked script therefore leaves a fully readable press kit rather than a blank one. */ .epk-reveal-on .epk-reveal { opacity: 0; transform: translateY(16px); transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .epk-reveal-on .epk-reveal.is-in { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .epk-reveal-on .epk-reveal, .epk-reveal-on .epk-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; } } }