Scroll reveal
translateY(26px) to 0 with opacity, 900ms. Visible without JavaScript.
Story 1.2 harness
Plays on load via .tcs-rise, not on scroll
Section bands and motion primitives
One instance of every primitive this story ships. Each band below spans the full viewport with no gutter at either edge, and every animation resolves to its final value when reduced motion is requested.
Sibling stagger
80ms between siblings in one parent, capped so a long grid never crawls.
Reduced motion
Every animated element resolves to its final value. Nothing is hidden.
Covers the assets people actually hold
Bitcoin
Ethereum
Tether
Altcoins
Wallets
Exchanges
Security
Taxes
Default duration — no speed modifier (--tcs-dur-marquee-assets)
Bitcoin
Ethereum
Tether
Altcoins
Wallets
Exchanges
Security
Taxes
Reviews, lane A (--tcs-dur-marquee-reviews-a)
Bitcoin
Ethereum
Tether
Altcoins
Wallets
Exchanges
Security
Taxes
Reviews, lane B (--tcs-dur-marquee-reviews-b)
Bitcoin
Ethereum
Tether
Altcoins
Wallets
Exchanges
Security
Taxes
Reverse direction (--tcs-marquee__track--reverse, topics duration)
Bitcoin
Ethereum
Tether
Altcoins
Wallets
Exchanges
Security
Taxes
A black band takes cream type
Body copy on black uses the dark-body token, never the cream-ground body colour, which lands near 2.4:1 here and fails. Links on dark grounds are orange.
1,248 readers — rendered as text, never counted up
An orange band takes black type
Orange is never a large fill except a buy button or a full-bleed band ground like this one.
Row hover shifts padding-left by 12px
Card hover lifts 6px and gains a shadow
Button hover lifts 3px and inverts
The four padding modifiers
This band carries --tight (88px). The orange band above carries --short (66px), the marquee band carries --bleed-x (92px 0 88px), and the band below carries --flush-bottom (84px 40px 0). Every other band is the standard 92px 40px.
A band whose content runs to the bottom edge. Its padding-bottom is zero by design, which is why the modifier is named for what it does rather than for its number.