:root { --ink: #111; --paper: #f8f6f2; --accent: #6a4bff; /* Background layers as variables so pages can override them */ --bg-vignette: radial-gradient(1200px 800px at 50% -200px, rgba(0,0,0,0.04), transparent 60%); /* Use PNG tile by default; when AVIF/WEBP tiles are added, switch back to image-set */ --bg-paper: url('/bg/paper-tile.png'); } * { box-sizing: border-box; } /* Allow body to grow beyond viewport so background tiles repeat vertically */ html, body { min-height: 100%; } body { margin: 0; font-family: "Prata", Georgia, Cambria, "Times New Roman", Times, serif; color: var(--ink); background-color: var(--paper); /* Efficient background strategy: 1) Top layer: subtle radial vignette to avoid a flat look. 2) Middle layer: seamless paper tile (AVIF/WEBP/PNG via image-set). 3) Bottom layer (fallback): your current large scan, full-bleed. When you add optimized tiles under /public/bg (paper-tile.*), they will be used. Until then, the fallback PNG will render. */ background-image: var(--bg-vignette), var(--bg-paper); /* If you create a tiny noise tile, you can add it as the first layer: background-image: url('/bg/noise-128.png'), [radial-gradient...], image-set(...), url(...); and set background-repeat/background-size accordingly (repeat for noise). */ background-repeat: no-repeat, repeat; /* Use 768px tile size to keep 1:1 texture feel */ background-size: auto, 768px 768px; background-position: center top, left top; background-attachment: scroll; } /* Per-page background variants via data attribute on */ body[data-bg="black-paper"] { --bg-paper: url('/bg/paper-tile-black.png'); } h1, h2, h3 { line-height: 1.2; margin: 0.5rem 0 0.75rem; } p { line-height: 1.7; } a { color: inherit; } .section-title { text-align:center; text-transform: uppercase; letter-spacing: .08em; margin: 0.7rem 0 1rem; color: #d44a40; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card { background: color-mix(in oklab, var(--paper) 96%, white 4%); border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .card .body { padding: 0.75rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Wobble animation */ @keyframes wiggle { 0% { transform: rotate(calc(-1 * var(--w-angle, 1deg))) translateY(0); } 50% { transform: rotate(var(--w-angle, 1deg)) translateY(var(--w-ty, -1px)); } 100% { transform: rotate(calc(-1 * var(--w-angle, 1deg))) translateY(0); } } .wobble { animation: wiggle var(--w-duration, 2.2s) ease-in-out infinite; animation-delay: var(--w-delay, 0s); animation-direction: var(--w-direction, normal); transform-origin: 50% 50%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .wobble { animation: none !important; } } /* Image button example */ .img-button { display: inline-grid; place-items: center; text-decoration: none; scale: 0.9 } .img-button img { display:block; max-width: 100%; height: auto; } .img-button:where(:hover, :focus-visible) img { transform: rotate(-4deg) scale(1.03); transition: transform .2s ease; } /* Simple hero */ .hero { display: grid; gap: .75rem; padding: 3rem 0; } .hero h1 { font-size: clamp(2rem, 3vw + 1rem, 3.2rem); } .hero p { max-width: 60ch; color: color-mix(in oklab, var(--ink) 70%, transparent); } /* Paper-themed readable containers */ .paper-card { background: color-mix(in oklab, var(--paper) 96%, white 4%); border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.08); padding: 1rem; } .vellum { background: color-mix(in oklab, var(--paper) 88%, transparent 12%); backdrop-filter: blur(2px); border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); border-radius: 10px; padding: 1rem; } .index-card { background: linear-gradient(to bottom, transparent 23px, color-mix(in oklab, var(--ink) 10%, transparent) 24px) repeat-y, color-mix(in oklab, var(--paper) 96%, white 4%); background-size: 100% 28px, auto; border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,.06); padding: 1rem; } .cutout { /* Base shape */ border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.10); padding: 1rem; border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); /* Paper texture + color */ --cutout-color: color-mix(in oklab, var(--paper) 96%, white 4%); /* Default light paper tile; override via modifier for dark variants */ --cutout-texture: url('/bg/paper-tile.png'); background-color: var(--cutout-color); background-image: var(--cutout-texture); background-repeat: repeat; /* Match the page tile scale so texture feels consistent */ background-size: 768px 768px; /* Multiply lets the texture darken the color like real paper grain */ background-blend-mode: multiply; } .cutout.green { --cutout-color: #dfead9; } .cutout.yellow { --cutout-color: #fff3c7; } .cutout.pink { --cutout-color: #ffe0ea; } .cutout.purple { --cutout-color: #9f7eba; } /* White paper variant */ .cutout.white { --cutout-color: #ffffff; } /* Dark construction paper variant uses the darker tile */ .cutout.dark { --cutout-color: #1b1b1b; --cutout-texture: url('/bg/paper-tile-black.png'); color: #f4f4f4; } /* Torn-paper edge variant for cutouts (uses CSS mask) */ .cutout.torn { -webkit-mask-image: url('/edges/torn-mask.svg'); mask-image: url('/edges/torn-mask.svg'); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* Slight extra shadow to emphasize the deckled edge */ filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); } /* Reusable glass (blurred, translucent) panel */ .glass { background: color-mix(in oklab, var(--paper) 88%, transparent 12%); border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius: 10px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }