/* ========================================================================== Lumi Libra — style.css Fonts: Fraunces (headings, tagline, pull-quotes — stands in for Recoleta) Satoshi (body, labels, buttons, nav — Regular / Medium) ========================================================================== */ /* ========================================================================== Palette — sampled from `colored background mock.png` with Pillow, not eyeballed. This replaces the pale watercolour set. Three things changed: · Colour commits. The illustration colours are saturated blocks now, not tints — Lauren's note was that the old palette was "too pale and washy". · Display headings go NAVY. Teal drops to an accent role: eyebrows, rules, small labels. It used to carry every heading on the site. · The paper stays COOL. The mock's ground is a warm cream (#FBF5EB) and Lauren explicitly kept the cooler off-white instead, so every colour below is sampled from a cream ground but has to sit on a neutral one. Watch the warm greens and golds for muddiness because of that mismatch. ========================================================================== */ :root { /* ---- Primary ---- */ --navy: #212E39; /* display headings. Mock Who-panel heading #212E39 */ --teal: #3E8C8A; /* accent + buttons, darkened off the blob teal for contrast */ --teal-deep: #2E6E6D; /* hover / pressed */ --teal-dark: #2E6E6D; /* legacy alias */ --teal-label: #3D6F71; /* small caps labels. Mock eyebrow #417779 */ /* Text set ON --panel-teal. --teal-deep is only 4.18:1 there, which fails AA at body size; this is the same hue and saturation dropped in lightness until it clears, 4.8:1. Used for the email fields' placeholder. */ --teal-ink: #2A6362; /* The blue Lauren picked out of the "Who Lumi Libra Is For" panel — a cool slate rather than the near-black the body copy used to be. */ --ink: #40494E; /* body. Mock Who-panel list text #40494E */ --script-blue: #4E6D79; /* script lines. Mock Who-panel closing script #4E6D79 */ --bullet-blue: #7D929F; /* list marks. Mock Who-panel hearts #7D929F */ --soft-white: #FDFDFD; /* the page ground — cool, per Lauren, NOT the mock's cream */ /* ---- Hero wash ---- */ /* Lauren, 2026-08-06: "make the hero teal the darker shade — the darker ones we already have throughout the site. match it to that." So the ramp is no longer sampled off the mock (it averaged #8FBFBB there); it is built out of the two brand teals the rest of the site already uses, with one interpolated step between them. Nothing new was invented: 0% --teal-deep #2E6E6D 46% midpoint #35807E 100% --teal #3E8C8A This is the "reads as a solid brand header" direction the mock-matched ramp was written to avoid — it is now what was asked for, so don't revert it back toward the mock without checking with her. The band is dark enough that the hero type had to invert: the wordmark, script and lead were navy on the pale ramp and measure ~3:1 here. See `.hero h1` / `.hero .script` / `.hero .lead` below, which are white now. */ --hero-teal-deep: #2E6E6D; --hero-teal-mid: #35807E; --hero-teal-light: #3E8C8A; /* ---- Illustration set (saturated blocks) ---- */ /* Pillar title colours. Each is its own patch's colour, which is what now tells you which title belongs to which icon — the marker rule that used to do that job is gone. Sampled from the imported art (modal colour, excluding the white line drawing) and then darkened along the same hue until it clears 4:1 on the paper. The patch colours themselves are far too light to set type in: at full strength the gold measures 1.5:1. Same hue and saturation, lower lightness, so they still read as the icon's colour. Re-derive these if the patch art changes — the comment records what each was taken from. */ --blob-teal: #498887; /* patch #7AB8B7 */ --blob-purple: #8B71B7; /* patch #B5A5D1 */ --blob-green: #778257; /* patch #98A477 */ --blob-gold: #987A1D; /* patch #E4C972 */ --blob-pink: #BE6176; /* patch #E3BBC4 */ /* The Self-Love Club's six patch titles, derived the same way — each is its own patch's median colour with the hue and the HSL saturation held, and only the LIGHTNESS dropped until it clears contrast. HSL is the part that matters: holding saturation in HSV instead turns every one of these into a muddy grey, because the patches are pale. The pillar colours above were derived this way too, whatever their comment says. RE-DERIVED 2026-08-05 from the re-toned club icons, after Lauren asked for the club row to match the home row. Now that each club patch measures within 1-2 saturation points of its pillar twin, these carry the same hue and saturation as the --blob-* values above. They are NOT the same values, and must not be replaced by them. The pillars stop at 4.0:1 because .pillar h3 is 22px/600 — large text, where AA is 3:1. These are .receive7 h4 at 15px bold, which is small text, where AA is 4.5:1; 4.0 would fail. The half-step of extra darkness is the only difference between the two rows, and it is load-bearing. */ /* DARKENED 2026-08-25, the whole family plus --teal-label. These six colour nothing but the six `h4` labels under the Club's icons, and they had been tuned to sit right ON the 4.5 line — measured 4.49, 4.49, 4.49, 4.51, 4.52, 4.53 on bare white at 15px/700. Three of them were already under it. Any ground colour at all tips the whole family, which is what the all-over wash exposed. Each was darkened in HLS lightness ONLY, so hue and saturation are untouched and each still matches its icon; they now measure ~5.5 on white and ~4.8 through the wash. The old values are one line up in git if a specific one ever needs to go back. */ --club-welcome: #416F6F; /* patch #8ABBBA, cf --blob-teal */ --club-experiences: #7D651A; /* patch #E4CA7B, cf --blob-gold */ --club-movement: #606C46; /* patch #AAB78F, cf --blob-green */ --club-creative: #7958A3; /* patch #BBAAD1, cf --blob-purple */ --club-reflection: #A74955; /* patch #DEB4B9, cf --blob-pink */ --club-playlist: #4E6A88; /* patch #98AEC4, no pillar twin */ /* A BLUE THAT POPS, 2026-08-26. Lauren, of the Sunday Spark heart in the closing band: "make it a shade of blue that pops more." --club-playlist, which it had, is a slate — it is the blue that reads as a LABEL, tuned for 15px text, and at heart size it goes grey against the paper. Derived the way every ink in this file is derived, from a patch rather than invented: --periwinkle #9EC8F7 carried to ink weight at its own hue (212) — lightness to 45%, saturation held near the patch's — which is what makes it read as this palette's blue rather than a stock one. 4.9:1 on the page ground against --club-playlist's 4.4, and far more saturated, which is where the pop actually comes from at this size. It colours ONE mark. Anything that needs a blue for TEXT should still take --club-playlist, which was measured for that. */ --spark-blue: #2F7CC0; /* patch #9EC8F7 (--periwinkle), ink twin */ /* ---- Panels ---- */ /* The Believe panel. Was the sage #D1D3B7 — Lauren, 2026-08-04: "i dont love how that current green looks", asking for a lighter teal than the hero. This is Halo Aqua, already in the palette as the hero halo, so the panel borrows a colour the page owns rather than inventing one. It is genuinely lighter than the hero: L 80 against the hero's three teals at 56 / 64 / 73, and hue 178 sits inside their 171-177 range, so it reads as the same colour family rather than a second teal. 9.7:1 on the navy label, up from the sage's 9.05. The risk here is the blue panel next to it — only 23 degrees of hue apart. What separates them is saturation, 36 against the blue's 70. Don't saturate this one up without re-checking that the two still read apart. */ --panel-teal: #BBDFDE; /* Hover step for every button that fills with --panel-teal. Same hue (178) and same HSL saturation (0.36), lightness only, 80 -> 70 — so hover reads as the button darkening rather than as a second colour. 7.9:1 on the navy label. */ --panel-teal-deep: #97CECD; /* Was #D2DFE0, sampled off the mock — a blue-grey that read as no colour at all once the panel sat between sage and lavender. (That sage neighbour is --panel-teal now; this note is the history, not the current row.) Lauren asked for a blue from the palette, so this started as Butterfly Blue (#B8E2FA) itself. That read too bright beside its neighbours, so it is now that colour at 80% saturation and darkened to sit level with them: luminance 0.634 against sage's 0.636 and lavender's 0.571. Still unmistakably blue, 6.0:1 on body ink. Raise the lightness back toward #B8E2FA if it ever wants more lift. */ /* DEEPENED 2026-08-23, from #AAD7F0. Lauren liked the dark blue of the 1:1 page's interest card and asked whether the pale panels could go that way too. They cannot: `.who-for` on the home page is one of a PAIR with `.believe`, two pale washes at different heights reading as one gesture, and taking one of them dark makes it the dominant object on the screen and the other look like a mistake. The site also runs exactly two dark moments per page — the hero band and the CTA card — which is what makes them read as punctuation; a third mid-page spends it. So the panel goes DEEPER RATHER THAN DARK: same hue (201) and same HSL saturation (0.70), lightness 0.80 -> 0.72. That is a clear step down while the panel stays a pale wash carrying dark text — navy measures 7.43:1 on it and the body ink 4.94:1, both clear of AA, where 0.70 would put the ink at 4.71 and 0.68 at 4.49, under it. 0.72 is the deepest this can go without reversing the type out, which is the change she did not want. */ --panel-blue: #86C6EA; --panel-lav: #D1C2D8; /* ---- Legacy aliases (other pages still reference these) ---- */ --aqua-mist: #DDF4F4; --butterfly-blue: #B8E2FA; --lavender: #C9B6D8; --purple: #977FB2; /* Mock secondary button #977FB2 */ --periwinkle: #9EC8F7; --sage: #B5BE98; --butter: #EFC780; --pink: #EFBBBB; --aqua: #A2C8C3; /* ---- Surfaces ---- */ --white: #FDFDFD; --cream: #FAFAF8; --cream-accent: #F6F1E6; --teal-wash: #EFF7F6; --seafoam: #D6F0F0; /* ---- Text ---- */ --forest: #212E39; /* headings are navy-slate now, not teal */ --charcoal: #40494E; /* body copy */ --gold: #EFC780; /* Wash channels (r,g,b for rgba()) */ /* The all-over watercolour ground — see .claude/make-ground-wash.py. ON , NOT ON
, and that is the whole point of where it lives: the footer is masked with wave-top.svg, so its dark colour is clipped away along a torn edge and what shows THROUGH the tear is whatever is behind the footer — which is the body, not main. With the wash on main that strip came out flat soft-white while everything above it was washed, and the same bare white appeared under any page shorter than the viewport. Lauren: "the water color splashes need to be in the white space with the footer". Because it is painted once, on the element behind everything, there is no seam to align and no doubling where main overlaps. main deliberately no longer paints an opaque --soft-white base, or it would hide this. */ --pool: 2; --wash-tile: 1500px; --wash-veil: 0.35; --c-teal: 62, 140, 138; --c-navy: 24, 46, 69; --c-blue: 158, 200, 247; --c-lav: 201, 182, 216; --c-sage: 181, 190, 152; --c-aqua: 162, 200, 195; --c-pink: 239, 187, 187; --c-gold: 239, 199, 128; /* ---- Type stack, 2026-08-04 ---- Lauren's "Modern Botanical" direction: Recoleta Bold headings + Satoshi body. Recoleta is a commercial Latinotype face and has to be bought and self-hosted, so headings run on FRAUNCES as a stand-in — it is the closest free equivalent because of its SOFT axis, which rounds the terminals the same way Recoleta's are drawn. To swap in the real thing later: buy the web licence, self-host the woff2, and change --font-heading only. The sizes below should carry over roughly as-is; re-measure x-height before trusting that. CAVEAT IS GONE, at Lauren's instruction — "remove caveat completely". It is not in the font links, not in a fallback stack, and nothing on the site should reintroduce a handwritten face without her asking. Every display size in this file was originally stepped UP to compensate for Caveat rendering small for its point size. Measured on canvas, Caveat's x-height is 0.826 of Fraunces's and it sets 0.805 as wide, so all of them were multiplied by 0.81 when the face changed. Don't "fix" them upward. */ /* CALISTOGA, chosen 2026-08-19 after eight rounds of comparison. It beat Yeseva One, Atma, Bree Serif, Averia Serif Libre, Laila, Crete Round, Solway, Podkova, Kurale, Merienda, Baloo 2, Grandstander, Trocchi, Bespoke Slab, Gambetta, Mitr, Gluten, Sansita Swashed, Lemonada, Zodiak, Erode, Bricolage Grotesque, Caprasimo, Agbalumo, Zen Antique Soft, Kiwi Maru, Zen Maru Gothic, Rowan, Gabarito, Kreon, Aleo, Enriqueta, Sanchez, Martel, Kaisei Decol, Shrikhand, Gotu, Panchang, Poetsen One, Bakbak One, Tanker and Coustard, the last of which it was judged against side by side on a live copy of the home page. SINGLE WEIGHT: Calistoga ships 400 and nothing else. The weights this file sets for Fraunces (h1 700, h2/h3 600, and a dozen section rules) are therefore pinned back to 400 at the foot of the file, so no browser invents a fake bold. Calistoga is drawn at display weight already; 400 IS its bold. AVERIA SERIF LIBRE, standing in its place from 2026-08-23, ships 300, 400 and 700 — three real weights, so the dial at the foot of this file can move again. It sits at 400. Delius before it had one weight and no dial; Sour Gummy before that had a full axis. IT IS A SERIF AGAIN, which puts the fallback back to Georgia and ends the run of rounded and handwritten faces. It was also on the 2026-08-19 shortlist that chose Calistoga — see the list further up this comment. FRAUNCES STAYS LOADED, and not by oversight: the hero tagline (--font-serif) and the script pull-quotes (--font-script) still run on it, and Calistoga has no italic. Do not remove it from the font links. The comparison pages that produced this decision are site/font-compare.html and site/font-in-context.html, both noindex working files that must stay out of the upload zip. */ /* ---- BUBBLEGUM SANS, a font test — 2026-08-23 ---- Lauren asked to try Averia Serif Libre as the display face site-wide, with nothing else changed: no layout, spacing, colour, size, copy or body-font move, so the face can be judged on its own. This one line and the `family=` parameter in each page's Google Fonts link are the whole change. TO REVERT: put `"Calistoga", Georgia, serif` back here, swap the `family=` value in the nine page s, and UNCOMMENT the weight-pin block at the foot of this file — see the note there. That last step is new with Sour Gummy and matters; the two faces before it did not need it. THE FALLBACK STACK CHANGED WITH IT, and that is part of the same swap rather than a second decision: Calistoga is a serif and fell back to Georgia, Bubblegum Sans is a rounded sans and falling back to a serif would show a different kind of face entirely on the first paint or on a failed load. WHAT THIS IS NOT: Lauren's brief named the outgoing face as Coustard. That was the runner-up — the face this site actually ships is Calistoga, and Coustard is one of the forty-odd it was compared against on site/font-in-context.html. The swap below is Calistoga's. */ --font-heading: "Averia Serif Libre", Georgia, serif; /* The hero tagline was Cormorant Garamond. Two different serifs on one page read as a mistake, so it folds into Fraunces too. Cormorant's x-height is 0.881 of Fraunces's at the same nominal size while setting the same width, so the tagline scaled by 0.90 — it has to stay on two lines. */ --font-serif: "Fraunces", Georgia, serif; /* Pull-quotes were Caveat. They keep a distinct voice via Fraunces italic rather than a fourth family — see .script. */ --font-script: "Fraunces", Georgia, serif; /* ---- COURGETTE, an accent face — 2026-08-23, face swapped 2026-08-24 ---- Lauren: "I want it to feel like a small handwritten layer within the existing design, not like a new primary typeface... keep its use sparse and intentional. There should generally only be one or two [handwritten] moments visible within a section or screen, and many sections may not need it at all." IT WAS DANCING SCRIPT FOR ONE DAY, and the swap is the whole reason the x-height table further down this file exists. Lauren asked for the script to be larger FIVE times — 1.15, 1.34, 1.46, 1.2, 1.5 — and the last of those was still only ~14% past the apparent size of the Fraunces it had replaced. Dancing Script's x-height is 0.332 of its em; measured across 30 Google script faces it ranked 26th, so it was close to the worst available choice for reading size. Courgette is 0.505 and lays down 6292 ink pixels against 3000, which matters because these lines sit on pale watercolour washes where a thin stroke spends contrast the panel cannot spare. THE PROOF THAT THE FACE WAS THE PROBLEM: --accent-scale went from 1.5 to 1. The clamps already authored on `.script`, `.oto-joy-title` and the rest now simply work, which is what a correctly-sized face looks like. The comparison harness is `site/script-compare.html` — a working file, like font-compare.html and font-in-context.html, linked from nothing and kept out of the upload zip. It shows six candidates at MATCHED x-height, which is the only honest way to compare scripts. WHERE IT MAY GO: short emotional or tagline-style phrases, small accent headings where the wording is personal, brand phrases like "Joy is a compass.", and very short lines that read as a handwritten note. WHERE IT MAY NOT: page titles (Lumi Libra, About Lauren, Sunday Spark, Self-Love Club, 1:1 Sessions), navigation, buttons, body copy, long sentences or paragraphs, functional section headings like "What to Expect", small uppercase labels like "COMING TO LUMI LIBRA", and the logo. IT DOES NOT REPLACE --font-script. Fraunces italic still carries every pull-quote and hero tagline on the site; this is applied by hand to a named, counted set of lines through `.accent`, which is the only selector that reaches it. Adding it to `.script` wholesale would put a handwriting face on some quite long sentences — the home hero's tagline runs three lines — and that is the thing the brief rules out. 400 ONLY, AND THE URL ASKS FOR NO WEIGHT AT ALL because Courgette ships a single one. `.accent` therefore sets `font-weight: 400`, not the 500 it carried under Dancing Script — a weight a font does not have is an invitation for Safari to draw a fake bold, which is the same failure the DISPLAY HEADING WEIGHTS block at the foot of this file exists to prevent. SATISFY CAME OUT OF THE FONT URL in the same edit. It had been requested on all nine pages since the earlier script exploration and was referenced by nothing — a whole font file downloaded per page load for no rendered glyph. CAVEAT WAS REMOVED FROM THIS SITE at Lauren's instruction, with a note that nothing should reintroduce a handwritten face without her asking. She asked. That rule is satisfied, not broken. Caveat Brush appears in the comparison harness as a candidate and is flagged there for the same reason; it was not chosen. */ --font-accent: "Courgette", "Segoe Script", cursive; /* HOW MUCH BIGGER the accent face runs than the line's OWN designed size. See the `.accent` block at the very bottom of this file for why this is a multiplier of the host's size rather than a size of its own, and for the x-height measurement that sets the floor under these numbers. 1 UNDER COURGETTE, and that is the point of the face swap rather than a coincidence: the sizes authored on the host classes are correct as written, so this multiplier has nothing left to correct. It stays because the next face swap will need it again — under Dancing Script it read 1.5. TWO VALUES, because the hosts are not all the same kind of line. --accent-scale-display is for hosts whose clamp is ALREADY display-sized, currently just `.oto-joy-title` at 2.7rem. Under Dancing Script it existed because 2.7rem x 1.5 drew a cap-height taller than the page's own h1. Courgette does not have that problem — at scale 1 the Joy heading's cap-height is 32.8 against the h1's 43.9 — so 0.89 is now doing a smaller job: it holds the Joy-to-body-script proportion at the 1.30 Lauren signed off on, where a flat 1 would quietly grow that heading by 12%. */ --accent-scale: 1; --accent-scale-display: 0.89; /* Satoshi (Fontshare, free) replaces Manrope, which replaced Nunito Sans earlier today. Watch out: Satoshi's x-height is 0.896 of Manrope's, so at equal nominal sizes it reads ~11% SMALLER. Every body size was multiplied by 1.11 to hold the apparent size won this morning. The nominal rem values therefore look large — that is correct, not a bug. */ --font-body: "Satoshi", "Segoe UI", system-ui, sans-serif; /* Satoshi Regular is the body weight per her spec; buttons, nav and the letterspaced uppercase labels take Medium. */ --fw-ui: 500; /* Rounds Fraunces's terminals toward Recoleta's. WONK stays off — its alternate forms are a quirk Recoleta doesn't have. Applied via font-variation-settings on the display rules; naming only SOFT/WONK leaves font-weight free to drive the wght axis. */ --display-vars: "SOFT" 80, "WONK" 0; /* ---- Type scale ---- One ladder for the whole site, so body copy stops drifting between 0.88 / 0.9 / 0.95 / 0.98rem section by section. Raised 2026-08-04 — Lauren: "the super small sans is hard to read, i want something larger and more clear." The previous ladder was stepped ~6% BELOW the serif's to compensate for Nunito Sans's taller x-height, and matching the mock's own body size held it there. Both were reasoned, and both were wrong in practice: the mock is a flat artboard viewed whole, the site is read at arm's length. Legibility wins over fidelity to the mock here. --t-sm is now a caption size only. It used to carry real prose (the Remember columns, the pillar copy, the note, the reminders) at 14px, which is where "hard to read" was actually coming from — those all sit on --t-base now. Don't put paragraphs back on --t-sm. Scaled again by 1.11 when the face went Manrope -> Satoshi, to hold the same apparent size against Satoshi's smaller x-height. See --font-body. */ --t-xs: 0.94rem; /* eyebrows, small print */ --t-sm: 1.05rem; /* captions, dense grids — NOT paragraphs */ --t-base: 1.19rem; /* body */ --t-md: 1.33rem; /* lead-in paragraphs, section intros */ /* ---- Spacing rhythm ---- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3.25rem; --space-xl: 3.5rem; /* The mock is a tight editorial page, not a slideshow: sections sit close enough that you read two of them at once. These were 6.5/8rem, which pushed the homepage past 5000px and left a screen of dead space under every band. */ --section: 4.5rem; --section-airy: 5.5rem; --radius: 12px; --shadow-soft: 0 10px 34px rgba(31, 94, 92, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--t-base); line-height: 1.75; color: var(--charcoal); background-color: var(--soft-white); /* The veil is the wash's dial and has to sit ABOVE it: --wash-veil 0 shows the file at full strength, 1 hides it. A background layer cannot carry an opacity of its own, so a flat sheet of --soft-white over it does the job. */ /* THE WHOLE GROUND, one element, covering the entire document — every page, including behind the footer's torn edge and below any page shorter than the viewport. Two things stacked, and they do different jobs: THE POOLS drift. Placed by percentage of the page, they stretch to whatever length it happens to be, so colour moves as you scroll — a repeating tile cannot do that. Edge-anchored at 0-2% / 98-100% so each licks in from the margin and none sits under the centred text column. THE WASH is the all-over watercolour paper underneath them, a seamless tile — see .claude/make-ground-wash.py. Between the two sits the veil, which is the wash's dial: a background layer cannot carry an opacity of its own, so a flat sheet of --soft-white over it does the job. --wash-veil 0 shows the file at full strength, 1 hides it. It is BELOW the pools in this list, so it veils the wash and nothing else. Nothing between here and the reader may paint an opaque base or this disappears — `main` deliberately no longer does. */ background-image: radial-gradient(ellipse 28% 9% at 0% 5%, rgba(var(--c-blue), calc(0.25 * var(--pool))), transparent 72%), radial-gradient(ellipse 25% 8% at 99% 11%, rgba(var(--c-teal), calc(0.13 * var(--pool))), transparent 72%), radial-gradient(ellipse 23% 8% at 1% 16%, rgba(var(--c-lav), calc(0.34 * var(--pool))), transparent 74%), radial-gradient(ellipse 26% 8% at 100% 25%, rgba(var(--c-blue), calc(0.25 * var(--pool))), transparent 72%), radial-gradient(ellipse 27% 9% at 1% 34%, rgba(var(--c-teal), calc(0.13 * var(--pool))), transparent 72%), radial-gradient(ellipse 24% 8% at 100% 40%, rgba(var(--c-lav), calc(0.34 * var(--pool))), transparent 73%), radial-gradient(ellipse 24% 7% at 98% 45%, rgba(var(--c-blue), calc(0.15 * var(--pool))), transparent 74%), radial-gradient(ellipse 28% 10% at 0% 55%, rgba(var(--c-teal), calc(0.13 * var(--pool))), transparent 72%), radial-gradient(ellipse 26% 8% at 100% 66%, rgba(var(--c-lav), calc(0.34 * var(--pool))), transparent 72%), radial-gradient(ellipse 27% 9% at 2% 78%, rgba(var(--c-blue), calc(0.25 * var(--pool))), transparent 72%), radial-gradient(ellipse 26% 8% at 99% 88%, rgba(var(--c-teal), calc(0.13 * var(--pool))), transparent 72%), radial-gradient(ellipse 24% 8% at 1% 95%, rgba(var(--c-lav), calc(0.34 * var(--pool))), transparent 73%), linear-gradient(rgba(253, 253, 253, var(--wash-veil)), rgba(253, 253, 253, var(--wash-veil))), url("../images/art/ground-wash.webp"); background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, var(--wash-tile) var(--wash-tile); background-position: 0 0; background-repeat: repeat; overflow-x: hidden; } img { max-width: 100%; display: block; } main { overflow-x: clip; } /* ========================================================================== Continuous ground The homepage used to be a stack of bands, each painting its own background, so every section boundary was a visible seam. Instead the whole of
carries one sheet of watercolour paper and the sections sit on it with no background of their own — there are no edges left to see. Colour still pools as you scroll, but it pools ACROSS the boundaries rather than stopping at them. Extended to the About and Club pages 2026-08-05. Those two were still built the old way — every section painting its own radial-gradient ground, which is what put a visible ruled line under each one. The pools are placed by percentage of the page, so one rule serves all three despite their very different lengths. THESE WERE DELIBERATELY FAINT, AND WERE RAISED ANYWAY on 2026-08-07. Lauren: "in the white spaces where we have some light watercolour splashes already, can we make those more apparent or add more pops of colour without taking away from anything." Read the paragraph below before lowering them again — the old note warned that at their previous strength they "compounded with the washes above until no soft white was left anywhere on the page", and that is still the failure mode to watch for. Three things changed, and only the first is a strength increase: 1. ALPHAS x1.7. Legibility was never the limit here and it is worth knowing by how much: body ink on the strongest pool measures 7.7:1 after the rise, against the 4.5 that AA asks for. Even at x2.2 it was still 7.2. What constrains these is the look, not contrast, so x1.7 is a judgement — it is the point where the colour reads as intentional from a normal viewing distance without the paper stopping being white. 2. THE POOLS GOT ROUNDER, 4-6% tall -> 8-10%. This is what actually makes them read as "splashes" rather than "more colour". At 5% of page height they were thin horizontal licks along the edge; the same alpha in a fuller ellipse reads as paint pooling rather than as a gradient band, and it does it without pushing further into the text column. 3. THREE NEW POOLS, at 16%, 40% and 95%, filling the largest vertical gaps. They also bring in --c-aqua, which this stack never used, and give --c-pink a second appearance — it was the one colour here that showed up once, at the lowest alpha on the page, and so never really registered. Still edge-anchored (0-2% and 98-100%), so every pool licks in from the margin and none of them sits under the centred text column. Still the BOTTOM layer: the colour panels above are opaque, so nothing here shows through .believe, .who-for or the club card, and the compounding the old note feared can only happen on bare paper. ========================================================================== */ /* ---------- TEAL, BLUE AND LAVENDER ONLY — 2026-08-25 ---------- Lauren: "i want to lean into more of using the teal, blue, and lavender shades only" and "more pronounced but not making things so they are hard to read". Sage, pink and aqua are out of this stack entirely; they held seven of the twelve pools. TWO THINGS ARE SEPARATED HERE ON PURPOSE, because they used to be one number and that is what made the last strength pass hard to reason about: 1. THE PER-COLOUR ALPHAS ARE PERCEPTUALLY MATCHED, NOT EQUAL. The brand teal (62,140,138) is roughly 2.6x stronger per unit of alpha than the lavender (201,182,216) — it is a saturated mid-tone where the others are pale tints. Swapping sage -> teal at sage's own 0.29 would move the paper 57 levels off white where sage moved it 29, and it stops reading as a splash and starts reading as a teal panel. Measured over --soft-white, these three bases all move the paper the same ~24 levels: teal 0.13, blue 0.25, lav 0.34. Keep that ratio if you ever add a fourth colour — match the DISTANCE off white, never the alpha. 2. `--pool` IS THE DIAL. One number scales the whole stack, so "more" or "less" is a single edit and the balance between the twelve cannot drift. Shipped at 2 — Lauren picked it from a 1.0 / 1.5 / 2.0 render of the same stretch of the home page. 1.0 is the strength the sage-and-pink stack had, so this is genuinely double, and the recolour is not doing the work on its own. READABILITY IS NOT WHAT LIMITS THIS, and it is worth knowing by how much so nobody trims it out of caution: body ink on the strongest pool measures about 7:1 even well above the strength shipped here, against the 4.5 AA asks. What actually breaks first is the paper ceasing to read as paper. That is a judgement, not a threshold — so it was made by looking, not by measuring. Twelve pools, alternating colour AND side so no two neighbours match, still edge-anchored at 0-2% / 98-100% so every one licks in from the margin and none sits under the centred text column. Still the BOTTOM layer: the colour panels above are opaque, so this can only compound on bare paper. The 45% pool keeps a lighter weight (x0.6) — it sits only 5% below its neighbour on the same side, and at full strength the two merge into one long lick down the right margin instead of reading as two. */ /* THE GROUND MOVED TO ON 2026-08-25. It used to live here, on the five page mains, and the pools stopped dead at main's bottom edge — which is the footer's top edge. The footer is masked with wave-top.svg, so its dark colour is clipped along a torn edge and the paper showing THROUGH that tear belongs to the body, not to main: it came out flat white while everything above it was coloured. Lauren: "the water color splashes need to be in the white space with the footer". Percentages now run over the whole document instead of stopping short of the last 450px of it. See `body` above. */ /* Sections carry no background of their own — except the hero, which is now a saturated teal band, and the three colour panels further down. .who-for used to be listed here, from when it was a plain section on white. As a colour panel it isn't: at 0,2,0 this rule outranked `.who-for` and was silently stripping the panel's background, which is why the middle panel had been rendering as bare paper. */ .page-home .remember, .page-home .pillars { background: none; } /* ---------- Wavy band edges ---------- A colour band ends on a torn watercolour edge rather than a ruled line. This used to be an overlay: a wave-shaped block painted in the colour of the band BELOW, laid over the bottom of the band above. That can never be seamless. It only disappears if its colour exactly matches whatever is behind it at that point, and `.page-home main` carries a faint tinted ground that varies all the way down the page. Worse, .hero is overflow:hidden and its box ends on a fractional pixel, so the overlay was clipped a hair short and left a visible teal hairline under the hero — the line Lauren spotted. The wave is a MASK on the band itself now. The band's own colour ends in the wave and whatever is behind shows straight through, so there is no colour to match and no seam is possible. It also means one wave can run across a whole grid row: .believe-for is masked as a container, not panel by panel. Composed as several mask layers, which composite with `add` by default: a plain rectangle for the body of the band, plus a wave tile at whichever edges are torn. The tile REPEATS at a fixed width rather than stretching to 100%, so the wavelength stays the same whether the band is 1280px or 300px wide — a stretched wave gives every band a different frequency and stops reading as the same torn paper. Each tile's two ends sit at the same height so it repeats without a kink. The layers must OVERLAP generously along the join, and this is the detail that bites: at a 1px overlap the join showed as a faint straight line right across every coloured band. 1px means the only shared row is the antialiased edge row of BOTH layers, and two ~0.5 alphas composited with `add` land just short of 1.0 — enough to read against a flat colour. Element heights here are fractional (the hero is 787.13px tall), so those edges never fall on whole device pixels. --wave-overlap is set so the solid rectangle's soft edge sits well inside the wave tile's fully-opaque headroom, where the tile alone already contributes alpha 1. The tiles are opaque for their first/last 15/80 of height — 5.6px at the 30px minimum wave height — so 4px is within budget at every size. */ :root { --wave-h: clamp(30px, 3.4vw, 52px); --wave-overlap: 4px; /* Under three repeats across a 1280px band. Six octaves of detail still read as a pattern once a tile repeats five or six times. */ --wave-tile: 480px; /* Seamless torn-edge tiles, generated by .claude/make-waves.py — hand-drawn beziers come out a smooth sine, which reads as a scallop, not torn paper. */ --wave-bottom: url("../images/art/wave-bottom.svg"); /* opaque ABOVE the line */ --wave-top: url("../images/art/wave-top.svg"); /* opaque BELOW the line */ /* The EXACT complement of --wave-bottom: same generator seed, so the same curve, closed downward. NOT interchangeable with --wave-top, which is a different seed and therefore a different curve — that is precisely why the colour-changing sprigs could not simply reuse .torn-top. Used to crop the lower half of a crossover along the same edge the band above is torn on. */ --wave-bottom-inv: url("../images/art/wave-bottom-inverse.svg"); /* opaque BELOW the line */ } .torn-top, .torn-bottom { position: relative; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; } /* A scrap of paper torn on all four sides, for the floating colour panels. One stretched mask layer, not a composition — see the note in .claude/make-waves.py for why that trade is deliberate. Three variants so no two panels carry the same tear. The variant used to be picked by `.torn-paper:nth-of-type(N)`, and that is a trap: nth-of-type counts EVERY sibling of the same tag, decoration and scaffolding included, so a panel's tear depended on how many other divs happened to sit beside it. Adding .believe-seam-anchor between .believe and .who-for pushed .who-for from the 3rd div to the 4th — past the last rule — and the blue panel silently lost its mask and rendered as a plain rectangle on every screen size. It is per-element now: each panel names its own tear. The property is --panel-tear, not --tear: the chalk mounts on the About page already own --tear, and custom properties inherit, so sharing the name would let one system reach into the other. */ .torn-paper { position: relative; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: var(--panel-tear, url("../images/art/torn-paper-a.svg")); mask-image: var(--panel-tear, url("../images/art/torn-paper-a.svg")); } /* Home: sage, blue, lavender. Three different tears so no two panels on the page carry the same edge — the club card takes the default `a`. */ .believe { --panel-tear: url("../images/art/torn-paper-b.svg"); } .who-for { --panel-tear: url("../images/art/torn-paper-c.svg"); } /* About: the two panels sit side by side, so they must not match. */ .about-col-right { --panel-tear: url("../images/art/torn-paper-c.svg"); } .torn-bottom { -webkit-mask-image: linear-gradient(#000, #000), var(--wave-bottom); mask-image: linear-gradient(#000, #000), var(--wave-bottom); -webkit-mask-size: 100% calc(100% - var(--wave-h) + var(--wave-overlap)), var(--wave-tile) var(--wave-h); mask-size: 100% calc(100% - var(--wave-h) + var(--wave-overlap)), var(--wave-tile) var(--wave-h); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } .torn-top { -webkit-mask-image: var(--wave-top), linear-gradient(#000, #000); mask-image: var(--wave-top), linear-gradient(#000, #000); -webkit-mask-size: var(--wave-tile) var(--wave-h), 100% calc(100% - var(--wave-h) + var(--wave-overlap)); mask-size: var(--wave-tile) var(--wave-h), 100% calc(100% - var(--wave-h) + var(--wave-overlap)); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } .torn-top.torn-bottom { -webkit-mask-image: var(--wave-top), linear-gradient(#000, #000), var(--wave-bottom); mask-image: var(--wave-top), linear-gradient(#000, #000), var(--wave-bottom); -webkit-mask-size: var(--wave-tile) var(--wave-h), 100% calc(100% - var(--wave-h) * 2 + var(--wave-overlap) * 2), var(--wave-tile) var(--wave-h); mask-size: var(--wave-tile) var(--wave-h), 100% calc(100% - var(--wave-h) * 2 + var(--wave-overlap) * 2), var(--wave-tile) var(--wave-h); -webkit-mask-position: 0 0, 0 calc(var(--wave-h) - var(--wave-overlap)), 0 100%; mask-position: 0 0, 0 calc(var(--wave-h) - var(--wave-overlap)), 0 100%; } a { color: var(--teal); } /* ---------- Every clickable thing answers the cursor, 2026-08-17 ---------- Lauren: "make sure whenever you hover over a section, it chnages a color that makes it distinct for the page visitor... on each page", scoped to clickable things. Audited all eight pages first by matching every ,