/* ========================================================================== PADDIO BANGNA — background texture Loaded after shared/consumer.css. THE PROBLEM THIS SOLVES. brand.css already carries the guideline's Leaf Inspired Shape as three masks — --motif-cluster, --motif-branch, --motif-row — and they were barely used: three corner flows and one field across nine sections, so nearly every background was flat colour. WHAT WAS TRIED FIRST, AND WHY IT IS GONE. A seamless 128px tile of alternating leaves. It was technically sound, genuinely seamless, and it looked wrong: at that regularity four leaves meeting at a corner read as a four-leaf clover, and the whole thing became wallpaper competing with the type. Regularity was the mistake, not opacity — dropping it from 6% to 3% made it fainter without making it better. WHAT IS HERE INSTEAD. The approach the Enquire band already uses, and the one the guideline actually describes (5.3.1, "Graphic Elements"): a few large flows scattered across the field at different scales, bleeding off the edges, no two sections arranged alike. More of it than Enquire carries, but the same idea. No extra markup. Each section paints its arrangement with two pseudo-elements carrying several mask layers each, so the shapes are positioned independently while staying one paint apiece. Both are inset:0 on the section, so a flow placed past an edge is clipped by the element itself and can never widen the page. ========================================================================== */ .tex { position: relative; isolation: isolate; } .tex::before, .tex::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Layer one — three flows in the section's ink. */ .tex::before { background-color: var(--tex-ink, var(--leaf-deep)); opacity: var(--tex-op, .05); -webkit-mask-image: var(--motif-row), var(--motif-branch), var(--motif-cluster); mask-image: var(--motif-row), var(--motif-branch), var(--motif-cluster); -webkit-mask-position: var(--p1), var(--p2), var(--p3); mask-position: var(--p1), var(--p2), var(--p3); -webkit-mask-size: var(--s1), var(--s2), var(--s3); mask-size: var(--s1), var(--s2), var(--s3); } /* Layer two — two more in a second tint, so the field carries more than one green, the way 5.3.1 layers them. */ .tex::after { background-color: var(--tex-ink2, var(--moss)); opacity: var(--tex-op2, .07); -webkit-mask-image: var(--motif-cluster), var(--motif-row); mask-image: var(--motif-cluster), var(--motif-row); -webkit-mask-position: var(--p4), var(--p5); mask-position: var(--p4), var(--p5); -webkit-mask-size: var(--s4), var(--s5); mask-size: var(--s4), var(--s5); } /* -------------------------------------------------------------------------- ARRANGEMENTS Four, assigned in rotation so no two adjacent sections repeat. CSS has no randomness and a formula would only re-introduce the regularity the tile was rejected for, so these are composed by hand. Each keeps its heaviest mass away from the centre column, where the copy sits, and lets the rest run off an edge. -------------------------------------------------------------------------- */ .tex-a { --p1: -8% 92%; --s1: 48% auto; --p2: 106% 8%; --s2: 32% auto; --p3: 82% 84%; --s3: 13% auto; --p4: 4% 10%; --s4: 11% auto; --p5: 118% 52%; --s5: 26% auto; } .tex-b { --p1: 110% 88%; --s1: 42% auto; --p2: -10% 4%; --s2: 36% auto; --p3: 14% 66%; --s3: 12% auto; --p4: 92% 34%; --s4: 9% auto; --p5: -14% 40%; --s5: 22% auto; } .tex-c { --p1: 6% -12%; --s1: 40% auto; --p2: 98% 74%; --s2: 30% auto; --p3: 44% 104%; --s3: 15% auto; --p4: 8% 46%; --s4: 10% auto; --p5: 104% 6%; --s5: 24% auto; } .tex-d { --p1: 96% -10%; --s1: 38% auto; --p2: -6% 70%; --s2: 33% auto; --p3: 70% 40%; --s3: 11% auto; --p4: 34% 96%; --s4: 12% auto; --p5: 108% 26%; --s5: 20% auto; } /* Surfaces — greens only, in both directions. THE INK IS NOT --leaf-deep, AND THAT MATTERS MORE THAN THE OPACITY. At the few per cent these run at, a near-black green loses its hue entirely: --leaf-deep at 5% over --bone lands on #F1F1EC — hue 84 degrees at under 10% saturation, which is simply grey, and is what the first pass shipped. Measured across the palette, --green-mid at 6% gives #EEF6EF, hue 127 degrees, and is also the strongest green that keeps --muted body copy over 4.5:1 on --bone. On --cream the warm ground pulls the same ink to 69 degrees, a softer yellow-green. That is the ground, not the ink, and it is still green rather than the grey-brown --leaf-deep gave there. */ .tex-light { --tex-ink: var(--green-mid); --tex-op: .06; --tex-ink2: var(--moss); --tex-op2: .07; } .tex-cream { --tex-ink: var(--green-mid); --tex-op: .06; --tex-ink2: var(--moss); --tex-op2: .075; } .tex-dark { --tex-ink: var(--sage); --tex-op: .085; --tex-ink2: var(--lime); --tex-op2: .07; } /* For sections already carrying photography or a dense grid, where a full arrangement would fight the content. */ .tex-quiet { --tex-op: .03; --tex-op2: .04; } /* SHORT BANDS GET FEWER FLOWS. The arrangements are composed for a section tall enough to separate them vertically. In a shallow band like the stats strip there is no vertical room, so flows that read as spread out on a tall section pile up on the same edge and visibly overlap each other. Rather than nudge positions until one case looks right, short sections keep only the two large flows, which sit on opposite edges by construction. Setting a mask-size to 0 paints nothing, so this removes them rather than hiding them. */ .tex-slim { --s3: 0; --s4: 0; --s5: 0; } @media (max-width: 760px) { /* The small accents are noise at phone width; keep the large flows only. */ .tex::after { display: none; } .tex { --s3: 0; } } /* -------------------------------------------------------------------------- THE FOUR PILLARS "At least use more in the columns." The cards take the leaf silhouette itself — guideline 5.1, a rectangle with two OPPOSITE corners rounded to a true quarter-circle — alternating direction card to card so the row interlocks the way the motif does instead of reading as four identical boxes. NO SECOND FIELD INSIDE THE CARDS. A pattern on the card as well as the section behind it was tried and looked wrong immediately: two arrangements at different scales, neither aligned, competing through the card edge. The cards stay clean so the copy on them stays crisp, and the motif reaches the column through its shape and the corner leaf it already had. -------------------------------------------------------------------------- */ .pillars .pillar { border-radius: 44px 0 44px 0; } .pillars .pillar:nth-child(even) { border-radius: 0 44px 0 44px; } @media (max-width: 620px) { .pillars .pillar, .pillars .pillar:nth-child(even) { border-radius: 34px 0 34px 0; } } /* -------------------------------------------------------------------------- CONTRAST — measured, not eyeballed Worst case on the page is --muted (#796E65) body copy. These are large soft shapes rather than a wash over every pixel, but where one does pass behind a paragraph the local cost is the full opacity, so that is what is checked: surface plain under a flow cost --bone #FDFAF6 4.77:1 4.51:1 @ 6% green-mid -0.26 passes 4.5:1 --cream #F5EBE1 4.22:1 4.00:1 @ 6% green-mid -0.22 see below --leaf-deep 7.71:1 6.64:1 @ 8.5% sage -1.07 passes 6% is a ceiling, not a preference: --green-mid at 7% takes --bone to 4.48:1. The arrangements keep their heaviest mass out of the centre column for this reason, which is what lets the pale surfaces carry 5% overall while the figures above hold where the copy actually is. A PRE-EXISTING PROBLEM, FOUND WHILE MEASURING THIS AND NOT CAUSED BY IT: --muted on --cream is 4.22:1 with no texture at all. It has always been under 4.5:1, on every version, wherever muted body copy sits on a cream section. Fixing it means darkening the --muted token in brand.css to about #6B6157, which would change every version including the frozen ones, so it is not done here. Logged for a decision rather than silently patched. -------------------------------------------------------------------------- */