` — flex column, vertically centred. `.kick` then ``. - `.mail` — `all:unset`; contains visible `.t` (`aria-hidden`) and `.sr` "Copy email address hi@ferro.work". `aria-describedby="hint"`. - `#hint` sr: "Copies the address to your clipboard". `#live` sr `aria-live="assertive"`. - `

` — four cells. Copyable items are ``. - `.tick` — `aria-hidden`, inner flex row duplicated so the 38s loop is gapless. Each item has a 14px diamond `::after` (rotated 45° square). - `.chip` — `aria-hidden`, not in the tab order. ## Tokens ```css :root { /* colour — safety-orange field, near-black ink, cream flash */ --bg: #ff4f1a; /* page */ --ink: #0d0d0d; /* type, rules, ticker, chip */ --paper: #f2efe6; /* flash type, copied address */ --line: rgba(13, 13, 13, .9); /* 2px rules */ --ink-2: #3a1a0e; /* declared; body colour is --ink */ /* type */ --display: "Anton", Impact, sans-serif; --mono: "Space Mono", ui-monospace, monospace; /* layout */ --pad: 40px; --rule: 2px; --mail-fs: 200px; /* base; JS may raise to 260px cap */ --tick-h: 52px; /* motion */ --t-micro: 140ms; --t-wipe: 420ms; --t-scramble-out: 720ms; --t-hold: 1600ms; --t-scramble-in: 640ms; --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --roll: 38s; } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Case | |------------------|------------|-----:|-------:|------------:|---------:|-----------| | Address / copied | Anton | 200px (fit) | 400 | 0.86 | −0.01em | UPPERCASE | | Ticker | Anton | 28px | 400 | 1 | +0.02em | UPPERCASE | | Body / meta | Space Mono | 13px | 400 | 1.5 | 0 | sentence | | Top labels | Space Mono | 13px | 400/700| 1.5 | +0.04em | UPPERCASE | | Kick | Space Mono | 13px | 700/400| 1.5 | +0.04em | UPPERCASE | | Grid headings | Space Mono | 12px | 700 | 1 | +0.06em | UPPERCASE | | Chip | Space Mono | 12px | 700 | 1 | +0.06em | UPPERCASE | | Grid links | Space Mono | 13px | 400 | 1.5 | 0 | as written| Kick right label is weight 400; left is 700. Top cells: `` 700, second line 400. ## Motion | Element | Trigger | Property | From → To | Duration | Easing | Notes | |----------------------|----------------|--------------------------|-----------------------------------|---------:|-------------|-------| | Address underline | hover / focus | transform scaleX | 0 → 1 | 420ms | `--ease-out`| origin left; 14px tall at bottom 6px | | Chip | pointermove | opacity, transform | 0, scale .6 → 1, translate(14,14) | 140ms / 200ms | `--ease` / `--ease-out` | `left/top` = clientX/Y | | Body flash | copy success | background, color | orange/ink ↔ ink/paper | 140ms | `--ease` | also invert rule colours | | Glyph scramble | copy / revert | textContent per char | random glyphs → target | 720ms / 640ms | — | refresh ≥48ms; see notes | | Link hover | hover | background, color | inherit → ink on `--bg` | instant | — | flash invert: paper on ink | | Ticker | load, loop | translateX | 0 → −50% | 38s | linear | infinite; content duplicated | | Link label | data-copy click| textContent | original → Copied → original | 1400ms | — | | Scramble: for target string of length `n` and duration `dur`, char `i` locks at `at[i] = (i/n)*dur*0.7 + random()*dur*0.3`. Before `at[i]*0.4` show the previous character if it exists; otherwise pick from `#%&*+=/\\<>[]{}?!0123456789ABCDEFGHJKLMNPQRSTUVWXYZ`. Spaces lock immediately. Reduced motion: set `textContent` to the target and skip the loop. ## States - **Default:** orange page, black type, chip opacity 0, underline `scaleX(0)`. - **Address hover:** chip `.on`, underline full, `cursor: none`. - **Address focus-visible:** 3px ink outline, 6px offset; underline also wipes in. - **Copied / flash:** page black, type cream, rules cream, ticker orange with black diamonds. Chip: background `--paper`, colour `--ink`. Address colour `--paper`. - **Busy:** a second click during the 1600ms hold clears the timeout and runs copy again; `busy` stays true until the return scramble finishes. - **Copy failed:** live region "Copy failed. The address is hi@ferro.work"; scramble target stays `HI@FERRO.WORK` (do not show COPIED TO CLIPBOARD). - **Grid link copied:** text "Copied" or "Copy failed" for 1400ms. - **Grid link hover:** background `--ink`, colour `--bg`; 2px underline is `border-bottom: 2px solid currentColor`. - **No hover (touch):** `.mail { cursor: pointer }`, chip `display: none`. ## Accessibility - Address is a real `

`. Visible Anton span is `aria-hidden`; an `.sr` child names the action. `aria-describedby` points at the hint. - Live region is `aria-live="assertive"` and visually clipped (1×1). - Grid copy controls are links with `href="#"`; `preventDefault` on click. Studio block has no copy action. - Keyboard: Tab hits the address button then the three copy links. Enter/Space activates copy (native button). Focus ring 3px on the address, 2px on grid links. - Chip is pointer-only decoration (`aria-hidden`, `pointer-events: none`). - Contrast: black on `#FF4F1A` is well above 4.5:1 for 13px mono; cream on black during flash likewise. Anton at 200px is display type. - Hit target: the address button includes 14px + 26px vertical padding; grid links are inline but sit in padded cells. ## Responsive rules - ≥ 1280: as specified. Address fits via the probe; do not wrap. - 1024–1279: keep four columns; the probe will drop the Anton size below 200px as needed (floor is whatever `min(260, 200 * width / probe)` yields). - 768–1023: top and grid become 2×2; ticker still 52px. Address `white-space: nowrap` remains — shrink the font, never wrap. - < 640: single column meta; `--pad: 20px`. Hide the ticker or let it clip. Chip already hidden on coarse pointers. - Reduced motion as above. Do not disable copy. ## Acceptance checklist - [ ] Display string is `HI@FERRO.WORK` in Anton, one line, fitted so it never overflows the content width. - [ ] Click copies `hi@ferro.work` (lowercase) and announces success or the spoken fallback address. - [ ] Successful copy flashes the page to black/cream and scrambles to `COPIED TO CLIPBOARD` in 720ms, holds 1600ms, scrambles back in 640ms. - [ ] Hovering the address hides the system cursor and shows a "Copy ↗" pill that tracks the pointer. - [ ] A 14px underline wipes in over 420ms with `cubic-bezier(.16,1,.3,1)`. - [ ] Phone, press@ and jobs@ each copy their `data-copy` value and briefly read "Copied". - [ ] Lisbon clock uses `Europe/Lisbon` and updates at least every 30s. - [ ] Ticker loops in 38s; content is duplicated so the join is invisible. - [ ] Reduced motion skips scramble frames and the ticker animation; copy still works. - [ ] Focus-visible rings are present on the address and every copy link. - [ ] On touch (`hover: none`) the address uses `cursor: pointer` and the chip is not shown. - [ ] Rules are 2px and invert with the flash. ## Implementation notes **Fit the string with a hidden probe cloned from `.t`**, 200px, off-canvas. Measure after fonts.ready and on resize: ```js function sizeFor(str) { probe.textContent = str; const w = probe.getBoundingClientRect().width || 1; return Math.min(260, 200 * (mail.clientWidth / w)); } t.style.fontSize = sizeFor(str).toFixed(1) + 'px'; ``` **Clipboard with fallback** (the iframe sandbox may lack clipboard permission): ```js async function copyText(s) { try { await navigator.clipboard.writeText(s); return true; } catch { const a = document.createElement('textarea'); a.value = s; a.style.cssText = 'position:fixed;opacity:0'; document.body.appendChild(a); a.select(); const ok = document.execCommand('copy'); a.remove(); return ok; } } ``` **Scramble lock times** — later characters stay noisy longer; cap glyph refresh at 48ms so it does not look like a flicker storm: ```js const at = [...to].map((_, i) => (i / n) * dur * .7 + Math.random() * dur * .3); // each frame: (e >= at[i] || c === ' ') ? c : (e < at[i]*.4 && from[i] ? from[i] : GLYPHS[rnd]) ``` Common mistakes: copying the display string `HI@FERRO.WORK` instead of lowercase; wrapping the Anton line; using `cursor: none` on `body` (only the address); driving the ticker with JS instead of a 38s CSS loop; forgetting `all:unset` on the button so a native border shows; putting the live region in a `polite` status that is skipped during the scramble. --- *From Design Lounge (https://designlounge.vercel.app). Live demo and source: /p/contact-giant-email-copy. Free to use in your products. Credit line: Designed using Design Lounge.*