/* ── TOMA reader — mid-century spy comic: hard keylines, solid offset shadows, Bebas Neue display caps, halftone, burnt-amber on near-black. (Design language from the Claude Design export in "TOMA Graphic Novel Reader/"; feature set unchanged.) ─────────────── */ :root { --bg: #0d0a07; /* deep black, faint warmth */ --bg-2: #1d1712; /* raised surfaces: bar, buttons, sheet */ --paper: #262019; /* panel backing */ --ink: #f4ebdd; /* cream */ --muted: #a3948a; --line: #060404; /* the black keyline — everything is drawn with it */ --accent: #e58c38; /* amber */ --accent-2: #c1552a; /* burnt orange — the second shadow layer */ --shadow: rgba(4, 3, 2, 0.9); --display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif; --col: 54rem; --gap: 22px; --chrome-h: 56px; --r: 3px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } * { box-sizing: border-box; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* The ground lives on so 's background doesn't propagate to the canvas — that lets #backdrop sit above the ground but below all content. */ html { color-scheme: dark; /* halftone dot field over a warm top glow */ background: radial-gradient(circle at 1px 1px, rgba(244, 235, 221, 0.045) 1px, transparent 1.7px) 0 0 / 7px 7px, radial-gradient(130% 90% at 50% -10%, #241c15 0%, var(--bg) 62%); background-attachment: fixed; } body { margin: 0; background: transparent; color: var(--ink); font-family: 'Jost', 'Avenir Next', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; /* not `hidden`: that creates a scroll box and breaks scrollIntoView */ } /* Reading backdrop — the scene behind the panels. backdrop.css (written by the build) supplies --backdrop + --backdrop-opacity when art-src/backdrop.* exists; with no image both default to nothing and this paints nothing at all. */ #backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--backdrop, none); background-size: cover; background-position: center; opacity: var(--backdrop-opacity, 0); } #backdrop::after { content: ''; position: absolute; inset: 0; /* Hold the art back so panels stay the subject — but only just. Two heavy stacked gradients used to sit here and multiplied out to near-black, which hid the scene completely. */ background: linear-gradient(180deg, rgba(13, 10, 7, 0.34), rgba(13, 10, 7, 0.52)), radial-gradient(125% 95% at 50% 35%, rgba(13, 10, 7, 0) 40%, rgba(13, 10, 7, 0.34) 100%); } ::selection { background: var(--accent); color: var(--bg); } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ── keyline controls (the physical press) ────────────────────────────── */ .ctrl { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 2px 12px 0; border: 2px solid var(--line); border-radius: var(--r); font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--bg-2); box-shadow: 3px 3px 0 var(--line); transition: transform 0.1s, box-shadow 0.1s, background 0.12s, color 0.12s; } .ctrl:hover { background: var(--accent); color: var(--bg); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); } .ctrl:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line); } .ctrl.on { background: var(--accent-2); color: #fdf3e6; } .ctrl svg { width: 15px; height: 15px; flex: none; margin-top: -2px; } .ctrl.sq { width: 34px; padding: 0; justify-content: center; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0.72em 1.5em 0.55em; border: 2px solid var(--line); border-radius: var(--r); font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--bg-2); box-shadow: 4px 4px 0 var(--line); text-decoration: none; transition: transform 0.1s, box-shadow 0.1s, background 0.14s, color 0.14s; } .btn:hover { background: var(--accent); color: var(--bg); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); } .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--line); } .btn.primary { background: var(--accent); color: var(--bg); } .btn.primary:hover { background: #f2a75c; } .btn.small { font-size: 16px; padding: 0.6em 1.1em 0.45em; box-shadow: 3px 3px 0 var(--line); } .btn.small:active { transform: translate(3px, 3px); } .icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border-radius: var(--r); transition: color 0.15s, background 0.15s; } .icon:hover { color: var(--ink); background: rgba(244, 235, 221, 0.08); } /* the splash type breathes — slow, offset loops so nothing marches in step */ @keyframes float-title { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 30% { transform: translate3d(0, -12px, 0) rotate(-0.6deg); } 62% { transform: translate3d(0, 5px, 0) rotate(0.5deg); } } @keyframes float-kicker { 0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 0); } 40% { transform: rotate(-0.8deg) translate3d(3px, -10px, 0); } 70% { transform: rotate(-2.8deg) translate3d(-3px, 4px, 0); } } /* amber kicker chip — rotated, keyline, solid shadow */ .kicker { display: inline-block; font-family: var(--display); font-size: 15px; letter-spacing: 0.26em; text-indent: 0.26em; text-transform: uppercase; color: var(--bg); background: var(--accent); border: 2px solid var(--line); border-radius: var(--r); padding: 4px 10px 1px; box-shadow: 4px 4px 0 var(--line); transform: rotate(-2deg); } /* outlined stamp (studio header, small labels) */ .stamp { display: inline-block; font-family: var(--display); font-size: 16px; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--accent); border: 2px solid var(--accent-2); border-radius: var(--r); padding: 5px 10px 2px; } /* huge display stamp (end card, 404) — layered offset shadows, no box */ .stamp.big { border: 0; padding: 0; font-size: clamp(44px, 8vw, 72px); letter-spacing: 0.1em; text-indent: 0.1em; color: var(--ink); text-shadow: 0.055em 0.055em 0 var(--accent-2), 0.11em 0.11em 0 var(--line); transform: rotate(-2deg); } /* ── progress bar ─────────────────────────────────────────────────────── */ #progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 60; background: rgba(6, 4, 4, 0.85); pointer-events: none; display: flex; } #progress { overflow: hidden; } #progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); border-inline-end: 2px solid var(--line); } [dir='rtl'] #progress i { margin-left: auto; } /* the auto-play dwell bar rides under the progress bar in the second colour */ #progress .dwell { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: calc(var(--d, 0) * 100%); background: var(--accent-2); border: 0; opacity: 0; } body.playing #progress .dwell { opacity: 1; } /* ── top bar ──────────────────────────────────────────────────────────── */ #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; min-height: calc(var(--chrome-h) + env(safe-area-inset-top)); padding: calc(env(safe-area-inset-top) + 9px) 16px 8px; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border-bottom: 3px solid var(--line); box-shadow: 0 3px 0 rgba(229, 140, 56, 0.9), 0 10px 24px rgba(0, 0, 0, 0.5); transition: transform 0.28s var(--ease), opacity 0.28s; } body.ui-hidden #topbar { transform: translateY(-115%); opacity: 0; } .brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); } .brand b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: 0.13em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--accent-2), 4px 4px 0 var(--line); } .brand .sub { font-size: 11px; font-style: italic; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spacer { flex: 1; } /* ── neon sign ────────────────────────────────────────────────────────── */ /* A laundromat window sign pointing up at the RADIO button. It's a real button too, so it both advertises and operates the radio. Bloom comes from stacked text-shadows — a genuine neon tube is a bright core in a coloured haze. */ #neon { position: fixed; top: calc(var(--chrome-h) + env(safe-area-inset-top) + 16px); inset-inline-end: 26px; z-index: 45; padding: 8px 16px 5px; font-family: var(--display); font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff3df; background: rgba(13, 10, 7, 0.55); border: 2px solid rgba(229, 140, 56, 0.55); border-radius: 4px; cursor: pointer; opacity: 0; transform: translateY(-10px) rotate(-1.5deg); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); text-shadow: 0 0 4px #ffd9a0, 0 0 12px var(--accent), 0 0 28px rgba(229, 140, 56, 0.8), 0 0 52px rgba(193, 85, 42, 0.55); box-shadow: 0 0 12px rgba(229, 140, 56, 0.28), inset 0 0 14px rgba(229, 140, 56, 0.14); } #neon.lit { opacity: 1; transform: translateY(0) rotate(-1.5deg); animation: neon-flicker 5.5s 0.6s infinite; } #neon:hover { border-color: var(--accent); } /* the tube warming up and settling — small dips, not a strobe */ @keyframes neon-flicker { 0%, 42%, 46%, 100% { opacity: 1; } 43% { opacity: 0.55; } 44.5% { opacity: 0.85; } 71% { opacity: 0.72; } 72.5% { opacity: 1; } } /* while the radio plays, the button itself wears the glow so the state is readable after the sign has gone */ .ctrl.on#soundBtn { box-shadow: 3px 3px 0 var(--line), 0 0 14px rgba(229, 140, 56, 0.55); } @media (max-width: 760px) { #neon { font-size: 20px; inset-inline-end: 12px; } } /* ── radio volume ─────────────────────────────────────────────────────── */ /* Only appears once the radio is on — a dead slider is worse than no slider. Keylined and squared off to match the controls beside it. */ .vol { display: flex; align-items: center; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .vol input[type='range'] { -webkit-appearance: none; appearance: none; width: 86px; height: 22px; background: transparent; cursor: pointer; margin: 0; } .vol input[type='range']::-webkit-slider-runnable-track { height: 8px; background: var(--bg); border: 2px solid var(--line); border-radius: 2px; } .vol input[type='range']::-moz-range-track { height: 8px; background: var(--bg); border: 2px solid var(--line); border-radius: 2px; } /* thumb — a little amber slug with the same hard shadow as the buttons */ .vol input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 18px; margin-top: -7px; background: var(--accent); border: 2px solid var(--line); border-radius: 2px; box-shadow: 2px 2px 0 var(--line); } .vol input[type='range']::-moz-range-thumb { width: 12px; height: 18px; background: var(--accent); border: 2px solid var(--line); border-radius: 2px; box-shadow: 2px 2px 0 var(--line); } .vol input[type='range']:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (max-width: 980px) { .vol { display: none; } } .count { font-family: var(--display); font-size: 18px; letter-spacing: 0.12em; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 var(--line); white-space: nowrap; margin-right: 4px; } /* ── keyboard hint bar ────────────────────────────────────────────────── */ #keys { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; gap: 18px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); font-family: var(--display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); border-top: 3px solid var(--line); transition: transform 0.28s var(--ease), opacity 0.28s; } body.ui-hidden #keys { transform: translateY(115%); opacity: 0; } #keys span { display: flex; align-items: center; gap: 7px; } #keys kbd { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; color: var(--bg); background: var(--accent); border: 2px solid var(--line); border-radius: 3px; padding: 1px 5px; box-shadow: 2px 2px 0 var(--line); } @media (max-width: 820px) { #keys { display: none; } } /* ── splash ───────────────────────────────────────────────────────────── */ #splash { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 20px; overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(244, 235, 221, 0.05) 1px, transparent 1.7px) 0 0 / 7px 7px, radial-gradient(90% 70% at 50% 38%, #33271b 0%, var(--bg) 68%); transform-origin: 50% 45%; transition: opacity 0.5s var(--ease), visibility 0.5s, transform 0.66s var(--ease); } /* the camera pushes through the title card on the way in */ #splash.gone { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.16); } body.splash-open, body.picker-open { overflow: hidden; } body.picker-open #topbar, body.picker-open #keys { opacity: 0; pointer-events: none; } body.splash-open #topbar { transform: translateY(-115%); opacity: 0; } #splash .rays { position: absolute; inset: -20%; pointer-events: none; opacity: 0.5; background: repeating-conic-gradient(from 0deg at 50% 44%, rgba(229, 140, 56, 0.10) 0deg 7deg, transparent 7deg 18deg); animation: spin 70s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Toma stands on the left, facing the title. The feathered alpha is baked into the WebP by the build, so there's no rectangle to mask away here. `left` is physical on purpose — his facing direction is fixed in the image, so the layout must not mirror him into looking off-screen. */ #splash .art { position: absolute; bottom: 0; left: max(-56px, calc((100vw - 1440px) / 2)); height: min(88vh, 760px); aspect-ratio: 1000 / 1249; background-image: var(--portrait, none); background-size: contain; background-position: bottom center; background-repeat: no-repeat; opacity: 0.95; /* the darkening is baked into the WebP now */ pointer-events: none; } @media (max-width: 900px) { #splash .art { left: 50%; transform: translateX(-50%); opacity: 0.24; height: 74vh; } } #splash .inner { position: relative; display: flex; flex-direction: column; align-items: center; max-height: 100%; overflow-y: auto; scrollbar-width: none; padding: 10px; } #splash .inner::-webkit-scrollbar { display: none; } #splash h1 { margin: 28px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(92px, 21vw, 216px); line-height: 0.82; letter-spacing: 0.05em; text-indent: 0.05em; color: var(--ink); text-shadow: 0.045em 0.045em 0 var(--accent-2), 0.09em 0.09em 0 var(--line); animation: float-title 7.5s ease-in-out infinite; } /* A full sentence, not a two-word chip: tighter tracking and a steeper shrink so it holds one line down to phone width — a wrapped chip reads as a mistake. */ #splash .kicker { font-size: clamp(9.5px, 3.1vw, 15px); letter-spacing: 0.16em; text-indent: 0.16em; line-height: 1.1; white-space: nowrap; max-width: 94vw; animation: float-kicker 6.2s -1.4s ease-in-out infinite; } .subline { margin: 22px 0 0; font-size: clamp(15px, 2.4vw, 21px); font-style: italic; color: var(--accent); letter-spacing: 0.03em; } #splash .bar2 { width: min(420px, 72vw); height: 4px; margin: 30px 0 32px; background: var(--line); box-shadow: 6px 6px 0 var(--accent-2); } .cover-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .enter .where { font-size: 0.6em; letter-spacing: 0.12em; opacity: 0.7; } .enter { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-size: clamp(24px, 4.2vw, 34px); line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bg); background: var(--accent); border: 3px solid var(--line); border-radius: var(--r); padding: 15px 32px 11px; box-shadow: 7px 7px 0 var(--line); transition: transform 0.1s, box-shadow 0.1s, background 0.14s, color 0.14s; } .enter:hover { background: #f2a75c; transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--line); } .enter:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--line); } .enter svg { width: 24px; height: 24px; margin-top: -3px; } .enter.alt { background: var(--bg-2); color: var(--ink); font-size: clamp(18px, 3vw, 24px); padding: 12px 22px 8px; box-shadow: 5px 5px 0 var(--line); } .enter.alt:hover { background: var(--accent-2); color: #fdf3e6; } /* Support buttons: the same chassis as START READING — thick keyline, solid offset shadow, physical press on :active — one size down, so they read as obviously clickable without out-shouting the main call to action. */ .support { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; } .enter.sup { font-size: clamp(16px, 2.5vw, 21px); letter-spacing: 0.12em; padding: 13px 24px 9px; gap: 11px; max-width: 100%; line-height: 1.15; /* the crypto label wraps on narrow screens */ text-align: center; background: var(--bg-2); color: var(--ink); box-shadow: 6px 6px 0 var(--line); } .enter.sup svg { width: 20px; height: 20px; flex: none; color: var(--accent); transition: color 0.14s; } .enter.sup:hover { background: var(--accent); color: var(--bg); box-shadow: 8px 8px 0 var(--line); } .enter.sup:hover svg { color: var(--bg); } .enter.sup:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--line); } .enter.sup.crypto:hover { background: var(--accent-2); color: #fdf3e6; } .enter.sup.crypto:hover svg { color: #fdf3e6; } /* floating comic words */ #splash .fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } #splash .fx span { position: absolute; left: var(--x); top: var(--y); font-family: var(--display); font-size: clamp(38px, 8vw, 104px); letter-spacing: 0.05em; line-height: 1; white-space: nowrap; /* The alpha lives in the colours rather than on the element, so the outline can read stronger than the fill — that's what makes the glyphs legible at this size without them competing with the title. */ color: rgba(244, 235, 221, 0.075); -webkit-text-stroke: 1.5px rgba(244, 235, 221, 0.34); paint-order: stroke fill; text-shadow: 0.04em 0.04em 0 rgba(6, 4, 4, 0.45); transform: rotate(var(--rot)); animation: drift var(--dur) var(--delay) ease-in-out infinite; } #splash .fx span:nth-child(even) { color: rgba(229, 140, 56, 0.10); -webkit-text-stroke-color: rgba(229, 140, 56, 0.40); } /* Bebas Neue is a latin-only subset — hand the other scripts to system faces and bump the weight so they hold their own beside the condensed Latin. */ #splash .fx .ja { font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif; } #splash .fx .ko { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; } #splash .fx .he { font-family: 'Arial Hebrew', Narkisim, 'Noto Sans Hebrew', sans-serif; } #splash .fx .cy { font-family: 'Helvetica Neue', Arial, sans-serif; } #splash .fx .ja, #splash .fx .ko, #splash .fx .he, #splash .fx .cy { font-weight: 800; letter-spacing: 0.01em; font-size: clamp(30px, 6.4vw, 84px); /* these scripts read larger per em */ } @keyframes drift { 0%, 100% { transform: rotate(var(--rot)) translate3d(0, 0, 0) scale(1); } 25% { transform: rotate(calc(var(--rot) + 3deg)) translate3d(10px, -22px, 0) scale(1.04); } 50% { transform: rotate(var(--rot)) translate3d(-8px, -34px, 0) scale(1); } 75% { transform: rotate(calc(var(--rot) - 3deg)) translate3d(-14px, -14px, 0) scale(0.97); } } @media (max-width: 620px) { /* thin the field so the phone splash doesn't turn into soup */ #splash .fx span:nth-child(n + 7) { display: none; } #splash .fx span { -webkit-text-stroke-width: 1px; } } /* ── chapter picker (shown on entering the reader) ────────────────────── */ #picker { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; padding: 24px 18px; overflow-y: auto; background: radial-gradient(circle at 1px 1px, rgba(244, 235, 221, 0.05) 1px, transparent 1.7px) 0 0 / 7px 7px, radial-gradient(100% 80% at 50% 30%, rgba(38, 30, 21, 0.97), rgba(13, 10, 7, 0.985)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: pick-in 0.34s var(--ease); } @keyframes pick-in { from { opacity: 0; } to { opacity: 1; } } /* the entry: header drops in, chapter cards deal onto the table one after another, the escape hatch arrives last. --i is the card's index, set in JS. */ @keyframes pick-kicker-in { 0% { opacity: 0; transform: rotate(-11deg) translateY(-56px) scale(0.86); } 65% { opacity: 1; transform: rotate(-0.4deg) translateY(8px) scale(1.05); } 100% { opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); } } /* cards deal in from below-right with a little kick, then square up */ @keyframes pick-card-in { 0% { opacity: 0; transform: translate(26px, 54px) rotate(3.5deg) scale(0.93); box-shadow: 0 0 0 var(--line); } 70% { opacity: 1; transform: translate(-3px, -7px) rotate(-0.8deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); box-shadow: 5px 5px 0 var(--line); } } @keyframes pick-foot-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } #picker .kicker { animation: pick-kicker-in 0.62s 0.1s var(--ease) both; } .pick-card { animation: pick-card-in 0.6s var(--ease) both; animation-delay: calc(0.3s + var(--i, 0) * 0.12s); } #pickClose { animation: pick-foot-in 0.5s var(--ease) both; animation-delay: calc(0.42s + var(--n, 0) * 0.12s); } .pick-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(100%, 60rem); margin: auto; } .pick-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; width: 100%; } .pick-card { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 12px; text-align: start; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--r); box-shadow: 5px 5px 0 var(--line); transition: transform 0.1s, box-shadow 0.1s, background 0.14s; } .pick-card:hover { background: var(--accent); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--line); } .pick-card:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--line); } .pick-card:hover .p-num { color: var(--bg); } .pick-card:hover .p-title { color: var(--bg); } .pick-card:hover .p-meta { color: rgba(13, 10, 7, 0.7); } .pick-card .thumb { width: 58px; height: 76px; object-fit: cover; object-position: top; background: var(--paper); border: 2px solid var(--line); border-radius: 2px; } .pick-card .p-num { display: block; font-family: var(--display); font-size: 17px; letter-spacing: 0.16em; color: var(--accent); } .pick-card .p-title { display: block; font-family: var(--display); font-size: 23px; line-height: 1.05; letter-spacing: 0.05em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pick-card .p-meta { display: block; margin-top: 2px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .pick-card.read .p-num::after { content: ' · READ'; font-size: 0.72em; color: var(--muted); } /* ── panel strip (scroll mode) ────────────────────────────────────────── */ #strip { max-width: var(--col); margin: 0 auto; padding: calc(var(--chrome-h) + 26px) 16px 6vh; } .panel { position: relative; margin: 0 auto var(--gap); background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); box-shadow: 9px 9px 0 var(--shadow); overflow: hidden; } .panel .ph { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(22px) saturate(1.05); transform: scale(1.08); transition: opacity 0.5s ease 0.15s; } .panel img { position: relative; display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.4s ease; } .panel.loaded img { opacity: 1; } .panel.loaded .ph { opacity: 0; } /* ── depth on scroll: panels deal onto the table as they arrive ────────── */ /* Scoped to body.depth, which reader.js adds only once the panels are built and observed — so a JS failure can never leave the book invisible. `.in` is added once and never removed, so panels don't re-animate on scroll-back; the first screenful gets it immediately or the chapter opens on a blank stage. */ body.depth .panel { opacity: 0; transform: translateY(26px) scale(0.985); box-shadow: 0 0 0 var(--shadow); transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s; } body.depth .panel.in { opacity: 1; transform: none; box-shadow: 9px 9px 0 var(--shadow); } /* paged mode places panels itself — no entry animation there */ body.depth.mode-paged .panel { opacity: 1; transform: none; transition: none; } /* ── spotlight: everything but the current panel recedes ───────────────── */ body.spotlight #strip { scroll-snap-type: y proximity; } body.spotlight .panel { scroll-snap-align: center; opacity: 0.2; filter: saturate(0.35) brightness(0.55); transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } body.spotlight .panel.cur { opacity: 1; filter: none; box-shadow: 12px 12px 0 var(--shadow), 0 0 0 3px var(--line); } body.spotlight .chsep { opacity: 0.4; transition: opacity 0.3s ease; } /* a slow push on the held panel while auto-playing */ body.playing.spotlight .panel.cur { transform: scale(1.03) translateY(-8px); transition: transform 6s linear; } /* a disabled control reads as unavailable, not missing */ .ctrl:disabled { opacity: 0.45; cursor: default; } .ctrl:disabled:hover { background: var(--bg-2); color: var(--ink); transform: none; box-shadow: 3px 3px 0 var(--line); } .drawer-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } #statsLine { font-family: var(--display); font-size: 14px; letter-spacing: 0.14em; color: var(--accent); } /* ── chapter containers ───────────────────────────────────────────────── */ /* Only the active chapter is in the flow. Everything else leaves the layout entirely, so the document height *is* the chapter height — which is what makes the progress bar read as progress through this chapter rather than through the whole book. */ .chapter { display: none; } .chapter.active { display: block; } /* in paged mode the panels must be the flex items, not the chapter wrapper */ body.mode-paged .chapter.active { display: contents; } /* the end of a chapter — a deliberate stop, not a slide into the next one */ .chend { min-height: 58svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; text-align: center; padding: 12vh 20px 16vh; } body.mode-paged .chend { display: none; } .chsep .ch-stat { margin: 1.6rem 0 0; font-family: var(--display); font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } /* chapter separator */ .chsep { padding: 12vh 20px 10vh; text-align: center; } .chsep .kicker { margin-bottom: 26px; } .chsep h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7vw, 64px); letter-spacing: 0.1em; text-indent: 0.1em; line-height: 0.9; text-transform: uppercase; color: var(--ink); text-shadow: 0.05em 0.05em 0 var(--accent-2), 0.1em 0.1em 0 var(--line); } .chsep .rule { width: 84px; height: 4px; margin: 30px auto 0; background: var(--line); box-shadow: 5px 5px 0 var(--accent-2); } /* ── paged mode ───────────────────────────────────────────────────────── */ body.mode-paged { overflow: hidden; } body.mode-paged #book { position: fixed; inset: 0; } body.mode-paged #strip { display: flex; height: 100dvh; max-width: none; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } body.mode-paged #strip::-webkit-scrollbar { display: none; } body.mode-paged #strip > * { flex: 0 0 100vw; width: 100vw; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; } body.mode-paged .panel { margin: 0; aspect-ratio: auto !important; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: calc(var(--chrome-h) + 20px) 24px 56px; } body.mode-paged .panel img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: var(--paper); border: 3px solid var(--line); border-radius: var(--r); box-shadow: 9px 9px 0 var(--shadow); } body.mode-paged .panel .ph { display: none; } body.mode-paged .chsep { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; } body.mode-paged #empty { display: none; } /* ── end card / empty state ───────────────────────────────────────────── */ #empty { min-height: 56svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6rem; text-align: center; padding: 10vh 20px 16vh; } .end-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } #empty p { margin: 0; max-width: 34em; color: var(--muted); } #empty code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em; color: var(--ink); background: var(--bg-2); border: 2px solid var(--line); padding: 0.15em 0.5em; border-radius: var(--r); box-shadow: 2px 2px 0 var(--shadow); } #empty .dim { font-size: 0.8rem; color: var(--muted); } #empty a { color: var(--accent); } /* ── chapters drawer ──────────────────────────────────────────────────── */ #scrim { position: fixed; inset: 0; z-index: 70; background: rgba(6, 4, 4, 0.74); opacity: 0; transition: opacity 0.22s; } #scrim.open { opacity: 1; } #drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 71; width: min(88vw, 340px); display: flex; flex-direction: column; background: var(--bg-2); border-inline-start: 4px solid var(--line); transform: translateX(105%); transition: transform 0.24s var(--ease); padding-top: env(safe-area-inset-top); } [dir='rtl'] #drawer { transform: translateX(-105%); } #drawer.open { transform: translateX(0); } #drawer header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 14px 22px; border-bottom: 3px solid var(--line); } #drawer header .stamp { border: 0; padding: 0; font-size: 24px; letter-spacing: 0.18em; color: var(--accent); text-shadow: 2px 2px 0 var(--line); } #chList { list-style: none; margin: 0; padding: 12px 0; overflow-y: auto; flex: 1; } #chList button { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; width: 100%; padding: 10px 18px; text-align: start; border-inline-start: 5px solid transparent; transition: background 0.12s; } #chList button:hover { background: rgba(229, 140, 56, 0.12); } #chList li.current button { border-inline-start-color: var(--accent); background: rgba(193, 85, 42, 0.2); } #chList .thumb { width: 44px; height: 58px; object-fit: cover; object-position: top; border-radius: 2px; background: var(--paper); border: 2px solid var(--line); } #chList .ch-num { display: block; font-family: var(--display); font-size: 16px; letter-spacing: 0.14em; color: var(--accent); } #chList .ch-title { display: block; margin-top: 1px; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chList li.current .ch-title { color: var(--accent); } #chList .ch-meta { display: block; font-size: 11px; color: var(--muted); letter-spacing: 0.08em; } #drawer footer { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 3px solid var(--line); } #drawer footer #installBtn { margin-bottom: 10px; } .studio-link { display: inline-block; margin-top: 12px; font-family: var(--display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 2px solid rgba(229, 140, 56, 0.4); padding-bottom: 1px; } .studio-link:hover { color: var(--ink); border-bottom-color: var(--ink); } #drawer footer p { margin: 4px 0; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); } #drawer footer b { color: var(--bg); background: var(--accent); font-weight: 600; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px 1px; font-size: 0.62rem; } /* ── support dialog ───────────────────────────────────────────────────── */ #supScrim { position: fixed; inset: 0; z-index: 90; background: rgba(6, 4, 4, 0.8); } #supModal { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(94vw, 30rem); max-height: 86svh; overflow-y: auto; background: var(--bg-2); border: 3px solid var(--line); border-radius: var(--r); box-shadow: 10px 10px 0 var(--shadow); } #supModal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 14px 18px; border-bottom: 3px solid var(--line); } #supBody { padding: 18px; } #supBody p { margin: 0 0 14px; font-size: 0.86rem; color: var(--muted); line-height: 1.65; } #supBody p.lead { color: var(--ink); } #supBody code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82em; color: var(--accent); background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0.1em 0.4em; } .wallet { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--r); } .wallet .w-label { grid-column: 1 / -1; font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; color: var(--accent); } .wallet .w-addr { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; color: var(--ink); word-break: break-all; line-height: 1.5; } .sup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .keylist { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: center; } .keylist kbd { font-family: var(--display); font-size: 15px; letter-spacing: 0.08em; color: var(--bg); background: var(--accent); border: 2px solid var(--line); border-radius: 3px; padding: 3px 8px 1px; box-shadow: 2px 2px 0 var(--line); white-space: nowrap; text-align: center; } .keylist span { font-size: 0.84rem; color: var(--cream-dim, var(--muted)); } #toast { position: fixed; bottom: calc(56px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(6px); z-index: 80; padding: 0.65em 1.2em 0.55em; font-family: var(--display); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--r); box-shadow: 4px 4px 0 var(--line); opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; white-space: nowrap; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── responsive / motion ──────────────────────────────────────────────── */ @media (max-width: 860px) { :root { --gap: 14px; --chrome-h: 50px; } #strip { max-width: 100%; padding-inline: 10px; } .panel { border-width: 2px; box-shadow: 5px 5px 0 var(--shadow); } .brand b { font-size: 23px; } .brand .sub { display: none; } .ctrl .lbl { display: none; } .ctrl { gap: 0; padding: 2px 10px 0; } #dirBtn .lbl { display: inline; } /* the label IS the control */ #dirBtn { gap: 8px; } } @media (max-width: 760px) { /* the bar can't hold seven controls on a phone — these two live in the chapters drawer and on their keys instead */ .ctrl.extra { display: none; } } @media (max-width: 560px) { .count { display: none; } #strip { padding-inline: 8px; } } @media (prefers-reduced-motion: reduce) { #splash .rays, #splash .fx span, #splash h1, #splash .kicker, #picker, #picker .kicker, .pick-card, #pickClose, #neon.lit { animation: none; } #topbar, #drawer, #splash, #keys, .panel img, .panel .ph { transition: none; } #splash.gone { transform: none; } /* keep spotlight's dimming — that's information, not decoration — but drop every movement: the entry, the drift, the transitions */ body.depth .panel { opacity: 1; transform: none; transition: none; } body.spotlight .panel { transition: none; } body.playing.spotlight .panel.cur { transform: none; transition: none; } }