# Tapered light band — a cover's grammar transplanted to a scrolling page

Learned 2026-08-13 carrying the SportWear file cover (node `3008:103`,
1920 × 960, file `<figma-capa>`) onto the brand's landing hero
at `alana.minima.work/sportwear`. Not a pixel replica: the reference is an
artboard and the target is a viewport, so the transplant unit is the
fraction of the frame, and every fraction was measured before it moved.

- **Match a blurred band by its rendered profile, never by its node box.**
  The cover's `aurora band` node is 160px tall (16.7% of the frame), but
  what it paints is a bell: peak at 78.0% of the height, half-maximum
  width 10.9%, total bloom 20.8%. Building a 16.7% box and blurring it
  gave a bloom 1.4× too wide. Rebuilt at `height: 10.9%` with `blur(3.3vh)`
  the build measured peak 0.777H / FWHM 0.114H against the cover's 0.770 /
  0.109. Serialize the profile — peak, FWHM, extent — as three numbers and
  tune two knobs against them.
- **The tapered ends are free, and a mask would have been the wrong
  tool.** A gradient sized exactly to its own box has its blur run off its
  four edges, so a full-bleed band lands at ~50% of interior luminance at
  the frame edge and reaches full by ~6% in. Cover measured 0.53 left /
  0.50 right; the CSS reproduced 0.52 / 0.49 with no mask, no overlay. The
  instinct to inset the field wider than its container (to avoid a hard
  edge) is what destroys the taper.
- **CSS `blur()` has a far longer tail than the Gaussian arithmetic
  predicts.** At 2.9σ past the band's edge, erfc says ~0.4/255 and the
  render measured 36/255 — two orders of magnitude apart. Any "is this
  text on the imagery?" question gets a sampled pixel, never a formula.
- **Centring an artwork file is not centring the mark it contains.** The
  lockup PNG carries the file's own padding: its ink centre sat 6.2% of
  the node height below the node's centre, so `translate(-50%, -50%)` put
  the mark visibly low. `translate(-50%, -56.2%)` is aspect-independent
  and lands the ink where the cover puts it (0.478H, both).
- **`transform` and `translate` are separate properties and compose in
  that order** — centre on `transform` and leave `translate` to the intro
  animation, or a keyframe's `translate: 0 0` silently un-centres an
  absolutely positioned element at the end of its fill.
- **Pick the measuring column before trusting any profile.** A first pass
  reported the band's peak as `(255,255,255)` — the sampling column ran
  through the wordmark's tagline — and its bloom as ending at 0.974H,
  which was the cover's own hairline rim, not light. Both numbers looked
  like data. Choose a column clear of every text node and rim, and confirm
  the peak's colour is chromatic before believing the row.
- **A media query does not outrank source order.** The mobile override
  `.hero__aurora { top: 66% }` was written earlier in the file than the
  base rule at the same specificity and lost silently; the render looked
  untouched and the defect it fixed measured identical. When an override
  changes nothing, check where it sits before changing its value.
- **What survives an aspect change and what does not.** Fractions of the
  frame transplant cleanly for anything positioned (band, meta strip, mark
  centre) and for anything scaled against one axis (mark width). What does
  not survive is anything whose own size is fixed in px: a meta strip that
  is one 20px line on a 2:1 cover stacks to 44px on a phone and walks into
  the band's tail. Budget for the stacked height, then re-measure the
  ground under the text.
- **Connotes**: a page whose first screen is its own cover states that the
  brand is a published object before it is a shop — the visitor is handed
  the identity file, not a product page. Removing the invented display
  line was the whole move: two treatments of one name read as a draft,
  while a single mark on black with one band of light behind it reads as
  settled. The band is the identity's own `Aurora boreal` element, and
  aurora needs darkness — which is what makes the Blackout ground a
  condition rather than a style choice. Its tapered ends matter: a band
  that fades before the edges is a light source in a room, while one that
  runs edge to edge is a stripe of paint on the page. And the three-part
  meta strip borrows the grammar of a plate on a printed sheet — what it
  is, where it lives, what state it is in — which is how a brand still in
  production says so without apologizing.