/* --------------------------------------------------------------------- The Bootstrapped Brand, the reader. Tokens are lifted from bootstrappedbrand.com so the two properties read as one brand: gold #D89B02 on deep brown #3D1D06, set in Cairo. Three page colours and two typefaces, because a phone in bed and a laptop at a desk want different things from the same book. The page colour is a data attribute on the root element, set by an inline script in the head before this file paints, so nobody gets a white flash before their dark theme arrives. Everything here is mobile first. Most readers open this on a phone on a slow connection, and that is the layout that decides whether they finish. --------------------------------------------------------------------- */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/cairo-variable.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/newsreader-var.woff2') format('woff2'); } :root { --ink: #3D1D06; --ink-2: #5C3A1E; --accent: #D89B02; --accent-ink: #8F6600; --body: #5C3A1E; --muted: #7D6A4E; --muted-2: #A8977B; --bg: #FFFFFF; --bg-2: #FAFAF9; --dark: #3D1D06; --dark-2: #2A1204; --paper: #F7F1E6; --rule: #E7E2DA; --rule-2: #D8D1C6; --font-sans: 'Cairo', system-ui, -apple-system, sans-serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; /* The reading pane's own tokens. These are what the three page colours and the size control actually change. */ --bb-reading-size: 19px; --bb-page-bg: #FFFFFF; --bb-page-ink: #2E1704; --bb-page-muted: #7D6A4E; --bb-page-rule: #E7E2DA; --bb-page-mark: rgba(216, 155, 2, 0.30); --bar-h: 56px; --gutter: clamp(20px, 5vw, 48px); --radius: 3px; } /* The three page colours. Set on so the browser chrome behind a short page matches the page itself. */ :root[data-bb-theme='sepia'] { --bb-page-bg: #F7F1E6; --bb-page-ink: #351904; --bb-page-muted: #7A6446; --bb-page-rule: #E2D8C6; } :root[data-bb-theme='dark'] { --bb-page-bg: #1C0E03; --bb-page-ink: #EDE4D6; --bb-page-muted: #A08F76; --bb-page-rule: #3A2611; --bb-page-mark: rgba(216, 155, 2, 0.34); } /* --------------------------------------------------------------------- Reset --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, svg { max-width: 100%; display: block; } /* Any class that sets a display beats the browser's own [hidden] rule, which is how a confirmation meant to appear after a submit ends up visible from the start. One rule here rather than remembering to write an [hidden] variant for every component. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ body.bb { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .bb-skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13px; z-index: 200; } .bb-skip:focus { left: 16px; top: 16px; } .bb-main { min-height: 60vh; } .bb-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .bb-eyebrow__rule { width: 30px; height: 1px; background: var(--accent); flex: none; } .bb-eyebrow--dark { color: rgba(247, 241, 230, 0.7); } .bb-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .bb-rule { border: 0; border-top: 1px solid var(--rule); margin: 28px 0; } /* --------------------------------------------------------------------- The bar --------------------------------------------------------------------- */ .bb-bar { position: sticky; top: 0; z-index: 40; background: var(--dark); color: var(--paper); } .bb-bar__inner { max-width: 1180px; margin-inline: auto; padding: 0 var(--gutter); height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .bb-bar__mark { display: flex; flex-direction: column; line-height: 1.2; } .bb-bar__mark-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .bb-bar__mark-sub { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .bb-bar__nav { display: flex; gap: 20px; } .bb-bar__link { font-size: 13px; color: rgba(247, 241, 230, 0.72); transition: color 0.16s ease; white-space: nowrap; } .bb-bar__link:hover { color: var(--paper); } /* On a phone the title and three links do not fit on one line, and what happens instead is the title wraps into the links. Two rows, with the links on their own, rather than a collision. */ @media (max-width: 600px) { .bb-bar__inner { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding-block: 9px; } .bb-bar__mark { flex-direction: row; align-items: baseline; gap: 9px; } .bb-bar__mark-title { white-space: nowrap; } .bb-bar__mark-sub { font-size: 9px; } .bb-bar__nav { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(247, 241, 230, 0.16); gap: 18px; overflow-x: auto; scrollbar-width: none; } .bb-bar__nav::-webkit-scrollbar { display: none; } } /* On a phone the reader needs every pixel of height, so the bar goes away entirely while reading. */ body.bb--reading .bb-bar { display: none; } @media (min-width: 900px) { body.bb--reading .bb-bar { display: block; } } .bb-notice { background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; padding: 10px var(--gutter); } /* --------------------------------------------------------------------- The footer --------------------------------------------------------------------- */ .bb-foot { border-top: 1px solid var(--rule); margin-top: 64px; padding: 28px 0 40px; } body.bb--reading .bb-foot { display: none; } .bb-foot__inner { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); } .bb-foot__line { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; } .bb-foot__line a:hover { color: var(--ink); } .bb-foot__dot { color: var(--accent); } .bb-foot__fine { margin-top: 10px; font-size: 12px; color: var(--muted-2); max-width: 52ch; } /* --------------------------------------------------------------------- Buttons and fields --------------------------------------------------------------------- */ .bb-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 15px 26px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-align: center; transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease; } .bb-btn:active { transform: translateY(1px); } .bb-btn--primary { background: var(--accent); color: var(--ink); } .bb-btn--primary:hover { background: #c78d02; } .bb-btn--quiet { background: transparent; border-color: var(--rule-2); color: var(--ink); } .bb-btn--quiet:hover { border-color: var(--ink); } .bb-btn--ghost { background: transparent; border-color: rgba(247, 241, 230, 0.35); color: var(--paper); } .bb-btn--ghost:hover { border-color: var(--paper); } .bb-btn--small { padding: 9px 16px; font-size: 12.5px; } .bb-btn__note { font-size: 11px; font-weight: 500; opacity: 0.72; letter-spacing: 0.01em; } .bb-form { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; } .bb-field { display: flex; flex-direction: column; gap: 7px; } .bb-field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .bb-input { width: 100%; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--bg); color: var(--ink); /* 16px minimum, or iOS Safari zooms the whole page on focus. */ font-size: 16px; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .bb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 155, 2, 0.16); } /* The code is read off a card, so it is set wide and monospaced-feeling to make a transposed character visible. */ .bb-input--code { font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .bb-field__hint { font-size: 12.5px; color: var(--muted); } .bb-field__error { font-size: 13px; font-weight: 600; color: #9E2A1B; padding-left: 12px; border-left: 2px solid #9E2A1B; } .bb-field.is-wrong .bb-input { border-color: #9E2A1B; } .bb-check { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--body); cursor: pointer; line-height: 1.5; } .bb-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; } /* Says plainly that leaving the tick alone still opens the book. */ .bb-check__optional { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted-2); } /* --------------------------------------------------------------------- The gate: redeem, signin, sent --------------------------------------------------------------------- */ .bb-gate { display: grid; gap: 0; min-height: calc(100vh - var(--bar-h)); } /* Only the redemption screen has the cover panel beside it. The others are a single panel, and they have to say so, or the two column grid centres them in the left half of the page and they sit visibly off to one side. */ @media (min-width: 900px) { .bb-gate:has(.bb-gate__aside) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } } /* :has is recent enough that the single panel screens also carry a class, so an older browser gets the right layout rather than the wrong one. */ .bb-gate--single { grid-template-columns: minmax(0, 1fr); } .bb-gate__panel { padding: clamp(36px, 7vw, 76px) var(--gutter); max-width: 560px; width: 100%; margin-inline: auto; align-self: center; } .bb-gate__panel--narrow { max-width: 480px; text-align: center; } .bb-gate__panel--narrow .bb-form { text-align: left; } .bb-gate__title { font-size: clamp(34px, 6.5vw, 50px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 18px; } .bb-gate__intro { margin-top: 14px; font-size: 16.5px; color: var(--body); max-width: 46ch; line-height: 1.6; } .bb-gate__panel--narrow .bb-gate__intro { margin-inline: auto; } .bb-gate__fine { margin-top: 22px; font-size: 13px; color: var(--muted); max-width: 46ch; margin-inline: auto; } .bb-gate__alt { margin-top: 26px; font-size: 13.5px; color: var(--muted); } .bb-gate__alt a { border-bottom: 1px solid var(--rule-2); } .bb-gate__alt a:hover { border-color: var(--accent); color: var(--ink); } .bb-sent__mark { color: var(--accent); display: flex; justify-content: center; } /* The cover panel. A drawn object rather than an image, so it costs nothing on a slow connection. */ .bb-gate__aside { display: none; background: var(--dark); padding: var(--gutter); place-items: center; } @media (min-width: 900px) { .bb-gate__aside { display: grid; } } .bb-gate__cover { width: min(320px, 70%); aspect-ratio: 5 / 7.4; background: linear-gradient(160deg, #46230A 0%, #2A1204 100%); border-radius: 2px 6px 6px 2px; border-left: 6px solid var(--accent); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 34px 28px; } .bb-gate__cover-kicker { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--paper); text-transform: lowercase; } .bb-gate__cover-rule { width: 40px; height: 2px; background: var(--accent); } .bb-gate__shot { width: min(360px, 78%); height: auto; border-radius: 3px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42); } .bb-gate__cover-author { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247, 241, 230, 0.62); } /* --------------------------------------------------------------------- Progress --------------------------------------------------------------------- */ .bb-progress { margin-top: 26px; } .bb-progress__track { height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; } .bb-progress__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .bb-progress__label { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; } .bb-progress__days { color: var(--accent-ink); } .bb-progress--compact { margin: 0; flex: 1; } /* --------------------------------------------------------------------- Library --------------------------------------------------------------------- */ .bb-library, .bb-narrow, .bb-gallery { max-width: 1180px; margin-inline: auto; padding: clamp(30px, 5vw, 56px) var(--gutter) 0; } .bb-narrow { max-width: 720px; } .bb-hero { max-width: 640px; } .bb-hero__title { margin-top: 16px; font-size: clamp(32px, 6vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; } .bb-hero__sub { margin-top: 12px; font-size: 16px; color: var(--body); max-width: 50ch; } .bb-hero__actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .bb-hero__resume { font-size: 13px; color: var(--muted); } .bb-hero--wide { max-width: 880px; } /* --------------------------------------------------------------------- The four part strip. One segment per part, so the shape of the book is visible at a glance and progress reads as "most of the way through part two" rather than as a number. --------------------------------------------------------------------- */ .bb-strip { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .bb-strip__part { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .bb-strip__bar { height: 4px; background: var(--rule); border-radius: 999px; overflow: hidden; } .bb-strip__bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .bb-strip__label { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bb-strip__n { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); } .bb-strip__t { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bb-strip__part.is-done .bb-strip__t { color: var(--ink); } .bb-strip__part.is-done .bb-strip__n { color: var(--accent-ink); } @media (max-width: 620px) { .bb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } } .bb-hero__count { margin-top: 20px; font-size: 14px; color: var(--muted); } .bb-hero__count strong { color: var(--ink); font-size: 17px; } .bb-hero__days { color: var(--accent-ink); margin-left: 8px; } /* --------------------------------------------------------------------- The resume card --------------------------------------------------------------------- */ .bb-resume { margin-top: clamp(26px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 3vw, 30px); background: var(--dark); color: var(--paper); border-radius: 4px; border-left: 4px solid var(--accent); transition: transform 0.16s ease, box-shadow 0.16s ease; } .bb-resume:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(61, 29, 6, 0.24); } .bb-resume__side { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .bb-resume__kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .bb-resume__label { margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(247, 241, 230, 0.55); } .bb-resume__title { font-size: clamp(20px, 3.2vw, 27px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; } .bb-resume__deck { font-size: 13.5px; color: rgba(247, 241, 230, 0.62); max-width: 46ch; } .bb-resume__meter { margin-top: 10px; width: min(280px, 100%); height: 3px; background: rgba(247, 241, 230, 0.2); border-radius: 999px; overflow: hidden; } .bb-resume__meter span { display: block; height: 100%; background: var(--accent); } .bb-resume__state { margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: rgba(247, 241, 230, 0.6); } .bb-resume__go { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--accent); color: var(--ink); transition: transform 0.16s ease; } .bb-resume:hover .bb-resume__go { transform: translateX(3px); } @media (max-width: 560px) { .bb-resume { align-items: flex-end; gap: 16px; } .bb-resume__go { width: 44px; height: 44px; } } /* --------------------------------------------------------------------- Contents, as parts --------------------------------------------------------------------- */ .bb-library__contents { margin-top: clamp(40px, 6vw, 68px); } .bb-part { display: grid; gap: 14px; padding-block: clamp(22px, 3vw, 32px); border-top: 1px solid var(--rule); } .bb-part:first-of-type { border-top: 0; padding-top: 4px; } @media (min-width: 860px) { .bb-part { grid-template-columns: 236px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); } } .bb-part__id { align-self: start; } .bb-part__number { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); } .bb-part__title { margin-top: 5px; font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; } .bb-part__meta { margin-top: 6px; font-size: 12.5px; color: var(--muted); } .bb-part__dot { color: var(--accent); margin-inline: 4px; } .bb-part__meter { margin-top: 13px; width: min(180px, 100%); height: 3px; background: var(--rule); border-radius: 999px; overflow: hidden; } .bb-part__meter span { display: block; height: 100%; background: var(--accent); } .bb-part__state { margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); } .bb-part.is-done .bb-part__state { color: var(--accent-ink); } .bb-part__list { display: flex; flex-direction: column; gap: 2px; } .bb-ch__link { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 13px 14px 13px 6px; border-radius: 3px; transition: background 0.14s ease; } .bb-ch__link:hover { background: var(--bg-2); } .bb-ch__tick { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--rule-2); border-radius: 999px; color: transparent; transition: all 0.16s ease; } .bb-ch.is-done .bb-ch__tick { background: var(--accent); border-color: var(--accent); color: var(--ink); } .bb-ch.is-open .bb-ch__tick { border-color: var(--accent); border-style: dashed; } .bb-ch__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bb-ch__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); } .bb-ch__title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; } .bb-ch__deck { font-size: 13px; color: var(--muted); max-width: 56ch; line-height: 1.45; } .bb-ch__right { flex: none; padding-top: 12px; } .bb-ch__min, .bb-ch__pct { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .bb-ch__pct { color: var(--accent-ink); } .bb-ch.is-done .bb-ch__title { color: var(--muted); } @media (max-width: 560px) { .bb-ch__deck { display: none; } .bb-ch__link { padding-left: 2px; gap: 10px; } } /* --------------------------------------------------------------------- Contents --------------------------------------------------------------------- */ .bb-toc__part { margin-bottom: 34px; } .bb-toc__part-title { display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); } .bb-toc__part-number { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink); } .bb-toc__list { display: flex; flex-direction: column; } /* The label column has to hold "INTRODUCTION" as well as "CHAPTER 1", and the long one is what sets the width. Anything narrower and the introduction's label runs into its own title. */ .bb-toc__link { display: grid; grid-template-columns: 102px minmax(0, 1fr) auto; grid-template-areas: 'label title state' 'meter meter meter'; align-items: baseline; gap: 4px 14px; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); transition: background 0.14s ease, padding-left 0.14s ease; } .bb-toc__link:hover { background: var(--bg-2); padding-left: 10px; } .bb-toc__label { grid-area: label; font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; padding-right: 8px; } /* The drawer is narrow enough that a fixed label column costs the title too much room, so there the label sits on its own line. */ @media (max-width: 460px) { .bb-toc__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label state' 'title title' 'meter meter'; } } .bb-toc__title { grid-area: title; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; } .bb-toc__state { grid-area: state; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); } .bb-toc__meter { grid-area: meter; height: 2px; background: var(--rule); border-radius: 999px; overflow: hidden; } .bb-toc__meter span { display: block; height: 100%; background: var(--accent); } .bb-toc__item.is-current .bb-toc__title { color: var(--accent-ink); } .bb-toc__item.is-current .bb-toc__link { background: var(--bg-2); } /* --------------------------------------------------------------------- The reader --------------------------------------------------------------------- */ body.bb--reading { background: var(--bb-page-bg); color: var(--bb-page-ink); /* The reading pane manages its own height; the page itself never scrolls, which is what stops a swipe turning into a rubber band on iOS while paging. */ overflow: hidden; height: 100vh; height: 100dvh; } .bb-reader { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bb-page-bg); } @media (min-width: 900px) { .bb-reader { height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); } } /* The toolbar */ .bb-tools { flex: none; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px; border-bottom: 1px solid var(--bb-page-rule); } .bb-tools__title { flex: 1; min-width: 0; text-align: center; line-height: 1.2; } .bb-tools__label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-page-muted); } .bb-tools__name { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bb-icon-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: transparent; border: 0; border-radius: 999px; color: var(--bb-page-ink); cursor: pointer; transition: background 0.14s ease; } .bb-icon-btn:hover { background: var(--bb-page-rule); } .bb-icon-btn.is-on { color: var(--accent-ink); } /* The pager. Text flows into CSS columns exactly as wide as the pane, so each column is a page. Turning a page is a transform on the column container rather than a scroll, which keeps it a single composited step. */ .bb-pager { flex: 1; position: relative; overflow: hidden; padding: clamp(18px, 3.5vh, 34px) 0; /* The turn zones sit over the edges; this keeps the text clear of them on a phone without wasting the width on a laptop. */ margin-inline: clamp(18px, 6vw, 72px); touch-action: pan-y; } .bb-pages { height: 100%; column-fill: auto; column-gap: var(--bb-col-gap, 48px); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } /* Until the script measures the pane, the text is a normal scrolling column. A reader on a failed script still gets the whole chapter. */ .bb-pages:not([style*='column-width']) { overflow-y: auto; } .bb-prose { font-size: var(--bb-reading-size); line-height: 1.62; color: var(--bb-page-ink); hyphens: auto; -webkit-hyphens: auto; } :root[data-bb-face='serif'] .bb-prose, :root[data-bb-face='serif'] .bb-chapter-head__title { font-family: var(--font-serif); } /* Justified with hyphenation, which is what a book looks like and what Apple Books does. The two go together: justified text without hyphenation opens rivers in a column this narrow. */ .bb-prose p { margin-bottom: 1.05em; text-align: justify; text-justify: inter-word; } /* Except the last paragraph before a heading and the short ones, where justification stretches a half line across the column. */ .bb-prose p:last-child { text-align: left; } .bb-prose h2 { font-size: 1.22em; font-weight: 700; letter-spacing: -0.015em; margin: 1.9em 0 0.6em; /* A heading alone at the foot of a column is the commonest ugly break in a paginated reader. */ break-after: avoid; break-inside: avoid; } .bb-prose h3 { font-size: 1.02em; font-weight: 700; color: var(--accent-ink); margin: 1.5em 0 0.45em; break-after: avoid; break-inside: avoid; } :root[data-bb-theme='dark'] .bb-prose h3 { color: var(--accent); } .bb-prose ul, .bb-prose ol { margin: 0 0 1.05em 1.15em; padding: 0; } .bb-prose li { margin-bottom: 0.4em; } .bb-prose ul { list-style: none; } .bb-prose ul li { position: relative; } .bb-prose ul li::before { content: ''; position: absolute; left: -0.95em; top: 0.66em; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); } .bb-prose ol { list-style: decimal; } .bb-prose blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 2px solid var(--accent); font-style: italic; color: var(--bb-page-muted); break-inside: avoid; } .bb-prose .bb-note { margin: 1.1em 0; padding-left: 1em; border-left: 1px solid var(--bb-page-rule); font-size: 0.94em; color: var(--bb-page-muted); } .bb-prose .bb-epigraph { font-size: 1.1em; font-style: italic; color: var(--accent-ink); margin-bottom: 1.4em; } .bb-prose .bb-quote-author { font-size: 0.86em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-page-muted); margin-bottom: 1.4em; } .bb-prose strong { font-weight: 700; } .bb-prose a { border-bottom: 1px solid var(--accent); } /* The four prompts in chapter 13. Meant to be copied, so they get a copy button and are never watermarked. */ .bb-prose .bb-prompt { margin: 1.3em 0; padding: 16px 18px; background: var(--bb-page-rule); border-radius: var(--radius); break-inside: avoid; } .bb-prose .bb-prompt pre { margin: 0; font-family: inherit; font-size: 0.9em; white-space: pre-wrap; line-height: 1.55; } .bb-prompt__copy { margin-top: 12px; padding: 7px 14px; background: transparent; border: 1px solid var(--bb-page-muted); border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .bb-prose mark, .bb-prose .bb-hl { background: var(--bb-page-mark); color: inherit; padding: 0.05em 0; border-radius: 2px; } /* A highlight is a control: tapping it offers to take it off again. It has to look like something you can tap, or nobody finds that out. */ .bb-prose mark.bb-hl { cursor: pointer; box-shadow: inset 0 -1px 0 rgba(216, 155, 2, 0.55); } .bb-prose mark.bb-hl:hover { background: var(--accent); color: var(--ink); } /* Chapter head and end */ .bb-chapter-head { margin-bottom: 1.6em; break-after: avoid; } .bb-chapter-head__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); } .bb-chapter-head__title { margin-top: 8px; font-size: clamp(25px, 4.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .bb-chapter-head__deck { margin-top: 10px; font-size: 0.95em; color: var(--bb-page-muted); max-width: 40ch; } .bb-chapter-end { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--bb-page-rule); break-inside: avoid; } .bb-chapter-end__title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-page-muted); } .bb-chapter-end__exercise { margin-top: 14px; } .bb-chapter-end__exercise p { font-size: 14px; color: var(--bb-page-muted); margin-bottom: 12px; } .bb-chapter-end__links { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; } .bb-chapter-end__next { margin-top: 22px; display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; border: 1px solid var(--bb-page-rule); border-radius: var(--radius); transition: border-color 0.16s ease; } .bb-chapter-end__next:hover { border-color: var(--accent); } .bb-chapter-end__next span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bb-page-muted); } .bb-chapter-end__next strong { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } /* Page turning. Big invisible targets at the edges, plus visible chevrons on a pointer device. */ .bb-turn { position: absolute; top: 56px; bottom: 44px; width: clamp(18px, 6vw, 72px); display: grid; place-items: center; background: transparent; border: 0; color: var(--bb-page-muted); cursor: pointer; opacity: 0; transition: opacity 0.16s ease, color 0.16s ease; z-index: 5; } .bb-turn--prev { left: 0; } .bb-turn--next { right: 0; } .bb-turn:disabled { cursor: default; } @media (hover: hover) { .bb-reader:hover .bb-turn { opacity: 0.55; } .bb-turn:hover { opacity: 1; color: var(--accent-ink); } .bb-turn:disabled, .bb-reader:hover .bb-turn:disabled { opacity: 0.12; } } .bb-turn:focus-visible { opacity: 1; } .bb-foot-rule { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px var(--gutter) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--bb-page-rule); } .bb-foot-rule__track { flex: 1; height: 2px; background: var(--bb-page-rule); border-radius: 999px; overflow: hidden; } .bb-foot-rule__track span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.28s ease; } .bb-foot-rule__page { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-page-muted); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- The drawer --------------------------------------------------------------------- */ .bb-drawer { position: fixed; inset: 0; z-index: 60; } .bb-drawer[hidden] { display: none; } .bb-drawer__scrim { position: absolute; inset: 0; background: rgba(26, 13, 2, 0.5); backdrop-filter: blur(2px); } .bb-drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(420px, 90vw); background: var(--bb-page-bg); color: var(--bb-page-ink); display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(0, 0, 0, 0.3); animation: bb-slide 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes bb-slide { from { transform: translateX(-100%); } } .bb-drawer__head { flex: none; display: flex; align-items: center; gap: 16px; padding: max(14px, env(safe-area-inset-top)) 16px 14px var(--gutter); border-bottom: 1px solid var(--bb-page-rule); } .bb-drawer__tabs { flex: none; display: flex; gap: 2px; padding: 10px var(--gutter) 0; border-bottom: 1px solid var(--bb-page-rule); overflow-x: auto; } .bb-tab { padding: 8px 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 12.5px; font-weight: 600; color: var(--bb-page-muted); cursor: pointer; white-space: nowrap; } .bb-tab.is-on { color: var(--bb-page-ink); border-bottom-color: var(--accent); } .bb-drawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px var(--gutter) 40px; } .bb-pane { display: none; } .bb-pane.is-on { display: block; } .bb-pane__title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bb-page-muted); margin: 22px 0 10px; } .bb-pane__title:first-child { margin-top: 0; } /* Inside the drawer the contents list uses the page colours rather than the site's, so it does not glow white in dark mode. The current chapter is the one that catches this out: its highlight is the site's near white, which inside a dark drawer is a white block. */ .bb-drawer .bb-toc__link, .bb-drawer .bb-toc__part-title { border-color: var(--bb-page-rule); } .bb-drawer .bb-toc__link:hover, .bb-drawer .bb-toc__item.is-current .bb-toc__link { background: var(--bb-page-rule); } .bb-drawer .bb-toc__meter { background: var(--bb-page-rule); } .bb-drawer .bb-toc__title { color: var(--bb-page-ink); } .bb-drawer .bb-toc__item.is-current .bb-toc__title { color: var(--accent); } /* A meter at zero is two rules stacked under one line of text, which reads as a heavier divider rather than as progress. */ .bb-toc__meter:not(.has-progress) { visibility: hidden; } .bb-search__results { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; } .bb-result { display: block; padding: 12px 0; border-bottom: 1px solid var(--bb-page-rule); } .bb-result__where { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-ink); } .bb-result__snippet { margin-top: 5px; font-size: 13.5px; color: var(--bb-page-muted); line-height: 1.5; } .bb-result__snippet mark { background: var(--bb-page-mark); color: inherit; } .bb-controls { display: flex; flex-direction: column; gap: 20px; } .bb-controls__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bb-controls__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bb-page-muted); } .bb-seg { display: inline-flex; border: 1px solid var(--bb-page-rule); border-radius: 999px; overflow: hidden; } .bb-seg__btn { padding: 8px 15px; background: transparent; border: 0; border-right: 1px solid var(--bb-page-rule); font-size: 13px; font-weight: 600; color: var(--bb-page-ink); cursor: pointer; transition: background 0.14s ease; } .bb-seg__btn:last-child { border-right: 0; } .bb-seg__btn:hover { background: var(--bb-page-rule); } .bb-seg__btn.is-on { background: var(--accent); color: var(--ink); } .bb-seg__btn--large { font-size: 17px; } .bb-marks { display: flex; flex-direction: column; gap: 14px; } .bb-mark { padding: 13px 15px; border: 1px solid var(--rule); border-radius: var(--radius); } .bb-drawer .bb-mark { border-color: var(--bb-page-rule); } .bb-mark blockquote { font-size: 14px; line-height: 1.55; border-left: 2px solid var(--accent); padding-left: 11px; } .bb-mark__source { display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); } .bb-mark__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } /* --------------------------------------------------------------------- Selection toolbar --------------------------------------------------------------------- */ .bb-sel { position: fixed; z-index: 70; display: flex; gap: 1px; padding: 3px; background: var(--dark); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32); transform: translate(-50%, -100%); } .bb-sel[hidden] { display: none; } .bb-sel button { padding: 9px 16px; background: transparent; border: 0; border-radius: 999px; color: var(--paper); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .bb-sel button:hover { background: rgba(247, 241, 230, 0.14); } /* --------------------------------------------------------------------- Checkpoints Full screen, on the deep brown, because the point is that the reader stops. The continue button is never disabled and never hidden. --------------------------------------------------------------------- */ .bb-checkpoint { position: fixed; inset: 0; z-index: 80; background: var(--dark); color: var(--paper); display: grid; place-items: center; padding: var(--gutter); overflow-y: auto; animation: bb-fade 0.24s ease; } .bb-checkpoint[hidden] { display: none; } @keyframes bb-fade { from { opacity: 0; } } .bb-checkpoint__inner { width: min(620px, 100%); padding: 40px 0; } .bb-checkpoint__title { margin-top: 20px; font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } .bb-checkpoint__body { margin-top: 18px; font-size: 17px; line-height: 1.62; color: rgba(247, 241, 230, 0.86); max-width: 48ch; } .bb-checkpoint__body a { border-bottom: 1px solid var(--accent); } .bb-checkpoint__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; } .bb-checkpoint__confirm { margin-top: 22px; padding: 12px 22px; background: transparent; border: 1px dashed rgba(216, 155, 2, 0.6); border-radius: 999px; color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.16s ease; } .bb-checkpoint__confirm:hover { background: rgba(216, 155, 2, 0.12); } .bb-checkpoint__confirm[hidden] { display: none; } .bb-checkpoint__hint { margin-top: 10px; font-size: 12.5px; color: rgba(247, 241, 230, 0.5); } .bb-checkpoint__done { margin-top: 20px; padding: 14px 18px; background: rgba(216, 155, 2, 0.14); border-left: 2px solid var(--accent); font-size: 14.5px; font-weight: 600; color: var(--paper); } .bb-checkpoint__done[hidden] { display: none; } /* The two referral codes, handed over on the checkpoint itself so the reader never has to go and find them. They sit on the deep brown, so they cannot reuse the codes page card, which is built for white. */ .bb-checkpoint__codes { margin-top: 16px; display: grid; gap: 10px; } @media (min-width: 620px) { .bb-checkpoint__codes { grid-template-columns: 1fr 1fr; } } /* Scoped to the overlay because the generic .bb-code rule is defined further down this file and would otherwise win on source order and paint these white on the deep brown. */ .bb-checkpoint .bb-code--inline { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: rgba(247, 241, 230, 0.07); border: 1px solid rgba(247, 241, 230, 0.18); border-radius: 3px; } .bb-checkpoint .bb-code--inline .bb-code__value { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); } /* --------------------------------------------------------------------- Gallery --------------------------------------------------------------------- */ .bb-gallery__head { max-width: 640px; } .bb-lock { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; background: rgba(216, 155, 2, 0.12); border-left: 2px solid var(--accent); font-size: 13.5px; color: var(--ink); } .bb-lock__count { font-weight: 700; color: var(--accent-ink); } .bb-filters { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .bb-filters__search { max-width: 340px; } .bb-filters__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bb-filters__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); width: 62px; flex: none; } .bb-chips { display: flex; gap: 7px; flex-wrap: wrap; } .bb-chip { padding: 7px 14px; background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--body); cursor: pointer; transition: all 0.14s ease; } .bb-chip:hover { border-color: var(--ink); } .bb-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .bb-grid { margin-top: 28px; display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .bb-mock { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.16s ease, transform 0.16s ease; } .bb-mock:hover { border-color: var(--rule-2); transform: translateY(-2px); } .bb-mock[hidden] { display: none; } .bb-mock__shot { aspect-ratio: 1 / 1; background: var(--bg-2); overflow: hidden; } .bb-mock__shot img { width: 100%; height: 100%; object-fit: cover; } .bb-mock__body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 4px; } .bb-mock__title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; } .bb-mock__style { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); } .bb-mock__sizes { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .bb-size { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color 0.14s ease, background 0.14s ease; } .bb-size:hover { border-color: var(--accent); background: rgba(216, 155, 2, 0.07); } .bb-size__name { font-size: 12px; font-weight: 600; } .bb-size__dims { font-size: 10px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .bb-mock__caption { margin-top: 12px; font-size: 13px; } .bb-mock__caption summary { cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .bb-mock__caption p { margin-top: 9px; color: var(--body); line-height: 1.5; } .bb-mock__caption button { margin-top: 10px; } .bb-gallery__empty, .bb-empty { margin-top: 36px; font-size: 15px; color: var(--muted); } .bb-share { margin-top: 40px; padding: 26px var(--gutter); background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--radius); } .bb-share[hidden] { display: none; } .bb-share__title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .bb-share__body { margin-top: 7px; font-size: 14px; color: var(--muted); } .bb-share__form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; } .bb-share__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* --------------------------------------------------------------------- Codes, account, finished --------------------------------------------------------------------- */ .bb-codes { margin-top: 30px; display: grid; gap: 14px; } @media (min-width: 620px) { .bb-codes { grid-template-columns: 1fr 1fr; } } .bb-code { padding: 22px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--bg-2); } .bb-code.is-used { opacity: 0.62; } .bb-code__value { font-size: 23px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink); } .bb-code__state { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .bb-code__actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; } .bb-block { margin-top: 40px; } .bb-note-line { font-size: 13.5px; color: var(--muted); max-width: 52ch; } .bb-note-line--on { margin-top: 10px; padding: 9px 14px; background: rgba(216, 155, 2, 0.12); border-left: 2px solid var(--accent); color: var(--ink); font-weight: 600; } .bb-form--tight { margin-top: 18px; max-width: 420px; gap: 16px; } .bb-devices { margin-top: 14px; display: flex; flex-direction: column; } .bb-device { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .bb-device__label { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; } .bb-device__now { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 2px 7px; border-radius: 999px; } .bb-device__seen { font-size: 12px; color: var(--muted-2); margin-top: 2px; } .bb-back { margin: 40px 0; font-size: 13.5px; } .bb-back a { border-bottom: 1px solid var(--rule-2); } .bb-back a:hover { border-color: var(--accent); } .bb-finished { text-align: center; padding-top: clamp(50px, 9vw, 96px); } .bb-finished .bb-eyebrow, .bb-finished .bb-chapter-end__links { justify-content: center; } .bb-finished .bb-hero__sub, .bb-finished .bb-note-line { margin-inline: auto; } /* The claim form reads left even on the centred finisher screen: a centred label above a full width field looks like a mistake. */ .bb-form--left { text-align: left; max-width: 460px; margin-inline: auto; } .bb-form--left .bb-btn { align-self: flex-start; } textarea.bb-input { resize: vertical; min-height: 96px; line-height: 1.55; } .bb-claimed { margin-top: 26px; display: inline-block; padding: 14px 20px; background: rgba(216, 155, 2, 0.13); border-left: 2px solid var(--accent); font-size: 14.5px; font-weight: 600; text-align: left; } /* --------------------------------------------------------------------- Toast --------------------------------------------------------------------- */ .bb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; padding: 11px 20px; background: var(--dark); color: var(--paper); border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3); animation: bb-toast 0.2s ease; } @keyframes bb-toast { from { opacity: 0; transform: translate(-50%, 10px); } }