/* ============================================================
Limitless "Paper & Ink" sketch backdrop — drop-in
------------------------------------------------------------
The SVG is ONE tile. This file adds the two things the tile
itself does NOT contain:
1) tessellation -> background-repeat tiles it across the page
2) light/dark -> opacity is dimmed under a dark theme
------------------------------------------------------------
USAGE (site convention — see START-HERE ★ block)
...
plus
in the (bump ?v= whenever this file changes so cached copies refresh).
Dark mode: the site sets and the texture auto-dims
via the [data-theme="dark"] selector below. That's it.
============================================================ */
.sketch-bg {
position: relative;
}
/* the tiled texture sits behind content on its own fixed layer */
.sketch-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%0A %3Cg fill='none' stroke='%239c8f76' stroke-width='2.4' stroke-opacity='0.6' stroke-linecap='round' stroke-linejoin='round'%3E%0A%0A %0A %3Cg transform='translate(24%2C16) rotate(-8) scale(0.9)'%3E%0A %3Cpath d='M14 0 Q14 5.5 8 11 Q2 16.5 2 22 Q2 27.5 8 33 Q14 38.5 14 44'%3E%3C/path%3E%0A %3Cpath d='M2 0 Q2 5.5 8 11 Q14 16.5 14 22 Q14 27.5 8 33 Q2 38.5 2 44'%3E%3C/path%3E%0A %3Cpath d='M3.5 5 H12.5'%3E%3C/path%3E%3Cpath d='M4.1 16 H11.9'%3E%3C/path%3E%3Cpath d='M2.5 19 H13.5'%3E%3C/path%3E%3Cpath d='M2 22 H14'%3E%3C/path%3E%3Cpath d='M2.5 25 H13.5'%3E%3C/path%3E%3Cpath d='M4.1 28 H11.9'%3E%3C/path%3E%3Cpath d='M3.5 39 H12.5'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(122%2C24) rotate(-10) scale(0.95)'%3E%0A %3Cpath d='M9 0 C4 5 4 13 5 20 h8 c1 -7 1 -15 -4 -20 z'%3E%3C/path%3E%0A %3Cpath d='M5 18 l-5 7 5 -1.5'%3E%3C/path%3E%3Cpath d='M13 18 l5 7 -5 -1.5'%3E%3C/path%3E%0A %3Ccircle cx='9' cy='9' r='2.7'%3E%3C/circle%3E%0A %3Cpath d='M6 24 l3 7 3 -7' stroke-width='2'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(214%2C42) rotate(-18) scale(0.95)'%3E%0A %3Cpath d='M8.4 -5.45 Q24 0 8.4 5.45'%3E%3C/path%3E%3Cpath d='M-8.4 -5.45 Q-24 0 -8.4 5.45'%3E%3C/path%3E%0A %3Ccircle cx='0' cy='0' r='10'%3E%3C/circle%3E%3Cpath d='M-8.4 5.45 Q0 8.2 8.4 5.45'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(64%2C98) rotate(11) scale(0.95)'%3E%0A %3Cpath d='M0 -10 L8.66 -5 L8.66 5 L0 10 L-8.66 5 L-8.66 -5 Z'%3E%3C/path%3E%0A %3Cpath d='M0.56 -7.37 L6.1 -4.17'%3E%3C/path%3E%3Cpath d='M6.1 4.17 L0.56 7.37'%3E%3C/path%3E%3Cpath d='M-6.66 3.2 L-6.66 -3.2'%3E%3C/path%3E%0A %3Cpath d='M0 -10 L0 -15.5'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(160%2C100) rotate(3) scale(0.9)'%3E%0A %3Cpath d='M0 0 V34 H34'%3E%3C/path%3E%3Crect x='5' y='22' width='5' height='12'%3E%3C/rect%3E%3Crect x='13' y='14' width='5' height='20'%3E%3C/rect%3E%3Crect x='21' y='18' width='5' height='16'%3E%3C/rect%3E%3Crect x='29' y='8' width='5' height='26'%3E%3C/rect%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(236%2C128) rotate(6) scale(1.2)'%3E%0A %3Cpath d='M14 0 Q14 5.5 8 11 Q2 16.5 2 22 Q2 27.5 8 33 Q14 38.5 14 44'%3E%3C/path%3E%0A %3Cpath d='M2 0 Q2 5.5 8 11 Q14 16.5 14 22 Q14 27.5 8 33 Q2 38.5 2 44'%3E%3C/path%3E%0A %3Cpath d='M3.5 5 H12.5'%3E%3C/path%3E%3Cpath d='M4.1 16 H11.9'%3E%3C/path%3E%3Cpath d='M2.5 19 H13.5'%3E%3C/path%3E%3Cpath d='M2 22 H14'%3E%3C/path%3E%3Cpath d='M2.5 25 H13.5'%3E%3C/path%3E%3Cpath d='M4.1 28 H11.9'%3E%3C/path%3E%3Cpath d='M3.5 39 H12.5'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(34%2C154) rotate(-14) scale(0.95)'%3E%0A %3Cpath d='M9 0 C4 5 4 13 5 20 h8 c1 -7 1 -15 -4 -20 z'%3E%3C/path%3E%0A %3Cpath d='M5 18 l-5 7 5 -1.5'%3E%3C/path%3E%3Cpath d='M13 18 l5 7 -5 -1.5'%3E%3C/path%3E%0A %3Ccircle cx='9' cy='9' r='2.7'%3E%3C/circle%3E%0A %3Cpath d='M6 24 l3 7 3 -7' stroke-width='2'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(120%2C180) rotate(12) scale(1.2)'%3E%0A %3Cpath d='M0 -10 L8.66 -5 L8.66 5 L0 10 L-8.66 5 L-8.66 -5 Z'%3E%3C/path%3E%0A %3Cpath d='M0.56 -7.37 L6.1 -4.17'%3E%3C/path%3E%3Cpath d='M6.1 4.17 L0.56 7.37'%3E%3C/path%3E%3Cpath d='M-6.66 3.2 L-6.66 -3.2'%3E%3C/path%3E%0A %3Cpath d='M0 -10 L0 -15.5'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(218%2C208) rotate(-18) scale(0.9)'%3E%0A %3Cpath d='M8.4 -5.45 Q24 0 8.4 5.45'%3E%3C/path%3E%3Cpath d='M-8.4 -5.45 Q-24 0 -8.4 5.45'%3E%3C/path%3E%0A %3Ccircle cx='0' cy='0' r='10'%3E%3C/circle%3E%3Cpath d='M-8.4 5.45 Q0 8.2 8.4 5.45'%3E%3C/path%3E%0A %3C/g%3E%0A%0A %0A %3Cg transform='translate(48%2C214) rotate(2) scale(0.9)'%3E%0A %3Cpath d='M0 0 V34 H34'%3E%3C/path%3E%3Crect x='5' y='22' width='5' height='12'%3E%3C/rect%3E%3Crect x='13' y='14' width='5' height='20'%3E%3C/rect%3E%3Crect x='21' y='18' width='5' height='16'%3E%3C/rect%3E%3Crect x='29' y='8' width='5' height='26'%3E%3C/rect%3E%0A %3C/g%3E%0A%0A %3C/g%3E%0A%3C/svg%3E");
background-repeat: repeat; /* <-- the tessellation */
background-size: 172px 172px; /* tweak: smaller = denser */
opacity: 0.30; /* light-mode strength (0.36 was too dark, 0.28 too faint — quarter-way back) */
transition: opacity 240ms ease-out;
}
/* keep real content above the texture */
.sketch-bg > * {
position: relative;
z-index: 1;
}
/* dark / focus mode — just fade the same tile */
[data-theme="dark"] .sketch-bg::before,
.theme-dark .sketch-bg::before,
.sketch-bg.theme-dark::before {
opacity: 0.22;
}
@media (prefers-reduced-motion: reduce) {
.sketch-bg::before { transition: none; }
}