/* ══════════════════════════════════════════════════════════════════════════ /book-shoot v3 — the SITE's card anatomy, at portal scale. CS-PLAT-09 / book-v3, Dom 2026-08-23. WHAT THIS SHEET IS. Dom asked for capitalshots.ca/book, cloned: "a smaller version of what we have on the site with the toasts etc — identical but more compact, not crowded." So every measurement here is the LIVE SITE's own `.pk` / `.ala` card, taken from the served /book stylesheet and multiplied by ~0.7 — not a new visual language: site → here site → here --pk-pad 20px → 14px .pk__name 32px → 20px/600 media 2.4/1 → 16/10 .pk__amt 29px → 21px .pk__item 14.5/600 → 14/600 flip 580ms → 250ms (portal's own) The flip MECHANIC is the portal's, not the site's: .ad-pcard/.ad-flip in agent-dash.css (250 ms, reduced-motion instant, `inert` on the hidden face). One motion vocabulary in this product, not two. WHY IT IS ITS OWN FILE. agent-dash.css owns `.bk-*` — the SMALL rate tile that the Dash's "Book a shoot" section renders through agent-book.js#rateTileHtml. That tile is still live on the Dash and is NOT this screen. Rewriting it in place would have changed a screen this lane does not own, so the booking screen's own anatomy lives here under `.bkv3`, exactly as cs-today.css was split out for the Today screen. COLOUR LAW (feedback_cs_backend_palette_red_black, 2026-08-22): --brand (#FF0016) on small elements and accents only; the flip card's BACK is black. White type and white icons on the red button, both themes. ══════════════════════════════════════════════════════════════════════════ */ /* The black face's palette lives on :root, NOT on .bkv3 — the upgrade popover is rendered into (it has to escape the card's overflow and its 3D context), so a token defined on .bkv3 does not reach it and the panel comes out transparent. Measured on staging 2026-08-23. */ :root { --bkc-black: #0A0A0A; /* Dom 2026-08-23: back of the flip card BLACK */ --bkc-black-ink: #F4F4F4; --bkc-black-ink-2: rgba(244,244,244,.66); --bkc-black-line: rgba(244,244,244,.14); } .bkv3 { --bkc-pad: 14px; } /* the site's 20px × 0.7 */ /* ── Page frame: main column + the sticky order rail ────────────────────── One column until there is honestly room for two. 1080 is where a 300px rail plus a 3-up card grid both fit without either being squeezed. */ .bkv3-cols { display: grid; gap: var(--sp-6); align-items: start; } @media (min-width: 1080px) { .bkv3-cols { grid-template-columns: minmax(0, 1fr) 304px; gap: var(--sp-6); } .bkv3-rail { position: sticky; top: var(--sp-4); } } .bkv3-main { display: grid; gap: var(--sp-3); min-width: 0; } /* On a narrow column the section hint ("Turn a card for the description and upgrades") squeezes into a 3-line stack beside its own heading. It drops to its own row instead — it is the only thing telling a touch user that the card turns, so hiding it is not an option. */ @media (max-width: 700px) { .bkv3 .ad-sec-h { flex-wrap: wrap; } .bkv3 .ad-sec-h .ad-sub { flex: 1 0 100%; } } /* ══ PACKAGE CARDS ════════════════════════════════════════════════════════ */ .bkp-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: stretch; /* every card is the tallest card */ } @media (min-width: 620px) { .bkp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .bkp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .bkp { position: relative; min-width: 0; height: 100%; perspective: 1400px; } .bkp-flip { position: relative; display: grid; height: 100%; min-height: 380px; transform-style: preserve-3d; transition: transform 250ms var(--ease); } .bkp.is-flipped .bkp-flip, .bks.is-flipped .bkp-flip { transform: rotateY(180deg); } @media (prefers-reduced-motion: reduce) { .bkp-flip { transition: none; } } .bkp-face { grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow 200ms var(--ease); } /* `backface-visibility` is a PAINT rule, not a hit-testing one — inside a preserve-3d stack Chrome still hit-tests the hidden face (measured on this portal's listing cards, 2026-08-22). The JS sets `inert`; this is the same guarantee for anything that does not honour it. */ .bkp .bkp-back, .bks .bkp-back { pointer-events: none; transform: rotateY(180deg); } .bkp.is-flipped .bkp-back, .bks.is-flipped .bkp-back { pointer-events: auto; } .bkp.is-flipped .bkp-front, .bks.is-flipped .bkp-front { pointer-events: none; } .bkp-front:hover { border-color: var(--line-strong); } .bkp.is-on .bkp-face { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow-1); } /* ── the BLACK back (Dom 2026-08-23) ─────────────────────────────────────── */ .bkp-back { background: var(--bkc-black); color: var(--bkc-black-ink); border-color: rgba(244,244,244,.10); } .bkp.is-on .bkp-back { border-color: var(--brand); } .bkp-back .bkp-rule { background: var(--bkc-black-line); } .bkp-back .bkp-save { color: var(--bkc-black-ink-2); } .bkp-back .bkp-save b { color: var(--bkc-black-ink); } .bkp-back .bkp-was { color: rgba(244,244,244,.42); } /* ── photo ──────────────────────────────────────────────────────────────── 16 : 10, the site's 2.4:1 band opened up because a portal card is narrower and a 2.4:1 strip on 300px is 125px of letterbox. */ .bkp-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-sunken); flex: none; } .bkp-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── clicking the card turns it over (Dom: "clicking the card flips to a BLACK back"). The trigger is a STRETCHED, empty overlay button covering the upper area — not a wrapper. A wrapper would put a