/* ────────────────────────────────────────────────────────────────────────── minibar.css — a minute of every show, from anywhere on the site The three-clip player on the home page is the one thing on this site that turns a stranger into a listener: they press it, they hear a real voice, and the "listen free" link stops being a leap of faith. This makes that available on every cover in the catalogue. Two pieces: .mini-play a gold play button sitting on a cover .mbar one sticky bar at the foot of the window, carrying the waveform, the clock and -- when the minute runs out -- the two links the whole site exists to send people to The bar is deliberately the only place sound comes from. A grid of 79 covers that could each start their own audio is a page people close. ────────────────────────────────────────────────────────────────────────── */ /* ── the button on a cover ────────────────────────────────────────────── */ .mini-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; background: var(--gold); color: var(--on-copper); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); /* hidden until the cover is hovered on a mouse, always visible on touch (see the coarse-pointer block) -- a permanent button on all 79 tiles turns the catalogue into a wall of controls */ opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .4s cubic-bezier(.22,1.5,.4,1), background .3s ease; z-index: 3; } .mini-play svg { width: 20px; height: 20px; fill: currentColor; transform: translateX(2px); } /* optical centring of the triangle */ .mini-play[data-on] svg { transform: none; } .mini-play:hover { background: var(--gold-light); transform: scale(1.08); } .mini-play:focus-visible { opacity: 1; transform: scale(1); outline: 3px solid var(--gold-light); outline-offset: 4px; } .bk-card:hover .mini-play, .tile-wrap:hover .mini-play, .mini-play[data-on] { opacity: 1; transform: scale(1); } .mini-play[data-on] { background: var(--gold-light); } /* the ring says "this is the one playing" from across a scrolled grid */ .mini-play[data-on]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); animation: mini-pulse 1.9s ease-out infinite; } @keyframes mini-pulse { 0% { transform: scale(.92); opacity: .75; } 100% { transform: scale(1.4); opacity: 0; } } /* books.html styles .bk-art img but never the box, so the box has no containing block of its own to position the button against */ .bk-art { position: relative; } /* The whole-tile anchor on shows.html cannot hold a nested button -- a