/* ============================================================ Human Labb: Bloom layer · v1.1 (burnt orange) Drop-in. Add after your existing stylesheet; overrides nothing. The aesthetic in one sentence: light arrives from off-canvas, in ONE hue, with no edge, and it never sits behind text. ============================================================ */ :root{ /* ---- BURNT ORANGE RAMP (canonical, matches humanlabb.com) ---- Named values first, channel triplets after so alpha can be composed. */ --burnt: #C56A1C; /* hsl(28,75%,44%) primary: echo b, accent word, bloom core */ --burnt-fill: #B46118; /* hsl(28,76%,40%) button fills: holds 4.5:1 with white */ --burnt-ink: #A45415; /* hsl(26,77%,36%) small text/links on light · 4.74:1 on bone */ --burnt-lift: #E9BC7C; /* hsl(35,71%,70%) the bloom's outer field */ --burnt-on-ink: #E08A34; /* hsl(31,74%,54%) the accent on dark grounds · 6.4:1 on ink */ --bloom-core: 197 106 28; /* #C56A1C: burnt orange */ --bloom-lift: 233 188 124; /* #E9BC7C: tint, the outer field */ --bloom-deep: 164 84 21; /* #A45415: shade, for small ink on light */ --bloom-chrome: 216 216 220; /* #D8D8DC: the cool bloom, dark sections only */ /* Default bloom geometry. Override per-section with the variants below, or inline with style="--bloom-x:20%" for one-offs. */ --bloom-x: 86%; /* origin: keep at or beyond an edge */ --bloom-y: 96%; --bloom-w: 72%; /* radius. Big. Small radii read as blobs, not light */ --bloom-h: 66%; --bloom-a: .55; /* master intensity */ --bloom-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27180%27%20height%3D%27180%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); } /* ------------------------------------------------------------ 1 · THE PRIMITIVE Add .has-bloom to any
. No extra markup needed. The negative inset is deliberate: the light crosses the section seam, which is what kills the "stacked flat bands" look. ------------------------------------------------------------ */ .has-bloom{ position: relative; z-index: 1; } .has-bloom > *{ position: relative; z-index: 1; } .has-bloom::before{ content:""; position:absolute; inset:-14% -6%; /* bleeds past the section edge on purpose */ z-index:0; pointer-events:none; background: radial-gradient( var(--bloom-w) var(--bloom-h) at var(--bloom-x) var(--bloom-y), rgb(var(--bloom-core) / calc(var(--bloom-a) * 1)) 0%, rgb(var(--bloom-lift) / calc(var(--bloom-a) * .72)) 30%, rgb(var(--bloom-lift) / calc(var(--bloom-a) * .34)) 52%, rgb(var(--bloom-lift) / 0) 76% ); } /* Clip the bleed when a section must stay inside its own box (e.g. it sits directly above the dark section). */ .has-bloom.bloom--contained{ overflow:hidden; } .has-bloom.bloom--contained::before{ inset:0; } /* ------------------------------------------------------------ 2 · VARIANTS, where the light comes from ------------------------------------------------------------ */ .bloom--dawn { --bloom-x:22%; --bloom-y:98%; } /* low left, warm */ .bloom--dusk { --bloom-x:86%; --bloom-y:6%; } /* high right */ .bloom--rise { --bloom-x:50%; --bloom-y:114%; --bloom-w:64%; --bloom-h:96%; } /* under the fold, rising */ .bloom--edge { --bloom-x:102%; --bloom-y:50%; --bloom-w:46%; --bloom-h:118%; } /* off the right edge */ .bloom--set { --bloom-x:-4%; --bloom-y:88%; --bloom-w:56%; --bloom-h:96%; } /* off the left edge */ .bloom--quiet { --bloom-a:.28; } .bloom--strong { --bloom-a:.78; } /* Cool bloom: the ONLY bloom allowed on the dark sections. Warm light on near-black turns muddy; chrome light stays clean. */ .bloom--cool{ --bloom-core: var(--bloom-chrome); --bloom-lift: 154 154 160; --bloom-a: .52; --bloom-w: 80%; --bloom-h: 78%; } /* Optional: a single warm ember at the very bottom of a cool bloom, so the dark sections still belong to the same world. */ .bloom--cool.bloom--ember::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 34% at var(--bloom-x) 106%, rgb(var(--bloom-core) / .26) 0%, rgb(197 106 28 / 0) 70%); } /* ------------------------------------------------------------ 3 · GRAIN: the thing that stops a gradient looking like CSS ------------------------------------------------------------ */ .grained{ position:relative; } .grained::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background-image:var(--bloom-grain); background-repeat:repeat; opacity:.055; mix-blend-mode:multiply; } .grained.grained--dk::after{ opacity:.05; mix-blend-mode:overlay; } /* .grained sets::after: don't combine with .bloom--ember on the same node */ /* ------------------------------------------------------------ 4 · BREATH: motion, optional, hero only 18s. If anyone can consciously see it moving, it's too fast. ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference){ .bloom--breathe::before{ animation: bloom-breathe 18s ease-in-out infinite alternate; will-change: transform, opacity; } } @keyframes bloom-breathe{ from{ transform: scale(1) translateY(0); opacity:.90; } to { transform: scale(1.07) translateY(-1.6%); opacity:1; } } /* ------------------------------------------------------------ 5 · SEAM SOFTENING Your bands currently meet at a hard line. This feathers the join so the eye reads one continuous surface with light moving across it. Put --seam-prev to the colour of the section ABOVE. ------------------------------------------------------------ */ .seam-soft{ background-image: linear-gradient(180deg, var(--seam-prev, transparent) 0%, transparent 10%); } /* ------------------------------------------------------------ 6 · SAFE TEXT ZONE Wrap copy that must sit near a bloom. Lifts the ground back under the text without drawing a visible panel. ------------------------------------------------------------ */ .on-clean{ position:relative; } .on-clean::before{ content:"";position:absolute;inset:-6% -8%;z-index:-1;pointer-events:none; background: radial-gradient(70% 80% at 30% 50%, rgb(var(--clean-rgb, 243 239 230) / .92) 0%, rgb(var(--clean-rgb, 243 239 230) / .55) 55%, rgb(var(--clean-rgb, 243 239 230) / 0) 82%); } /* ------------------------------------------------------------ 7 · SMALL PRINT - The wordmark NEVER sits on a bloom. Park it on clean ground. - Never more than one bloom per viewport height. - Never a second hue. If you want variety, move the light, don't tint it. - Contrast: --burnt is display-only on light grounds (3.36:1). Anything under ~18px uses --burnt-ink; button fills use --burnt-fill; on Ink the accent lifts to --burnt-on-ink. ------------------------------------------------------------ */