/* =========================================================================== The bridal book. Ported from ArtyChar's flash binder (theme/artychar/assets/binder.css), reskinned as a wedding album: an ivy linen cover with a thin gold ring and her monogram; porcelain pages with a faint deckle edge; each photo mounted with a gilt keyline and its caption in Cormorant italic; chapter dividers of petal card with satin ribbon tabs on the fore-edge; a stitched spine instead of metal rings; and page numbers in small gold rings, the site's one motif (BUILD-NOTES, "The one motif is the ring"). Loaded only on the bridal book page (page-bridal-book.php). The grid is the content and this file styles it too; book.js builds the book over it. Two structural notes from the binder that still hold, both load-bearing: 1. Leaves are direct children of .eb-book, the element holding `perspective`. A preserve-3d wrapper between them is a stacking context, and no leaf z-index could then beat the spine outside it. 2. .eb-book-stage must not have overflow:hidden. A turning leaf sweeps outside the book, and on a phone (one page at a time) it sweeps off the left of the screen: the body's overflow-x:clip in site.css is what keeps that from scrolling. The stage's top padding gives the lifted corner somewhere to go. Tokens are site.css's, copied here as --bk-* so this file reads alone. The materials are drawn, not photographed (brand/book-textures.py): an ivy book cloth, its weave again in greys for the gold foil to take, and cotton paper. Light comes from the top left, everywhere: the cloth's sheen, the foil's bright band, the shadow side of every pressed line. ======================================================================== */ :root { --bk-mist: #F3F3EC; --bk-porcelain: #FAFAF6; --bk-petal: #EEE7D9; --bk-sage: #C3C4B2; --bk-sage-soft: #DCDDD0; --bk-leaf: #80876D; --bk-fern: #4F5A48; --bk-fern-deep: #3E4738; --bk-ivy: #262D27; --bk-ink: #1D221E; --bk-gilt: #A08652; --bk-gilt-deep: #7A6536; --bk-gilt-soft: #CDBA8E; --bk-display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif; --bk-body: "Hanken", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --bk-ease: cubic-bezier(.2, .7, .2, 1); --bk-out: cubic-bezier(.22, .8, .24, 1); /* The materials. The cloth tile is 480px shown at 240, the paper 512 at 256: two pixels to a pixel, so both stay crisp on a phone. */ --bk-cloth: url("../img/book-cloth.webp?v=2"); --bk-grain: url("../img/book-cloth-grain.webp?v=2"); --bk-paper: url("../img/book-paper.webp?v=2"); /* Gold foil: dark gold either side of a bright band where the light catches it. The foil takes the cloth's weave (--bk-grain, multiplied). */ --bk-foil: linear-gradient(118deg, #8c7141 0%, #c8b077 20%, #efe3bb 33%, #bfa262 46%, #dccb95 62%, #93773f 80%, #c4aa6c 100%); /* Laid paper: the faint parallel lines of good writing paper. */ --bk-laid: repeating-linear-gradient(0deg, rgba(122, 101, 54, .026) 0 1px, rgba(122, 101, 54, 0) 1px 4px); /* The deckle: an irregular torn edge, as a mask on each page's fore-edge. */ --bk-deckle-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='160' viewBox='0 0 6 160'%3E%3Cpath d='M0 0H4.7L3.9 2.6L4.2 5.0L5.3 8.2L5.3 11.9L5.2 15.3L4.4 17.7L5.1 22.3L4.0 25.1L4.1 29.9L3.2 33.2L3.4 35.6L5.1 38.6L4.7 41.1L5.0 45.6L3.9 49.4L4.1 52.7L5.3 55.0L3.8 57.8L4.7 61.2L4.4 65.1L3.6 68.1L4.8 72.3L4.2 76.1L3.7 80.7L3.1 83.7L4.4 86.3L5.1 90.6L5.3 94.1L3.6 98.2L3.4 102.0L3.8 105.1L4.1 109.0L3.5 112.4L4.3 117.3L5.3 121.3L3.9 125.5L3.5 130.5L4.5 133.5L5.3 137.6L5.0 141.0L5.3 143.6L5.1 147.9L4.5 150.8L5.2 155.5L4.1 158.9L4.7 160.0L0 160Z'/%3E%3C/svg%3E"); --bk-deckle-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='160' viewBox='0 0 6 160'%3E%3Cpath d='M6 0H2.5L1.2 4.6L1.4 8.0L2.8 12.7L1.0 15.3L1.1 18.1L2.0 21.7L0.6 24.6L1.4 28.0L2.8 31.8L1.8 35.9L2.2 39.8L2.7 42.2L2.6 46.6L1.5 51.0L0.8 54.3L0.7 58.3L1.1 60.7L1.4 63.4L0.6 65.7L0.8 68.3L0.7 71.5L2.0 76.2L1.2 78.8L1.4 82.0L2.6 84.5L1.7 89.5L0.8 93.1L1.4 95.5L2.5 98.5L0.7 101.1L1.8 106.0L1.8 108.6L1.8 110.9L2.6 115.8L1.2 120.0L1.0 123.2L1.8 127.6L1.4 131.9L2.5 134.8L2.6 139.7L2.5 144.2L1.1 148.5L1.4 152.1L0.7 154.4L1.2 157.4L2.5 160.0L6 160Z'/%3E%3C/svg%3E"); } /* ---- the page around the book ---------------------------------------------- */ /* A shorter head than other pages: the book is the page, and a photo in it is on the first screen. */ .eb-book-head { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 2.6vw, 32px); } /* A short laptop screen: a smaller head, so the open book's photo is on the first screen. */ @media (min-width: 720px) and (max-height: 860px) { .eb-book-head { padding-block: 18px 10px; } .eb-book-head .eb-page-title { font-size: var(--t-h2, 3rem); } .eb-book-head .eb-lede { margin-top: .6rem; } .eb-book-bar { padding-bottom: 8px; } .eb-book-stage { padding-top: 22px; } } .eb-book-body { padding-bottom: 0; } /* The chapter links, and (from book.js) the Book / Grid switch. With the script off it is a row of links to the chapters below, which is all it needs to be. */ .eb-book-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-bottom: clamp(14px, 2vw, 22px); margin-bottom: clamp(8px, 1.5vw, 16px); border-bottom: 1px solid rgba(128, 135, 109, .28); } .eb-book-bar:empty { display: none; } .eb-book-chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; list-style: none; } .eb-book-chapters li { display: flex; align-items: center; } /* Room kept for the Book / Grid switch book.js adds, so the row does not jump when it arrives (CLS). */ html[data-eb-book-view] .eb-book-chapters { min-height: 52px; } html[data-eb-book-view] .eb-book-bar:not(:has(.eb-book-views))::after { content: ""; display: block; width: 180px; height: 52px; } .eb-book-chapters a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--bk-fern-deep); background: linear-gradient(var(--bk-gilt), var(--bk-gilt)) 50% calc(100% - 10px) / 0 1px no-repeat; transition: background-size .35s var(--bk-ease), color .2s; } @media (hover: hover) { .eb-book-chapters a:hover { background-size: 100% 1px; color: var(--bk-ink); } } .eb-book-chapters a[aria-current="true"] { background-size: 100% 1px; color: var(--bk-ink); } .eb-book-views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(128, 135, 109, .6); border-radius: 999px; background: var(--bk-porcelain); } .eb-book-views button { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--bk-fern-deep); cursor: pointer; font-family: var(--bk-body); font-weight: 500; font-size: .875rem; letter-spacing: .03em; transition: background-color .25s var(--bk-ease), color .25s; } .eb-book-views button[aria-pressed="true"] { background: var(--bk-fern); color: var(--bk-porcelain); } @media (hover: hover) { .eb-book-views button[aria-pressed="false"]:hover { background: rgba(195, 196, 178, .4); } } .eb-book-views button:focus-visible { outline-offset: 1px; border-radius: 999px; } .eb-book-views svg { width: 18px; height: 18px; } /* Which view is on. Set by the head script before layout, so the hidden one never fetches its photos. No attribute (no script) = the grid alone. */ [data-eb-book-view="book"] #eb-book-grid { display: none; } [data-eb-book-view="grid"] .eb-book-stage { display: none; } html:not([data-eb-book-view]) .eb-book-stage { display: none; } /* While book.js builds the book, the space it will take is held, so the page below does not jump when it arrives (the review measured a layout shift of .21). book.js marks the body .is-built once the book is in. */ html[data-eb-book-view="book"] .eb-book-body:not(.is-built)::after { content: ""; display: block; margin: 34px auto 88px; aspect-ratio: 1.44; width: min(calc(100% - 76px), max(560px, calc((100vh - 250px) * 1.44)), 1160px); } @media (max-width: 999.98px) { html[data-eb-book-view="book"] .eb-book-body:not(.is-built)::after { margin-bottom: 176px; } } @media (max-width: 719.98px) { html[data-eb-book-view="book"] .eb-book-body:not(.is-built)::after { margin: 22px auto 150px; aspect-ratio: .72; width: min(100%, max(250px, calc((100svh - 240px) * .72))); } } /* ---- the grid --------------------------------------------------------------- Grouped by chapter. Portrait photos at 4:5 in one column; a landscape lead spans two columns at 8:5, so a bridal party of five is not cut to a portrait. Dense flow fills the gaps a wide tile leaves. */ .eb-book-grid { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(40px, 6vw, 80px); } .eb-book-chapter + .eb-book-chapter { margin-top: clamp(56px, 7vw, 104px); } .eb-book-chapter__head { display: flex; align-items: baseline; gap: 6px 18px; margin-bottom: clamp(20px, 2.6vw, 32px); } .eb-book-chapter__head::after { content: ""; flex: 1 1 40px; align-self: center; height: 1px; background: linear-gradient(90deg, rgba(160, 134, 82, .6), rgba(160, 134, 82, 0)); } .eb-book-chapter__name { font-family: var(--bk-display); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); line-height: 1.05; color: var(--bk-ink); } .eb-book-chapter__count { margin: 0; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--bk-gilt-deep); white-space: nowrap; } .eb-book-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(30px, 3.2vw, 46px) clamp(14px, 2vw, 26px); align-items: start; } @media (min-width: 720px) { .eb-book-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .eb-book-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* No scroll-margin here or on the stage: html's scroll-padding-top (site.css) already clears the header, and the two add together (section 35). */ .eb-book-tile { min-width: 0; } .eb-book-tile.is-wide { grid-column: span 2; } .eb-book-tile__fig { margin: 0; } .eb-book-tile__photo { display: block; overflow: hidden; border-radius: 3px; background: var(--bk-sage-soft); cursor: zoom-in; } .eb-book-tile__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--bk-ease); } .eb-book-tile.is-wide .eb-book-tile__img { aspect-ratio: 8 / 5; } @media (hover: hover) { .eb-book-tile__photo:hover .eb-book-tile__img { transform: scale(1.035); } } .eb-book-tile__cap { display: grid; gap: .35rem; margin-top: .95rem; } .eb-book-tile__words { font-family: var(--bk-display); font-style: italic; font-weight: 500; font-size: 1.45rem; line-height: 1.26; color: var(--bk-ink); text-wrap: pretty; } .eb-book-tile__venue { font-size: .875rem; color: var(--bk-fern-deep); } .eb-book-tile__more { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: .9rem; list-style: none; } .eb-book-tile__more a { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; outline: 1px solid var(--bk-gilt); outline-offset: 2px; cursor: zoom-in; } .eb-book-tile__more a:focus-visible { outline: 2px solid var(--bk-gilt-deep); outline-offset: 2px; } .eb-book-tile__thumb { width: 100%; height: 100%; object-fit: cover; } .eb-book-tile__plus { font-size: .8125rem; color: var(--bk-fern); font-variant-numeric: lining-nums; padding-left: 2px; } /* ---- the stage ---------------------------------------------------------------- The turn's timing lives here and nowhere else: book.js reads these three at the start of each turn (turnTiming()), so the script and the transitions cannot disagree. */ .eb-book-stage { /* The book's width, shared with the row of controls under it. */ --bk-w: min(calc(100% - 76px), max(560px, calc((100vh - 250px) * 1.44)), 1160px); --eb-book-turn: 1300ms; --eb-book-ease: cubic-bezier(.35, .02, .28, 1); /* How far the free edge runs ahead of the spine when the sheet stands edge-on. A little less than the binder's 64deg: photographic paper is stiffer than a sheet of flash. */ --eb-book-bend: 54deg; position: relative; padding: 34px 0 6px; margin-top: clamp(4px, 1vw, 12px); } /* The binder's damped spring (damping .70, a 4.6% overshoot: a sheet swung about a binding goes slightly past flat and settles). In its own block so a browser without linear() keeps the fallback above rather than dropping the declaration. */ @supports (animation-timing-function: linear(0, 1)) { .eb-book-stage { --eb-book-ease: linear(0, 0.0303, 0.1067, 0.2106, 0.3277, 0.4472, 0.5616, 0.666, 0.7573, 0.8345, 0.8974, 0.9469, 0.9842, 1.011, 1.0289, 1.0397, 1.0449, 1.0459, 1.044, 1.0402, 1.0352, 1.0298, 1.0243, 1.0191, 1.0145, 1.0104, 1.007, 1.0042, 1.002, 1.0004, 1); } } /* The book: two pages side by side, each .72 as wide as it is tall (a little narrower than A4, so a 4:5 photograph sits with a margin and its caption under it). Sized off the viewport height too, so the whole spread and the controls under it fit on a laptop screen. */ .eb-book { position: relative; width: var(--bk-w); margin-inline: auto; aspect-ratio: 1.44 / 1; perspective: 3400px; perspective-origin: 50% 50%; -webkit-user-select: none; user-select: none; /* Vertical swipes still scroll the page; sideways ones turn it. */ touch-action: pan-y; /* The give at either end of the book, on its own property so it never collides with the transform the closed book rests at. */ translate: var(--eb-book-pull, 0px); transition: transform var(--eb-book-turn) var(--eb-book-ease), translate 520ms var(--bk-out); } /* PHONES: ONE PAGE AT A TIME (below 720px). See "The phone" in book.js for why. The book is still two pages wide, but only its right half is on the screen: the spine runs down the left edge of the page you are reading, and a turned page swings away over the left edge and is gone. */ .eb-book-stage { --bk-pw: min(100%, max(250px, calc((100svh - 240px) * .72))); } .eb-book.is-single { width: calc(var(--bk-pw) * 2); margin-left: calc(50% - var(--bk-pw) * 1.5); margin-right: 0; } /* Closed: the cover alone, centred where the spread will open. Hover lifts it a little: it is about to be opened. */ .eb-book.is-closed:not(.is-single) { transform: translateX(-25%); transition: transform 460ms var(--bk-out), translate 520ms var(--bk-out); } @media (hover: hover) and (pointer: fine) { .eb-book.is-closed:not(.is-single):hover { transform: translateX(-25%) translateY(-4px); } .eb-book.is-closed.is-single:hover { transform: translateY(-3px); } } .eb-book.is-single { transition: translate 520ms var(--bk-out), transform 460ms var(--bk-out); } /* ---- the board: the cover's ivy linen, round the open pages ---------------- */ .eb-book-board { position: absolute; top: -1.9%; bottom: -1.9%; left: -1.25%; right: -1.25%; border-radius: 4px 7px 7px 4px; background-color: var(--bk-ivy); /* The cloth, a soft fall of light across it, and the turn-ins' edge. */ background-image: radial-gradient(120% 90% at 22% 12%, rgba(238, 231, 217, .06), rgba(238, 231, 217, 0) 60%), linear-gradient(160deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .17)), var(--bk-cloth); background-size: auto, auto, 240px 240px; box-shadow: inset 0 1px 0 rgba(238, 231, 217, .07), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 2px 3px rgba(29, 34, 30, .22), 0 14px 26px -12px rgba(29, 34, 30, .32), 0 40px 70px -36px rgba(29, 34, 30, .6); transition: left var(--eb-book-turn) var(--eb-book-ease), box-shadow var(--eb-book-turn) var(--eb-book-ease); } /* Shut, the board is the spine (the sliver left of the cover, rounded) and, 5px down and to the right, the back board: the book's thickness, with the page block's gilt edges showing between the two boards (the fore-edge below, and the tail, ::after). */ .eb-book.is-closed .eb-book-board { background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(238, 231, 217, .07) 1.1%, rgba(0, 0, 0, .3) 2.4%, rgba(0, 0, 0, 0) 3%), linear-gradient(160deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .17)), var(--bk-cloth); } .eb-book-board::after { content: ""; position: absolute; left: 4%; right: 2.2%; bottom: -5px; height: 5px; border-radius: 0 0 1px 1px; background-image: linear-gradient(180deg, rgba(29, 34, 30, .42), rgba(29, 34, 30, 0) 70%), repeating-linear-gradient(180deg, #d4c08b 0 1px, #b39a62 1px 2px); opacity: 0; transition: opacity 240ms ease; } .eb-book.is-closed .eb-book-board::after { opacity: 1; } .eb-book.is-closed .eb-book-board, .eb-book.is-single .eb-book-board { left: calc(50% - 1.25%); } .eb-book.is-closed .eb-book-board { transition: left var(--eb-book-turn) var(--eb-book-ease), box-shadow 460ms var(--bk-out); box-shadow: 5px 5px 0 0 #1b201c, 5px 5px 0 1px rgba(0, 0, 0, .18), 6px 8px 5px rgba(29, 34, 30, .3), 8px 38px 56px -26px rgba(29, 34, 30, .62); } .eb-book.is-single .eb-book-board { border-radius: 3px 6px 6px 3px; } .eb-book.is-closed .eb-book-spine, .eb-book.is-closed .eb-book-page-left { opacity: 0; } .eb-book-spine, .eb-book-page-left { transition: opacity 260ms ease; } .eb-book.is-single .eb-book-page-left { display: none; } /* The gilded edges of the pages, a thin line of gold between the front board and the back one while the book is shut. */ .eb-book-foreedge { position: absolute; top: calc(-1.9% + 7px); bottom: calc(-1.9% - 3px); right: calc(-1.25% - 5px); width: 5px; z-index: 6; border-radius: 0 1px 1px 0; background-image: linear-gradient(90deg, rgba(29, 34, 30, .45), rgba(29, 34, 30, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 30%, rgba(29, 34, 30, 0) 75%, rgba(29, 34, 30, .22)), repeating-linear-gradient(90deg, #d4c08b 0 1px, #a98f58 1px 2px); opacity: 0; transition: opacity 240ms ease; } .eb-book.is-closed .eb-book-foreedge { opacity: 1; } /* ---- the page block, either side of the open book ------------------------------ The edges of the pages under the two open ones, showing past them: thin on the left at the start, thin on the right at the end (book.js sets --eb-stack-l and --eb-stack-r, 0 to 1, as the pages turn). */ .eb-book-block { position: absolute; top: .35%; bottom: .35%; width: 50%; z-index: 0; pointer-events: none; background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 10%, rgba(29, 34, 30, 0) 88%, rgba(29, 34, 30, .12)), repeating-linear-gradient(90deg, #f1efe7 0 1px, #d3cfc1 1px 2px); transition: transform var(--eb-book-turn) var(--eb-book-ease), opacity 260ms ease; } .eb-book-block-l { left: 0; border-radius: 2px 0 0 2px; transform: translateX(calc((.2 + .8 * var(--eb-stack-l, .5)) * -6px)); } .eb-book-block-r { right: 0; border-radius: 0 2px 2px 0; transform: translateX(calc((.2 + .8 * var(--eb-stack-r, .5)) * 6px)); } .eb-book.is-closed .eb-book-block { opacity: 0; } .eb-book.is-single .eb-book-block-l { display: none; } /* ---- pages ------------------------------------------------------------------ */ .eb-book-page { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; overflow: hidden; background-color: var(--bk-porcelain); background-image: var(--bk-laid), var(--bk-paper); background-size: auto, 256px 256px; background-blend-mode: normal, multiply; } .eb-book-page-left { left: 0; box-shadow: inset -22px 0 34px -26px rgba(29, 34, 30, .3); -webkit-mask: var(--bk-deckle-l) left top / 6px 160px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 5px) 100% no-repeat; mask: var(--bk-deckle-l) left top / 6px 160px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 5px) 100% no-repeat; } .eb-book-page-right { right: 0; box-shadow: inset 22px 0 34px -26px rgba(29, 34, 30, .3); -webkit-mask: var(--bk-deckle-r) right top / 6px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 5px) 100% no-repeat; mask: var(--bk-deckle-r) right top / 6px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 5px) 100% no-repeat; } /* The back endpaper, seen once the last page has turned. */ .eb-book-page-right { display: grid; place-items: center; background-color: var(--bk-petal); } .eb-book-endpaper { width: 12%; aspect-ratio: 1; border: 1px solid rgba(160, 134, 82, .55); border-radius: 50%; } .eb-book-leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; transition: transform var(--eb-book-turn) var(--eb-book-ease); } .eb-book-leaf.is-turned { transform: rotateY(-180deg); } /* Only the leaves near the open spread are drawn (book.js, isNear()): they all lie in the same box, and every face drawn is a layer the browser keeps painted. A divider far away keeps its ribbon, which is in view wherever the book is open, and loses only its faces. */ .eb-book-leaf.is-far { display: none; } .eb-book-leaf.is-far.has-tab { display: block; } .eb-book-leaf.is-far.has-tab > .eb-book-face { display: none; } /* On a phone the pages already read lie off the left of the screen; a resting one there must not show in the gutter. */ .eb-book.is-single .eb-book-leaf.is-turned:not(.is-moving) { visibility: hidden; } /* A page in the air casts a shadow, most of it standing on its edge. Only a leaf that does not bend shows this (the cover, a divider); a bending sheet carries its own light in the strips below. */ .eb-book-leaf.is-moving .eb-book-face { box-shadow: 0 calc(6px + 24px * var(--eb-book-lift, 0)) calc(18px + 50px * var(--eb-book-lift, 0)) rgba(29, 34, 30, calc(.05 + .22 * var(--eb-book-lift, 0))); } /* Light crossing the sheet as it turns, keyed to how far round it is. */ .eb-book-face::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 66%); background-size: 300% 100%; background-repeat: no-repeat; background-position-x: calc(var(--eb-book-frac, 0) * 100%); transition: opacity 200ms ease; } .eb-book-leaf.is-moving .eb-book-face::before { opacity: 1; } /* A face is a size container: everything on a page is measured in the page's own width and height (cqw, cqh), so a page reads the same on a laptop and on a phone. */ .eb-book-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: var(--bk-porcelain); background-image: var(--bk-laid), radial-gradient(140% 110% at 50% 45%, rgba(238, 231, 217, 0) 58%, rgba(238, 231, 217, .7) 100%), var(--bk-paper); background-size: auto, auto, 256px 256px; background-blend-mode: normal, normal, multiply; container-type: size; color: var(--bk-ink); } .eb-book-face-recto { box-shadow: inset 20px 0 30px -24px rgba(29, 34, 30, .32); } .eb-book-face-verso { transform: rotateY(180deg); box-shadow: inset -20px 0 30px -24px rgba(29, 34, 30, .32); } /* The gutter: the page darkens as it curves down into the fold, then catches the light where it rises out of it, a little way from the spine; and it falls away a touch at the fore-edge. Over the page's contents (a photo sits well clear of the fold), under the light that crosses a turning page. */ .eb-book-face.is-paper::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; } .eb-book-face-recto.is-paper::after { background-image: linear-gradient(90deg, rgba(29, 34, 30, .17) 0, rgba(29, 34, 30, .06) 2.4%, rgba(29, 34, 30, 0) 5.5%, rgba(255, 255, 255, .3) 7.6%, rgba(255, 255, 255, 0) 11.5%), linear-gradient(270deg, rgba(29, 34, 30, .05), rgba(29, 34, 30, 0) 3.5%); } .eb-book-face-verso.is-paper::after { background-image: linear-gradient(270deg, rgba(29, 34, 30, .17) 0, rgba(29, 34, 30, .06) 2.4%, rgba(29, 34, 30, 0) 5.5%, rgba(255, 255, 255, .3) 7.6%, rgba(255, 255, 255, 0) 11.5%), linear-gradient(90deg, rgba(29, 34, 30, .05), rgba(29, 34, 30, 0) 3.5%); } /* The deckle on the fore-edge of paper pages (not the cover or the card). */ .eb-book-face-recto.is-paper { -webkit-mask: var(--bk-deckle-r) right top / 6px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 5px) 100% no-repeat; mask: var(--bk-deckle-r) right top / 6px 160px repeat-y, linear-gradient(#000 0 0) left top / calc(100% - 5px) 100% no-repeat; } .eb-book-face-verso.is-paper { -webkit-mask: var(--bk-deckle-l) left top / 6px 160px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 5px) 100% no-repeat; mask: var(--bk-deckle-l) left top / 6px 160px repeat-y, linear-gradient(#000 0 0) right top / calc(100% - 5px) 100% no-repeat; } /* ---- the spine: stitched, not ringed ------------------------------------------- Gilt thread down the fold, above every leaf including one in flight (z-index over book.js's Z_FLIGHT, 5000 and up): the thread is where the pages are sewn, so wherever a page is, the stitch is at its hinge. It is two pixels wide, so a page in the air covers everything but the thread. */ .eb-book-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; pointer-events: none; z-index: 9000; } /* Each stitch is round, lit on its left, and goes into the paper through a hole at either end (::after, under it). */ .eb-book-spine::before { content: ""; position: absolute; left: -1.25px; top: 5%; bottom: 5%; width: 2.5px; z-index: 1; background: linear-gradient(90deg, #7f6737, #e6d6a4 40%, #c7b07a 62%, #7a6536); -webkit-mask: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 1.5px, #000 10.5px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) 25px); mask: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 1.5px, #000 10.5px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) 25px); } .eb-book-spine::after { content: ""; position: absolute; left: -1.5px; top: 5%; bottom: 5%; width: 3px; border-radius: 1.5px; background: repeating-linear-gradient(180deg, rgba(29, 34, 30, .3) 0 1px, rgba(29, 34, 30, 0) 1px 11px, rgba(29, 34, 30, .3) 11px 12px, rgba(29, 34, 30, 0) 12px 25px); } /* ---- the bend (ported unchanged) ------------------------------------------------ While a leaf turns, book.js hides its two faces behind a chain of strips, each a slice of both faces, hinged one to the next, and drives their angles and shading itself (Web Animations for a click, by hand for a drag). No overflow:hidden on a strip: it would flatten preserve-3d. */ .eb-book-leaf.is-curling > .eb-book-face { visibility: hidden; } .eb-book-strips { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n)); transform-style: preserve-3d; pointer-events: none; } .eb-book-strip { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-style: preserve-3d; transform-origin: left center; } .eb-book-strip > .eb-book-strip { left: 100%; } .eb-book-slice { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 1px); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .eb-book-slice-verso { transform: rotateY(180deg); } .eb-book-leaf .eb-book-slice > .eb-book-face.eb-book-face { inset: 0 auto 0 auto; width: calc((100% - 1px) * var(--n)); left: calc((100% - 1px) * var(--at) * -1); transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; -webkit-mask: none; mask: none; } .eb-book-leaf .eb-book-slice > .eb-book-face-recto.eb-book-face-recto { box-shadow: inset 20px 0 30px -24px rgba(29, 34, 30, .32); } .eb-book-leaf .eb-book-slice > .eb-book-face-verso.eb-book-face-verso { box-shadow: inset -20px 0 30px -24px rgba(29, 34, 30, .32); } .eb-book-slice > .eb-book-face::before { display: none; } .eb-book-shade { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, var(--l0, 0)), rgba(255, 255, 255, var(--l1, 0))), linear-gradient(90deg, rgba(29, 34, 30, var(--d0, 0)), rgba(29, 34, 30, var(--d1, 0))); } /* ---- a look: the photo mounted, the words under it --------------------------------- */ .eb-book-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; /* The foot keeps clear of the page number (a 30px ring, 3.1cqh up), which on a phone's page is taller than 8.5cqh. */ padding: 6.2cqh 9cqw max(8.5cqh, 3.1cqh + 36px); } .eb-book-eyebrow { flex: none; display: flex; align-items: center; gap: 2.6cqw; margin: 0 0 2.6cqh; font-family: var(--bk-body); font-weight: 500; font-size: max(.75rem, 2.1cqw); line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: var(--bk-gilt-deep); /* Letter-spacing trails after the last letter; this puts it back. */ margin-right: -.26em; } .eb-book-eyebrow::before, .eb-book-eyebrow::after { content: ""; width: 4.2cqw; height: 1px; background: var(--bk-gilt); opacity: .75; } .eb-book-art { flex: 1 1 auto; min-height: 0; width: 100%; padding: 8px; display: grid; place-items: center; container-type: size; } /* The mount: sized to the photo's own shape and fitted to the space, so a portrait fills the page and a landscape sits within it with margins. Never cropped: the frame IS the photo's shape. */ .eb-book-mount { position: relative; margin: 0; width: min(100cqw, 100cqh * var(--r, .8)); aspect-ratio: var(--r, .8); background-color: var(--c, var(--bk-sage-soft)); box-shadow: 0 1px 1.5px rgba(29, 34, 30, .16), 0 14px 26px -18px rgba(29, 34, 30, .55); cursor: zoom-in; } @supports not (width: 1cqw) { .eb-book-mount { width: 100%; height: 100%; aspect-ratio: auto; background: none; box-shadow: none; } .eb-book-mount img { object-fit: contain; } } .eb-book-mount img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The lustre of a real print: a soft sheen from the top left, a little back at the far corner. */ .eb-book-mount::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(128deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .03) 24%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .05) 100%); } /* The gilt keyline, a mat's width out from the print. */ .eb-book-mount::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(160, 134, 82, .72); pointer-events: none; } .eb-book-caption { flex: none; width: 100%; max-width: 82cqw; margin-top: 3cqh; display: grid; gap: 1.1cqh; text-align: center; } .eb-book-words { margin: 0; font-family: var(--bk-display); font-style: italic; font-weight: 500; font-size: clamp(1.18rem, 5.3cqw, 1.72rem); line-height: 1.2; color: var(--bk-ink); text-wrap: balance; } .eb-book-credit { margin: 0; font-size: max(.75rem, 2.35cqw); line-height: 1.35; letter-spacing: .02em; color: var(--bk-fern); } /* A landscape print and its words sit together in the middle of the page. */ .eb-book-sheet[data-shape="wide"] .eb-book-art { flex: 0 1 auto; height: calc(82cqw / var(--r0, 1.5) + 16px); margin-top: auto; } .eb-book-sheet[data-shape="wide"] .eb-book-caption { margin-bottom: auto; } /* The page number, in a small gold ring, in the outer corner. */ .eb-book-folio { position: absolute; bottom: 3.1cqh; z-index: 2; width: clamp(30px, 6.4cqw, 38px); aspect-ratio: 1; border: 1px solid var(--bk-gilt); border-radius: 50%; display: grid; place-items: center; font-family: var(--bk-body); font-weight: 500; font-size: .75rem; line-height: 1; letter-spacing: 0; color: var(--bk-gilt-deep); font-variant-numeric: lining-nums tabular-nums; } .eb-book-face-recto .eb-book-folio { right: 5.6cqw; } .eb-book-face-verso .eb-book-folio { left: 5.6cqw; } /* More photos from the same look, as a page of smaller prints. */ .eb-book-prints { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; gap: 4cqw; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .eb-book-prints[data-layout="cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eb-book-prints[data-layout="rows"] { grid-template-rows: repeat(2, minmax(0, 1fr)); } .eb-book-prints[data-layout="four"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .eb-book-prints[data-layout="top"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .eb-book-prints[data-layout="top"] > :first-child { grid-column: 1 / -1; } .eb-book-prints[data-layout="bottom"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .eb-book-prints[data-layout="bottom"] > :last-child { grid-column: 1 / -1; } /* No portraits: sized to the prints and centred (fitPrints() in book.js). */ .eb-book-prints.is-fitted { flex: 0 1 auto; margin-block: auto; } .eb-book-print { min-width: 0; min-height: 0; padding: 7px; display: grid; place-items: center; container-type: size; } .eb-book-print .eb-book-mount::after { inset: -5px; } /* ---- the cover ------------------------------------------------------------------ */ /* The front board: bigger than the pages by the board's own margin (the squares), so shut it covers them and the board beneath, as a real board overhangs its pages. Only the cover grows: its back, the inside page, is page-sized, and the cover does not bend (book.js), so no strip copies it. */ .eb-book-face[data-kind="cover"] { inset: -1.9% -2.5% -1.9% 0; border-radius: 1px 5px 5px 1px; background: var(--bk-ivy); } .eb-book-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10cqw; border-radius: inherit; background-color: var(--bk-ivy); /* Worn corners (the cloth rubs lighter where hands hold it), the light from the top left, its fall away to the bottom right, and the cloth. */ background-image: radial-gradient(18cqw 18cqw at 100% 0, rgba(238, 231, 217, .085), rgba(238, 231, 217, 0) 70%), radial-gradient(18cqw 18cqw at 100% 100%, rgba(238, 231, 217, .075), rgba(238, 231, 217, 0) 70%), radial-gradient(110% 80% at 30% 18%, rgba(238, 231, 217, .08), rgba(238, 231, 217, 0) 62%), linear-gradient(165deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .24)), var(--bk-cloth); background-size: auto, auto, auto, auto, 240px 240px; /* The cloth wrapped over the board's rounded edges: lit along the top, in shadow along the bottom and the fore-edge. */ box-shadow: inset 0 1px 0 rgba(238, 231, 217, .09), inset 0 2px 2px -1px rgba(238, 231, 217, .05), inset -1px 0 0 rgba(238, 231, 217, .05), inset 0 -2px 3px -1px rgba(0, 0, 0, .4), inset -3px 0 4px -2px rgba(0, 0, 0, .3); color: var(--bk-petal); } /* The hinge: the roll of the spine, then the French groove pressed into the board a finger's width from it, shadowed on its near wall and lit on the far one. */ .eb-book-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10cqw; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .16) 45%, rgba(0, 0, 0, 0)) 0 0 / 5.5cqw 100% no-repeat, linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4) 36%, rgba(0, 0, 0, .12) 60%, rgba(238, 231, 217, .08) 80%, rgba(238, 231, 217, 0)) 6cqw 0 / 2.4cqw 100% no-repeat; } /* A blind-tooled frame: pressed into the cloth with no gold, a shadow on the top and left of the line, the light catching its bottom and right. */ .eb-book-cover::after { content: ""; position: absolute; top: 5.5cqw; bottom: 5.5cqw; left: 14cqw; right: 5.5cqw; pointer-events: none; border: 1px solid rgba(0, 0, 0, .32); box-shadow: 1px 1px 0 rgba(238, 231, 217, .07), inset 1px 1px 0 rgba(238, 231, 217, .05); } /* The ring and the monogram in gold foil, pressed in: a dark lip above where the foil sinks, a catch of light below. */ .eb-book-cover-ring { position: relative; width: 46cqw; aspect-ratio: 1; margin-left: 4cqw; border-radius: 50%; display: grid; place-items: center; filter: drop-shadow(0 -.6px 0 rgba(0, 0, 0, .55)) drop-shadow(0 .8px 0 rgba(238, 231, 217, .1)); } .eb-book-cover-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bk-grain) 0 0 / 120px 120px, var(--bk-foil); background-blend-mode: multiply; -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 1.7px), #000 calc(100% - 1.3px)); mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 1.7px), #000 calc(100% - 1.3px)); } .eb-book-cover-mono { display: block; width: 23cqw; aspect-ratio: 241 / 226; background: var(--bk-grain) 0 0 / 120px 120px, var(--bk-foil); background-blend-mode: multiply; -webkit-mask: var(--eb-mono) center / contain no-repeat; mask: var(--eb-mono) center / contain no-repeat; } .eb-book-cover-title { margin: 7cqw 0 0 4cqw; font-family: var(--bk-display); font-weight: 500; font-size: clamp(1.5rem, 9.2cqw, 2.9rem); line-height: 1.12; letter-spacing: .01em; color: var(--bk-gilt-soft); } /* The title in the same foil, where the browser can fill text with it. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .eb-book-cover-title { background: var(--bk-grain) 0 0 / 160px 160px, var(--bk-foil); background-blend-mode: multiply; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 -.6px 0 rgba(0, 0, 0, .55)) drop-shadow(0 .8px 0 rgba(238, 231, 217, .1)); padding-bottom: .06em; } } /* Her name small, in plain gilt: a gradient across letters this small only muddies them, and it keeps its contrast (7.4:1). */ .eb-book-cover-name { margin: 3.4cqw 0 0 4cqw; padding-left: .34em; font-family: var(--bk-body); font-weight: 500; font-size: max(.75rem, 2.35cqw); letter-spacing: .34em; text-transform: uppercase; color: var(--bk-gilt-soft); filter: drop-shadow(0 -.5px 0 rgba(0, 0, 0, .5)); } .eb-book-cover-name::before { content: ""; display: block; width: 8cqw; height: 1px; margin: 0 auto 3.4cqw; background: var(--bk-foil); } /* ---- the contents (the inside of the cover), the end, a tissue ---------------------- */ .eb-book-contents, .eb-book-end, .eb-book-tissue { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10cqh 13cqw; } .eb-book-mark { width: 15cqw; aspect-ratio: 1; border: 1px solid var(--bk-gilt); border-radius: 50%; display: grid; place-items: center; margin-bottom: 5cqh; } .eb-book-mark img { width: 8.5cqw; height: auto; } .eb-book-contents .eb-book-eyebrow { margin-bottom: 4.5cqh; } .eb-book-toc { list-style: none; width: 100%; display: grid; gap: .4cqh; } .eb-book-toc-item { display: flex; align-items: baseline; gap: 2cqw; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--bk-ink); font-family: var(--bk-display); font-weight: 500; font-size: clamp(1.35rem, 6cqw, 1.85rem); line-height: 1.5; } .eb-book-toc-dots { flex: 1; min-width: 4cqw; border-bottom: 1px dotted rgba(160, 134, 82, .8); transform: translateY(-.28em); } .eb-book-toc-page { font-family: var(--bk-body); font-size: max(.8125rem, 2.5cqw); color: var(--bk-gilt-deep); font-variant-numeric: lining-nums tabular-nums; } @media (hover: hover) { .eb-book-toc-item:hover .eb-book-toc-name { color: var(--bk-fern); text-decoration: underline; text-decoration-color: var(--bk-gilt); text-decoration-thickness: 1px; text-underline-offset: .2em; } } .eb-book-toc-item:focus-visible { outline-offset: 2px; } .eb-book-contents-note { margin: 5cqh 0 0; font-size: max(.8125rem, 2.4cqw); letter-spacing: .04em; color: var(--bk-fern); } .eb-book-end-title { font-family: var(--bk-display); font-weight: 500; font-size: clamp(1.5rem, 8cqw, 2.4rem); line-height: 1.08; margin: 0 0 3cqh; color: var(--bk-ink); text-wrap: balance; } .eb-book-end-text { margin: 0 0 5cqh; max-width: 30ch; font-size: max(.86rem, 3cqw); line-height: 1.55; color: var(--bk-fern-deep); } .eb-book-end .eb-btn { pointer-events: auto; } .eb-book-face[data-kind="tissue"] { background-color: #f6f5ef; } .eb-book-tissue span { width: 13cqw; aspect-ratio: 1; border: 1px solid rgba(160, 134, 82, .45); border-radius: 50%; } /* ---- dividers: petal card, and a ribbon for each chapter -------------------------- */ .eb-book-face[data-kind="divider"], .eb-book-face[data-kind="divider-back"], .eb-book-face[data-kind="back-divider"] { background-color: var(--bk-petal); background-image: var(--bk-laid), radial-gradient(140% 110% at 50% 45%, rgba(205, 186, 142, 0) 55%, rgba(205, 186, 142, .28) 100%), var(--bk-paper); background-size: auto, auto, 256px 256px; background-blend-mode: normal, normal, multiply; } .eb-book-face[data-kind="back-cover"] { background-color: var(--bk-petal); } .eb-book-divider { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10cqw; } .eb-book-divider-no { margin: 0 0 5cqh; padding-left: .26em; font-size: max(.75rem, 2.2cqw); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--bk-gilt-deep); } /* The chapter's name inside the ring, the way her logo sits in its circle. */ .eb-book-divider-ring { width: 62cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--bk-gilt); display: grid; place-items: center; padding: 6cqw; } .eb-book-divider-name { margin: 0; font-family: var(--bk-display); font-weight: 500; font-size: clamp(1.7rem, 10.5cqw, 3.4rem); line-height: 1.02; color: var(--bk-ink); text-wrap: balance; } .eb-book-divider-count { margin: 5cqh 0 0; font-size: max(.8125rem, 2.5cqw); letter-spacing: .06em; color: var(--bk-fern-deep); } .eb-book-divider-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9cqh 13cqw; } .eb-book-divider-back .eb-book-eyebrow { margin-bottom: 4cqh; } /* The chapter's own contents, on the back of its divider: every look by name, with its page. */ .eb-book-toc--looks { gap: 0; } .eb-book-toc--looks .eb-book-toc-item { min-height: 40px; font-size: clamp(1rem, 4.5cqw, 1.3rem); line-height: 1.4; } .eb-book-toc--looks .eb-book-toc-name { font-style: italic; } /* The ribbon hangs off the divider leaf's fore-edge, outside the page, so it shows whatever lies on top of it (dividerTab() in book.js). Two faces, so its word reads the right way round from either side, each with a swallowtail cut at its outer end. */ .eb-book-tab { position: absolute; left: 100%; width: 30px; padding: 0; border: 0; background: none; cursor: pointer; transition: left var(--eb-book-turn) var(--eb-book-ease); transform-style: preserve-3d; /* A far leaf has pointer-events off; its ribbon is still in view. */ pointer-events: auto; } .eb-book-tab-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; writing-mode: vertical-rl; font-family: var(--bk-body); font-weight: 500; font-size: .75rem; letter-spacing: .04em; white-space: nowrap; color: var(--bk-ink); background-color: var(--tab, var(--bk-sage)); /* Satin: a sheen down the ribbon's length, a shadow where it leaves the page. */ background-image: linear-gradient(90deg, rgba(29, 34, 30, .16), rgba(29, 34, 30, 0) 5px), linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, 0) 70%); transition: filter .2s; } .eb-book-tab-front { padding-right: 5px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); } .eb-book-tab-back { padding-left: 5px; transform: rotateY(180deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%); background-image: linear-gradient(270deg, rgba(29, 34, 30, .16), rgba(29, 34, 30, 0) 5px), linear-gradient(270deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, 0) 70%); } /* Shut, the front board overhangs the pages (the cover's squares), so the ribbons hang past it rather than half under it. */ .eb-book.is-closed .eb-book-tab { left: 102.5%; } .eb-book-tab[data-tone="sage"] { --tab: var(--bk-sage); } .eb-book-tab[data-tone="petal"] { --tab: var(--bk-petal); } .eb-book-tab[data-tone="gilt"] { --tab: var(--bk-gilt-soft); } @media (hover: hover) { .eb-book-tab:hover .eb-book-tab-face { filter: brightness(1.05) saturate(1.1); } } .eb-book-tab:focus { outline: none; } .eb-book-tab:focus-visible .eb-book-tab-face { outline: 2px solid var(--bk-gilt-deep); outline-offset: -3px; } .eb-book-tab[aria-current="true"] .eb-book-tab-face { color: var(--bk-ink); font-weight: 500; } /* ---- turning by the edges ------------------------------------------------------ */ .eb-book.is-closed .eb-book-hit-prev { display: none; } .eb-book-hit { position: absolute; top: 0; bottom: 0; width: 15%; z-index: 9100; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .eb-book-hit-prev { left: 0; } .eb-book-hit-next { right: 0; } .eb-book-hit-icon { position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; display: grid; place-items: center; color: var(--bk-fern-deep); background: rgba(250, 250, 246, .92); box-shadow: 0 0 0 1px rgba(160, 134, 82, .6), 0 6px 14px -8px rgba(29, 34, 30, .5); opacity: 0; transition: opacity .2s; } .eb-book-hit-icon svg { width: 20px; height: 20px; } .eb-book-hit-prev .eb-book-hit-icon { left: 14px; } .eb-book-hit-next .eb-book-hit-icon { right: 14px; } @media (hover: hover) and (pointer: fine) { .eb-book:hover .eb-book-hit:not([disabled]) .eb-book-hit-icon { opacity: 1; } .eb-book:not(.is-closed) .eb-book-leaf.is-live, .eb-book:not(.is-closed) .eb-book-hit:not([disabled]) { cursor: grab; } .eb-book.is-dragging, .eb-book.is-dragging * { cursor: grabbing !important; } } /* The ring on the arrow, not a rectangle down the page. :focus as well as :focus-visible, so a mouse click never draws the strip's outline. */ .eb-book-hit:focus, .eb-book-hit:focus-visible { outline: none; } .eb-book-hit:focus-visible .eb-book-hit-icon { opacity: 1; box-shadow: 0 0 0 2px var(--bk-porcelain), 0 0 0 4px var(--bk-gilt-deep); } .eb-book-hit[disabled] { cursor: default; } .eb-book.is-single .eb-book-hit { width: 14%; } .eb-book.is-single .eb-book-hit-prev { left: 50%; } .eb-book.is-single .eb-book-hit-icon { display: none; } .eb-book .eb-book-mount { pointer-events: auto; } /* ---- under the book: where you are, and what you can do ------------------------ */ .eb-book-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "hint nav actions"; align-items: center; gap: 12px 24px; margin: clamp(22px, 3vw, 34px) auto 0; width: var(--bk-w); } .eb-book-hint { grid-area: hint; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--bk-fern); max-width: 34ch; } .eb-book-nav { grid-area: nav; display: flex; align-items: center; justify-content: center; gap: 10px; } .eb-book-count { margin: 0; min-width: 12em; text-align: center; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-fern-deep); font-variant-numeric: lining-nums tabular-nums; } .eb-book-step { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(128, 135, 109, .7); background: transparent; color: var(--bk-fern-deep); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, opacity .2s; } .eb-book-step svg { width: 18px; height: 18px; } .eb-book-step:disabled { opacity: .3; cursor: default; } @media (hover: hover) { .eb-book-step:not(:disabled):hover { background: rgba(195, 196, 178, .45); } } .eb-book-step:focus-visible { border-radius: 50%; } .eb-book-actions { grid-area: actions; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } .eb-book-actions .eb-btn[hidden] { display: none; } .eb-book-actions svg { width: 18px; height: 18px; } @media (max-width: 999.98px) { .eb-book-meter { grid-template-columns: 1fr; grid-template-areas: "nav" "actions" "hint"; justify-items: center; text-align: center; } .eb-book-actions { justify-content: center; } } @media (max-width: 719.98px) { .eb-book-stage { padding-top: 22px; } .eb-book-meter { width: var(--bk-pw); gap: 12px; } .eb-book-count { min-width: 0; flex: 1; letter-spacing: .1em; } .eb-book-nav { width: 100%; justify-content: space-between; } /* No room beside a single page for the ribbons; the chapter links above the book and the contents page do the same job. */ .eb-book-tab { display: none; } /* The chapters in one row that scrolls sideways (a wrapped row left "Bridal parties" alone on a line), the switch under it. */ .eb-book-bar { flex-direction: column; align-items: center; gap: 8px; } .eb-book-chapters { width: calc(100% + 2 * var(--gutter, 20px)); margin-inline: calc(-1 * var(--gutter, 20px)); padding-inline: var(--gutter, 20px); flex-wrap: nowrap; gap: 0 22px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter, 20px); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter, 20px), #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter, 20px), #000 calc(100% - 40px), transparent); } .eb-book-chapters::-webkit-scrollbar { display: none; } .eb-book-chapters li { flex: none; scroll-snap-align: start; } .eb-book-chapters li:last-child { padding-right: 24px; } .eb-book-chapters a { font-size: .75rem; letter-spacing: .14em; white-space: nowrap; } html[data-eb-book-view] .eb-book-bar:not(:has(.eb-book-views))::after { width: 1px; } } /* ---- the larger view: site.css's .eb-lightbox, with the book's words ---------- */ .eb-book-lb img { transition: opacity .25s ease; } .eb-book-lb img.is-loading { opacity: .25; } .eb-book-lb figcaption { display: grid; gap: 6px; max-width: min(92vw, 44rem); } .eb-book-lb-words { font-family: var(--bk-display); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.25; color: var(--bk-petal); text-wrap: balance; } .eb-book-lb-words:empty { display: none; } .eb-book-lb-meta { font-size: .8125rem; letter-spacing: .06em; color: var(--bk-gilt-soft); } .eb-book-lb-meta:empty { display: none; } .eb-book-lb .eb-lightbox__close:focus-visible, .eb-book-lb .eb-lightbox__prev:focus-visible, .eb-book-lb .eb-lightbox__next:focus-visible { outline: 2px solid var(--bk-gilt-soft); outline-offset: 3px; border-radius: 50%; } /* ---- motion off ------------------------------------------------------------------ site.css's block already stops every transition and animation. The turn itself stays (instant: book.js skips the animation and the bend); the light, the shadow in flight and the give at the ends go. */ @media (prefers-reduced-motion: reduce) { .eb-book, .eb-book-board, .eb-book-leaf, .eb-book-spine, .eb-book-page-left, .eb-book-foreedge, .eb-book-block { transition: none; } .eb-book-face::before { display: none; } .eb-book-leaf.is-moving .eb-book-face { box-shadow: none; } .eb-book { translate: none; } .eb-book.is-closed:not(.is-single):hover { transform: translateX(-25%); } .eb-book.is-closed.is-single:hover { transform: none; } .eb-book-tile__photo:hover .eb-book-tile__img { transform: none; } } /* ---- print: the grid, never the book ---------------------------------------------- */ @media print { .eb-book-stage, .eb-book-bar { display: none !important; } [data-eb-book-view] #eb-book-grid { display: block !important; } .eb-book-tile { break-inside: avoid; } }