/* ============================================================================ WATERCOLOUR LAYER · death is a verb ---------------------------------------------------------------------------- The specimen cutouts in img/ already carry the WET EDGE and paper granulation, baked in. That part cannot be computed by a browser — CSS has no way to know where a wash would pool as it dried, and the pooled rim is the single detail that makes the eye read "painted" rather than "blurry". This file adds the two things that should NOT be baked in: 1. PAPER TOOTH a cold-press grain, drawn live as an SVG turbulence pattern. Baked into a PNG it turns to mush the moment the image is resampled to another screen size; drawn here it stays crisp at every scale, costs no extra bytes, and can follow the page's colour modes. 2. DAMP BLOOM a soft halo creeping past the edge, the way pigment creeps on wet paper. ONE PLACE TO TUNE EVERYTHING — the variables directly below. Set --wc-paper and --wc-bloom to 0 and the whole layer stands down without touching a single image. ============================================================================ */ :root{ --wc-paper: 0; /* PAPER TOOTH — OFF. See the note at the foot of this file. */ --wc-grain: 165px; /* tooth scale — smaller = finer paper */ --wc-bloom: .20; /* the nimbus. Wide and faint reads as glow; tight and bright reads as outline. */ --wc-creep: 13px; /* how far the nimbus reaches past the form */ --wc-creep2: 34px; /* the outer, fainter reach — this is what makes it a nimbus */ /* the tooth, defined once and reused by every rule below */ --wc-tooth: url("data:image/svg+xml;utf8,"); /* The bloom, as a reusable shadow stack. Why drop-shadow rather than a blurred pseudo-element: drop-shadow traces the element's alpha channel, so the halo follows the specimen's actual silhouette AND paints behind it. A pseudo-element cannot do the second part — a child with z-index:-1 still paints above its own parent's background, so a blurred copy placed that way would sit ON TOP of the sharp image and soften exactly the detail we went to trouble to keep. */ --wc-halo: drop-shadow(0 0 var(--wc-creep) rgba(224,187,131,var(--wc-bloom))) drop-shadow(0 0 var(--wc-creep2) rgba(198,146,86,calc(var(--wc-bloom) * .5))); } /* --------------------------------------------------------------------------- 1 · TOOTH + BLOOM For elements that draw their specimen as a background-image, so the image's own silhouette is available as a mask. Two of these on the site: the large page emblems, and the radial menu icons. --------------------------------------------------------------------------- */ .wc-collage{position:relative} .wc-collage::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--wc-tooth); background-size:var(--wc-grain) var(--wc-grain); mix-blend-mode:multiply;opacity:var(--wc-paper); -webkit-mask-image:var(--wc-src);mask-image:var(--wc-src); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center} /* No mask support (older Firefox ESR, some in-app browsers): the tooth would render as a flat grey block across the whole box. Hide it; the baked wet edge and the bloom still carry the effect. */ @supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){ .wc-collage::before{display:none} } /* --- the large page emblem, fixed to the right of every inner page --- This is a plain again. It was briefly a so it could host the paper tooth, but the tooth is off, and a span depends on this stylesheet loading and on aspect-ratio support just to have any size at all. An always renders. Fewer ways to disappear. */ .page-emblem{ filter:var(--wc-halo) drop-shadow(0 12px 30px rgba(0,0,0,.5))} /* --- radial menu icons --- .rad-ic already draws its specimen from --mic, so alias --wc-src to it. Its torn clip-path clips the tooth as well, which is what we want. */ .rad-ic.wc-collage{ --wc-src:var(--mic); filter:var(--wc-halo) drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(0,0,0,.4))} /* --------------------------------------------------------------------------- 2 · BLOOM ONLY For specimens still drawn as . A replaced element cannot host ::before, so the tooth cannot be clipped to its shape there — but the bloom works identically, and these are all small, so the tooth would barely register at their size anyway. No markup change needed for any. --------------------------------------------------------------------------- */ .heap-mini .hm, .emblem-pair .ep-spec, .contact-emb .ce, .cycles .cy, .privacy-beetle{ filter:var(--wc-halo) drop-shadow(0 12px 30px rgba(0,0,0,.5)) !important} /* Krista's own snippet inside the intra-acting pair keeps its original treatment. It is a real watercolour; imitating one on top of it would be both redundant and a little disrespectful to the work. */ .emblem-pair .ep-wc{filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) !important} /* --------------------------------------------------------------------------- 3 · RESPECTING THE VIEWER'S SETTINGS --------------------------------------------------------------------------- */ /* Soil mode exists to ask less of the device and the grid. Blur and blend-modes are exactly the compositing work it should shed, so the layer stands down entirely — the baked wet edge still reads as watercolour. */ body.energy-low{--wc-paper:0;--wc-bloom:0} body.energy-low .page-emblem.wc-collage, body.energy-low .heap-mini .hm, body.energy-low .emblem-pair .ep-spec, body.energy-low .contact-emb .ce, body.energy-low .cycles .cy, body.energy-low .privacy-beetle{ filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) !important} body.energy-low .rad-ic.wc-collage{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)) !important} /* High contrast: a bloom softens edges, which is the opposite of what someone who chose that setting asked for. Tooth stays, bloom goes. */ body.contrast-high{--wc-bloom:0} /* Warm bone (light ground): a warm halo over pale paper is precisely what reads as fog rather than as damp. Cool it, and pull it in close. */ body.bg-warm{ --wc-creep:9px; --wc-creep2:22px; --wc-paper:0; --wc-halo: drop-shadow(0 0 var(--wc-creep) rgba(139,101,54,.22)) drop-shadow(0 0 var(--wc-creep2) rgba(90,72,48,.12))} body.bg-warm .page-emblem.wc-collage, body.bg-warm .heap-mini .hm, body.bg-warm .emblem-pair .ep-spec, body.bg-warm .contact-emb .ce, body.bg-warm .cycles .cy, body.bg-warm .privacy-beetle{ filter:var(--wc-halo) drop-shadow(0 8px 20px rgba(90,72,48,.26)) !important} /* ============================================================================ 4 · MOTION FIX — why the collages were jumping ---------------------------------------------------------------------------- `emblemFloat` was written for .page-emblem, which is vertically centred and therefore needs `transform:translateY(-50%)` just to sit in the right place. That same keyframe was then reused on .hm (heap minis), .cy (the Field Guides cycle) and .ce (contact) — none of which are centred. Two things went wrong: · every one of them was YANKED UP by half its own height the instant the animation started, and held there. On the snail, ~60px. That is the "sudden jump" — it was never the drift, it was the offset. · the keyframe sets `transform` outright, which SILENTLY DESTROYED the `rotate()` each element had in its own rule. The tilted minis and the tilted butterfly were being straightened. Fix: keyframes that carry no positioning offset and that compose with each element's rotation through a variable. Durations are also much longer, and travel much shorter — and now matched to the creature, so a snail no longer moves like a jellyfish. ============================================================================ */ @keyframes wcDrift{ 0%,100%{transform:rotate(var(--wc-rot,0deg)) translateY(0)} 50% {transform:rotate(var(--wc-rot,0deg)) translateY(calc(-1 * var(--wc-rise,7px)))} } /* one shared, unhurried default */ .heap-mini .hm, .cycles .cy, .contact-emb .ce{ animation:wcDrift var(--wc-dur,17s) ease-in-out infinite !important} /* --- motion matched to the organism --------------------------------------- A building should barely breathe; a comb jelly drifts; a snail is a snail. */ .cycles .cy-bldg {--wc-dur:30s; --wc-rise:3px} /* the Empire State Building */ .cycles .cy-snail {--wc-dur:24s; --wc-rise:4px} /* slowest thing on the page */ .cycles .cy-jelly {--wc-dur:15s; --wc-rise:11px} /* the one thing that truly floats */ .cycles .cy-bird {--wc-dur:11s; --wc-rise:8px; --wc-rot:-8deg} .heap-mini .hm1{--wc-dur:19s; --wc-rise:7px; --wc-rot:-8deg} .heap-mini .hm2{--wc-dur:16s; --wc-rise:6px; --wc-rot:5deg} .heap-mini .hm3{--wc-dur:21s; --wc-rise:8px; --wc-rot:10deg} .heap-mini .hm5{--wc-dur:14s; --wc-rise:9px; --wc-rot:9deg} .contact-emb .ce-monarch{--wc-dur:18s; --wc-rise:6px} .contact-emb .ce-jelly {--wc-dur:13s; --wc-rise:10px} /* .page-emblem keeps the original emblemFloat — it genuinely needs the -50%. */ /* --------------------------------------------------------------------------- 5 · BLOOM AT SMALL SIZES A 7px halo around a 120px emblem does not read as damp paper, it reads as a sticker outline — the exact Canva look we are trying to get away from. The small ones get a wider, fainter bloom instead of a tight bright one. --------------------------------------------------------------------------- */ .heap-mini .hm, .cycles .cy, .contact-emb .ce{ filter: drop-shadow(0 0 14px rgba(224,187,131,.16)) drop-shadow(0 10px 24px rgba(0,0,0,.5)) !important} /* the Empire State Building keeps its desaturation — the city, drained of colour, among living things. The blanket rule above was overwriting it. */ .cycles .cy-bldg{ filter:grayscale(.4) drop-shadow(0 0 14px rgba(224,187,131,.16)) drop-shadow(0 10px 24px rgba(0,0,0,.5)) !important} /* ============================================================================ 6 · WHY THE PAPER TOOTH IS OFF ---------------------------------------------------------------------------- The tooth multiplies a grain over the whole of each form. That is the same operation that made the baked-in version look like a bad JPEG on the dark ground: mottling a photograph's luminance reads as "paper" against pale paper, and as "compression artefacts" against near-black soil. Since the site's default background is the soil, the tooth was working against us on most pages, most of the time. The wet edge — feather plus a darker, more saturated rim — is baked into each file, works identically on both grounds, costs nothing at runtime, and is the part the eye actually reads as watercolour. So that is all we ship. TO BRING IT BACK: set --wc-paper to about .35 above. Nothing else needs to change; every mask and selector is still in place. It is genuinely one line, so this is not a decision anyone is locked into. ============================================================================ */ /* ============================================================================ 7 · NIMBUS, NOT LINES ---------------------------------------------------------------------------- Decorative containers lose their hairline border and gain a soft warm glow instead, so they read as something settling out of the ground rather than as a box drawn on top of it. WHAT IS DELIBERATELY LEFT ALONE, AND WHY Buttons, chips, toggles, form fields and the accessibility control keep their borders. A visible edge is how someone knows a thing can be clicked and where its target ends; removing it makes the page prettier and materially harder to use, most of all for anyone with low vision. Focus rings are untouched for the same reason — they are the only way a keyboard user can see where they are. The compost heap's own torn-sheet cards are also left as they are, as requested. ============================================================================ */ .phase, .practice, .resonance, .gather-card{ border-color:transparent !important; background-image: radial-gradient(120% 100% at 50% 0%, rgba(198,146,86,.07), transparent 62%); box-shadow: 0 0 0 1px rgba(198,146,86,.07), 0 6px 34px -12px rgba(0,0,0,.55), 0 0 42px -18px rgba(224,187,131,.30)} .phase:hover, .gather-card:hover{ box-shadow: 0 0 0 1px rgba(198,146,86,.16), 0 8px 38px -12px rgba(0,0,0,.6), 0 0 52px -16px rgba(224,187,131,.42)} /* the small pill labels stop being outlined and start glowing */ .sph, .rtag{ border-color:transparent !important; box-shadow:0 0 0 1px rgba(198,146,86,.10), 0 0 14px -6px rgba(224,187,131,.5)} .rtag.curated, .rtag.response{box-shadow:none} /* these are filled; a glow would muddy them */ /* Warm bone: a warm glow on pale paper turns to fog, so the nimbus goes cool and tight and leans on a faint shadow instead. */ body.bg-warm .phase, body.bg-warm .practice, body.bg-warm .resonance, body.bg-warm .gather-card{ background-image:none; box-shadow:0 0 0 1px rgba(139,101,54,.13), 0 6px 22px -12px rgba(90,72,48,.42)} body.bg-warm .sph, body.bg-warm .rtag{box-shadow:0 0 0 1px rgba(139,101,54,.18)} /* High contrast asks for MORE definition, not less. Give the borders back. */ body.contrast-high .phase, body.contrast-high .practice, body.contrast-high .resonance, body.contrast-high .gather-card, body.contrast-high .sph, body.contrast-high .rtag{ border-color:currentColor !important;box-shadow:none;background-image:none} /* Soil mode: glows are compositing work it exists to shed. */ body.energy-low .phase, body.energy-low .practice, body.energy-low .resonance, body.energy-low .gather-card{background-image:none;box-shadow:0 0 0 1px rgba(198,146,86,.12)} /* ============================================================================ 8 · BLURRED BOUNDARIES — dividers, bands, and the emblems' clearance ============================================================================ */ /* --- the jump band on Field Guides -------------------------------------- Two problems, both now gone. It was full-bleed at z-index:40 with a backdrop blur, so it painted across the fixed emblem in the right margin; and its flat translucent panel with a hard top and bottom read as a pale glassy bar sliding past as you scrolled. The backdrop blur is removed entirely — it was the glassiness — and the panel is replaced by a wash that fades out on every side, so the band has no edge anywhere. Nothing in this page should have a straight edge. */ .wing-jump{ background:radial-gradient(120% 150% at 50% 50%, rgba(22,19,15,.62) 0%, rgba(22,19,15,.42) 55%, rgba(22,19,15,0) 100%) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); border-bottom-color:transparent !important; border-top-color:transparent !important} /* --- hairline dividers become fading rules with a faint halo -------------- Same idea as the line under the hero: a rule that arrives and departs rather than one drawn edge to edge. Uses background-image only, so any background COLOUR these elements carry is preserved, and no pseudo-element is claimed. */ .section-rule, .reading, .strand-head, .sg-inner, .suggest-inner, .propose-inner, .dreamer, .imfoot{ border-top-color:transparent !important; /* No straight lines. A single wide, very short ellipse fades in every direction at once — brightest at the middle, gone at both ends and above and below — so there is no crisp edge anywhere. An earlier attempt used a 1px line plus a 15px glow above it; the glow read as a bar drifting past on scroll, and the 1px line was still a drawn line. This is one soft mark. */ background-image: radial-gradient(ellipse 58% 2.5px at 50% 0%, rgba(198,146,86,.42) 0%, rgba(198,146,86,.16) 45%, rgba(198,146,86,0) 100%); background-size:100% 6px; background-position:top; background-repeat:no-repeat} .first{background-image:none !important} /* first in a run has no rule above it */ /* --- keep the page emblems clear of the reading column -------------------- The column is 760px plus padding and sits centred, so the emblem was being overlapped by cards and bands. Sizing it to the margin that actually exists means it is never covered, at any width — a smaller emblem fully visible beats a larger one two-thirds hidden. */ .page-emblem:not(.cycles):not(.contact-emb){ width:clamp(120px, calc((100vw - 830px)/2 - 12px), 330px) !important; right:10px !important; opacity:.88 !important} /* .cycles is NOT a single image — it is a container holding four absolutely positioned children at fixed offsets (the building sits at left:262px). Clamping its width shrank the box to ~213px at 1280px wide and pushed the Empire State Building clean outside it. That is why it kept vanishing. It keeps its full 420px and is SCALED as a whole instead, so the composition holds together. CSS cannot derive a unitless ratio from a length, so the steps are discrete — origin is the right edge, so it hugs the margin. */ .page-emblem.cycles{ width:420px !important; right:10px !important; opacity:.92 !important; transform-origin:100% 50%; transform:translateY(-50%) scale(1) !important} @media(max-width:1899px){.page-emblem.cycles{transform:translateY(-50%) scale(.88) !important}} @media(max-width:1599px){.page-emblem.cycles{transform:translateY(-50%) scale(.76) !important}} @media(max-width:1399px){.page-emblem.cycles{transform:translateY(-50%) scale(.64) !important}} @media(max-width:1259px){.page-emblem.cycles{transform:translateY(-50%) scale(.55) !important}} .privacy-beetle{ width:clamp(110px, calc((100vw - 830px)/2 - 12px), 280px) !important; right:10px !important} /* Warm bone: cool the halo, as everywhere else. */ body.bg-warm .wing-jump, body.bg-warm .section-rule, body.bg-warm .reading, body.bg-warm .strand-head, body.bg-warm .sg-inner, body.bg-warm .suggest-inner, body.bg-warm .propose-inner, body.bg-warm .dreamer, body.bg-warm .imfoot{ /* same soft ellipse on the light ground — cooler, and a touch tighter, since a warm bloom over pale paper reads as fog */ background-image: radial-gradient(ellipse 58% 2px at 50% 0%, rgba(139,101,54,.40) 0%, rgba(139,101,54,.14) 45%, rgba(139,101,54,0) 100%) !important; background-size:100% 5px !important;background-repeat:no-repeat !important; background-position:top !important} /* High contrast wants the definite line back. */ body.contrast-high .section-rule, body.contrast-high .reading, body.contrast-high .strand-head, body.contrast-high .sg-inner, body.contrast-high .suggest-inner, body.contrast-high .propose-inner, body.contrast-high .dreamer, body.contrast-high .imfoot{ border-top-color:currentColor !important;background-image:none !important} body.contrast-high .wing-jump{ -webkit-mask-image:none;mask-image:none;border-bottom-color:currentColor !important}