/* ============================================================ My Book Shelf — shared styles Change the colours here and every page on the site updates. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { /* --u is the "size unit" for the book. flipbook.js sets it so the book always fits the screen. Everything inside a page is sized from it, so the book scales without ever breaking its layout. */ --u: 20px; /* Paper */ --paper: #fffdf7; --paper-warm: #fdf5e6; --ink: #4a3f4e; --ink-soft: #9b8ba3; /* Shell colours (used on the shelf page) */ --bg: #fff4ec; --bg-2: #f3ebff; --accent: #ff7ba3; --accent-deep: #e35a86; --sun: #ffc94d; --leaf: #57c79a; --wood: #e8c9a0; --wood-2: #c99f6d; --dot: rgba(255, 123, 163, .18); --font-display: "Baloo 2", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif; --font-body: "Nunito", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif; --font-hand: "Patrick Hand", "Bradley Hand", "Comic Sans MS", cursive; --shadow: 0 12px 28px rgba(120, 80, 100, .16); } /* ---------- Book themes ------------------------------------- Give a book a theme by setting Choose from: peach, mint, lavender, sunny, ocean ------------------------------------------------------------ */ [data-theme="peach"] { --accent:#ff7ba3; --accent-deep:#e35a86; --bg:#fff4ec; --bg-2:#ffe4ee; --dot:rgba(255,123,163,.18); } [data-theme="mint"] { --accent:#3fc09a; --accent-deep:#2a9d7c; --bg:#effaf5; --bg-2:#d8f3e7; --dot:rgba(63,192,154,.18); } [data-theme="lavender"]{ --accent:#a181f0; --accent-deep:#8461d8; --bg:#f6f1ff; --bg-2:#e8dcff; --dot:rgba(161,129,240,.18); } [data-theme="sunny"] { --accent:#f5a524; --accent-deep:#d8860b; --bg:#fff9e8; --bg-2:#ffeec4; --dot:rgba(245,165,36,.20); } [data-theme="ocean"] { --accent:#4aa8e0; --accent-deep:#2b87bf; --bg:#eef7fd; --bg-2:#d6ecfb; --dot:rgba(74,168,224,.18); } /* ---------- Page shell -------------------------------------- */ body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--ink); background-color: var(--bg); background-image: radial-gradient(var(--dot) 2.5px, transparent 2.5px), linear-gradient(165deg, var(--bg) 0%, var(--bg-2) 100%); background-size: 30px 30px, 100% 100%; background-attachment: fixed; -webkit-font-smoothing: antialiased; } a { color: var(--accent-deep); } :focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: 6px; } /* Chunky, pressable buttons */ .btn { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1; padding: .7em 1.2em; border: none; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-deep); cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--accent-deep); } .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); } .btn[disabled] { opacity: .35; cursor: default; transform: none; box-shadow: 0 4px 0 var(--accent-deep); } .btn--quiet { background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.10); } .btn--quiet:hover { box-shadow: 0 5px 0 rgba(0,0,0,.10); } .btn--quiet:active { box-shadow: 0 1px 0 rgba(0,0,0,.10); } /* ============================================================ THE SHELF (index.html) ============================================================ */ .shelf-page { max-width: 1000px; margin: 0 auto; padding: clamp(24px, 6vw, 64px) 20px 80px; } .shelf-header { text-align: center; margin-bottom: clamp(28px, 6vw, 56px); } .shelf-header h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.05; margin: 0; color: var(--ink); text-shadow: 3px 3px 0 #fff, 5px 5px 0 var(--dot); } .shelf-header h1 .wave { display: inline-block; transform: rotate(-4deg); color: var(--accent-deep); } .shelf-header p { font-family: var(--font-hand); font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: var(--ink-soft); margin: .6em auto 0; max-width: 30ch; } /* A real shelf: books stand on a wooden plank */ .shelf { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(18px, 4vw, 40px); padding: 0 clamp(10px, 3vw, 30px) 18px; } .shelf::after { /* the plank */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-radius: 6px; background: linear-gradient(180deg, var(--wood) 0%, var(--wood) 55%, var(--wood-2) 100%); box-shadow: 0 10px 18px rgba(120, 80, 40, .22); } .shelf-row { margin-bottom: 46px; } /* One book standing face-out on the shelf */ .book-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: clamp(140px, 26vw, 176px); aspect-ratio: 3 / 4; padding: 14px 12px; text-align: center; text-decoration: none; color: var(--ink); background: var(--card, #ffd7e3); border-radius: 6px 12px 12px 6px; box-shadow: inset 7px 0 0 rgba(0, 0, 0, .10), /* the spine */ inset 9px 0 0 rgba(255, 255, 255, .35), var(--shadow); transform: rotate(var(--tilt, -2deg)); transition: transform .22s cubic-bezier(.2,.9,.3,1.4), box-shadow .22s ease; } .book-card:nth-child(even) { --tilt: 2deg; } .book-card:hover, .book-card:focus-visible { transform: rotate(0deg) translateY(-10px) scale(1.03); box-shadow: inset 7px 0 0 rgba(0, 0, 0, .10), inset 9px 0 0 rgba(255, 255, 255, .35), 0 20px 30px rgba(120, 80, 100, .24); } .book-card .cover-art { font-size: clamp(2.6rem, 8vw, 3.4rem); line-height: 1; } .book-card .cover-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; margin: 0; } .book-card .cover-by { font-family: var(--font-hand); font-size: .95rem; color: rgba(0,0,0,.45); margin: 0; } /* A book whose cover is a picture */ .book-card--art { padding: 0; overflow: hidden; width: auto; /* the artwork decides how wide the book is */ height: clamp(186px, 33vw, 234px); aspect-ratio: auto; } .book-card--art::after { /* keep the spine on top of the artwork */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 7px 0 0 rgba(0, 0, 0, .10), inset 9px 0 0 rgba(255, 255, 255, .35); } .cover-image { height: 100%; width: auto; display: block; } /* The empty slot at the end of the shelf */ .book-slot { width: clamp(140px, 26vw, 176px); aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-soft); border: 3px dashed rgba(0, 0, 0, .16); border-radius: 12px; background: rgba(255, 255, 255, .35); } .shelf-footer { margin-top: 54px; text-align: center; font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-soft); } /* ============================================================ THE READER (each book page) ============================================================ */ .reader { min-height: 100vh; display: flex; flex-direction: column; } .reader-bar { display: flex; align-items: center; gap: 14px; padding: 14px clamp(14px, 3vw, 28px); } .reader-bar .back { font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.7); padding: .5em 1em; border-radius: 999px; box-shadow: 0 3px 0 rgba(0,0,0,.08); } .reader-bar .back:hover { background: #fff; } .reader-bar .spacer { flex: 1; } .reader-bar .sound { border: none; background: rgba(255,255,255,.7); font-size: 1.2rem; line-height: 1; width: 2.4em; height: 2.4em; border-radius: 999px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.08); } .reader-bar .sound.off { opacity: .45; } .stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 8px; } /* ---------- The book ---------- */ .book { --pw: calc(var(--u) * 22); /* page width */ --ph: calc(var(--u) * 29); /* page height */ position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: calc(var(--u) * 110); user-select: none; -webkit-tap-highlight-color: transparent; } .book.single { width: var(--pw); } /* The pages you see before the first flip / after the last */ .underlay { position: absolute; top: 0; width: var(--pw); height: var(--ph); z-index: 0; } .underlay.left { left: 0; } .underlay.right { left: 50%; } .book.single .underlay.left { display: none; } .book.single .underlay.right { left: 0; } /* A leaf is one sheet of paper: front face + back face */ .leaf { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: left center; transform-style: preserve-3d; transition: transform .78s cubic-bezier(.42, 0, .28, 1); will-change: transform; } .book.single .leaf { left: 0; transition: transform .68s cubic-bezier(.42,0,.28,1), opacity .01s linear 0s; } .leaf.flipped { transform: rotateY(-180deg); } /* In one-page mode the turned sheet disappears once it has gone by */ .book.single .leaf.flipped { opacity: 0; transition: transform .68s cubic-bezier(.42,0,.28,1), opacity .01s linear .6s; } .book.instant .leaf { transition: none !important; } .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face.back { transform: rotateY(180deg); } /* ---------- A single page of paper ---------- */ .page { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.9) calc(var(--u) * 1.6); text-align: center; background: radial-gradient(120% 90% at 50% 0%, #fffefa 0%, var(--paper) 45%, var(--paper-warm) 100%); } /* The stack of paper casts one soft shadow; the sheets on top get a thin edge so the book looks like it has real thickness. */ .underlay .page { box-shadow: 0 calc(var(--u)*.9) calc(var(--u)*1.6) rgba(90, 60, 80, .28); } .face .page { box-shadow: 0 calc(var(--u)*.25) calc(var(--u)*.55) rgba(90, 60, 80, .16); } /* Right-hand pages are bound on the left, left-hand pages on the right */ .face.front .page { border-radius: 0 calc(var(--u)*.7) calc(var(--u)*.7) 0; } .face.back .page { border-radius: calc(var(--u)*.7) 0 0 calc(var(--u)*.7); } .underlay.right .page { border-radius: 0 calc(var(--u)*.7) calc(var(--u)*.7) 0; } .underlay.left .page { border-radius: calc(var(--u)*.7) 0 0 calc(var(--u)*.7); } .book.single .page { border-radius: calc(var(--u)*.25) calc(var(--u)*.7) calc(var(--u)*.7) calc(var(--u)*.25); } /* The shadow near the spine that makes it look bound */ .page::before { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--u) * 2.2); pointer-events: none; } .face.front .page::before, .underlay.right .page::before, .book.single .page::before { left: 0; background: linear-gradient(90deg, rgba(120, 90, 70, .22), rgba(120, 90, 70, 0)); } .face.back .page::before, .underlay.left .page::before { left: auto; right: 0; background: linear-gradient(270deg, rgba(120, 90, 70, .22), rgba(120, 90, 70, 0)); } .page-art { font-size: calc(var(--u) * 3.6); line-height: 1; } .page-art img { max-width: 100%; max-height: calc(var(--u) * 11); border-radius: calc(var(--u)*.4); } .page-text { font-size: calc(var(--u) * .98); line-height: 1.6; max-width: 26ch; } .page-text.small { font-size: calc(var(--u) * .82); line-height: 1.55; max-width: 30ch; } .page-text p { margin: 0 0 .7em; } .page-text p:last-child { margin-bottom: 0; } .page-number { position: absolute; bottom: calc(var(--u) * .9); font-family: var(--font-hand); font-size: calc(var(--u) * .8); color: var(--ink-soft); } .face.front .page-number, .book.single .page-number { right: calc(var(--u) * 1.4); } .face.back .page-number { left: calc(var(--u) * 1.4); } /* Title page */ .page--title .page-art { font-size: calc(var(--u) * 5); } .page--title h1 { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 1.7); line-height: 1.1; margin: 0; max-width: 16ch; } .page--title .by { font-family: var(--font-hand); font-size: calc(var(--u) * .85); color: var(--ink-soft); margin: 0; } .page--title .author { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--u) * 1.05); margin: 0; color: var(--accent-deep); } .page--title .rule { width: calc(var(--u) * 5); height: calc(var(--u) * .18); border-radius: 999px; background: var(--accent); opacity: .7; } /* A title page that is a picture */ .page--art-cover { padding: 0; gap: 0; } .cover-full { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; } /* Table of contents */ .page--contents { justify-content: flex-start; align-items: stretch; text-align: left; padding-top: calc(var(--u) * 2.4); gap: calc(var(--u) * 1.1); } .toc-title { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 1.3); text-align: center; margin: 0; } .toc { list-style: none; margin: 0; padding: 0; width: 100%; } .toc li { display: flex; align-items: baseline; gap: calc(var(--u) * .35); font-size: calc(var(--u) * .92); line-height: 1.2; padding: calc(var(--u) * .4) 0; } .toc-dots { flex: 1 1 auto; min-width: calc(var(--u) * .8); border-bottom: calc(var(--u) * .1) dotted rgba(74, 63, 78, .38); transform: translateY(calc(var(--u) * -.16)); } .toc-page { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; } /* Last page */ .page--end h2 { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--u) * 1.7); margin: 0; } .page--end .btn { font-size: calc(var(--u) * .8); } .page--end .end-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u)*.5); justify-content: center; margin-top: calc(var(--u)*.4); } /* Inside covers */ .page--cover-inside { background: var(--accent); background-image: radial-gradient(rgba(255,255,255,.3) 2.5px, transparent 2.5px); background-size: calc(var(--u)*1.4) calc(var(--u)*1.4); } .page--cover-inside .mark { font-family: var(--font-hand); font-size: calc(var(--u) * .9); color: #fff; background: rgba(0,0,0,.14); padding: .5em 1.1em; border-radius: 999px; } /* ---------- Controls under the book ---------- */ .controls { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 26px); padding: 18px 14px 30px; } .turn { border: none; cursor: pointer; width: 3.1rem; height: 3.1rem; border-radius: 999px; font-size: 1.3rem; line-height: 1; color: #fff; background: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); transition: transform .12s ease, box-shadow .12s ease; } .turn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); } .turn[disabled] { opacity: .3; cursor: default; transform: none; } .counter { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-soft); min-width: 11ch; text-align: center; } @media (prefers-reduced-motion: reduce) { .leaf, .book-card, .btn, .turn { transition-duration: .01ms !important; } }