/* ══════════════════════════════════════════════════════════════════════════ The directory flipbook — the container only. ------------------------------------------------------------------------ Loaded only by directory.php, through the $page_styles hook in header.php, and after the library's own two stylesheets so it can win where it needs to. The viewer is DearFlip (assets/vendor/dflip/). Its look — the toolbar, the thumbnail strip, the page turn — is the product's and is deliberately left alone: it is what the association asked for, and every override here is something to re-check if the library is ever updated. What is left for us is the ground the book sits on and the state where there is no book. ══════════════════════════════════════════════════════════════════════════ */ /* The dark reading room. A book reads best against something that is not itself paper — a white page on a white ground loses its edges, and the edges are what the turn is made of. The colour matches DFLIP.defaults .backgroundColor in flipbook.js; change the two together. */ .fb { position: relative; background: radial-gradient(120% 100% at 50% 0%, #15104A 0%, #0E0A33 100%); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } /* dFlip writes its own pixel height onto ._df_book once it initialises, so this is only what holds the shape in the moment before that happens — the figure mirrors the cap in flipbook.js. Without it the band is zero-height on load and the page visibly jumps. */ .fb ._df_book { min-height: min(82vh, 900px); } @media (max-width: 576px) { .fb { border-radius: var(--radius); } .fb ._df_book { min-height: min(70vh, 560px); } } /* Fullscreen is the library's own and moves the book out to , so the ground has to be set there too or the pages turn against white. */ .df-fullscreen, .df-container:-webkit-full-screen, .df-container:fullscreen { background: #0E0A33; } /* ── When there is no book ───────────────────────────────────────────────── No JavaScript at all. A flipbook is a rendered object and there is no degraded version of it, so the page says where the file is rather than pretending. WebGL needs no equivalent here: dFlip falls back to its own 2D renderer on its own. */ .fb__fallback { margin: 0; padding: 28px 24px; text-align: center; color: #C4CDE4; font-size: .95rem; } .fb__fallback a { color: var(--accent-2); } .fb__hint { margin-top: 18px; text-align: center; color: var(--muted); font-size: .92rem; } /* ══════════════════════════════════════════════════════════════════════════ Available Pages List ------------------------------------------------------------------------ The advertisement slots in the next printed edition, booked and free. A list rather than a table on purpose: four columns of page numbers and prices becomes a sideways scroll on a phone, and this is read on a phone far more often than at a desk. Each row is a grid that collapses to two lines under 620px instead. ══════════════════════════════════════════════════════════════════════════ */ .pglist__lede { max-width: 62ch; color: var(--muted); margin-bottom: 22px; } .pglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pglist__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 18px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } /* A free page is the one thing on this list anybody can act on, so it is the only one that carries weight: a red rule down the edge and a real button. A booked row is a fact, and facts are quiet. */ .pglist__row.is-free { border-left: 3px solid var(--accent); } .pglist__row.is-free:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); } .pglist__row.is-booked { background: var(--paper); color: var(--muted); } .pglist__pos { font-weight: 600; color: var(--text); } .pglist__row.is-booked .pglist__pos { font-weight: 500; color: var(--muted); } .pglist__who { color: var(--text); font-size: .94rem; } .pglist__state { justify-self: end; padding: 4px 12px; border-radius: 999px; background: #EEF0F7; color: var(--ink); font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .pglist__price { font-weight: 700; color: var(--accent); white-space: nowrap; } .pglist__book { justify-self: end; padding: 8px 18px; font-size: .88rem; white-space: nowrap; } @media (max-width: 620px) { /* Position on its own line, then price and button side by side under it — a three-column grid at this width squeezes the position to one word per line. */ .pglist__row { grid-template-columns: 1fr auto; padding: 12px 14px; } .pglist__pos { grid-column: 1 / -1; } .pglist__book { width: auto; } } /* The booking form sits in a modal, which is narrower than a page — the two-column form grid has to give way earlier than it does elsewhere. */ .modal__panel--form { max-width: 560px; text-align: left; } .modal__panel--form .form-grid { gap: 14px; } .modal__panel--form input[readonly] { background: var(--paper); color: var(--ink); font-weight: 600; cursor: default; } .modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } @media (max-width: 480px) { .modal__actions { flex-direction: column-reverse; } .modal__actions .btn { width: 100%; } } /* The gap between the two advertisement blocks, where the member listings sit. A rule with a caption rather than a row: it is not a slot, nothing on it can be booked, and it must not be mistaken for one. */ .pglist__break { display: flex; align-items: center; gap: 14px; margin: 10px 2px; color: var(--muted); font-size: .82rem; font-style: italic; } .pglist__break::before, .pglist__break::after { content: ""; flex: 1; height: 1px; background: var(--line); }