/* Cichocki Advisory — section ambient SYSTEM (metaphor layer) Ported from threadsync's sov-ambient-system, with three deliberate changes. 1) PALETTE. This site is crimson (#B23A4B / #C24D5E / #D06A76) and gold (#C9A15E / #D8BE86) on a slate-black ground. ThreadSync's blue+emerald must never appear here; the two sites share sovereignty-base.css, so a colour added there would change both. Everything below lives in this file alone. 2) SECTIONS, NOT THE HERO. The hero already carries art (the truss). What was flat was everything below it: ten sections all repeating the same radial-gradient. So the hook is a section attribute, not a hero class. 3) ONE PSEUDO-ELEMENT. Scrim, dimming wash, and artwork are three layers of a single ::before background stack rather than ::before + ::after. That leaves ::after free for whatever the site wants later, and it keeps the scrim and the artwork in one place where they cannot drift apart. METAPHOR CONTRACT — the point of the artwork is comprehension, not decor. Each image argues the section's claim to someone who has not yet decided they care: converging-joint three different members welded into one load-bearing joint = governance + software + evidence single-thread one gold thread drawn clear of a dark weave = start with ONE real workflow strata-record stacked layers, each edge separately readable = an operating model that leaves a record you can read back keystone the one stone that is holding the arch up = the decision that has to bear the load If the copy in a section changes so the metaphor no longer argues its claim, change the metaphor. A picture that no longer matches its paragraph is worse than no picture. ACCESSIBILITY CONTRACT — read before changing: contrast is a property of THIS CSS, never of the artwork. The dimming wash is a background layer, not element opacity — opacity would dim the scrim too and make text protection depend on how bright the image happened to be. The scrim is the topmost background layer and is applied at full strength. */ .sov-cichocki section[data-ambient]{ position:relative; isolation:isolate; /* DEFAULT SCRIM = copy sits in a LEFT column on every section below the hero, so the left half stays near-solid and the artwork is allowed to breathe on the right. This MUST be declared on the section, not on ::before. A custom property set in the ::before rule wins over the value inherited from the section, so a per-theme override (keystone's centred radial) would silently never apply -- it would still render, just with the wrong scrim. */ --amb-scrim: linear-gradient(180deg, rgba(10,11,15,.90) 0%, rgba(10,11,15,.78) 20%, rgba(10,11,15,.18) 40%, rgba(10,11,15,0) 56%), linear-gradient(90deg, rgba(10,11,15,.95) 0%, rgba(10,11,15,.88) 34%, rgba(10,11,15,.52) 58%, rgba(10,11,15,.10) 80%, rgba(10,11,15,0) 100%); } .sov-cichocki section[data-ambient]::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; /* topmost first: scrim, then dimming wash, then the artwork itself */ background-image: var(--amb-scrim), linear-gradient(0deg, rgba(10,11,15,var(--amb-wash,.62)), rgba(10,11,15,var(--amb-wash,.62))), var(--amb-src,none); background-size:cover,cover,cover,cover; background-position:center,center,center,var(--amb-pos,72% 50%); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; /* ── EDGE FADE — the house rule for section ambients ────────────────── Each ambient used to run at full strength to its own boundary, so two adjacent sections met in a hard horizontal seam. Mask the whole layer to transparent at the top and bottom so it dissolves into the page ground. The mask covers the ENTIRE composite — artwork, wash AND scrim — which is deliberate and safe: where the artwork fades out there is nothing left to protect text from, and what remains is the section's own near-black background. Masking the artwork alone would leave a scrim edge visible as a dark band, which is a different seam rather than no seam. Fixed px, not %: a percentage fade is proportional to section height, so a tall section would get a huge soft edge and a short one almost none. The seam is a fixed visual distance, so the remedy is too. */ --amb-fade:150px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--amb-fade), #000 calc(100% - var(--amb-fade)), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 var(--amb-fade), #000 calc(100% - var(--amb-fade)), transparent 100%); } /* The closing CTA is the last band before the footer; a bottom fade there just makes it look unfinished, so it fades in at the top only. */ .sov-cichocki section[data-ambient="keystone"]::before{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--amb-fade), #000 100%); mask-image:linear-gradient(180deg, transparent 0, #000 var(--amb-fade), #000 100%); } /* Content must sit above the artwork. .sov-wrap is the section's inner container on every section of this page. */ .sov-cichocki section[data-ambient] > .sov-wrap{ position:relative; z-index:1; } /* Cards keep their own ground so body copy never lands directly on artwork. */ .sov-cichocki section[data-ambient] .sov-card{ position:relative; z-index:1; } /* ── themes ───────────────────────────────────────────────────────────── Adding a fifth metaphor is four lines here plus two image files — not a new stylesheet and not a new cache entry. */ /* governance + software + evidence, welded into one joint. Sparse frame (58% near-black), so it needs less dimming than the others. */ .sov-cichocki section[data-ambient="converging-joint"]{ --amb-src:url("/assets/img/amb-converging-joint-v2-1600w.webp"); --amb-wash:.46; --amb-pos:70% 44%; } /* one workflow, drawn clear of the weave. */ .sov-cichocki section[data-ambient="single-thread"]{ --amb-src:url("/assets/img/amb-single-thread-v2-1600w.webp"); --amb-wash:.50; --amb-pos:62% 50%; } /* the record, in readable layers. Bright edge-to-edge (mean luminance 36 of 255 against ~24 for the others), so it carries a markedly heavier wash — the same wash that suits the sparse frames would wash this section out. */ .sov-cichocki section[data-ambient="strata-record"]{ --amb-src:url("/assets/img/amb-strata-record-v2-1600w.webp"); --amb-wash:.62; --amb-pos:58% 50%; } /* the decision that bears the load. Closing section, copy is CENTRED, so the left-column scrim would protect the wrong part of the frame. */ .sov-cichocki section[data-ambient="keystone"]{ --amb-src:url("/assets/img/amb-keystone-v2-1600w.webp"); --amb-wash:.44; --amb-pos:56% 40%; --amb-scrim:radial-gradient(112% 92% at 50% 48%, rgba(10,11,15,.90) 0%, rgba(10,11,15,.78) 42%, rgba(10,11,15,.40) 74%, rgba(10,11,15,.08) 100%); } /* ── narrow viewports ─────────────────────────────────────────────────── Stacked layout puts copy across the FULL width, so a left-to-right scrim protects nothing. Switch to a vertical scrim and serve the 700w files. */ @media (max-width:820px){ .sov-cichocki section[data-ambient]{ /* on the section for the same cascade reason as the default above */ --amb-scrim:linear-gradient(180deg, rgba(10,11,15,.94) 0%, rgba(10,11,15,.88) 50%, rgba(10,11,15,.94) 100%); } .sov-cichocki section[data-ambient]::before{ background-position:center,center,center,50% 50%; } .sov-cichocki section[data-ambient="converging-joint"]{--amb-src:url("/assets/img/amb-converging-joint-v2-700w.webp")} .sov-cichocki section[data-ambient="single-thread"] {--amb-src:url("/assets/img/amb-single-thread-v2-700w.webp")} .sov-cichocki section[data-ambient="strata-record"] {--amb-src:url("/assets/img/amb-strata-record-v2-700w.webp")} .sov-cichocki section[data-ambient="keystone"] {--amb-src:url("/assets/img/amb-keystone-v2-700w.webp")} } /* ── stated preferences win over art direction ────────────────────────── Both of these drop the artwork entirely rather than dimming it further: a high-contrast or reduced-transparency reader has asked for a plain ground, and a very dark photograph is still a photograph. */ @media (prefers-contrast:more){ .sov-cichocki section[data-ambient]::before{ background-image:linear-gradient(0deg,#0A0B0F,#0A0B0F); } } @media (prefers-reduced-transparency:reduce){ .sov-cichocki section[data-ambient]::before{ background-image:linear-gradient(0deg,#0A0B0F,#0A0B0F); } } /* Print: artwork is ink with no informational content. */ @media print{ .sov-cichocki section[data-ambient]::before{display:none} } /* ── SECTION DIVIDER — soften the hairline where an ambient fades ───────── The site draws a 1px full-bleed rule between sections (border-top: rgba(232,234,240,.09)). That is fine between flat sections, but against an ambient that now dissolves at its edges the hard rule is the remaining seam — the artwork goes soft and the line stays sharp. So on ambient sections only: drop the border and redraw it as a rule that fades out at both ends, matching the softness of the artwork above and below. This uses ::after, which the ambient system deliberately left free — the scrim, wash and artwork were all packed into ::before precisely so a later need like this one would have somewhere to go. */ .sov-cichocki section[data-ambient]{ border-top:0 !important; } .sov-cichocki section[data-ambient]::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:0; pointer-events:none; background:linear-gradient(90deg, rgba(232,234,240,0) 0%, rgba(232,234,240,.10) 24%, rgba(232,234,240,.10) 76%, rgba(232,234,240,0) 100%); } /* The first ambient section follows the hero, which needs no rule at all. */ .sov-cichocki section[data-ambient="converging-joint"]::after{display:none}