/* Paper-1950 + old-print filters — toggled via data attrs on . When data-paper="on" is present: • the .cw-page surfaces (Jung CW reader pages) blend with the warm 1950 paper gradient. The SVG grain overlay is fixed-position above the spread and mix-blend-multiplied — this file just supplies the warm tint and removes the cream Princeton paper. When data-print="on" is present: • body text inside .cw-page picks up filter:url(#old-print) which displaces edges via feTurbulence + feDisplacementMap and applies a slight Gaussian blur. Text color shifts to ink-brown so it reads as letterpress, not laser printer. */ html[data-paper="on"] .cw-page { /* Warm radial paper — overrides Princeton cream so the texture overlay above multiplies onto something yellow, not cream-on-cream. */ background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.35), transparent 28%), radial-gradient(circle at 80% 90%, rgba(120,80,20,0.12), transparent 35%), linear-gradient(180deg, var(--greb-paper-bg, #f3e6bd) 0%, var(--greb-paper-bg-dark, #e8d59d) 100%); position: relative; isolation: isolate; } /* Pre-rasterized PNG texture as background-image. The browser caches the data URL as a bitmap once and blits it on every paint — no SVG filter computation when the spread reveals on a flip. Variant is chosen per-page via data-paper-variant (set by apply.js). */ html[data-paper="on"] .cw-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background-image: var(--greb-paper-tex, none); background-size: 256px 256px; background-repeat: repeat; mix-blend-mode: var(--greb-paper-blend, multiply); opacity: var(--greb-paper-opacity, 0.22); /* Promote to its own composite layer so the GPU caches the painted result. Layer survives display:none→flex transitions. */ transform: translateZ(0); will-change: opacity; } /* Map page data-paper-variant to the right CSS texture var. The four variants stay in CSS-only territory — no JS per-flip work. */ html[data-paper="on"] .cw-page[data-paper-variant="0"] { --greb-paper-tex: var(--greb-paper-tex-0); } html[data-paper="on"] .cw-page[data-paper-variant="1"] { --greb-paper-tex: var(--greb-paper-tex-1); } html[data-paper="on"] .cw-page[data-paper-variant="2"] { --greb-paper-tex: var(--greb-paper-tex-2); } html[data-paper="on"] .cw-page[data-paper-variant="3"] { --greb-paper-tex: var(--greb-paper-tex-3); } /* Pages that haven't received a variant yet (rare race) fall back to 0. */ html[data-paper="on"] .cw-page:not([data-paper-variant]) { --greb-paper-tex: var(--greb-paper-tex-0); } /* ── Layout-safe baseline ───────────────────────────────────────── Letter-spacing IS layout-affecting (re-justifies text, changes line wraps). Applying it only when print-wear toggles on caused a visible reflow between OFF and ON states. We move it to a base rule scoped to `.cw-page` so the layout is identical whether print wear is on or off — only the visual layer (filter, color, shadow, opacity, fiber texture) changes with the toggle. The CSS var resolves to the slider value when set by apply.js, and to the historical letterpress default when not. The slider is still tied to print wear semantically (it lives in that section), but its layout impact is now constant. */ .cw-page .cw-body, .cw-page .cw-footnotes, .cw-page .cw-running-head, .cw-page .cw-page-footer { letter-spacing: var(--greb-print-letter-space, 0.02em); } html[data-print="on"] .cw-page .cw-body, html[data-print="on"] .cw-page .cw-footnotes, html[data-print="on"] .cw-page .cw-running-head, html[data-print="on"] .cw-page .cw-page-footer { /* Apply the SVG distortion filter — emulates ink absorption + edge erosion + presshold mis-registration. */ filter: url(#old-print); /* Letterpress ink brown, not pure black. */ color: var(--greb-print-ink, #4e3b2a); /* Subtle ink absorption — twin shadows simulate ink spread. The `--greb-print-shadow` multiplier scales the spread distance. */ text-shadow: calc(0.3px * var(--greb-print-shadow, 1)) 0 rgba(60, 40, 20, 0.15), calc(-0.3px * var(--greb-print-shadow, 1)) 0 rgba(60, 40, 20, 0.08); opacity: var(--greb-print-opacity, 0.96); /* Fiber-absorption micro-dots — barely visible warm specks. Computed alpha is interpolated via a CSS var so the slider works even though rgba() literals can't normally take vars in a clean way. */ background-image: radial-gradient(rgba(120, 90, 40, var(--greb-print-fiber-alpha, 0.05)) 1px, transparent 1px); background-size: var(--greb-print-fiber-size, 3px) var(--greb-print-fiber-size, 3px); } /* Don't filter footnote markers (numeric superscripts) — they distort to illegible mush at small font sizes. */ html[data-print="on"] .cw-page .cw-fn-ref { filter: none; } /* The settings panel — same visual language as halftone but namespaced gp-. */ .gp-panel { position: fixed; right: 24px; bottom: 24px; width: 320px; max-height: 80vh; overflow-y: auto; background: #f6f1e3; color: #1a1a1a; border: 1px solid rgba(40, 24, 12, 0.4); border-radius: 6px; box-shadow: 0 12px 38px rgba(0, 0, 0, 0.4); font-family: "Inter", "Outfit", "DM Sans", system-ui, sans-serif; font-size: 12px; z-index: 9999; } .gp-title { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #2a1f15; color: #f6f1e3; cursor: grab; user-select: none; border-radius: 6px 6px 0 0; } .gp-title strong { flex: 1; letter-spacing: 0.04em; text-transform: uppercase; } .gp-close { background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; } .gp-section { padding: 10px 12px; border-top: 1px solid rgba(40, 24, 12, 0.15); } .gp-section h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26, 16, 8, 0.7); } .gp-section--toggles { display: flex; gap: 8px; } .gp-toggle { flex: 1; padding: 8px; border: 1px solid rgba(40, 24, 12, 0.35); background: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; } .gp-toggle[aria-pressed="true"] { background: #2a1f15; color: #f6f1e3; border-color: #2a1f15; } .gp-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .gp-row-head { display: flex; justify-content: space-between; font-size: 11px; } .gp-val output { font-variant-numeric: tabular-nums; color: rgba(26, 16, 8, 0.7); } .gp-row input[type="range"] { width: 100%; } .gp-row--color { flex-direction: row; align-items: center; justify-content: space-between; } .gp-row--color input[type="color"] { width: 36px; height: 22px; border: 1px solid rgba(40, 24, 12, 0.35); border-radius: 3px; background: transparent; cursor: pointer; padding: 0; } .gp-presets { display: flex; flex-wrap: wrap; gap: 4px; } .gp-preset { flex: 1; padding: 6px 8px; border: 1px solid rgba(40, 24, 12, 0.35); background: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 11px; text-transform: capitalize; border-radius: 3px; } .gp-preset[aria-pressed="true"] { background: #2a1f15; color: #f6f1e3; border-color: #2a1f15; } .gp-footer { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid rgba(40, 24, 12, 0.15); } .gp-btn { padding: 6px 14px; background: transparent; border: 1px solid rgba(40, 24, 12, 0.35); border-radius: 3px; cursor: pointer; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .gp-btn:hover { background: rgba(40, 24, 12, 0.06); } /* Print mode — hide the panel and the SVG overlay on actual print. */ @media print { .gp-panel, #greb-paper-overlay { display: none !important; } }