/* ============================================================ Clearmatter — HUE SKIN for the original side-page designs Loaded after styles.css + subpage.css (and about.css / connect.css where those pages use them). Inert without data-room on . The page designs are the ORIGINAL ones — subhero, focus blocks with icons, the challenges accordion with its deep links, the numbered process, the approach grid, the photo close. This file only changes the COLOUR SYSTEM over them, plus two structural moves the direction called for (the focus photo becomes a container, the challenges band becomes a flood). Standing rules encoded here: · side pages are daylight: white and linen alternating, long-form copy always on light · one hue per page (data-room); hues are threads and moments, never grounds — details, the flood, tinted photos · heroes are white on every page, the motif carrying the hue · fuchsia keeps its single job (CTA buttons); plum and teal never on one · every hue detail measured against its own ground, AA minimum ============================================================ */ /* ── the hues ─────────────────────────────────────────────── --h flood · --h-det details on light · --h-sm small type on the flood --h-body reading copy on the flood · --h-line motif stroke on light --h-wash the process tint · --h-rule hairlines on light */ [data-room]{ --h:#1A3D2E;--h-det:#2D6A4F;--h-sm:#93C7AB;--h-body:#C6D3CB; --h-line:#7DB99A;--h-wash:#EEF3F0;--h-rule:rgba(45,106,79,.22); --h-flood-rule:rgba(147,199,171,.28); } /* plum · #8C2B57 8.0:1 on white, 7.6:1 on linen · #D6A9C1 6.6:1 on the flood */ [data-room="life"]{ --h:#4A2239;--h-det:#8C2B57;--h-sm:#D6A9C1;--h-body:#D9C6D0; --h-line:#C08FAB;--h-wash:#F7EFF3;--h-rule:rgba(140,43,87,.2); --h-flood-rule:rgba(214,169,193,.28); } /* pine · forest #2D6A4F 6.5:1 on white, 6.2:1 on linen · #93C7AB 7.4:1 on flood */ [data-room="leadership"]{ --h:#133024;--h-det:#2D6A4F;--h-sm:#93C7AB;--h-body:#C2D2C8; --h-line:#7DB99A;--h-wash:#EEF3F0;--h-rule:rgba(45,106,79,.22); --h-flood-rule:rgba(147,199,171,.28); } /* ink · #145C6B 6.2:1 on white, 5.9:1 on linen · #8FCDD8 8.0:1 on flood */ [data-room="consulting"]{ --h:#0A3540;--h-det:#145C6B;--h-sm:#8FCDD8;--h-body:#BFD0D5; --h-line:#5FA5B4;--h-wash:#EDF3F5;--h-rule:rgba(20,92,107,.2); --h-flood-rule:rgba(143,205,216,.28); } /* ── hero · white on every page ──────────────────────────── */ [data-room] .subhero{background:var(--white)} [data-room] .subhero__sub,[data-room] .subhero__eye{color:var(--h-det)} /* the motif carries the hue — every stroked shape the generators emit */ [data-room] .subhero__motif svg path,[data-room] .subhero__motif svg line, [data-room] .subhero__motif svg circle,[data-room] .subhero__motif svg ellipse, [data-room] .subhero__motif svg polyline{stroke:var(--h-line)} [data-room] .hero-seam__rule{background:var(--h-det)!important} /* the hero's action is a text link, not a second button (the header carries the page's one filled CTA) — so it takes the page's detail colour */ [data-room] .subhero .link,[data-room] .subhero .hero__more{color:var(--h-det)} [data-room] .subhero .link:hover,[data-room] .subhero .hero__more:hover{border-color:var(--h-det)} /* ── focus band · white, details in the hue ─────────────── */ [data-room] .focus{background:var(--white)} [data-room] .focus__eye,[data-room] .focus__icon{color:var(--h-det)} [data-room] .focus__head-sub{color:var(--h-det)} [data-room] .focus__close--consulting p{color:var(--h-det)} [data-room] .focus .link{color:var(--h-det)} [data-room] .focus .link:hover{border-color:var(--h-det)} /* the focus photograph as a full-bleed band — greyscale, tinted toward the hue, so the photo behind the focus areas belongs to the page like every other container photo does. Brightness: the scrim in subpage.css was tuned against the old sepia(.12)/brightness(.85) filter. Greyscale at .88 lightened the leaf gaps sitting behind the three copy columns and dropped 16px .focus__b to ~3.4:1, so the band runs at .68 — measured back above 5:1 with the scrim untouched. The plum overlay cannot help here: mix-blend-mode:color keeps the backdrop's luma, so it recolours without darkening. */ [data-room] .focus--photo .focus-band__img{filter:grayscale(1) contrast(1.05) brightness(.68)} [data-room] .focus--photo::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:var(--h);mix-blend-mode:color;opacity:.42; } [data-room] .focus--photo .focus__eye, [data-room] .focus--photo .focus__icon, [data-room] .focus--photo .focus__head-sub{color:var(--h-sm)} [data-room] .focus--photo .focus__close--consulting p{color:var(--linen)} /* the focus photograph as an inset container (Field Notes teaser uses this) */ .focus__photo{margin:clamp(44px,5.4vw,72px) 0 0} .focus__photo-box{ position:relative;overflow:hidden;border-radius:6px;background:var(--linen); aspect-ratio:16/7; } .focus__photo-box img{ display:block;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(1.02); } .focus__photo-box::after{ content:"";position:absolute;inset:0;background:var(--h); mix-blend-mode:color;opacity:.3;pointer-events:none; } .focus__photo-cap{ display:block;margin-top:12px;font-family:var(--mono);font-size:12px; letter-spacing:.02em;color:var(--iron); } /* ── the flood · the page's one saturated moment ────────── Replaces the old grove / fern-tint accordion grounds. Short-form only. */ [data-room] .chalsec--flood{background:var(--h);color:var(--linen)} [data-room] .chalsec--flood .eyebrow{color:var(--h-sm)} [data-room] .chalsec--flood .svc__drift{color:var(--h-sm);opacity:.16} [data-room] .chalsec--flood .svc__drift svg path{stroke:currentColor} [data-room] .chalsec--flood .chal, [data-room] .chalsec--flood .chal__item{border-color:var(--h-flood-rule)} [data-room] .chalsec--flood .chal__t{color:var(--linen)} [data-room] .chalsec--flood .chal__item.open .chal__t, [data-room] .chalsec--flood .chal__head:hover .chal__t{color:var(--h-sm)} [data-room] .chalsec--flood .chal__mark{border-color:var(--h-flood-rule);color:var(--h-sm)} [data-room] .chalsec--flood .chal__item.open .chal__mark{ background:var(--h-sm);border-color:var(--h-sm);color:var(--h); } [data-room] .chalsec--flood .chal__panel p{color:var(--h-body)} [data-room] .chalsec--flood .chal__link{color:var(--h-sm)} [data-room] .chalsec--flood .chal__link:hover{border-color:var(--h-sm)} [data-room] .chalsec--flood .chalsec__cta p{color:var(--h-body)} [data-room] .chalsec--flood :focus-visible{outline-color:var(--linen)} /* ── process · the page tint, or the live lighter band ───── ?process=band restores the live linen treatment for comparison. */ [data-room] .process--tint{background:var(--h-wash)} [data-room] .process--tint .process__no{color:var(--h-det)} [data-room][data-process="band"] .process--tint{background:var(--linen)} [data-room][data-process="band"] .process--tint .process__no{color:var(--forest)} /* ── approach · white, hue only in the details ───────────── */ [data-room] .approach{background:var(--white)} [data-room] .approach .eyebrow{color:var(--h-det)} /* ── the close · photo + scrim, one fuchsia button ───────── */ [data-room] .close-cta__motif{color:var(--h-line)} [data-room] .close-cta__motif svg path{stroke:currentColor} /* ── Field Notes teaser (Life page) ─────────────────────── */ [data-room] .wa__eye{color:var(--h-det)} [data-room] .wa__list li::before{background:var(--h-det)} [data-room] .fn-feed__more,[data-room] .fieldnotes__soon a{color:var(--h-det)} .fn-teaser{background:var(--linen);padding-block:clamp(64px,10vw,120px);border-block:1px solid rgba(10,10,9,.06)} .fn-teaser__head{max-width:760px;margin-bottom:clamp(32px,4.4vw,52px)} .fn-teaser__h{font-size:clamp(30px,3.8vw,46px);line-height:1.06;letter-spacing:-.012em;color:var(--midnight);margin:14px 0 0} .fn-teaser__sub{font-size:clamp(17px,1.5vw,19px);line-height:1.66;color:var(--slate);margin:18px 0 0;max-width:62ch} .fn-teaser__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,30px)} .fn-teaser__c{ display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--h-rule); padding-top:20px;transition:border-color .35s var(--ease); } .fn-teaser__c:hover{border-color:var(--h-det)} .fn-teaser__c--lead{grid-column:span 2} .fn-teaser__k{font-family:var(--sans);font-size:12px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--h-det)} .fn-teaser__t{font-size:clamp(20px,1.8vw,25px);line-height:1.18;color:var(--midnight);margin:0} .fn-teaser__c--lead .fn-teaser__t{font-size:clamp(26px,2.6vw,34px)} .fn-teaser__c p{font-size:15px;line-height:1.7;color:var(--slate);margin:0} .fn-teaser__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:clamp(30px,3.2vw,42px)} .fn-teaser__foot .link{color:var(--h-det)} .fn-teaser__foot .link:hover{border-color:var(--h-det)} .fn-teaser__sub-link{ display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500; letter-spacing:.01em;color:var(--h-det);border-bottom:1px solid var(--h-rule); padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease); } .fn-teaser__sub-link:hover{color:var(--midnight);border-color:var(--midnight)} @media (max-width:820px){ .fn-teaser__grid{grid-template-columns:1fr} .fn-teaser__c--lead{grid-column:auto} } /* ── About + Work with me · green family, light throughout ── */ [data-room] .abt-hero,[data-room] .cn-hero{background:var(--white)} [data-room] .abt-hero .eyebrow,[data-room] .cn-hero .eyebrow{color:var(--h-det)} [data-room] .cn-ramp,[data-room] .cn-closer{background:var(--linen)} /* ── the narrow-width copy wash follows the hero's ground ── subpage.css paints a wash behind the hero copy below 980px so the right-anchored motif does not run under the text. It is authored in LINEN, for v1's linen hero — on these pages the hero is WHITE, so that wash read as a linen block under a white strip at phone width (the header looked like a white bar sitting on a linen hero). Same gradient, the room's ground. */ [data-room] .subhero__inner::before{ background:linear-gradient(90deg,#FFF 0%,#FFF 58%,rgba(255,255,255,.85) 74%,rgba(255,255,255,0) 100%)} @media (max-width:560px){ [data-room] .subhero__inner::before{ background:linear-gradient(90deg,#FFF 0%,#FFF 64%,rgba(255,255,255,.85) 80%,rgba(255,255,255,0) 100%)} }