/* ============================================================================ The Rooted Journal - THE NOTE-SCRAP component (round 3, binding, CORRECTED). Ground truth: assets/ref_note_scrap.jpg (the canonical crop the user sent) + posts/feed_4x5/04_rooty-observes_rain-puddle.jpg + square_1x1/03. The correct spec (earlier drafts had it inverted): - a WARM TAN scrap NOTICEABLY DARKER than the page behind it (never lighter, never cream) with faint aged blotching; - heavily DARKENED ragged torn edges - an almost scorched-looking brown gradient right at the rim, splotchier at the corners; - TWO WIDE aged semi-transparent tape strips crossing the TOP CORNERS at opposing angles (they overhang onto the page behind); - slight rotation (deterministic per instance - scrap.js), soft paper shadow onto the page, dark-brown ink; text defaults to Rooty's handwritten script (Caveat). This is THE pattern for every on-page note, slip, observation and archive scrap - do not reinvent it per page. VARIATIONS per instance are welcome (silhouette, tape placement/angle, rotation) - same language, never identical clones. Usage:
outer: tilt + shadow + tapes
...
inner: torn paper + scorched rim
- data-tilt: deterministic rotation in degrees (assets/js/scrap.js maps it to --tilt). Omit it and scrap.js derives a stable -2.5..2.5 tilt from data-seed (or the text). Use data-tilt="0" when a parent already rotates. Variation knobs (set inline per instance): --tape-rot-l / --tape-rot-r : tape angles (default -34deg / 40deg) --tape-l / --tape-r : tape corner offsets (default -14px / -14px) --tape-w / --tape-h : tape size (default 88px x 24px) Modifiers: .note-scrap--cut2 : alternate torn silhouette (so piles never clone) .note-scrap--tape-one : single tape, top-center (small asides) .note-scrap--tape-b-low : second tape holds the bottom corner (tall scraps - portraits, post art) ============================================================================ */ .note-scrap { position: relative; display: block; --tilt: 0deg; --tape-rot-l: -34deg; --tape-rot-r: 40deg; --tape-l: -14px; --tape-r: -14px; --tape-w: 88px; --tape-h: 24px; transform: rotate(var(--tilt)); /* soft paper shadow follows the torn silhouette AND the tapes */ filter: drop-shadow(2px 4px 7px rgba(56, 38, 18, 0.32)) drop-shadow(0 1px 2px rgba(56, 38, 18, 0.2)); } .note-scrap__paper { position: relative; display: block; padding: 15px 17px 13px; /* WARM TAN, noticeably darker than the page (#E4CCAE) - the ref scrap's handled, tea-stained tone, with soft aged blotches */ background: radial-gradient(90% 60% at 82% 10%, rgba(146, 108, 62, 0.28), transparent 55%), radial-gradient(75% 55% at 10% 90%, rgba(139, 100, 56, 0.26), transparent 52%), radial-gradient(55% 45% at 45% 50%, rgba(224, 196, 150, 0.35), transparent 60%), linear-gradient(163deg, #E0BE95 0%, #D5AE7E 48%, #C89E68 100%); /* ragged torn edge - deep irregular bites on every side, never a clean cut */ clip-path: polygon( 0.8% 6%, 3.5% 1.5%, 8% 3.8%, 13% 0.4%, 19% 3%, 26% 0.8%, 33% 3.4%, 41% 0.5%, 49% 2.8%, 57% 0.7%, 65% 3.2%, 72% 0.6%, 80% 2.9%, 87% 0.4%, 93% 3%, 97.5% 1%, 99.4% 7%, 98% 15%, 99.7% 26%, 98.2% 38%, 99.8% 52%, 98.3% 64%, 99.6% 77%, 98% 88%, 99.2% 95%, 95% 99.3%, 88% 96.8%, 80% 99.6%, 71% 97%, 62% 99.5%, 53% 97.2%, 44% 99.7%, 35% 97%, 26% 99.4%, 17% 96.9%, 9% 99.5%, 3.5% 97.5%, 0.6% 92%, 2% 82%, 0.3% 70%, 1.8% 57%, 0.4% 44%, 2% 31%, 0.5% 18%); /* the scrap speaks in Rooty's hand, dark-brown ink, unless a child says otherwise */ font-family: var(--font-hand, "Caveat", "Segoe Print", cursive); font-weight: 600; color: #43301C; } /* the scorched rim: heavy brown darkening hugging every torn edge, fading fast toward the middle; splotchier at the corners (paints above the paper background, below the content - z-index -1 inside the paper's context) */ .note-scrap__paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: /* per-side burn */ linear-gradient(90deg, rgba(92, 58, 24, 0.55) 0%, rgba(92, 58, 24, 0) 6%, transparent 94%, rgba(85, 53, 22, 0.5) 100%), linear-gradient(180deg, rgba(99, 63, 27, 0.5) 0%, rgba(99, 63, 27, 0) 8%, transparent 90%, rgba(74, 45, 18, 0.6) 100%), /* corner scorch splotches */ radial-gradient(38% 30% at 0% 100%, rgba(80, 49, 20, 0.42), transparent 65%), radial-gradient(30% 26% at 100% 6%, rgba(80, 49, 20, 0.36), transparent 62%), radial-gradient(26% 22% at 100% 96%, rgba(74, 45, 18, 0.4), transparent 62%), radial-gradient(24% 20% at 4% 2%, rgba(85, 53, 22, 0.34), transparent 60%), /* general inward shading so the rim reads burned, the middle handled */ radial-gradient(115% 115% at 50% 44%, transparent 52%, rgba(104, 68, 30, 0.16) 76%, rgba(80, 49, 20, 0.38) 96%); } /* ---- the two WIDE tape strips: top corners, opposing angles -------------- */ .note-scrap::before, .note-scrap::after { content: ""; position: absolute; z-index: 3; width: var(--tape-w); height: var(--tape-h); background: linear-gradient(180deg, rgba(255, 250, 234, 0.3), rgba(255, 250, 234, 0) 45%), linear-gradient(102deg, rgba(203, 184, 140, 0.6), rgba(189, 168, 122, 0.72) 48%, rgba(203, 184, 140, 0.58)); /* torn tape ends */ clip-path: polygon(0 16%, 3% 0, 10% 7%, 95% 2%, 100% 20%, 97.5% 55%, 100% 82%, 94% 100%, 87% 93%, 5% 97%, 1.5% 78%, 2.5% 40%); box-shadow: inset 0 0 0 0.5px rgba(110, 86, 50, 0.18), 0 1px 2px rgba(56, 38, 18, 0.18); pointer-events: none; } .note-scrap::before { top: -7px; left: var(--tape-l); transform: rotate(var(--tape-rot-l)); } .note-scrap::after { top: -7px; right: var(--tape-r); transform: rotate(var(--tape-rot-r)); } /* alternate torn silhouette - use on neighbours so a pile never clones */ .note-scrap--cut2 .note-scrap__paper { clip-path: polygon( 1.2% 9%, 4% 2.5%, 11% 4.5%, 17% 0.8%, 25% 4%, 34% 1%, 43% 3.8%, 52% 0.5%, 60% 3.5%, 69% 0.9%, 78% 4%, 86% 1.2%, 94% 4.2%, 98.6% 2%, 99.8% 10%, 98.4% 22%, 100% 34%, 98.6% 47%, 99.9% 60%, 98.2% 72%, 99.7% 84%, 98.6% 93%, 93% 99.6%, 84% 96.5%, 74% 99.8%, 64% 96.8%, 54% 99.9%, 45% 96.6%, 35% 99.7%, 25% 96.8%, 15% 99.9%, 7% 97%, 1.5% 99%, 0.4% 88%, 1.9% 74%, 0.2% 60%, 1.6% 46%, 0.3% 33%, 1.8% 20%); } /* small asides carry a single strip, top-center-ish */ .note-scrap--tape-one::after { display: none; } .note-scrap--tape-one::before { left: 34%; --tape-rot-l: -6deg; } /* tall scraps (portraits, post art): second tape holds the bottom corner, like the square post reference */ .note-scrap--tape-b-low::after { top: auto; bottom: -8px; right: var(--tape-r); transform: rotate(calc(var(--tape-rot-r) * -1)); } /* ---- "pass this page on" - a strip of mending tape used as a control ----- */ .mend-share { display: inline-block; position: relative; font-family: var(--font-type, "Courier Prime", monospace); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #453d2f; background: linear-gradient(180deg, rgba(255, 250, 234, 0.3), rgba(255, 250, 234, 0) 45%), linear-gradient(101deg, rgba(213, 194, 148, 0.62), rgba(202, 181, 133, 0.75) 48%, rgba(213, 194, 148, 0.6)); border: 0; cursor: pointer; padding: 9px 22px 10px; clip-path: polygon(0 18%, 2% 0, 6% 8%, 97% 3%, 100% 24%, 98.5% 55%, 100% 80%, 96% 100%, 91% 92%, 3% 96%, 1% 74%, 1.5% 42%); filter: drop-shadow(1px 2px 3px rgba(60, 44, 24, 0.25)); transform: rotate(-1.8deg); } .mend-share:hover { transform: rotate(-0.6deg); color: #2E2A24; } .mend-share:focus-visible { outline: 2px dashed #3E3A32; outline-offset: 3px; } .mend-done { font-family: var(--font-hand, "Caveat", cursive); font-weight: 600; font-size: 1.1rem; color: #3E3A32; margin: 10px 0 0; display: block; transform: rotate(-0.6deg); } /* QA v4: display:block above was overriding the [hidden] attribute's UA display:none, so "Copied." showed before the tag was ever clicked */ .mend-done[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .mend-share, .mend-share:hover { transform: none; } }