/* Long horizontal borders made from the home illustration motifs (site v9 comparison, 2026-11-09). Loaded by layout.js only with ?border=1|2|3. The page is shown in the gilt-frame look (?look=frame) while a border is on, without remembering it. Default: no border. Art: img/border/ (imagegen, home crops as finish reference, chroma-keyed). Raw files + reference crops: _review/border-raw/. 1 Sky procession sleeping sun - clouds - crescent moon on the gold arc track (home section 2) bg #EFF2F3 2 Carousel parade bunting + lights on top, carousel horses on a harlequin line above the footer (section 3) bg #F3EFF5 3 Paper-theatre trim harlequin band + scalloped valance, pearls, tassels (section 1); thin band above the footer bg #F8EFDA */ :root[data-border="1"] { --paper: #EFF2F3; --cream: #E4EAEE; --bd-head: rgba(239, 242, 243, .94); --card: #FBFBF8; } :root[data-border="2"] { --paper: #F3EFF5; --cream: #EAE4F0; --bd-head: rgba(243, 239, 245, .94); --card: #FCF9FC; } :root[data-border="3"] { --paper: #F8EFDA; --cream: #F1E4C6; --bd-head: rgba(248, 239, 218, .94); --card: #FFF8E8; } :root[data-border] body { background: var(--paper); } :root[data-border] .site-header { background: var(--bd-head); } :root[data-border] .site-footer { background: var(--cream); } .bd { display: block; margin-inline: auto; background: center / contain no-repeat; pointer-events: none; } .bd-top { margin-top: clamp(14px, 2.4vw, 28px); margin-bottom: clamp(4px, 1vw, 10px); } .bd-foot { margin-top: clamp(40px, 6vw, 72px); margin-bottom: clamp(10px, 1.6vw, 18px); } /* 1: one strip, top and above the footer */ :root[data-border="1"] .bd { background-image: url("../img/border/border-1.webp"); width: min(900px, 92%); aspect-ratio: 2127 / 261; } /* 2: bunting on top, parade above the footer */ :root[data-border="2"] .bd-top { background-image: url("../img/border/border-2-top.webp"); width: min(1360px, 98%); aspect-ratio: 2101 / 168; } :root[data-border="2"] .bd-foot { background-image: url("../img/border/border-2-foot.webp"); width: min(900px, 94%); aspect-ratio: 2102 / 255; } /* 3: valance trim on top, thin harlequin band above the footer */ :root[data-border="3"] .bd-top { background-image: url("../img/border/border-3-top.webp"); width: min(960px, 96%); aspect-ratio: 2143 / 244; margin-top: 0; } :root[data-border="3"] .bd-foot { background-image: url("../img/border/border-3-foot.webp"); width: min(1100px, 96%); aspect-ratio: 2143 / 86; } /* the border already gives the page its top breathing room: pull the Shop head up a little */ :root[data-border] .sh-head { padding-top: 14px; } /* the bunting reads too thin on a phone: let it bleed a little wider */ @media (max-width: 640px) { :root[data-border="2"] .bd-top { width: 100%; background-size: 112% auto; aspect-ratio: 2101 / 188; } :root[data-border="2"] .bd-foot { width: 96%; } } /* ---------- v9b (2026-11-09): page backgrounds for the comparison, ?border=1&bg=... ---------- kraft very light kraft paper (imagegen tile, washed out) page #EADCC4 footer #DFCDAF medieval medieval book page, vellum + faint bleed-through script page #F1E7D2 footer #E6D8BC floral vintage botanical book page, faded ditsy sprigs page #F4ECDD footer #E9DEC8 pinkwarm very pale warm pink (apricot), faint paper grain page #F9EDEA footer #F1DFDA pinkcool very pale cool pink (lilac), faint paper grain page #F6EDF2 footer #ECDFE8 Tiles: img/bg/.webp + -foot.webp (1024 px, shown at 560 px). Raw: _review/bg-raw/. */ :root[data-border][data-bg="kraft"] { --paper: #EADCC4; --cream: #DFCDAF; --card: #FBF4E6; --bd-head: rgba(234, 220, 196, .95); --bg-tile: url("../img/bg/kraft.webp"); --bg-foot: url("../img/bg/kraft-foot.webp"); } :root[data-border][data-bg="medieval"] { --paper: #F1E7D2; --cream: #E6D8BC; --card: #FCF7EC; --bd-head: rgba(241, 231, 210, .95); --bg-tile: url("../img/bg/medieval.webp"); --bg-foot: url("../img/bg/medieval-foot.webp"); } :root[data-border][data-bg="floral"] { --paper: #F4ECDD; --cream: #E9DEC8; --card: #FDF8EE; --bd-head: rgba(244, 236, 221, .95); --bg-tile: url("../img/bg/floral.webp"); --bg-foot: url("../img/bg/floral-foot.webp"); } :root[data-border][data-bg="pinkwarm"] { --paper: #F9EDEA; --cream: #F1DFDA; --card: #FFF8F5; --bd-head: rgba(249, 237, 234, .95); --bg-tile: url("../img/bg/pinkwarm.webp"); --bg-foot: url("../img/bg/pinkwarm-foot.webp"); } :root[data-border][data-bg="pinkcool"] { --paper: #F6EDF2; --cream: #ECDFE8; --card: #FDF8FB; --bd-head: rgba(246, 237, 242, .95); --bg-tile: url("../img/bg/pinkcool.webp"); --bg-foot: url("../img/bg/pinkcool-foot.webp"); } :root[data-border][data-bg] body { background: var(--paper) var(--bg-tile) 0 0 / 560px auto repeat; } :root[data-border][data-bg] .site-footer { background: var(--cream) var(--bg-foot) 0 0 / 560px auto repeat; } /* main.sh{bg-pass}: page sections that paint var(--paper) themselves let the tile show through */ :root[data-border][data-bg] main, :root[data-border][data-bg] .sh, :root[data-border][data-bg] .pd-wrap { background-color: transparent; } @media (max-width: 640px) { :root[data-border][data-bg] body, :root[data-border][data-bg] .site-footer { background-size: 420px auto; } } /* ---------- v9c (2026-11-10): book-page backgrounds from the three home stories, ?border=1&bg=book1..book5 ---------- book1 star almanac (sky) · book2 theatre libretto (stage) · book3 carousel-maker's catalogue (fairground) book4 storybook with margin doodles (all three) · book5 plain page + tucked-in keepsakes (props layer from border.js) */ :root[data-border][data-bg="book1"] { --paper: #F3EBDD; --cream: #E7DCC6; --card: #FDF8EF; --bd-head: rgba(243, 235, 221, .95); --bg-tile: url("../img/bg/book1.webp"); --bg-foot: url("../img/bg/book1-foot.webp"); } :root[data-border][data-bg="book2"] { --paper: #F5EBDB; --cream: #EADDC5; --card: #FDF8EF; --bd-head: rgba(245, 235, 219, .95); --bg-tile: url("../img/bg/book2.webp"); --bg-foot: url("../img/bg/book2-foot.webp"); } :root[data-border][data-bg="book3"] { --paper: #F2E9D8; --cream: #E6DAC2; --card: #FDF8EF; --bd-head: rgba(242, 233, 216, .95); --bg-tile: url("../img/bg/book3.webp"); --bg-foot: url("../img/bg/book3-foot.webp"); } :root[data-border][data-bg="book4"] { --paper: #F5EDE0; --cream: #EADFCB; --card: #FDF8EF; --bd-head: rgba(245, 237, 224, .95); --bg-tile: url("../img/bg/book4.webp"); --bg-foot: url("../img/bg/book4-foot.webp"); } :root[data-border][data-bg="book5"] { --paper: #F4ECDD; --cream: #E9DEC8; --card: #FDF8EF; --bd-head: rgba(244, 236, 221, .95); --bg-tile: url("../img/bg/book5.webp"); --bg-foot: url("../img/bg/book5-foot.webp"); } :root[data-bg="book5"] body { position: relative; } :root[data-bg="book5"] main { position: relative; z-index: 1; } .bk-props { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; pointer-events: none; z-index: 0; } .bk-props img { position: absolute; display: block; height: auto; filter: drop-shadow(0 2px 3px rgba(80, 60, 40, .12)); } .bk-props .p-ribbon { right: 64px; top: 0; width: 26px; } .bk-props .p-ticket { left: 22px; top: 330px; width: 122px; transform: rotate(-9deg); } .bk-props .p-rose { right: 30px; top: 560px; width: 78px; transform: rotate(12deg); } .bk-props .p-star { left: 46px; top: 1020px; width: 58px; transform: rotate(-14deg); } @media (max-width: 1200px) { .bk-props .p-ticket, .bk-props .p-rose, .bk-props .p-star { display: none; } } @media (max-width: 760px) { .bk-props .p-ribbon { right: 3px; width: 13px; } } /* ---------- v9d (2026-11-10): ?story=1 — one book page per page + hints of colour from the three home sections ---------- Preset turns on the sky-procession border (border-1) and a book-page background per page. Works in BOTH looks (hang and frame; the look is not forced). Not remembered; default unchanged. sky Shop + product book1 star almanac, recoloured page #F1EBE4 footer #E4DDD6 wash powder blue -> peach (home section 2) stage Theatre Bag book2 theatre libretto page #F6EAD4 footer #EBDABC wash butter gold -> powder blue (home section 1) dusk Locket Bag book3 carousel catalogue page #F5E9E1 footer #EAD9CF wash dusk rose -> peach (home section 3) night Ask Madame Stardust book3 carousel catalogue page #F0E8EE footer #E3D8E1 wash lavender -> rose (home section 3, night) plain thanks · 404 · policies · contact book5 plain page (no keepsakes) page #F4ECDD footer #E9DEC8 Hint colours were measured from the home PNGs (hue-band means): S1 butter #E0C69D / powder blue #C3CEDB, S2 peach #E8D0BC / rose cloud #DDC2C3 / lavender #B0A0B9, S3 lavender #C6B2CE / rose #D9B8BB / peach light #EBC1A3. Tiles: img/bg/story-.webp + -foot.webp (book tiles recoloured in canvas). */ :root[data-border][data-bg][data-story="sky"] { --paper: #F1EBE4; --cream: #E4DDD6; --card: #FBF8F4; --bd-head: rgba(241, 235, 228, 0.84); --bg-tile: url("../img/bg/story-sky.webp"); --bg-foot: url("../img/bg/story-sky-foot.webp"); --st-w1: rgba(195,206,219,.42); --st-w2: rgba(232,208,188,.22); } :root[data-border][data-bg][data-story="stage"] { --paper: #F6EAD4; --cream: #EBDABC; --card: #FDF7EA; --bd-head: rgba(246, 234, 212, 0.84); --bg-tile: url("../img/bg/story-stage.webp"); --bg-foot: url("../img/bg/story-stage-foot.webp"); --st-w1: rgba(236,214,181,.48); --st-w2: rgba(195,206,219,.20); } :root[data-border][data-bg][data-story="dusk"] { --paper: #F5E9E1; --cream: #EAD9CF; --card: #FDF7F3; --bd-head: rgba(245, 233, 225, 0.84); --bg-tile: url("../img/bg/story-dusk.webp"); --bg-foot: url("../img/bg/story-dusk-foot.webp"); --st-w1: rgba(221,194,195,.42); --st-w2: rgba(235,193,163,.20); } :root[data-border][data-bg][data-story="night"] { --paper: #F0E8EE; --cream: #E3D8E1; --card: #FBF7FA; --bd-head: rgba(240, 232, 238, 0.84); --bg-tile: url("../img/bg/story-night.webp"); --bg-foot: url("../img/bg/story-night-foot.webp"); --st-w1: rgba(198,178,206,.46); --st-w2: rgba(217,184,187,.18); } :root[data-border][data-bg][data-story="plain"] { --st-w1: transparent; --st-w2: transparent; --bd-head: rgba(244, 236, 221, .86); } /* a soft wash of the hint colours at the top of the page (fades out by ~820px), over the book tile */ :root[data-border][data-bg][data-story] body { background: linear-gradient(180deg, var(--st-w1) 0, var(--st-w2) 46%, transparent 100%) 0 0 / 100% 820px no-repeat, var(--bg-tile) 0 0 / 560px auto repeat, var(--paper); } :root[data-border][data-bg][data-story] .site-header { background: var(--bd-head); backdrop-filter: blur(8px); } /* sections that painted their own opaque colour now let the page show through (keep a light hint of their tint) */ :root[data-story] main, :root[data-story] .sh, :root[data-story] .pd-wrap, :root[data-story] .fp, :root[data-story] .ill-page, :root[data-story] .policy { background-color: transparent; } :root[data-story] .lh { background: transparent; } :root[data-story] .mh { background: linear-gradient(180deg, rgba(232, 224, 241, .30) 0%, transparent 100%); } :root[data-story] .tint-lav, :root[data-story] .lenti-sec { background: linear-gradient(180deg, transparent 0%, rgba(226, 218, 238, .42) 20%, rgba(226, 218, 238, .42) 80%, transparent 100%); } :root[data-story] .tint-cream { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--cream) 55%, transparent) 16%, color-mix(in srgb, var(--cream) 55%, transparent) 84%, transparent 100%); } :root[data-story] .co-hero { background: transparent; } /* small ✦ dividers: no flat patch; the line opens a gap around the star instead */ :root[data-story] .rule, :root[data-story] .sh-rail { background: linear-gradient(90deg, transparent 0, var(--gold-line) 15%, var(--gold-line) 45%, transparent 47%, transparent 53%, var(--gold-line) 55%, var(--gold-line) 85%, transparent 100%); } :root[data-story] .rule::after, :root[data-story] .sh-rail::after { background: transparent; } @media (max-width: 640px) { :root[data-border][data-bg][data-story] body { background: linear-gradient(180deg, var(--st-w1) 0, var(--st-w2) 46%, transparent 100%) 0 0 / 100% 560px no-repeat, var(--bg-tile) 0 0 / 420px auto repeat, var(--paper); } }