/* sticky-pitch-1 (R90 amends R46 e for this surface only): the book pitch card and bar (src/components/book/BookPitchCard.astro). Linked by the component itself, so only a page that renders the pitch loads it, and the switch off (src/config/book-pitch.ts) changes no page and no CSS chunk. Design E tokens only (check:tokens); the ticket's mockup values map to the nearest tokens. CLS 0 by design: the card sits in an absolute rail in the gutter beside a fixed-width text column (the column's layout never depends on this sheet), its states switch visibility in fixed cells, and the bar is fixed (never pushes content). No animation. Every rule that needs :has() sits inside @supports selector(:has(*)); an engine without it (Safari < 15.4, Chrome < 105, Firefox < 121) gets no pitch at all (the island returns early there, the bar stays hidden and the rail and card keep display none). */ /* The hidden attribute wins over the display of .btn, the bar and the card. */ [data-book-pitch][hidden], [data-book-pitch] [hidden] { display: none; } /* Focus: the dismiss buttons and the print, sample and buy links take the site ring (base.css `:focus-visible`, --focus); nothing here sets an outline on them. After a keyboard dismiss the island focuses
(tabindex -1, removed on blur): no ring around the whole page content then, as the consent banner does for its own target. */ main[data-pitch-focus]:focus, main[data-pitch-focus]:focus-visible { outline: none; } /* The bar's start line: a sentinel box over the first quarter of the article (placed by the island), so a jump past the line (deep link, anchor, restored scroll) still flips it from intersecting to not; a zero-height line at 25 % that goes from below the viewport to above it in one jump never reports a change. */ .book-pitch-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 25%; pointer-events: none; } @supports selector(:has(*)) { :has(> .book-pitch-sentinel) { position: relative; } } /* ---- Card: >= 1200 px only, beside the 680 px text column, sticky inside the article wrapper (place `gutter`) ---- The card sits in a rail placed absolutely over the right gutter of `.content` (top to bottom, with the wrapper's own block and right padding), and sticks inside that rail. The text column is never re-laid out: no flex or grid on `.content`, so a paint before this stylesheet (it is linked in the body, after the column) and the paint after it place the column identically (a flex item stops the first paragraph's top margin collapsing through the column, which moved it 17 px: e2e round 2). */ .book-pitch-rail, .book-pitch { display: none; } @supports selector(:has(*)) { @media (min-width: 1200px) { .content:has(> .book-pitch-rail) { position: relative; } .book-pitch-rail { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 300px; box-sizing: content-box; padding-block: inherit; padding-right: inherit; pointer-events: none; } .book-pitch { display: block; box-sizing: border-box; width: 300px; pointer-events: auto; position: sticky; top: 110px; padding: 20px; background: var(--c-paper-card); border: 1px solid var(--c-line); border-radius: var(--r-14); box-shadow: var(--sh-soft); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--fs-15); line-height: 1.45; } /* pitch-more-1, place `side` (src/config/book-pitch.ts): the rail is the last flex item of the page's own side column (a flex column under a short note box) and fills the rest of it, so the card sticks alone, down to the end of the text column, at the column's width. The page releases its side column from sticking as a whole in its own stylesheet (`.side-col--pitch`, inside `@supports selector(:has(*))` like every rule here that needs :has(): an engine without it keeps the sticky column and shows no card), never here: this sheet arrives after the column was painted. The column is a
there, never an