/* book.html — Canonis Digital Edition */
body#pg-book {
--bk-ivory: #F5F1EB;
--bk-teal: #174548;
--bk-gold: #8F6318;
--bk-maroon: #6B1F2B;
--bk-text: #4A4A4A;
--bk-bar-h: 46px;
--bk-tail: 46px;
background: var(--bk-ivory);
margin: 0;
padding: 0;
overflow-x: hidden; /* nothing here may scroll sideways */
}
body#pg-book { padding-top: var(--bk-header-h, 72px) !important; }
body#pg-book .book-page {
width: 100%;
max-width: none; /* no centred column: full bleed */
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── slim utility bar — the page's only chrome ── */
body#pg-book .book-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: var(--bk-bar-h);
box-sizing: border-box;
padding: 0 clamp(10px, 2vw, 22px);
background: var(--bk-ivory);
border-bottom: 1px solid rgba(143,99,24,0.22);
}
body#pg-book .book-bar-label {
flex: 1 1 auto;
min-width: 0; /* lets the label ellipsis instead of pushing */
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(10.5px, 1.4vw, 13px);
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.2;
color: var(--bk-gold);
margin: 0;
/* css/style.css:51 justifies */
text-align: left;
text-align-last: auto;
word-spacing: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body#pg-book .book-bar-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: clamp(6px, 1.2vw, 14px);
}
body#pg-book .book-bar-btn,
body#pg-book .book-bar-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
box-sizing: border-box;
padding: 8px 10px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 0;
font-family: 'EB Garamond', Georgia, serif;
font-size: clamp(10.5px, 1.3vw, 12px);
font-weight: 600;
letter-spacing: 0.10em;
line-height: 1;
color: var(--bk-gold);
text-decoration: none;
text-align: center;
text-align-last: center;
word-spacing: normal;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: color 0.2s ease;
}
body#pg-book .book-bar-btn:hover,
body#pg-book .book-bar-link:hover { color: #6B450B; }
body#pg-book .book-bar-btn:focus-visible,
body#pg-book .book-bar-link:focus-visible {
outline: 2px solid rgba(143,99,24,0.85);
outline-offset: 2px;
border-radius: 6px;
}
body#pg-book .book-bar-btn svg,
body#pg-book .book-bar-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
body#pg-book .book-bar-link {
border-left: 1px solid rgba(143,99,24,0.20);
padding-left: 12px;
}
/* the reader */
body#pg-book .book-reader {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: #FFFDF9;
overflow: hidden;
height: calc(100vh - var(--bk-header-h, 72px) - var(--bk-bar-h) - var(--bk-tail));
height: calc(100dvh - var(--bk-header-h, 72px) - var(--bk-bar-h) - var(--bk-tail));
min-height: 420px;
}
body#pg-book .book-reader iframe,
body#pg-book .fp-iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
background: #FFFDF9;
}
/* native fullscreen fills the screen outright */
body#pg-book .book-reader:fullscreen,
body#pg-book .book-reader:-webkit-full-screen {
height: 100%;
min-height: 0;
}
/* loading veil */
body#pg-book .book-loading {
display: none;
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: #FFFDF9;
font-family: 'EB Garamond', Georgia, serif;
font-size: 14px;
letter-spacing: 0.08em;
color: var(--bk-gold);
transition: opacity 0.35s ease;
}
body#pg-book .book-loading.is-visible { display: flex; }
body#pg-book .book-loading.is-leaving { opacity: 0; }
body#pg-book .book-loading svg {
width: 40px;
height: 40px;
stroke: rgba(143,99,24,0.55);
fill: none;
stroke-width: 1.2;
}
body#pg-book .book-loading-bar {
width: 120px;
height: 1px;
overflow: hidden;
background: rgba(143,99,24,0.18);
}
body#pg-book .book-loading-bar::after {
content: '';
display: block;
width: 40%;
height: 100%;
background: rgba(143,99,24,0.7);
animation: bkSweep 1.6s ease-in-out infinite;
}
@keyframes bkSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
/* ── one quiet line below the reader; its height IS --bk-tail ── */
body#pg-book .book-reader-fallback {
display: flex;
align-items: center;
justify-content: center;
height: var(--bk-tail);
box-sizing: border-box;
padding: 0 14px;
font-family: 'EB Garamond', Georgia, serif;
font-size: 13px;
line-height: 1.4;
color: var(--bk-text);
text-align: center;
text-align-last: center;
word-spacing: normal;
margin: 0;
}
body#pg-book .book-reader-fallback a {
color: var(--bk-maroon);
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 5px;
}
/* header: mark E-Book as current, quietly */
body#pg-book .ebook-btn[aria-current="page"] .btn-label {
animation: none !important;
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: #F6E3CB !important;
color: #F6E3CB !important;
}
body#pg-book .ebook-btn[aria-current="page"] {
border-color: rgba(225,171,121,0.65) !important;
}
/* ── footer: present, quiet, never crowding the reader ── */
body#pg-book .site-footer {
margin: 0;
padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
}
/* open mobile menu: the reader must go inert underneath */
body#pg-book:has(.mobile-nav-overlay.active) .book-reader {
pointer-events: none !important;
}
/* MOBILE + TABLET */
@media (max-width: 1023.98px) {
body#pg-book { --bk-bar-h: 44px; --bk-tail: 42px; }
body#pg-book .book-reader { min-height: 360px; }
/* Home: restored with shared sizing and safe-area positioning. The Social
toggle shares the .floating-home-btn class for its chrome, so it has to
be excluded here or it is dragged up to Home's top-right slot instead of
staying beside scroll-to-top. */
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
top: calc(112px + env(safe-area-inset-top)) !important;
bottom: auto !important;
}
/* while the nav overlay is open it must not stay tappable through it */
body#pg-book:has(.mobile-nav-overlay.active) .floating-home-btn {
pointer-events: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
MOBILE — the custom utility bar is removed entirely
══════════════════════════════════════════════════════════════════════
On a phone the page had FOUR stacked interfaces before the book: the site
header, a Canonis bar whose label truncated to "CANO…", a custom FULL
SCREEN button duplicating the one already inside Heyzine's own toolbar,
and an OPEN IN NEW TAB competing with both. Heyzine's toolbar is the
reader's controls; a second set of the same controls outside the frame is
noise, so the bar goes and the book starts directly under the header.
The is NOT display:none — it stays in the accessibility tree as the
page's heading and as the target of the reader's aria-labelledby. It is
clipped instead, so it occupies no space while remaining announced.
Desktop keeps its bar: at that width it is balanced and useful. This is a
difference in arrangement, not in identity — palette, type, header and
reader-first hierarchy are shared. */
@media (min-width: 601px) and (max-width: 1023.98px) {
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
top: calc(176px + env(safe-area-inset-top)) !important;
}
}
@media (max-width: 1023.98px) {
body#pg-book { --bk-bar-h: 0px; --bk-tail: 0px; }
body#pg-book .book-bar {
display: block;
height: 0;
padding: 0;
margin: 0;
border: 0;
background: none;
}
body#pg-book .book-bar-actions { display: none; }
body#pg-book .book-bar-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* MOBILE GEOMETRY: the page is a flex column */
body#pg-book {
box-sizing: border-box; /* so padding-top counts inside min-height */
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
body#pg-book .book-page {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0; /* lets the column actually shrink */
}
/* the only flexible child: the hidden bar and fallback contribute nothing */
body#pg-book .book-reader {
flex: 1 1 auto;
width: 100%;
height: auto;
aspect-ratio: auto;
max-height: none;
min-height: 360px; /* floor so Heyzine's toolbar always fits */
}
body#pg-book .book-reader-fallback { display: none !important; }
/* footer: clean, whole, and clearly after the reader */
body#pg-book .site-footer {
flex: 0 0 auto; /* rigid: it never absorbs spare height */
display: flex !important;
align-items: center !important;
/* Left, like every other page's footer. */
justify-content: flex-start !important;
position: static !important; /* pushed down by the flex column, not by CSS position */
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
margin: 0 !important;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
}
body#pg-book .site-footer .footer-left { margin: 0 !important; }
body#pg-book .site-footer p {
margin: 0 !important;
line-height: 1.5 !important;
}
body#pg-book .site-footer {
position: fixed !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1002 !important;
width: 100% !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
margin: 0 !important;
padding: 2px 8px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body#pg-book .site-footer p {
line-height: 1 !important;
}
}
@media (max-width: 1023.98px) {
html.book-page-root {
width: 100%;
height: 100%;
overflow: hidden !important;
overscroll-behavior: none;
}
body#pg-book {
width: 100%;
height: 100vh;
height: 100svh;
min-height: 0 !important;
max-height: 100svh;
overflow: hidden !important;
overscroll-behavior: none;
}
body#pg-book .book-page {
flex: 1 1 auto;
min-height: 0 !important;
overflow: hidden;
}
body#pg-book .book-reader {
flex: 1 1 auto;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
body#pg-book > .mobile-nav-footer {
position: relative !important;
inset: auto !important;
z-index: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left)) !important;
}
body#pg-book > .site-footer {
position: relative !important;
inset: auto !important;
z-index: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
min-height: 22px !important;
max-height: none !important;
padding: 2px max(8px, env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
}
}
/* MOBILE FINISH — keep the reader between the fixed site bars and move the
generated back control out of the Heyzine toolbar/content area. */
@media (max-width: 1023.98px) {
body#pg-book {
display: block;
height: 100svh;
min-height: 100svh !important;
max-height: 100svh;
overflow: hidden !important;
}
body#pg-book .book-page {
display: block;
height: calc(100svh - var(--bk-header-h, 72px) - 54px);
min-height: 0 !important;
overflow: hidden !important;
}
body#pg-book .book-reader {
width: 100%;
height: 100% !important;
min-height: 0 !important;
}
body#pg-book .book-reader-fallback {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body#pg-book > .mobile-nav-footer {
position: fixed !important;
right: 0 !important;
bottom: 22px !important;
left: 0 !important;
z-index: 1002 !important;
width: 100% !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
}
body#pg-book > .site-footer {
position: fixed !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1002 !important;
width: 100% !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
}
body#pg-book .floating-back-btn {
top: calc(178px + env(safe-area-inset-top)) !important;
right: max(14px, env(safe-area-inset-right)) !important;
bottom: auto !important;
left: auto !important;
}
}
@media (min-width: 601px) and (max-width: 1023.98px) {
body#pg-book .floating-back-btn {
top: calc(242px + env(safe-area-inset-top)) !important;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
body#pg-book .book-loading-bar::after { animation: none; width: 100%; opacity: 0.55; }
body#pg-book .book-loading { transition: none; }
body#pg-book .book-bar-btn,
body#pg-book .book-bar-link { transition: none; }
}
/* ── Social group on book.html ──
book.html keeps its own rail offsets (Home 112, Back 178) because the
reader frame starts higher than a normal page's content, so it is excluded
from the shared --rail-top stack in css/pages.css. Social takes the next
66px slot.
Only the toggle is placed here. The flyout follows it on its own: it is a
0x0 pivot that js/main.js parks on the toggle's measured centre, so an
offset stated here would fight the measurement rather than help it. */
@media (max-width: 1023.98px) {
body#pg-book .floating-social-btn {
top: calc(244px + env(safe-area-inset-top)) !important;
bottom: auto !important;
right: max(14px, env(safe-area-inset-right)) !important;
left: auto !important;
}
}
@media (min-width: 601px) and (max-width: 1023.98px) {
body#pg-book .floating-social-btn {
top: calc(308px + env(safe-area-inset-top)) !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
THE FLOATING RAIL MOVES LEFT — ON THIS PAGE ONLY
══════════════════════════════════════════════════════════════════════
Every other page owns its whole viewport, so the rail sits right where
a thumb expects it. book.html does not: the Heyzine reader brings its
own toolbar — thumbnails, zoom, fullscreen — anchored to the TOP RIGHT
of the frame, which is exactly where Home, Back and Share were sitting.
The two sets of controls overlapped, and the reader's were the ones a
visitor could not reach.
Only the horizontal anchor changes. The vertical stacking, sizing and
safe-area handling above still apply, so the rail keeps its identity
and only swaps sides. js/main.js mirrors the share flyout to match, so
its staircase steps inward from the left rather than off-screen. */
body#pg-book .floating-home-btn,
body#pg-book .floating-back-btn,
body#pg-book .floating-social-btn,
body#pg-book .scroll-to-top {
right: auto !important;
left: max(24px, env(safe-area-inset-left)) !important;
}
/* Phones use the tighter gutter the rail already uses on the right. */
@media (max-width: 600px) {
body#pg-book .floating-home-btn,
body#pg-book .floating-back-btn,
body#pg-book .floating-social-btn,
body#pg-book .scroll-to-top {
left: max(14px, env(safe-area-inset-left)) !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
PHONE + TABLET — THE RAIL LIES DOWN
══════════════════════════════════════════════════════════════════════
Home, Back and Share stood in a column down the left edge, 66px apart,
which on a phone runs a third of the way down the reader and sits over
the page the visitor is trying to read. Laid flat they occupy one band
instead of three, and the book below them is clear.
Order is Share, Back, Home reading left to right - Home furthest from
the left edge because it is the one that leaves the reader entirely, and
the two that stay within it sit nearest the thumb.
The step is the same 66px the column used - a 58px seat plus its 8px
gap - so the group keeps its rhythm; only the axis changes. The row is
built from the same max(gutter, safe-area) the column used, so the notch
still pushes the whole group inward as one.
The share flyout is not placed here. js/main.js parks it on the toggle's
measured centre and mirrors its staircase when there is no room to the
left, which is exactly the case now that Share is the leftmost seat -
stating an offset here would fight that measurement. Desktop keeps the
column: it has the height to spare and no reader toolbar beside it. */
@media (max-width: 1023.98px) {
body#pg-book .floating-social-btn,
body#pg-book .floating-back-btn,
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
top: calc(112px + env(safe-area-inset-top)) !important;
bottom: auto !important;
right: auto !important;
}
body#pg-book .floating-social-btn {
left: max(14px, env(safe-area-inset-left)) !important;
}
body#pg-book .floating-back-btn {
left: calc(max(14px, env(safe-area-inset-left)) + 66px) !important;
}
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
left: calc(max(14px, env(safe-area-inset-left)) + 132px) !important;
}
}
/* THE FLYOUT HAS TO CLEAR ITS OWN NEIGHBOURS NOW.
The staircase's first row sits --fs-row0 below the toggle's centre, and
40px was set when the toggle was the bottom of a column with nothing
beside it. In a row, Back and Home are beside it: 29px of toggle plus
22px of seat needs 51 before the two stop touching, so the top step was
landing on both of them.
74px clears them with a 23px gap. Only the first row moves - the 64px
rise between rows is untouched, so the staircase keeps its shape and
still finishes well inside the viewport. */
@media (max-width: 1023.98px) {
body#pg-book .floating-social-group { --fs-row0: 74px; }
}
/* Tablets carry the wider gutter the rail already used, and sit HIGH -
level with the reader's own toolbar rather than below it.
176px was inherited from the vertical column, where the first seat had
the whole left edge to itself. Flat, the row is wide enough to reach
under the booklet: Heyzine centres the pages in its frame, so on a
shorter tablet the spread rides up and the buttons land on the top-left
corner of the page the reader is trying to read.
108px puts them 20px below the header - the same inset Heyzine gives its
own toolbar, so the two sets of controls share one band across the top of
the frame instead of one hanging into the book. They cannot collide with
that toolbar: it is anchored right, this row is anchored left. */
@media (min-width: 601px) and (max-width: 1023.98px) {
body#pg-book .floating-social-btn,
body#pg-book .floating-back-btn,
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
top: calc(108px + env(safe-area-inset-top)) !important;
}
body#pg-book .floating-social-btn {
left: max(24px, env(safe-area-inset-left)) !important;
}
body#pg-book .floating-back-btn {
left: calc(max(24px, env(safe-area-inset-left)) + 66px) !important;
}
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
left: calc(max(24px, env(safe-area-inset-left)) + 132px) !important;
}
}
/* Desktop: drop the rail clear of the utility bar.
The shared internal-page rail starts at 188px, which was set against pages
whose content begins under the header alone. This page puts the CANONIS
DIGITAL EDITION bar in between, and its lower edge falls at 190px - so Home
was not merely close to the bar, it overlapped it by two pixels and read as
though it were attached to the label. Starting at 220 leaves a 30px gap,
about the width of the rail's own rhythm, so the group reads as floating
over the reader rather than hanging off the bar. The 76px step between
seats is the shared one, kept so the rail matches every other page. */
@media (min-width: 1024px) {
body#pg-book .floating-home-btn:not(.floating-back-btn):not(.floating-social-btn) {
top: 220px !important;
}
body#pg-book .floating-back-btn { top: 296px !important; }
body#pg-book .floating-social-btn { top: 372px !important; }
}