/* bg-patterns.css — sitewide decorative background patterns. Loaded on every page (default.hbs). Pure CSS gradients, no images, so this file stays tiny (no network requests beyond the file itself). 100 patterns total: 1-10 the original set, 11-30 tech-themed, 31-50 "fun business"-themed, 51-75 nature & organic, 76-100 retro & geometric (playful/thematic in shape, still tonal in color — see the comment above pattern 31 for why). Selection (see "1b. Sitewide background pattern" in assets/js/main.js): - Manual: tag a page/post in Ghost Admin with "bg-pattern-1" through "bg-pattern-100" — Ghost's {{body_class}} helper automatically adds a matching `tag-bg-pattern-N` class to , which the rules below target directly. No template change needed to use this. - Automatic: if no such tag is present, main.js picks one of the 100 deterministically from the page's URL path (same page always gets the same pattern — stable across reloads, not a random flicker) and sets data-bg-pattern="N" on . Architecture: each pattern's actual gradient recipe is defined ONCE, as a set of --pattern-* custom properties on `[data-bg-pattern="N"]` (an attribute selector with no element type, so it matches whatever carries the attribute or class). Two consumers read those properties: 1. body[data-bg-pattern]::before / body[class*="tag-bg-pattern-"]::before — the sitewide layer: a fixed, full-viewport, non-interactive backdrop behind all page content. 2. .bg-swatch-preview — small static cards on the "Components & Elements" page (custom-components.hbs) that preview all 100 side by side at full opacity, unmasked, so they're easy to compare and no room for the README's tag names to go stale against what's actually in this file. Opacity/line weight on the sitewide layer are deliberately restrained so body text stays fully readable over any of them in both Human and Cyber mode; the swatch previews intentionally ignore --pattern-opacity/mask so each one is fully visible as a design-system reference. */ /* 1. Grid — thin crosshatch lines, masked to fade out toward the edges (sitewide layer only). */ [data-bg-pattern="1"], .tag-bg-pattern-1 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--surface-border) 80%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 80%, transparent) 1px, transparent 1px); --pattern-bg-size: 42px 42px; --pattern-opacity: 0.5; --pattern-mask: radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 85%); } /* 2. Dot grid — evenly spaced dots. */ [data-bg-pattern="2"], .tag-bg-pattern-2 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-muted) 70%, transparent) 1.4px, transparent 1.4px); --pattern-bg-size: 26px 26px; --pattern-opacity: 0.4; } /* 3. Diagonal lines — thin 45deg hazard-stripe rhythm. */ [data-bg-pattern="3"], .tag-bg-pattern-3 { --pattern-bg-image: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--surface-border) 90%, transparent) 0px, color-mix(in srgb, var(--surface-border) 90%, transparent) 1px, transparent 1px, transparent 18px ); --pattern-opacity: 0.4; } /* 4. Circuit — grid lines plus small "via" dots at every intersection. */ [data-bg-pattern="4"], .tag-bg-pattern-4 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 1.6px, transparent 1.6px), linear-gradient(color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px); --pattern-bg-size: 56px 56px, 56px 56px, 56px 56px; --pattern-opacity: 0.35; } /* 5. Triangular mesh — three 60deg line sets crossing into a hex/triangle grid. */ [data-bg-pattern="5"], .tag-bg-pattern-5 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px, transparent 46px), repeating-linear-gradient(60deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px, transparent 46px), repeating-linear-gradient(-60deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px, transparent 46px); --pattern-opacity: 0.3; } /* 6. Waves — concentric horizontal-ish bands, like a topographic contour. */ [data-bg-pattern="6"], .tag-bg-pattern-6 { --pattern-bg-image: repeating-radial-gradient( ellipse at 50% -20%, transparent 0px, transparent 38px, color-mix(in srgb, var(--surface-border) 80%, transparent) 39px, color-mix(in srgb, var(--surface-border) 80%, transparent) 40px ); --pattern-opacity: 0.5; } /* 7. Blueprint crosses — a plus-mark at every grid intersection, drafting-paper style. */ [data-bg-pattern="7"], .tag-bg-pattern-7 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--surface-border) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 55%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent-color) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 60%, transparent) 1px, transparent 1px); --pattern-bg-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; --pattern-opacity: 0.35; } /* 8. Data streaks — faint vertical rain-like lines, uneven widths. */ [data-bg-pattern="8"], .tag-bg-pattern-8 { --pattern-bg-image: repeating-linear-gradient( 90deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 1px, transparent 1px, transparent 34px, color-mix(in srgb, var(--text-muted) 40%, transparent) 34px, color-mix(in srgb, var(--text-muted) 40%, transparent) 35px, transparent 35px, transparent 68px ); --pattern-opacity: 0.35; } /* 9. Topographic rings — off-center concentric circles. */ [data-bg-pattern="9"], .tag-bg-pattern-9 { --pattern-bg-image: repeating-radial-gradient( circle at 85% 8%, transparent 0px, transparent 32px, color-mix(in srgb, var(--surface-border) 85%, transparent) 33px, color-mix(in srgb, var(--surface-border) 85%, transparent) 34px ); --pattern-opacity: 0.45; } /* 10. Dither noise — two offset dot layers at different scales for a soft static texture. */ [data-bg-pattern="10"], .tag-bg-pattern-10 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-muted) 60%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--text-muted) 40%, transparent) 1px, transparent 1px); --pattern-bg-size: 14px 14px, 22px 22px; --pattern-bg-position: 0 0, 7px 11px; --pattern-opacity: 0.3; } /* ========================================================================== 11-30. Tech-themed patterns. Same --pattern-* architecture, same theme tokens (only --accent-color/--surface-border/--text-muted/--text-secondary exist, so these vary by geometry/spacing/angle rather than color — keeps every pattern consistent with Human/Cyber mode automatically). */ /* 11. Circle glow — soft blob + two halo rings, bottom-right. Verified against portfolio.ty1er.com's own "Always building." section via its computed ::before styles (radial blob + border + concentric box-shadow rings), reproduced here as a single gradient recipe. */ [data-bg-pattern="11"], .tag-bg-pattern-11 { --pattern-bg-image: radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--accent-color) 28%, transparent), transparent 26%), repeating-radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--accent-color) 14%, transparent) 0px, color-mix(in srgb, var(--accent-color) 14%, transparent) 1px, transparent 1px, transparent 64px); --pattern-opacity: 0.55; } /* 12. Hex grid — wide three-direction line set, larger cells than Triangular Mesh (#5). */ [data-bg-pattern="12"], .tag-bg-pattern-12 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 70px), repeating-linear-gradient(60deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 70px), repeating-linear-gradient(120deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 70px); --pattern-opacity: 0.3; } /* 13. Terminal scanlines — tight horizontal CRT-style rhythm. */ [data-bg-pattern="13"], .tag-bg-pattern-13 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-muted) 50%, transparent) 0px, color-mix(in srgb, var(--text-muted) 50%, transparent) 1px, transparent 1px, transparent 4px); --pattern-opacity: 0.18; } /* 14. Matrix rain streaks — thin vertical accent columns. */ [data-bg-pattern="14"], .tag-bg-pattern-14 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 50%, transparent) 0px, color-mix(in srgb, var(--accent-color) 50%, transparent) 2px, transparent 2px, transparent 30px); --pattern-opacity: 0.28; } /* 15. Binary dot columns — two offset dot layers, accent + muted. */ [data-bg-pattern="15"], .tag-bg-pattern-15 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 1.2px, transparent 1.2px), radial-gradient(color-mix(in srgb, var(--text-muted) 45%, transparent) 1.2px, transparent 1.2px); --pattern-bg-size: 18px 30px, 18px 30px; --pattern-bg-position: 0 0, 9px 15px; --pattern-opacity: 0.3; } /* 16. Motherboard traces — fine grid plus larger accent "via" dots. */ [data-bg-pattern="16"], .tag-bg-pattern-16 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--accent-color) 50%, transparent) 1.8px, transparent 1.8px); --pattern-bg-size: 34px 34px, 34px 34px, 102px 102px; --pattern-opacity: 0.3; } /* 17. Server rack lines — horizontal unit bands with accent "LED" dots. */ [data-bg-pattern="17"], .tag-bg-pattern-17 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 2px, transparent 2px, transparent 28px), radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 1.5px, transparent 1.5px); --pattern-bg-size: 100% 28px, 140px 28px; --pattern-opacity: 0.32; } /* 18. Radar sweep — conic wedge fading from a corner, plus two thin rings. */ [data-bg-pattern="18"], .tag-bg-pattern-18 { --pattern-bg-image: conic-gradient(from 200deg at 85% 15%, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 30%), repeating-radial-gradient(circle at 85% 15%, transparent 0px, transparent 40px, color-mix(in srgb, var(--surface-border) 70%, transparent) 41px, color-mix(in srgb, var(--surface-border) 70%, transparent) 42px); --pattern-opacity: 0.4; } /* 19. Fiber optic glow — widely spaced diagonal accent lines. */ [data-bg-pattern="19"], .tag-bg-pattern-19 { --pattern-bg-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--accent-color) 35%, transparent) 0px, color-mix(in srgb, var(--accent-color) 35%, transparent) 1.5px, transparent 1.5px, transparent 90px); --pattern-opacity: 0.35; } /* 20. Cloud nodes — sparse scattered dot cluster at two scales. */ [data-bg-pattern="20"], .tag-bg-pattern-20 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 40%, transparent) 3px, transparent 3px), radial-gradient(color-mix(in srgb, var(--text-muted) 30%, transparent) 2px, transparent 2px); --pattern-bg-size: 120px 120px, 80px 80px; --pattern-bg-position: 0 0, 40px 60px; --pattern-opacity: 0.3; } /* 21. Chip pins — crossed dashed rhythm evoking IC leg pins. */ [data-bg-pattern="21"], .tag-bg-pattern-21 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 75%, transparent) 0px, color-mix(in srgb, var(--surface-border) 75%, transparent) 5px, transparent 5px, transparent 24px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--surface-border) 75%, transparent) 0px, color-mix(in srgb, var(--surface-border) 75%, transparent) 5px, transparent 5px, transparent 24px); --pattern-opacity: 0.28; } /* 22. Signal bars — thick vertical bar rhythm with a top-to-bottom fade. */ [data-bg-pattern="22"], .tag-bg-pattern-22 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 45%, transparent) 0px, color-mix(in srgb, var(--accent-color) 45%, transparent) 4px, transparent 4px, transparent 22px); --pattern-opacity: 0.3; } /* 23. Pixel grid — small checkerboard mosaic. */ [data-bg-pattern="23"], .tag-bg-pattern-23 { --pattern-bg-image: linear-gradient(45deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--surface-border) 60%, transparent) 75%), linear-gradient(45deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--surface-border) 60%, transparent) 75%); --pattern-bg-size: 16px 16px; --pattern-bg-position: 0 0, 8px 8px; --pattern-opacity: 0.22; } /* 24. Data grid blueprint — fine single-color drafting grid, smaller cells than #7. */ [data-bg-pattern="24"], .tag-bg-pattern-24 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px); --pattern-bg-size: 12px 12px; --pattern-opacity: 0.2; } /* 25. Halftone dots — two dot sizes offset diagonally. */ [data-bg-pattern="25"], .tag-bg-pattern-25 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-secondary) 55%, transparent) 2.2px, transparent 2.2px), radial-gradient(color-mix(in srgb, var(--text-secondary) 30%, transparent) 1px, transparent 1px); --pattern-bg-size: 20px 20px, 20px 20px; --pattern-bg-position: 0 0, 10px 10px; --pattern-opacity: 0.25; } /* 26. Wireframe sphere — centered concentric rings plus one great-circle line. */ [data-bg-pattern="26"], .tag-bg-pattern-26 { --pattern-bg-image: repeating-radial-gradient(circle at 50% 45%, transparent 0px, transparent 36px, color-mix(in srgb, var(--surface-border) 75%, transparent) 37px, color-mix(in srgb, var(--surface-border) 75%, transparent) 38px), linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--surface-border) 60%, transparent) calc(50% - 1px), color-mix(in srgb, var(--surface-border) 60%, transparent) calc(50% + 1px), transparent calc(50% + 1px)); --pattern-opacity: 0.28; } /* 27. Neural mesh — sparse wide criss-cross with accent node dots. */ [data-bg-pattern="27"], .tag-bg-pattern-27 { --pattern-bg-image: repeating-linear-gradient(35deg, color-mix(in srgb, var(--surface-border) 55%, transparent) 0px, color-mix(in srgb, var(--surface-border) 55%, transparent) 1px, transparent 1px, transparent 80px), repeating-linear-gradient(-35deg, color-mix(in srgb, var(--surface-border) 55%, transparent) 0px, color-mix(in srgb, var(--surface-border) 55%, transparent) 1px, transparent 1px, transparent 80px), radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 2px, transparent 2px); --pattern-bg-size: 80px 80px, 80px 80px, 80px 80px; --pattern-opacity: 0.3; } /* 28. Voltage waves — crossed diagonal zigzag rhythm, sharper than Waves (#6). */ [data-bg-pattern="28"], .tag-bg-pattern-28 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 1.5px, transparent 1.5px, transparent 24px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 1.5px, transparent 1.5px, transparent 24px); --pattern-bg-size: 24px 24px; --pattern-opacity: 0.22; } /* 29. QR fragments — dense blocky checker noise, low opacity. */ [data-bg-pattern="29"], .tag-bg-pattern-29 { --pattern-bg-image: linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 70%, transparent) 50%, transparent 50%), linear-gradient(0deg, color-mix(in srgb, var(--text-primary) 70%, transparent) 50%, transparent 50%); --pattern-bg-size: 10px 10px, 10px 30px; --pattern-opacity: 0.12; } /* 30. Aurora glow — two large soft accent blobs at opposite corners. */ [data-bg-pattern="30"], .tag-bg-pattern-30 { --pattern-bg-image: radial-gradient(ellipse 60% 40% at 15% 0%, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 60%), radial-gradient(ellipse 50% 35% at 100% 100%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%); --pattern-opacity: 0.5; } /* ========================================================================== 31-50. "Fun business" patterns — playful in shape (bubbles, confetti, bunting, target rings, quilting) while staying in the same tonal, theme-token palette as everything else, so the whole system reads as one coherent design language rather than a jarring rainbow of extras. */ /* 31. Confetti scatter — three dot scales at offset positions. */ [data-bg-pattern="31"], .tag-bg-pattern-31 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 2px, transparent 2px), radial-gradient(color-mix(in srgb, var(--text-muted) 55%, transparent) 1.5px, transparent 1.5px), radial-gradient(color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px); --pattern-bg-size: 60px 60px, 44px 44px, 28px 28px; --pattern-bg-position: 0 0, 20px 15px, 8px 30px; --pattern-opacity: 0.32; } /* 32. Bubbles — two large soft overlapping circle scales. */ [data-bg-pattern="32"], .tag-bg-pattern-32 { --pattern-bg-image: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 18%, transparent) 40%, transparent 42%), radial-gradient(circle, color-mix(in srgb, var(--accent-color) 14%, transparent) 35%, transparent 37%); --pattern-bg-size: 140px 140px, 90px 90px; --pattern-bg-position: 0 0, 60px 70px; --pattern-opacity: 0.35; } /* 33. Polka dot classic — bold, widely spaced dots. */ [data-bg-pattern="33"], .tag-bg-pattern-33 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-secondary) 60%, transparent) 3px, transparent 3px); --pattern-bg-size: 40px 40px; --pattern-opacity: 0.28; } /* 34. Bunting triangles — repeating pennant-flag rhythm via a tiled conic wedge. */ [data-bg-pattern="34"], .tag-bg-pattern-34 { --pattern-bg-image: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent-color) 45%, transparent) 0deg 15deg, transparent 15deg 30deg); --pattern-bg-size: 24px 24px; --pattern-opacity: 0.18; } /* 35. Coffee ring stains — two soft outlined rings at irregular positions. */ [data-bg-pattern="35"], .tag-bg-pattern-35 { --pattern-bg-image: radial-gradient(circle at 20% 30%, transparent 30px, color-mix(in srgb, var(--text-muted) 35%, transparent) 31px, color-mix(in srgb, var(--text-muted) 35%, transparent) 33px, transparent 34px), radial-gradient(circle at 75% 65%, transparent 22px, color-mix(in srgb, var(--text-muted) 30%, transparent) 23px, color-mix(in srgb, var(--text-muted) 30%, transparent) 25px, transparent 26px); --pattern-bg-size: 260px 260px, 200px 200px; --pattern-opacity: 0.4; } /* 36. Growth chart — repeating ascending diagonal trend line. */ [data-bg-pattern="36"], .tag-bg-pattern-36 { --pattern-bg-image: linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--accent-color) 40%, transparent) 49%, color-mix(in srgb, var(--accent-color) 40%, transparent) 51%, transparent 52%); --pattern-bg-size: 64px 64px; --pattern-opacity: 0.3; } /* 37. Handshake weave — crossing diagonal basket-weave bands. */ [data-bg-pattern="37"], .tag-bg-pattern-37 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 8px, transparent 8px, transparent 32px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 8px, transparent 8px, transparent 32px); --pattern-opacity: 0.16; } /* 38. Calendar grid — larger planner-style grid with an accent "today" dot. */ [data-bg-pattern="38"], .tag-bg-pattern-38 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 3px, transparent 3px); --pattern-bg-size: 72px 72px, 72px 72px, 216px 216px; --pattern-opacity: 0.28; } /* 39. Sticky note scatter — offset light grid evoking notes on a board. */ [data-bg-pattern="39"], .tag-bg-pattern-39 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--text-muted) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 45%, transparent) 1px, transparent 1px); --pattern-bg-size: 46px 46px, 46px 46px; --pattern-bg-position: 4px 6px, 4px 6px; --pattern-opacity: 0.2; } /* 40. Linked rings — small circle-outline chain rhythm (paperclip chain). */ [data-bg-pattern="40"], .tag-bg-pattern-40 { --pattern-bg-image: repeating-radial-gradient(circle at 0 50%, transparent 0px, transparent 8px, color-mix(in srgb, var(--text-muted) 55%, transparent) 9px, color-mix(in srgb, var(--text-muted) 55%, transparent) 10px, transparent 11px); --pattern-bg-size: 22px 100%; --pattern-opacity: 0.22; } /* 41. Target rings — centered tight bullseye rings, business "goal" theme. */ [data-bg-pattern="41"], .tag-bg-pattern-41 { --pattern-bg-image: repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 24px, color-mix(in srgb, var(--accent-color) 30%, transparent) 25px, color-mix(in srgb, var(--accent-color) 30%, transparent) 26px); --pattern-opacity: 0.3; } /* 42. Stock ticker lines — thin horizontal dash rows. */ [data-bg-pattern="42"], .tag-bg-pattern-42 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 45%, transparent) 0px, color-mix(in srgb, var(--accent-color) 45%, transparent) 14px, transparent 14px, transparent 22px); --pattern-bg-size: 100% 3px; --pattern-opacity: 0.22; } /* 43. Envelope flap chevrons — crossed diagonal chevron rhythm. */ [data-bg-pattern="43"], .tag-bg-pattern-43 { --pattern-bg-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1.5px, transparent 1.5px, transparent 20px), repeating-linear-gradient(45deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1.5px, transparent 1.5px, transparent 20px); --pattern-bg-size: 40px 40px; --pattern-opacity: 0.2; } /* 44. ID badge stripe — a single wide diagonal accent band, lanyard-style. */ [data-bg-pattern="44"], .tag-bg-pattern-44 { --pattern-bg-image: repeating-linear-gradient(60deg, transparent 0px, transparent 120px, color-mix(in srgb, var(--accent-color) 30%, transparent) 120px, color-mix(in srgb, var(--accent-color) 30%, transparent) 136px, transparent 136px, transparent 256px); --pattern-opacity: 0.3; } /* 45. Quilted diamond — wide diagonal cross grid forming diamond cells. */ [data-bg-pattern="45"], .tag-bg-pattern-45 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--surface-border) 65%, transparent) 0px, color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px, transparent 36px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--surface-border) 65%, transparent) 0px, color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px, transparent 36px); --pattern-opacity: 0.26; } /* 46. Checklist dashes — short horizontal tick-mark rows. */ [data-bg-pattern="46"], .tag-bg-pattern-46 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 50%, transparent) 10px, transparent 10px, transparent 26px); --pattern-bg-size: 100% 30px; --pattern-opacity: 0.2; } /* 47. Sparkle scatter — three small dot scales at offset positions. */ [data-bg-pattern="47"], .tag-bg-pattern-47 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 60%, transparent) 1.6px, transparent 1.6px), radial-gradient(color-mix(in srgb, var(--accent-color) 40%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--text-muted) 40%, transparent) 1px, transparent 1px); --pattern-bg-size: 90px 90px, 54px 54px, 66px 66px; --pattern-bg-position: 10px 20px, 40px 5px, 5px 45px; --pattern-opacity: 0.32; } /* 48. World dots — sparse node dots with faint connecting diagonal lines. */ [data-bg-pattern="48"], .tag-bg-pattern-48 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 2px, transparent 2px), repeating-linear-gradient(20deg, transparent 0px, transparent 98px, color-mix(in srgb, var(--surface-border) 40%, transparent) 99px, transparent 100px); --pattern-bg-size: 100px 100px, 100px 100px; --pattern-opacity: 0.28; } /* 49. Confetti streamers — two crossed diagonal streak angles. */ [data-bg-pattern="49"], .tag-bg-pattern-49 { --pattern-bg-image: repeating-linear-gradient(20deg, color-mix(in srgb, var(--accent-color) 35%, transparent) 0px, color-mix(in srgb, var(--accent-color) 35%, transparent) 3px, transparent 3px, transparent 70px), repeating-linear-gradient(-25deg, color-mix(in srgb, var(--text-muted) 35%, transparent) 0px, color-mix(in srgb, var(--text-muted) 35%, transparent) 2px, transparent 2px, transparent 90px); --pattern-opacity: 0.24; } /* 50. Champagne bubbles — three rising dot scales, celebratory but tonal. */ [data-bg-pattern="50"], .tag-bg-pattern-50 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 35%, transparent) 2.4px, transparent 2.4px), radial-gradient(color-mix(in srgb, var(--accent-color) 25%, transparent) 1.6px, transparent 1.6px), radial-gradient(color-mix(in srgb, var(--text-muted) 30%, transparent) 1px, transparent 1px); --pattern-bg-size: 46px 46px, 30px 30px, 20px 20px; --pattern-bg-position: 0 0, 15px 20px, 8px 8px; --pattern-opacity: 0.3; } /* ========================================================================== 51-75. Nature & Organic patterns. */ /* 51. Falling leaves — scattered varied-size soft ellipses. */ [data-bg-pattern="51"], .tag-bg-pattern-51 { --pattern-bg-image: radial-gradient(ellipse 5px 8px, color-mix(in srgb, var(--accent-color) 45%, transparent) 60%, transparent 62%), radial-gradient(ellipse 4px 6px, color-mix(in srgb, var(--text-muted) 40%, transparent) 60%, transparent 62%); --pattern-bg-size: 70px 70px, 46px 46px; --pattern-bg-position: 0 0, 30px 20px; --pattern-opacity: 0.32; } /* 52. Grass blades — thin vertical tapered column rhythm. */ [data-bg-pattern="52"], .tag-bg-pattern-52 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 40%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 40%, transparent) 1px, transparent 1px, transparent 10px); --pattern-bg-size: 100% 60%; --pattern-bg-position: 0 100%; --pattern-opacity: 0.24; } /* 53. Mountain ridges — stacked zigzag horizon lines. */ [data-bg-pattern="53"], .tag-bg-pattern-53 { --pattern-bg-image: linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--surface-border) 70%, transparent) 49%, transparent 50%), linear-gradient(45deg, transparent 48%, color-mix(in srgb, var(--surface-border) 70%, transparent) 49%, transparent 50%); --pattern-bg-size: 80px 40px, 80px 40px; --pattern-opacity: 0.3; } /* 54. Star field — sparse fine dot scatter, night-sky spacing. */ [data-bg-pattern="54"], .tag-bg-pattern-54 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-primary) 65%, transparent) 1px, transparent 1px), radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 1.2px, transparent 1.2px); --pattern-bg-size: 130px 130px, 90px 90px; --pattern-bg-position: 20px 10px, 60px 80px; --pattern-opacity: 0.3; } /* 55. Rain streaks — steep diagonal fine lines. */ [data-bg-pattern="55"], .tag-bg-pattern-55 { --pattern-bg-image: repeating-linear-gradient(75deg, color-mix(in srgb, var(--text-muted) 40%, transparent) 0px, color-mix(in srgb, var(--text-muted) 40%, transparent) 1px, transparent 1px, transparent 16px); --pattern-opacity: 0.26; } /* 56. Sand dunes — soft wide wavy horizontal bands. */ [data-bg-pattern="56"], .tag-bg-pattern-56 { --pattern-bg-image: repeating-radial-gradient(ellipse at 50% -40%, transparent 0px, transparent 70px, color-mix(in srgb, var(--surface-border) 65%, transparent) 71px, color-mix(in srgb, var(--surface-border) 65%, transparent) 72px); --pattern-opacity: 0.35; } /* 57. Honeycomb — proper hex-cell three-direction line tiling. */ [data-bg-pattern="57"], .tag-bg-pattern-57 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(60deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(-60deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 1px, transparent 1px, transparent 30px); --pattern-opacity: 0.22; } /* 58. Wood grain — wavy horizontal streak layers. */ [data-bg-pattern="58"], .tag-bg-pattern-58 { --pattern-bg-image: repeating-radial-gradient(ellipse 400% 8px at 50% 50%, transparent 0px, transparent 10px, color-mix(in srgb, var(--text-muted) 45%, transparent) 11px, color-mix(in srgb, var(--text-muted) 45%, transparent) 12px); --pattern-opacity: 0.24; } /* 59. Marble veins — sparse crossed odd-angle thin lines. */ [data-bg-pattern="59"], .tag-bg-pattern-59 { --pattern-bg-image: repeating-linear-gradient(18deg, transparent 0px, transparent 140px, color-mix(in srgb, var(--text-secondary) 45%, transparent) 141px, transparent 143px), repeating-linear-gradient(-62deg, transparent 0px, transparent 170px, color-mix(in srgb, var(--text-secondary) 40%, transparent) 171px, transparent 173px); --pattern-opacity: 0.28; } /* 60. Ripples — offset concentric-circle water-drop rings. */ [data-bg-pattern="60"], .tag-bg-pattern-60 { --pattern-bg-image: repeating-radial-gradient(circle at 25% 30%, transparent 0px, transparent 20px, color-mix(in srgb, var(--accent-color) 30%, transparent) 21px, transparent 22px), repeating-radial-gradient(circle at 75% 70%, transparent 0px, transparent 26px, color-mix(in srgb, var(--surface-border) 60%, transparent) 27px, transparent 28px); --pattern-opacity: 0.32; } /* 61. Feather texture — angled short dash rhythm. */ [data-bg-pattern="61"], .tag-bg-pattern-61 { --pattern-bg-image: repeating-linear-gradient(70deg, color-mix(in srgb, var(--text-muted) 45%, transparent) 0px, color-mix(in srgb, var(--text-muted) 45%, transparent) 8px, transparent 8px, transparent 20px); --pattern-bg-size: 26px 100%; --pattern-opacity: 0.2; } /* 62. Floral silhouette — small rosette dot clusters. */ [data-bg-pattern="62"], .tag-bg-pattern-62 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 2px, transparent 2px), radial-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 2px, transparent 2px), radial-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 2px, transparent 2px), radial-gradient(color-mix(in srgb, var(--text-muted) 40%, transparent) 1.5px, transparent 1.5px); --pattern-bg-size: 90px 90px, 90px 90px, 90px 90px, 90px 90px; --pattern-bg-position: 0 0, 8px 4px, -8px 4px, 0 8px; --pattern-opacity: 0.3; } /* 63. Forest tree-line — repeating triangular pine silhouettes. */ [data-bg-pattern="63"], .tag-bg-pattern-63 { --pattern-bg-image: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--text-secondary) 35%, transparent) 0deg 8deg, transparent 8deg 40deg); --pattern-bg-size: 36px 36px; --pattern-bg-position: 0 100%; --pattern-opacity: 0.18; } /* 64. Ocean current lines — flowing wide wave bands. */ [data-bg-pattern="64"], .tag-bg-pattern-64 { --pattern-bg-image: repeating-radial-gradient(ellipse at 30% 120%, transparent 0px, transparent 50px, color-mix(in srgb, var(--accent-color) 30%, transparent) 51px, color-mix(in srgb, var(--accent-color) 30%, transparent) 52px); --pattern-opacity: 0.3; } /* 65. Cloud wisps — soft stretched horizontal blob scatter. */ [data-bg-pattern="65"], .tag-bg-pattern-65 { --pattern-bg-image: radial-gradient(ellipse 60px 14px, color-mix(in srgb, var(--text-muted) 30%, transparent) 55%, transparent 60%), radial-gradient(ellipse 40px 10px, color-mix(in srgb, var(--text-muted) 25%, transparent) 55%, transparent 60%); --pattern-bg-size: 220px 160px, 160px 120px; --pattern-bg-position: 0 0, 90px 70px; --pattern-opacity: 0.3; } /* 66. Root/branch fractal — sparse organic-angle branching lines. */ [data-bg-pattern="66"], .tag-bg-pattern-66 { --pattern-bg-image: repeating-linear-gradient(12deg, color-mix(in srgb, var(--surface-border) 55%, transparent) 0px, color-mix(in srgb, var(--surface-border) 55%, transparent) 1px, transparent 1px, transparent 64px), repeating-linear-gradient(-48deg, color-mix(in srgb, var(--surface-border) 55%, transparent) 0px, color-mix(in srgb, var(--surface-border) 55%, transparent) 1px, transparent 1px, transparent 96px); --pattern-opacity: 0.24; } /* 67. Pebbles — three-scale rounded dot scatter. */ [data-bg-pattern="67"], .tag-bg-pattern-67 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-secondary) 45%, transparent) 4px, transparent 4px), radial-gradient(color-mix(in srgb, var(--text-muted) 40%, transparent) 3px, transparent 3px), radial-gradient(color-mix(in srgb, var(--text-secondary) 35%, transparent) 2px, transparent 2px); --pattern-bg-size: 100px 100px, 70px 70px, 50px 50px; --pattern-bg-position: 0 0, 40px 30px, 20px 60px; --pattern-opacity: 0.28; } /* 68. Snowflake lattice — six-direction crossing diamond/star grid. */ [data-bg-pattern="68"], .tag-bg-pattern-68 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent-color) 35%, transparent) 0px, color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px, transparent 54px), repeating-linear-gradient(60deg, color-mix(in srgb, var(--accent-color) 35%, transparent) 0px, color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px, transparent 54px), repeating-linear-gradient(120deg, color-mix(in srgb, var(--accent-color) 35%, transparent) 0px, color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px, transparent 54px); --pattern-opacity: 0.2; } /* 69. Coral — radial dot-and-branch hybrid texture. */ [data-bg-pattern="69"], .tag-bg-pattern-69 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 2.5px, transparent 2.5px), repeating-linear-gradient(30deg, transparent 0px, transparent 30px, color-mix(in srgb, var(--accent-color) 25%, transparent) 31px, transparent 32px); --pattern-bg-size: 60px 60px, 60px 60px; --pattern-opacity: 0.26; } /* 70. Moss texture — dense fine dot cluster, tight spacing. */ [data-bg-pattern="70"], .tag-bg-pattern-70 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--text-secondary) 55%, transparent) 0.8px, transparent 0.8px); --pattern-bg-size: 8px 8px; --pattern-opacity: 0.28; } /* 71. Canyon layers — uneven-thickness stacked horizontal bands. */ [data-bg-pattern="71"], .tag-bg-pattern-71 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--surface-border) 70%, transparent) 0px, color-mix(in srgb, var(--surface-border) 70%, transparent) 2px, transparent 2px, transparent 26px, color-mix(in srgb, var(--text-muted) 50%, transparent) 26px, color-mix(in srgb, var(--text-muted) 50%, transparent) 27px, transparent 27px, transparent 46px); --pattern-opacity: 0.3; } /* 72. Ice crack — sparse jagged crystalline angles. */ [data-bg-pattern="72"], .tag-bg-pattern-72 { --pattern-bg-image: repeating-linear-gradient(22deg, transparent 0px, transparent 110px, color-mix(in srgb, var(--accent-color) 35%, transparent) 111px, transparent 112px), repeating-linear-gradient(-38deg, transparent 0px, transparent 130px, color-mix(in srgb, var(--accent-color) 30%, transparent) 131px, transparent 132px), repeating-linear-gradient(85deg, transparent 0px, transparent 150px, color-mix(in srgb, var(--surface-border) 55%, transparent) 151px, transparent 152px); --pattern-opacity: 0.28; } /* 73. Sun rays — repeating thin rays from a corner. */ [data-bg-pattern="73"], .tag-bg-pattern-73 { --pattern-bg-image: repeating-conic-gradient(from 200deg at 100% 0%, color-mix(in srgb, var(--accent-color) 20%, transparent) 0deg 2deg, transparent 2deg 14deg); --pattern-opacity: 0.3; } /* 74. Moon phases — repeating crescent-cutout circle rhythm. */ [data-bg-pattern="74"], .tag-bg-pattern-74 { --pattern-bg-image: radial-gradient(circle at 40% 50%, color-mix(in srgb, var(--text-secondary) 40%, transparent) 10px, transparent 11px), radial-gradient(circle at 46% 50%, var(--bg-primary) 9px, transparent 10px); --pattern-bg-size: 80px 80px, 80px 80px; --pattern-opacity: 0.35; } /* 75. Topographic ecology — fine centered repeating contour cells. */ [data-bg-pattern="75"], .tag-bg-pattern-75 { --pattern-bg-image: repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 18px, color-mix(in srgb, var(--surface-border) 70%, transparent) 19px, color-mix(in srgb, var(--surface-border) 70%, transparent) 20px); --pattern-bg-size: 90px 90px; --pattern-opacity: 0.3; } /* ========================================================================== 76-100. Retro & Geometric patterns. */ /* 76. Memphis dots — bold retro-spaced dot scatter. */ [data-bg-pattern="76"], .tag-bg-pattern-76 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 55%, transparent) 3px, transparent 3px), radial-gradient(color-mix(in srgb, var(--text-secondary) 45%, transparent) 2px, transparent 2px); --pattern-bg-size: 80px 80px, 50px 50px; --pattern-bg-position: 0 0, 25px 35px; --pattern-opacity: 0.3; } /* 77. 80s grid — bold synthwave-style regular grid. */ [data-bg-pattern="77"], .tag-bg-pattern-77 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--accent-color) 45%, transparent) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 45%, transparent) 1.5px, transparent 1.5px); --pattern-bg-size: 48px 48px; --pattern-mask: linear-gradient(to top, black 0%, transparent 75%); --pattern-opacity: 0.4; } /* 78. Art deco fan — repeating wide wedge fan. */ [data-bg-pattern="78"], .tag-bg-pattern-78 { --pattern-bg-image: repeating-conic-gradient(from 0deg at 50% 100%, color-mix(in srgb, var(--accent-color) 30%, transparent) 0deg 10deg, transparent 10deg 20deg); --pattern-bg-size: 240px 120px; --pattern-opacity: 0.2; } /* 79. Op-art stripes — bold high-contrast straight rhythm. */ [data-bg-pattern="79"], .tag-bg-pattern-79 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 55%, transparent) 0px, color-mix(in srgb, var(--text-primary) 55%, transparent) 6px, transparent 6px, transparent 18px); --pattern-opacity: 0.16; } /* 80. Geometric triangle gradient — crossed diagonals forming triangle cells. */ [data-bg-pattern="80"], .tag-bg-pattern-80 { --pattern-bg-image: repeating-linear-gradient(30deg, color-mix(in srgb, var(--surface-border) 65%, transparent) 0px, color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px, transparent 44px), repeating-linear-gradient(-30deg, color-mix(in srgb, var(--surface-border) 65%, transparent) 0px, color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px, transparent 44px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 65%, transparent) 0px, color-mix(in srgb, var(--surface-border) 65%, transparent) 1px, transparent 1px, transparent 44px); --pattern-opacity: 0.24; } /* 81. Retro sunburst — centered thick alternating rays. */ [data-bg-pattern="81"], .tag-bg-pattern-81 { --pattern-bg-image: repeating-conic-gradient(color-mix(in srgb, var(--accent-color) 22%, transparent) 0deg 6deg, transparent 6deg 24deg); --pattern-opacity: 0.28; } /* 82. Terrazzo speckle — dense multi-scale irregular chip scatter. */ [data-bg-pattern="82"], .tag-bg-pattern-82 { --pattern-bg-image: radial-gradient(color-mix(in srgb, var(--accent-color) 50%, transparent) 3px, transparent 3px), radial-gradient(color-mix(in srgb, var(--text-secondary) 45%, transparent) 2px, transparent 2px), radial-gradient(color-mix(in srgb, var(--text-muted) 40%, transparent) 1.5px, transparent 1.5px), radial-gradient(color-mix(in srgb, var(--accent-color) 35%, transparent) 1px, transparent 1px); --pattern-bg-size: 54px 54px, 38px 38px, 26px 26px, 18px 18px; --pattern-bg-position: 0 0, 18px 10px, 6px 24px, 30px 30px; --pattern-opacity: 0.3; } /* 83. Brutalist blocks — bold thick large-cell grid. */ [data-bg-pattern="83"], .tag-bg-pattern-83 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--text-primary) 60%, transparent) 3px, transparent 3px), linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 60%, transparent) 3px, transparent 3px); --pattern-bg-size: 96px 96px; --pattern-opacity: 0.14; } /* 84. Isometric cubes — tight three-direction lines forming cube facets. */ [data-bg-pattern="84"], .tag-bg-pattern-84 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 24px), repeating-linear-gradient(60deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 24px), repeating-linear-gradient(-60deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 24px); --pattern-opacity: 0.26; } /* 85. Chevron zigzag bold — thick large-scale chevron rhythm. */ [data-bg-pattern="85"], .tag-bg-pattern-85 { --pattern-bg-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 4px, transparent 4px, transparent 36px), repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-color) 40%, transparent) 0px, color-mix(in srgb, var(--accent-color) 40%, transparent) 4px, transparent 4px, transparent 36px); --pattern-bg-size: 72px 72px; --pattern-opacity: 0.22; } /* 86. Vaporwave grid — grid lines with a soft horizon glow. */ [data-bg-pattern="86"], .tag-bg-pattern-86 { --pattern-bg-image: radial-gradient(ellipse 70% 40% at 50% 100%, color-mix(in srgb, var(--accent-color) 25%, transparent), transparent 70%), linear-gradient(color-mix(in srgb, var(--accent-color) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 30%, transparent) 1px, transparent 1px); --pattern-bg-size: auto, 44px 44px, 44px 44px; --pattern-opacity: 0.4; } /* 87. Punch card holes — regular grid of small rectangular holes. */ [data-bg-pattern="87"], .tag-bg-pattern-87 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--text-secondary) 55%, transparent) 5px, transparent 5px), linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 55%, transparent) 3px, transparent 3px); --pattern-bg-size: 22px 22px, 22px 22px; --pattern-opacity: 0.14; } /* 88. Mid-century starburst — thin repeating corner rays, atomic-age feel. */ [data-bg-pattern="88"], .tag-bg-pattern-88 { --pattern-bg-image: repeating-conic-gradient(from 210deg at 0% 100%, color-mix(in srgb, var(--accent-color) 25%, transparent) 0deg 1.5deg, transparent 1.5deg 11deg); --pattern-opacity: 0.3; } /* 89. Houndstooth — offset broken-check via rotated dual checkerboard. */ [data-bg-pattern="89"], .tag-bg-pattern-89 { --pattern-bg-image: linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 55%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--text-primary) 55%, transparent) 75%), linear-gradient(-45deg, color-mix(in srgb, var(--text-primary) 55%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--text-primary) 55%, transparent) 75%); --pattern-bg-size: 20px 20px; --pattern-bg-position: 0 0, 10px 10px; --pattern-opacity: 0.12; } /* 90. Argyle diamond — diamond grid with thin diagonal accent overlay. */ [data-bg-pattern="90"], .tag-bg-pattern-90 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--surface-border) 60%, transparent) 0px, color-mix(in srgb, var(--surface-border) 60%, transparent) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-color) 30%, transparent) 0px, color-mix(in srgb, var(--accent-color) 30%, transparent) 1px, transparent 1px, transparent 20px); --pattern-opacity: 0.2; } /* 91. Tessellation hexagon — tight dense hex-cell tiling. */ [data-bg-pattern="91"], .tag-bg-pattern-91 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 50%, transparent) 1px, transparent 1px, transparent 18px), repeating-linear-gradient(60deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 50%, transparent) 1px, transparent 1px, transparent 18px), repeating-linear-gradient(-60deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 50%, transparent) 1px, transparent 1px, transparent 18px); --pattern-opacity: 0.16; } /* 92. Kaleidoscope wedge — tight alternating two-tone conic wedges. */ [data-bg-pattern="92"], .tag-bg-pattern-92 { --pattern-bg-image: repeating-conic-gradient(color-mix(in srgb, var(--accent-color) 25%, transparent) 0deg 4deg, color-mix(in srgb, var(--text-muted) 20%, transparent) 4deg 8deg); --pattern-bg-size: 140px 140px; --pattern-opacity: 0.3; } /* 93. Pinstripe suit — very thin closely spaced vertical lines. */ [data-bg-pattern="93"], .tag-bg-pattern-93 { --pattern-bg-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 45%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 45%, transparent) 1px, transparent 1px, transparent 9px); --pattern-opacity: 0.16; } /* 94. Windowpane check — large bold simple grid. */ [data-bg-pattern="94"], .tag-bg-pattern-94 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--surface-border) 75%, transparent) 2px, transparent 2px), linear-gradient(90deg, color-mix(in srgb, var(--surface-border) 75%, transparent) 2px, transparent 2px); --pattern-bg-size: 110px 110px; --pattern-opacity: 0.26; } /* 95. Basket weave bold — thick interlaced diagonal blocks. */ [data-bg-pattern="95"], .tag-bg-pattern-95 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-muted) 55%, transparent) 0px, color-mix(in srgb, var(--text-muted) 55%, transparent) 14px, transparent 14px, transparent 48px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-muted) 55%, transparent) 0px, color-mix(in srgb, var(--text-muted) 55%, transparent) 14px, transparent 14px, transparent 48px); --pattern-opacity: 0.14; } /* 96. Cross-hatch shading — dense fine crossed diagonal sketch lines. */ [data-bg-pattern="96"], .tag-bg-pattern-96 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-secondary) 45%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 45%, transparent) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-secondary) 45%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 45%, transparent) 1px, transparent 1px, transparent 12px); --pattern-opacity: 0.14; } /* 97. Plaid crossing — uneven-width crossing horizontal/vertical bands. */ [data-bg-pattern="97"], .tag-bg-pattern-97 { --pattern-bg-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent-color) 30%, transparent) 0px, color-mix(in srgb, var(--accent-color) 30%, transparent) 10px, transparent 10px, transparent 60px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 30%, transparent) 0px, color-mix(in srgb, var(--text-muted) 30%, transparent) 6px, transparent 6px, transparent 60px); --pattern-opacity: 0.2; } /* 98. Scallop wave — repeating half-circle scalloped edge rhythm. */ [data-bg-pattern="98"], .tag-bg-pattern-98 { --pattern-bg-image: repeating-radial-gradient(circle at 50% 0%, transparent 0px, transparent 14px, color-mix(in srgb, var(--surface-border) 70%, transparent) 15px, color-mix(in srgb, var(--surface-border) 70%, transparent) 16px); --pattern-bg-size: 32px 32px; --pattern-opacity: 0.28; } /* 99. Brick wall — classic offset-row brick grid. */ [data-bg-pattern="99"], .tag-bg-pattern-99 { --pattern-bg-image: linear-gradient(color-mix(in srgb, var(--text-secondary) 50%, transparent) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 1.5px, transparent 1.5px); --pattern-bg-size: 100% 24px, 60px 24px; --pattern-bg-position: 0 0, 30px 0; --pattern-opacity: 0.2; } /* 100. Herringbone — classic offset zigzag weave pattern. */ [data-bg-pattern="100"], .tag-bg-pattern-100 { --pattern-bg-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 50%, transparent) 6px, transparent 6px, transparent 20px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--text-secondary) 50%, transparent) 0px, color-mix(in srgb, var(--text-secondary) 50%, transparent) 6px, transparent 6px, transparent 20px); --pattern-bg-size: 40px 40px; --pattern-bg-position: 0 0, 20px 0; --pattern-opacity: 0.16; } /* Consumer 1: the sitewide fixed backdrop layer. */ body[data-bg-pattern]::before, body[class*="tag-bg-pattern-"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pattern-bg-image); background-size: var(--pattern-bg-size, auto); background-position: var(--pattern-bg-position, 0 0); -webkit-mask-image: var(--pattern-mask, none); mask-image: var(--pattern-mask, none); opacity: var(--pattern-opacity, 0.4); } :root[data-theme="cyber"] body[data-bg-pattern]::before, :root[data-theme="cyber"] body[class*="tag-bg-pattern-"]::before { opacity: calc(var(--pattern-opacity, 0.4) + 0.2); } /* Consumer 2: standalone preview swatches on custom-components.hbs — full opacity, no mask, since these are meant to be looked at directly rather than sit behind body text. */ .bg-swatch-preview { background-image: var(--pattern-bg-image); background-size: var(--pattern-bg-size, auto); background-position: var(--pattern-bg-position, 0 0); }