/* ============================================================================ THE BOOK DETAIL PAGE — one shape, twelve fillings. ============================================================================ On the live site a book page is nine stacked Text Editor widgets in a fixed order, with a section simply left out when a book does not have it (crust item 10). There is a saved "Book template" that matches the shape, and twelve pages that each re-implement it. Here there is one template — site/templates/book-page.mjs — and twelve data files. A section appears when the data carries it and is absent when it does not. Nothing is conditional in this stylesheet; it styles the sections that exist. The order, which is the live order: 1 banner the full-width illustration all 12 2 description the publisher's jacket copy all 12 3 video a Vimeo embed 8 of 12 4 selected reviews all 12 5 awards and recognition 5 of 12 6 Michael writes about this book Red only 7 resources teaching-guide links 9 of 12 8 purchase links: all 12 9 publisher line all 12 TWO BOOKS ARE BUILT, AND THEY ARE THE EXTREMES. Red carries all nine — it is the only book with "Michael writes about this book", and it has eight reviews, ten awards and two resource lines. House Mouse has five: no video, no awards, no first-person note, no resources. If the sparse one renders with its missing sections simply not there, the template is right. The other ten are element 5. ========================================================================= */ /* ── The banner ─────────────────────────────────────────────────────────── Full width of the content column, above everything. Live serves it with the WordPress attachment title as its alt ("red", "Cat tale", "swing") — present but useless to a screen reader; an earlier version of this note said the alt was empty, which it is not (element 6d, 2026-09-18). The accessibility pass (element 6b, 2026-09-17) looked at all twelve: each is the book's cover and two spreads from inside, which is content, so each has written alt text in its data file. */ .book-banner img { width: 100%; height: auto; } /* ── The video ──────────────────────────────────────────────────────────── A Vimeo embed that keeps its shape at every width. The live widget carries Elementor's privacy setting; the rebuild sends Vimeo's own do-not-track parameter, which is what that setting is for. The live site also hangs `mt-sm mb-sm` on this widget — utility classes that are defined nowhere the site loads, so that spacing has silently done nothing for months (crust item 2). Here the spacing is the stack's, which is real. */ .book-video { position: relative; width: 100%; aspect-ratio: 16 / 9; } /* Two book videos are not 16:9, and the live page sizes each box to its video: Cat Tale 3:2, Little i 4:3 (measured 2026-09-17, element 6b). The data names the shape; a 16:9 box would pillarbox them. */ .book-video[data-ratio="3:2"] { aspect-ratio: 3 / 2; } .book-video[data-ratio="4:3"] { aspect-ratio: 4 / 3; } .book-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Sections ───────────────────────────────────────────────────────────── Each of the six named sections is a heading and its lines. The heading is an h2 and picks up the site's subhead style from base.css — Source Sans 3 bold, in the orange — with no rule beneath it; the ruled variant is for two-level headings, which a book page does not have. */ /* ONE STEP BETWEEN EVERY BLOCK, AS LIVE HAS IT (2026-10-16). Live spaces a book page by its widget margin alone — section to section, heading to its first line, and paragraph to paragraph inside the jacket copy and the reviews — 18px on a phone, 20.6px at 1440 (tokens.css, --section-step, says what was measured). The build had three different steps: --space-lg between sections, --space-sm plus a heading margin under each heading, and --space-sm plus the site's p + p margin between paragraphs. All three are this one step now; the page stack, the jacket copy and each section use it, and p + p is switched off inside them so it does not double. */ .site-main .stack { gap: var(--section-step); } .book-description, .book-section { display: flex; flex-direction: column; gap: var(--section-step); } .book-description p + p, .book-section p + p { margin-block-start: 0; } /* Reviews, awards and the first-person note are all runs of paragraphs, spaced by the section's own step (above); the site's `p + p` margin is off inside a section so the two do not add up. */ /* ── The publisher line ─────────────────────────────────────────────────── Imprint, year, extent and the ISBNs, closing the page. WHITE, as live draws it — computed rgb(255, 255, 255) on My Heart, Red and Punch!, read 2026-10-16. The kit holds a #CCCCCC for it that the live page never paints; this build had used that grey. */ .book-publisher { color: var(--body-text); /* One step beneath it, before the footer: live's text widget ends on the paragraph's own bottom margin. Measured 2026-11-03 on all twelve book pages, the copyright line sat 18px (375) to 20.6px (1440) higher here than on live; this is that step. */ margin-block-end: var(--section-step); } /* ── Link style on a book page ──────────────────────────────────────────── Italic. base.css sets links upright, which is what the live kit does and what /links/ and the privacy page show. On the live book pages the editor wrapped nearly every link's text in : measured 2026-09-17 (element 6b), by the style of the link's TEXT, 68 of the 70 links the rebuild carries are italic — review sources, resource links and purchase links alike. The two upright ones are Cat Tale's Publishers Weekly and Frankencrayon's School Library Journal; they draw italic here, a two-link difference handed back rather than a per-link style carried in the data. */ .site-main a { font-style: italic; }