/* Biblion background: the layered-hills wallpaper, drawn rather than photographed. Seven ridge silhouettes over a graded sky, ~4 KB against the 442 KB of img/background.jpg. Four colorways of one geometry, following the hills through the day: Dawn — misty slate-blue ridges, a lilac sky warming to a gold horizon Day — teal, pale aqua sky, far hills all but dissolved into it Dusk — violet hills under a rose-amber haze Night — moonlit blue ridges under a deep navy sky Usage: day dawn dusk night A one-shot parallax entrance for the landing hero was built here and then removed whole on 2026-07-30 (user): it never read as intended against a loading page. A crest runner followed the same day — a small comet with a dissolving tail traveling ridge 4's silhouette — and was removed the same day: sized to be discovered it went unseen, sized to be seen it was too much. Do not rebuild either casually — the working mechanics live in this file's history and the memory notes; both were retired for UX reasons, not technical ones. The wallpaper's aliveness is structural instead: the colorways follow the reader's clock, and the navbar mark dresses to match. --brand-sheet / --brand-roller tint the navbar's scroll mark to the mood (includes/navbar.php reads them with the neutral gray-and-gold as fallback): paper-light sheet, warm-or-deep roller from the mood's own palette, except night's roller — see the generator's palette note. This file is GENERATED by css/background.gen.py (python3, WSL) — edit that and rerun it rather than editing a data URI by hand: the geometry appears four times over, and the generator's arrays (seven ridge paths, four palettes) are the only bytes here that are not mechanical. The --hills-* properties are not used by the images (they cannot be); they restate the two ends of each ramp so page chrome can tint itself to match. WHY A PSEUDO-ELEMENT AND NOT background-attachment: fixed. The obvious way to hold the hills still while the page scrolls is to paint them on the body with `fixed`. iOS Safari does not honor that keyword — it falls back to scrolling the image and sizes it against the whole scrollable area, so on a long chapter the hills slid away with the text and came out zoomed well past their framing. Every iPhone and iPad, current ones included. A fixed-position ::before pinned to the viewport gives the identical result on desktop, works on iOS, and is cheaper to composite on Android (where the keyword IS honored, by repainting the whole wallpaper on every scroll). z-index:-1 is what keeps it behind the page. Bootstrap gives body a white background-color, which propagates to the canvas and is painted before any negative-z-index layer — so the hills land on top of that white and under every static block in the document, which is exactly where they belong. The colorway classes stay on the body itself (page chrome reads --hills-* by inheritance); only the image moves to the pseudo-element. */ .bg-hills { --hills-sky: #d9ecee; --hills-far: #b3d4d7; --hills-near: #25707e; --brand-sheet: #d9ecee; --brand-roller: #85bac2; } .bg-hills::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1125' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9ecee'/%3E%3Cstop offset='.35' stop-color='%23c8e2e4'/%3E%3Cstop offset='.6' stop-color='%23bcdadd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='2000' height='1125' fill='url(%23s)'/%3E%3Cpath fill='%23b3d4d7' d='M0 332 C150 330 250 320 420 250 C600 175 850 98 950 92 C1050 98 1300 200 1500 275 C1650 322 1820 330 2000 328 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23a3cacf' d='M0 360 C200 375 420 400 620 418 C820 436 1020 444 1240 434 C1480 421 1700 398 2000 385 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%2385bac2' d='M0 487 C240 505 480 540 720 555 C900 562 1100 560 1300 548 C1500 520 1700 420 1860 350 C1930 322 1970 308 2000 300 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%235ea5af' d='M0 600 C180 590 320 570 480 530 C560 508 620 490 648 484 C654 481 660 480 664 480 C668 480 674 482 680 486 C760 522 900 600 1010 640 C1100 668 1200 660 1300 630 C1380 606 1450 592 1560 600 C1700 610 1860 630 2000 640 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%2347929e' d='M0 700 C200 718 400 748 600 740 C800 730 950 706 1150 712 C1350 720 1550 745 1750 742 C1850 740 1930 733 2000 730 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%2334818e' d='M0 810 C60 802 140 796 205 792 C225 790 240 788 254 784 L266 780 C280 788 310 806 380 828 C480 858 620 868 780 856 C920 844 1060 820 1200 818 C1400 815 1600 838 1800 830 C1900 826 1960 820 2000 815 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%2325707e' d='M0 905 C140 880 280 872 420 884 C560 897 680 912 820 908 C980 902 1120 872 1280 872 C1460 874 1620 895 1780 888 C1880 883 1950 872 2000 868 L2000 1125 L0 1125 Z'/%3E%3C/svg%3E") center center / cover no-repeat; } .bg-hills.dusk { --hills-sky: #b393a5; --hills-far: #c9a394; --hills-near: #3f3663; --brand-sheet: #b393a5; --brand-roller: #e0ac82; } .bg-hills.dusk::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1125' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b393a5'/%3E%3Cstop offset='.35' stop-color='%23cf9f8d'/%3E%3Cstop offset='.6' stop-color='%23e0ac82'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='2000' height='1125' fill='url(%23s)'/%3E%3Cpath fill='%23c9a394' d='M0 332 C150 330 250 320 420 250 C600 175 850 98 950 92 C1050 98 1300 200 1500 275 C1650 322 1820 330 2000 328 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23b59395' d='M0 360 C200 375 420 400 620 418 C820 436 1020 444 1240 434 C1480 421 1700 398 2000 385 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%239c7f97' d='M0 487 C240 505 480 540 720 555 C900 562 1100 560 1300 548 C1500 520 1700 420 1860 350 C1930 322 1970 308 2000 300 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23816b95' d='M0 600 C180 590 320 570 480 530 C560 508 620 490 648 484 C654 481 660 480 664 480 C668 480 674 482 680 486 C760 522 900 600 1010 640 C1100 668 1200 660 1300 630 C1380 606 1450 592 1560 600 C1700 610 1860 630 2000 640 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23695788' d='M0 700 C200 718 400 748 600 740 C800 730 950 706 1150 712 C1350 720 1550 745 1750 742 C1850 740 1930 733 2000 730 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23534677' d='M0 810 C60 802 140 796 205 792 C225 790 240 788 254 784 L266 780 C280 788 310 806 380 828 C480 858 620 868 780 856 C920 844 1060 820 1200 818 C1400 815 1600 838 1800 830 C1900 826 1960 820 2000 815 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%233f3663' d='M0 905 C140 880 280 872 420 884 C560 897 680 912 820 908 C980 902 1120 872 1280 872 C1460 874 1620 895 1780 888 C1880 883 1950 872 2000 868 L2000 1125 L0 1125 Z'/%3E%3C/svg%3E"); } .bg-hills.dawn { --hills-sky: #c9d2e6; --hills-far: #cebfc2; --hills-near: #3c4a6b; --brand-sheet: #c9d2e6; --brand-roller: #f2dcc0; } .bg-hills.dawn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1125' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c9d2e6'/%3E%3Cstop offset='.35' stop-color='%23dccdda'/%3E%3Cstop offset='.6' stop-color='%23f2dcc0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='2000' height='1125' fill='url(%23s)'/%3E%3Cpath fill='%23cebfc2' d='M0 332 C150 330 250 320 420 250 C600 175 850 98 950 92 C1050 98 1300 200 1500 275 C1650 322 1820 330 2000 328 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23b6adbd' d='M0 360 C200 375 420 400 620 418 C820 436 1020 444 1240 434 C1480 421 1700 398 2000 385 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%239a9ab5' d='M0 487 C240 505 480 540 720 555 C900 562 1100 560 1300 548 C1500 520 1700 420 1860 350 C1930 322 1970 308 2000 300 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%237c85a9' d='M0 600 C180 590 320 570 480 530 C560 508 620 490 648 484 C654 481 660 480 664 480 C668 480 674 482 680 486 C760 522 900 600 1010 640 C1100 668 1200 660 1300 630 C1380 606 1450 592 1560 600 C1700 610 1860 630 2000 640 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23646f98' d='M0 700 C200 718 400 748 600 740 C800 730 950 706 1150 712 C1350 720 1550 745 1750 742 C1850 740 1930 733 2000 730 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%234f5c80' d='M0 810 C60 802 140 796 205 792 C225 790 240 788 254 784 L266 780 C280 788 310 806 380 828 C480 858 620 868 780 856 C920 844 1060 820 1200 818 C1400 815 1600 838 1800 830 C1900 826 1960 820 2000 815 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%233c4a6b' d='M0 905 C140 880 280 872 420 884 C560 897 680 912 820 908 C980 902 1120 872 1280 872 C1460 874 1620 895 1780 888 C1880 883 1950 872 2000 868 L2000 1125 L0 1125 Z'/%3E%3C/svg%3E"); } .bg-hills.night { --hills-sky: #16223a; --hills-far: #40607a; /* Dark colorway: the welcome verse falls on a dark sky, so --hills-near — which tints that text — is a pale moonlit tone here rather than the darkest ridge, keeping the words legible. The near ridge itself is #0d1620. */ --hills-near: #cdd9e6; --brand-sheet: #cdd9e6; --brand-roller: #6395bd; } .bg-hills.night::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1125' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2316223a'/%3E%3Cstop offset='.35' stop-color='%231f3350'/%3E%3Cstop offset='.6' stop-color='%23315068'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='2000' height='1125' fill='url(%23s)'/%3E%3Cpath fill='%2340607a' d='M0 332 C150 330 250 320 420 250 C600 175 850 98 950 92 C1050 98 1300 200 1500 275 C1650 322 1820 330 2000 328 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23365468' d='M0 360 C200 375 420 400 620 418 C820 436 1020 444 1240 434 C1480 421 1700 398 2000 385 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%232c4657' d='M0 487 C240 505 480 540 720 555 C900 562 1100 560 1300 548 C1500 520 1700 420 1860 350 C1930 322 1970 308 2000 300 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%23233848' d='M0 600 C180 590 320 570 480 530 C560 508 620 490 648 484 C654 481 660 480 664 480 C668 480 674 482 680 486 C760 522 900 600 1010 640 C1100 668 1200 660 1300 630 C1380 606 1450 592 1560 600 C1700 610 1860 630 2000 640 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%231b2c39' d='M0 700 C200 718 400 748 600 740 C800 730 950 706 1150 712 C1350 720 1550 745 1750 742 C1850 740 1930 733 2000 730 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%2314212c' d='M0 810 C60 802 140 796 205 792 C225 790 240 788 254 784 L266 780 C280 788 310 806 380 828 C480 858 620 868 780 856 C920 844 1060 820 1200 818 C1400 815 1600 838 1800 830 C1900 826 1960 820 2000 815 L2000 1125 L0 1125 Z'/%3E%3Cpath fill='%230d1620' d='M0 905 C140 880 280 872 420 884 C560 897 680 912 820 908 C980 902 1120 872 1280 872 C1460 874 1620 895 1780 888 C1880 883 1950 872 2000 868 L2000 1125 L0 1125 Z'/%3E%3C/svg%3E"); }