/* ---------- scroll view: the same book, unrolled into one long sheet ---------- html.is-scroll is set before first paint (inline script in ) on phones and whenever a desktop reader picks Scroll. Pagination is skipped in this mode, so every authored face holds its whole text and simply stacks in reading order on one sheet of paper. Loaded last, and every rule is scoped under html.is-scroll so the book (and its phone overrides) is untouched. */ html.is-scroll, html.is-scroll body { height: auto; } /* clip, not hidden: overflow-x:hidden on the root scroller locks sideways panning on iOS Safari once the reader pinch-zooms in. (y must stay visible — clip paired with auto computes back to hidden.) */ html.is-scroll body { overflow-x: clip; overflow-y: visible; } html.is-scroll .stage { display: block; height: auto; padding: calc(84px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); } html.is-scroll .book { width: 100%; max-width: 780px; height: auto; max-height: none; aspect-ratio: auto; margin: 0 auto; perspective: none; transform: none !important; transition: none; font-size: 16px; user-select: text; -webkit-user-select: text; background: radial-gradient(circle at 88% 4%, rgba(235, 248, 255, 0.35), transparent 32%), #f8fcff; border: 1px solid var(--paper-edge); border-radius: 22px; box-shadow: 0 30px 80px rgba(74, 147, 214, 0.22); } /* book-only furniture */ html.is-scroll .book__base, html.is-scroll .tab, html.is-scroll .subtabs, html.is-scroll .controls, html.is-scroll .mprog, html.is-scroll .project-bookmarks, html.is-scroll .pg-foot, html.is-scroll .cover-note, html.is-scroll .only-book, html.is-scroll .page__face[data-blank] { display: none !important; } html:not(.is-scroll) .only-scroll { display: none; } html.is-scroll .page__face::after { display: none !important; } html.is-scroll .page, html.is-scroll .page.is-flipped { position: static; width: auto; height: auto; transform: none !important; transition: none !important; z-index: auto !important; perspective: none; pointer-events: auto; cursor: var(--cursor-wand); } html.is-scroll .page__face, html.is-scroll .page__face--back { position: relative; inset: auto; display: flex !important; transform: none !important; backface-visibility: visible; -webkit-backface-visibility: visible; visibility: visible; overflow: visible; /* faces are regions of one sheet now, not cards of their own */ background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: clamp(32px, 6vw, 56px) clamp(20px, 7vw, 72px); cursor: var(--cursor-wand); pointer-events: auto; scroll-margin-top: calc(76px + env(safe-area-inset-top)); /* The phone reader has no page-swipe gesture. Let the browser handle pinch zoom and pan in both directions after the page is enlarged. */ touch-action: auto; } /* a hairline only where a new section begins (a chapter, or a project); faces inside one section flow on as one piece, no seam, no double gap */ html.is-scroll .page__face { padding-top: 0; } html.is-scroll .cover-face { padding-top: clamp(32px, 6vw, 56px); } html.is-scroll .page__face.ch-open, html.is-scroll .page__face:has(.pj-title) { padding-top: clamp(32px, 6vw, 56px); border-top: 1px dashed #cfe0ee !important; } /* the songbook doorway sizes its book as a % of the page's fixed height; on the unrolled sheet that height is auto, so the cover fell back to its natural 2560×4096 and the doorway grew ~4000px tall. Give the book a real height. */ html.is-scroll .typography-preview .typography-book-intro + .starlight-portal { min-height: 0; } html.is-scroll .typography-preview .typography-book-intro + .starlight-portal .portal-book { height: clamp(220px, 60vw, 320px); } /* a section's opening heading drops its top margin so it can start a book page flush; on one sheet that left six headings glued to the caption above */ html.is-scroll .project-face .pg-body .next-page-section + .next-page-section > h2.next-heading:first-child { margin-top: 36px !important; } html.is-scroll .project-face .pg-body .next-page-section + .next-page-section > h3.next-heading:first-child { margin-top: 28px !important; } /* tilted polaroids and their two-line captions overhang the row's box */ html.is-scroll .snaps { margin-bottom: 18px; } /* the running "Projects · X" header only belongs at a project's start */ html.is-scroll .page__face.project-face:not(:has(.pj-title)) .pg-label { display: none; } html.is-scroll .pg-body { flex: none; overflow: visible; min-height: 0; } html.is-scroll .cover-face, html.is-scroll .backcover-face { min-height: 52vh; justify-content: center; } html.is-scroll #gbFace { min-height: 82vh; } /* chapter bar: the phone's chips, promoted to a frosted strip on every width */ html.is-scroll .mchips { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 40; max-width: none; margin: 0; justify-content: center; gap: clamp(0px, 3vw, 34px); padding: env(safe-area-inset-top) 16px 0; background: rgba(240, 248, 255, 0.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #526c8520; overflow-x: auto; scrollbar-width: none; } html.is-scroll .mchips button:nth-child(n) { position: relative; flex: 0 1 auto; min-height: 48px; padding: 12px 6px 13px; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; color: #62758b; font: 400 13px var(--font-body); letter-spacing: 0; text-transform: none; cursor: var(--cursor-point); transition: color .2s ease; } html.is-scroll .mchips button:hover { color: var(--ink); } html.is-scroll .mchips button:nth-child(n).is-active { color: var(--ink); font-weight: 500; } html.is-scroll .mchips button::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 1.5px; background: var(--ink); transform: scaleX(0); transition: transform .3s var(--ease, ease); } html.is-scroll .mchips button.is-active::after { transform: scaleX(1); } @media (max-width: 720px), (max-width: 960px) and (max-height: 500px) { html.is-scroll .mchips { justify-content: space-between; gap: 0; } html.is-scroll .mchips button:nth-child(n) { font-size: clamp(11px, 3vw, 13px); padding-inline: 3px; } html.is-scroll .book { border-radius: 18px; } html.is-scroll .page__face, html.is-scroll .page__face--back { padding: 32px 20px; } /* left: 50% + 78px pushed the nowrap doodle ~25px past a phone's edge, widening the layout viewport so the whole page panned sideways */ html.is-scroll .gb-doodle { left: auto; right: 14px; } /* five nowrap pills don't fit one phone row; let the chain wrap */ html.is-scroll .friendli-body .friendli-timeline { flex-wrap: wrap; row-gap: 6px; } html.is-scroll .friendli-body .friendli-timeline li { flex: none; } } /* ---------- Book | Scroll switch (desktop only; phones are always Scroll) ---------- */ .view-switch { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px -12px rgba(74, 147, 214, 0.45); transition: opacity .25s ease; } /* the thumb: one white pill that slides under the chosen view */ .view-switch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(27, 42, 74, .16), 0 0 0 1px #cfe0ee; transition: transform .45s cubic-bezier(.34, 1.3, .5, 1); } .view-switch[data-on="scroll"]::before { transform: translateX(100%); } .view-switch button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; background: none; color: #7a8ea4; font: 400 12px var(--font-body); cursor: var(--cursor-point); transition: color .2s ease; } .view-switch button svg { width: 16px; height: 16px; flex: none; } .view-switch button:hover { color: var(--ink); } .view-switch button[aria-pressed="true"] { color: var(--sky-deeper, #356fa5); font-weight: 500; } .view-switch button:focus-visible { outline: 2px solid #356fa5; outline-offset: -2px; border-radius: 999px; } @media (max-width: 720px), (max-width: 960px) and (max-height: 500px) { .view-switch { display: none; } } /* ---------- the roll between views ---------- */ html.is-rolling .controls, html.is-rolling .mchips, html.is-rolling .view-switch { opacity: 0; pointer-events: none; transition: opacity .2s ease; } html.is-rolling body { overflow: hidden; } .book.is-switching, .book.is-switching .page, .book.is-switching .book__base .half { transition: none !important; } /* a paper roll: rounded barrel, soft underside shadow, rod caps at both ends. --spin shifts a faint stripe so the barrel reads as turning while it travels. */ .view-rod { position: fixed; z-index: 60; height: 26px; margin-top: -13px; border-radius: 13px; pointer-events: none; opacity: 0; background: repeating-linear-gradient(180deg, rgba(83, 132, 171, 0) 0 5px, rgba(83, 132, 171, .07) 5px 6px) 0 var(--spin, 0px) / 100% 12px, linear-gradient(180deg, #ffffff 0%, #f3f9fe 30%, #d7e8f5 68%, #bcd6ea 88%, #e9f3fb 100%); box-shadow: 0 10px 18px -10px rgba(53, 111, 165, 0.55), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(83, 132, 171, .25); } .view-rod::before, .view-rod::after { content: ""; position: absolute; top: 3px; width: 12px; height: 20px; border-radius: 6px; background: linear-gradient(180deg, #8fb4d4, #5f8fbb 60%, #7ea7ca); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); } .view-rod::before { left: -7px; } .view-rod::after { right: -7px; } html.is-scroll .behind-stories { scroll-margin-top: calc(84px + env(safe-area-inset-top)); } /* blocks that the view switch lands on clear the chapter bar */ html.is-scroll .pg-body > *, html.is-scroll .next-page-section > * { scroll-margin-top: calc(88px + env(safe-area-inset-top)); } /* the book sizes the story cell to the longest story so turning never reflows; on one long sheet that is just a gap — show only the chosen story */ html.is-scroll .behind-story:not(.is-active) { display: none; } /* second row under Projects: one chip per project, shown only while the reader is inside the Projects chapter */ .mchips-sub { display: none; } html.is-scroll .mchips-sub { display: flex; position: fixed; top: calc(49px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 39; justify-content: center; gap: 6px; padding: 8px 16px; background: rgba(240, 248, 255, 0.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #526c8520; overflow-x: auto; scrollbar-width: none; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .3s var(--ease, ease); } html.is-scroll .mchips-sub::-webkit-scrollbar { display: none; } html.is-scroll.in-projects .mchips-sub { opacity: 1; transform: none; pointer-events: auto; } html.is-rolling .mchips-sub { opacity: 0 !important; pointer-events: none; } .mchips-sub button { flex: none; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #62758b; font: 400 12px var(--font-body); white-space: nowrap; cursor: var(--cursor-point); transition: color .2s ease, background .2s ease, box-shadow .2s ease; } .mchips-sub button:hover { color: var(--ink); background: rgba(255, 255, 255, .6); } .mchips-sub button.is-active { color: var(--ink); font-weight: 500; background: #fff; box-shadow: 0 0 0 1px #cfe0ee; } .mchips-sub button:focus-visible { outline: 2px solid #356fa5; outline-offset: -2px; } @media (max-width: 720px), (max-width: 960px) and (max-height: 500px) { html.is-scroll .mchips-sub { justify-content: flex-start; } } /* inside Projects the bar is two rows deep — land below both */ html.is-scroll.in-projects .page__face, html.is-scroll.in-projects .pg-body > *, html.is-scroll.in-projects .next-page-section > *, html.is-scroll.in-projects .behind-stories { scroll-margin-top: calc(118px + env(safe-area-inset-top)); } /* on one long sheet the chosen story sits below the table — the switch's thumb points down at it instead of across to the facing page */ .behind-knob__arrow { display: inline-block; } html.is-scroll .behind-knob__arrow { transform: rotate(90deg); } /* the guestbook stays a night sky here too: a dark band closing the sheet (index.html defines --gb-sky on #gbFace) */ html.is-scroll #gbFace { background: var(--gb-sky) !important; background-size: var(--gb-sky-size) !important; border-radius: 18px !important; }