/* ============================================================ Clearmatter — DEEP · DESCENT (01) · exploration only Loaded by "Clearmatter Home - deep descent.html" alone, on top of styles.css + home.css + color-variants-v2.css (slot 2: greens + fuchsia). Six rooms, each darker than the one above, green leading: 1 white ........ hero — the last light landing 2 forest-deep ... who I am 3 grove ......... the approach — the pivot 4 plum .......... Life Coaching ┐ 5 pine .......... Leadership Coaching├ the triptych: one depth, three hues 6 ink ........... Consulting ┘ 7 deepwood ...... close + footer, the floor Fuchsia keeps its one job: filled action, and the hero's accent word. The motif never uses the accent — it draws in the muted, dusty relative of the room it sits in. ============================================================ */ html.dd{ --room-forest:#22563F;--room-plum:#5A2B47;--room-grove:#1A3D2E; --room-ink:#0A3540;--room-floor:#0B1D15; --room-life:#4A2239;--room-lead:#133024; /* lifted from #BC85A4 — that measured 4.45:1 on the Life ground, short of AA for the 12px label and 14px link. This is 5.4:1. */ --plumlight:#C994B2; /* small-size steps (round-3 contrast pass). 12px labels/eyebrows and 14px links take a lifted step of each room accent; display type keeps the base hue. Measured on each room ground: life #D6A9C1 6.6:1 (base #C994B2 5.3:1) lead #93C7AB 7.4:1 (base fern 6.2:1) ink #8FCDD8 8.0:1 (base #75BECA 6.2:1) */ --life-sm:#D6A9C1;--lead-sm:#93C7AB;--ink-sm:#8FCDD8; --inklight:#75BECA;--plumtint:#EEE0E7; /* muted motif strokes — one dusty step per room */ --m-light:#C3CFC6;--m-green:#8FA79A;--m-plum:#A2899A;--m-ink:#7E9DA6; /* body copy per room */ --on-forest:#C6D3CB;--on-plum:#DCCDD5;--on-ink:#BFD0D5;--on-floor:#C6D3CB; --on-life:#D9C6D0;--on-lead:#C2D2C8; } /* ── room 1 · hero, the last light landing ───────────────── */ .dd main,.dd .hero{background:var(--white)} .dd .hero__rings .rings path{stroke:var(--m-light)} .dd .hero__motif svg path{stroke:var(--m-light)} /* ── room 2 · who I am, on forest-deep ───────────────────── */ .dd .welcome{background:var(--room-forest)} .dd .welcome__h,.dd .welcome__greet{color:var(--linen)} .dd .welcome__name{color:var(--sage)} .dd .welcome__body p{color:var(--on-forest)} .dd .welcome__eye{color:var(--sage)} .dd .welcome__link{color:var(--sage)} .dd .welcome__link:hover{border-color:var(--sage)} .dd .welcome__photo{background:#1B4433} /* the portrait arrives on its own green ground — that IS the treatment, so it stays in colour; it is the room's one bright panel. */ .dd .welcome__avatar{border-color:rgba(242,242,240,.28)} .dd .welcome__waves{opacity:.62} .dd .welcome__waves svg path:nth-child(n){stroke:var(--m-green)} /* ── room 3 · the approach ──────────────────────────────── REVERTED to the live site: the inset rounded photo card exactly as home.css draws it — warm sepia-darkened photograph, linen copy, sage eyebrow — on the light ground it sits on live. Nothing here overrides it. Two alternatives stay reachable for a later look: ?beacon=grove the full-bleed grove duotone room ?beacon=greige the card with the duotone off, greige veil, dark copy */ .dd .beacon-room{background:var(--linen);display:flow-root} .dd .through__motif svg path{stroke:var(--m-green)} /* the duotone off: photograph in its own colour under a greige veil */ .dd[data-beacon="greige"] .beacon-room{background:var(--room-grove)} .dd[data-beacon="greige"] .beacon--full{background:var(--greige-deep,#9F9C93)} .dd[data-beacon="greige"] .beacon--full .beacon__img{filter:none;mix-blend-mode:normal;opacity:1} .dd[data-beacon="greige"] .beacon--full .beacon__scrim{ background: linear-gradient(90deg,rgba(188,186,180,.94) 0%,rgba(188,186,180,.86) 40%,rgba(188,186,180,.4) 74%,rgba(188,186,180,.06) 100%), linear-gradient(180deg,rgba(188,186,180,.2) 0%,rgba(188,186,180,.34) 60%,rgba(188,186,180,.6) 100%); } .dd[data-beacon="greige"] .beacon--full .through__quote, .dd[data-beacon="greige"] .beacon--full .through__quote span, .dd[data-beacon="greige"] .beacon--full .commit__t{color:var(--midnight)} .dd[data-beacon="greige"] .beacon--full .through__quote-2, .dd[data-beacon="greige"] .beacon--full .through__foot, .dd[data-beacon="greige"] .beacon--full .commit__b{color:var(--slate)} /* greige composites to ~#BAB8B2 under the copy column, where forest measures only 3.3:1 at 12px — so its small type takes grove (~5.6:1). */ .dd[data-beacon="greige"] .beacon--full .through__eye, .dd[data-beacon="greige"] .beacon--full .commit__no{color:var(--grove)} .dd[data-beacon="greige"] .beacon--full .commit{border-top-color:rgba(45,106,79,.24)} .dd[data-beacon="greige"] .beacon :focus-visible{outline-color:var(--forest)} /* the grove duotone room, as built — kept reachable while the full site is being judged (?beacon=grove) */ .dd[data-beacon="grove"] .beacon--full{margin:0;border-radius:0;background:var(--room-grove)} .dd[data-beacon="grove"] .beacon-room{background:var(--room-grove)} .dd[data-beacon="grove"] .beacon--full .beacon__img{ filter:grayscale(1) contrast(1.06) brightness(1.02); mix-blend-mode:luminosity;opacity:.42; } .dd[data-beacon="grove"] .beacon--full .beacon__scrim{ background: linear-gradient(90deg,rgba(9,26,19,.7) 0%,rgba(9,26,19,.5) 44%,rgba(9,26,19,.2) 76%,rgba(9,26,19,0) 100%), linear-gradient(180deg,rgba(9,26,19,.26) 0%,rgba(9,26,19,.4) 58%,rgba(9,26,19,.66) 100%); } .dd[data-beacon="grove"] .beacon--full .through__quote, .dd[data-beacon="grove"] .beacon--full .through__quote span, .dd[data-beacon="grove"] .beacon--full .commit__t{color:var(--linen)} .dd[data-beacon="grove"] .beacon--full .through__quote-2, .dd[data-beacon="grove"] .beacon--full .through__foot, .dd[data-beacon="grove"] .beacon--full .commit__b{color:var(--on-forest)} .dd[data-beacon="grove"] .beacon--full .through__eye, .dd[data-beacon="grove"] .beacon--full .commit__no{color:var(--sage)} .dd[data-beacon="grove"] .beacon--full .commit{border-top-color:rgba(168,201,181,.28)} .dd[data-beacon="grove"] .beacon :focus-visible{outline-color:var(--linen)} /* ── rooms 4-6 · the triptych, on the brand's neutral grounds ─ Per-service ground colours are gone. Hue-tinted rooms never looked like the brand at any luminance, so the three service rooms sit on white and linen, alternating for rhythm: Life white Leadership linen Consulting white Differentiation now travels on three things that were always meant to carry it: the room's LABEL, its own MOTIF ARCHETYPE, and green-family accents. Fuchsia keeps its single job: the filled CTA. */ .dd .svc--life{background:var(--white)} .dd .svc--leadership{background:var(--linen)} .dd .svc--consulting,.dd .svc--consulting .chalsec--tint,.dd .chalsec--tint{background:var(--white)} /* a hairline at each seam, since white and linen are one step apart */ .dd .svc--leadership,.dd .svc--consulting{border-top:1px solid rgba(10,10,9,.07)} /* Eyebrows (room label, "Common challenges", any .eyebrow) carry each room's assigned hue rather than one shared forest: Life plum, Leadership pine, Consulting ink. Dark steps, so they hold AA on white and linen alike. */ /* Room hue at mid-palette strength — the deep steps (#5A2B47 / #0A3540) read as near-black at headline size, so the title takes the palette tone itself and the eyebrow a lighter tint of it (each tint still ≥ 4.6:1 at 12px). */ .dd .svc--life{--room:#8E4270;--room-eye:#B57FA0} .dd .svc--leadership{--room:#2D6A4F;--room-eye:#68A184} /* the ink deep step reads near-black; this is the same hue at palette strength */ .dd .svc--consulting{--room:#1C7C90;--room-eye:#5CA8B7} /* Now that the headline carries the room hue, the eyebrow steps back: the same hue muted toward iron, so it reads as a label supporting the title rather than a second coloured voice. Mixed against iron-deep to hold AA at 12px. */ .dd .svc--life .svc__label,.dd .svc--life .svc__extra-eye,.dd .svc--life .eyebrow, .dd .svc--leadership .svc__label,.dd .svc--leadership .svc__extra-eye,.dd .svc--leadership .eyebrow, .dd .svc--consulting .svc__label,.dd .svc--consulting .svc__extra-eye,.dd .svc--consulting .eyebrow{color:var(--room-eye)} .dd .svc--life .svc__h,.dd .svc--leadership .svc__h,.dd .svc--consulting .svc__h{color:var(--room);font-weight:600} .dd .svc--life .chal__t,.dd .svc--leadership .chal__t,.dd .svc--consulting .chal__t{color:var(--midnight)} .dd .svc--life .svc__body p,.dd .svc--leadership .svc__body p,.dd .svc--consulting .svc__body p, .dd .svc--life .chal__panel p,.dd .svc--leadership .chal__panel p,.dd .svc--consulting .chal__panel p{color:var(--slate)} .dd .svc--life .link,.dd .svc--life .chal__link, .dd .svc--leadership .link,.dd .svc--leadership .chal__link, .dd .svc--consulting .link,.dd .svc--consulting .chal__link{color:var(--room)} .dd .svc--life .link:hover,.dd .svc--life .chal__link:hover, .dd .svc--leadership .link:hover,.dd .svc--leadership .chal__link:hover, .dd .svc--consulting .link:hover,.dd .svc--consulting .chal__link:hover{border-color:var(--room)} .dd .svc--life .chal,.dd .svc--life .chal__item, .dd .svc--leadership .chal,.dd .svc--leadership .chal__item, .dd .svc--consulting .chal,.dd .svc--consulting .chal__item{border-color:rgba(45,106,79,.22)} .dd .svc--life .chal__item.open .chal__t,.dd .svc--life .chal__head:hover .chal__t, .dd .svc--leadership .chal__item.open .chal__t,.dd .svc--leadership .chal__head:hover .chal__t, .dd .svc--consulting .chal__item.open .chal__t,.dd .svc--consulting .chal__head:hover .chal__t{color:var(--forest)} .dd .svc--life .chal__mark,.dd .svc--leadership .chal__mark,.dd .svc--consulting .chal__mark{ border-color:rgba(45,106,79,.45);color:var(--forest); } .dd .svc--life .chal__item.open .chal__mark, .dd .svc--leadership .chal__item.open .chal__mark, .dd .svc--consulting .chal__item.open .chal__mark{background:var(--forest);border-color:var(--forest);color:var(--linen)} .dd .svc--consulting .btn--ghost{border-color:var(--forest);color:var(--forest)} .dd .svc--consulting .btn--ghost:hover{background:var(--forest);color:var(--linen);border-color:var(--forest)} /* one archetype per room, each in the green family, hairline, behind the copy: Life Wave low band along the bottom Leadership Drift right-edge panel Consulting Align low band along the bottom (its canonical placement) Placement differs as well as form, so the rooms are told apart by shape rather than by colour. */ /* Room-hue strokes, graded across the stack so the band reads as several shades of one colour rather than a flat wash: Life plum, Consulting teal. */ .dd .svc--life .svc__waves svg path{stroke:#7A3C60} .dd .svc--life .svc__waves svg path:nth-of-type(3n+2){stroke:#A2678A} .dd .svc--life .svc__waves svg path:nth-of-type(3n+3){stroke:#57274A} .dd .svc--life .svc__waves{opacity:.2} .dd .svc--leadership .svc__panel svg path{stroke:var(--forest)} .dd .svc--leadership .svc__panel{opacity:.1} .dd .svc--consulting .svc__align svg path{stroke:#177A8C} .dd .svc--consulting .svc__align svg path:nth-of-type(3n+2){stroke:#3FA0B2} .dd .svc--consulting .svc__align svg path:nth-of-type(3n+3){stroke:#0C4E5D} /* The band is bottom-anchored and absolute, so shortening it drops the whole field lower without changing the room's height — it now clears the "Explore consulting" link instead of running behind it. */ .dd .svc--consulting .svc__align{opacity:.2;height:clamp(84px,9vw,120px)} .dd .svc--consulting .svc__waves svg path{stroke:#177A8C} .dd .svc--consulting .svc__waves svg path:nth-of-type(3n+2){stroke:#3FA0B2} .dd .svc--consulting .svc__waves svg path:nth-of-type(3n+3){stroke:#0C4E5D} /* ── room 7 · close + footer ─────────────────────────────── */ /* The close keeps the floor; the footer sits on grove, the same ground as the Field Notes email banner system, so the two read as one system. */ .dd .cta--photo{background:var(--room-floor)} .dd .cta--photo .cta__bg{ filter:grayscale(1) contrast(1.04); mix-blend-mode:luminosity;opacity:.42; } .dd .cta--photo .cta__scrim{ background: linear-gradient(90deg,rgba(6,16,11,.76) 0%,rgba(6,16,11,.52) 48%,rgba(6,16,11,.18) 82%,rgba(6,16,11,0) 100%), linear-gradient(180deg,rgba(6,16,11,.16) 0%,rgba(6,16,11,.52) 100%); } .dd .cta--photo .cta__title{color:var(--linen)} .dd .cta--photo .cta__lede{color:var(--on-floor)} /* the mark reads green again (home.css whitens it for the photo CTA) */ .dd .cta--photo .cta__mark{filter:none;opacity:1} .dd .cta__write{color:var(--sage);border-bottom-color:rgba(168,201,181,.4)} .dd .cta__write:hover{color:var(--linen);border-color:var(--linen)} /* the tagline's one featured appearance: linen, weight only — no accent on the floor */ .dd .signoff{border-top-color:rgba(125,185,154,.22)} .dd .signoff__line,.dd .signoff__line.b{color:var(--linen)} .dd .ftr{ background:var(--grove);box-shadow:0 100vh 0 100vh var(--grove); border-top:1px solid rgba(125,185,154,.14); } .dd .ftr__cta:hover,.dd .ftr__social-link:hover{background:var(--fern);color:var(--grove);border-color:var(--fern)} /* ── the three service rooms · motif ─────────────────────── Life and Consulting carry the wave, laid low and full-width along the bottom of the room and masked away before it reaches the copy — the brand graphic doing what it does on the live site, not a right-side texture panel. Leadership (the light band) keeps its right-edge Drift panel. The stroke is the room's dusty relative, never the accent. */ .dd .svc__waves{ top:auto;left:0;right:0;bottom:0;height:clamp(150px,18vw,250px);z-index:0; -webkit-mask-image:linear-gradient(to top,#000 0%,#000 22%,transparent 92%); mask-image:linear-gradient(to top,#000 0%,#000 22%,transparent 92%); } .dd .svc__waves svg{width:100%;height:100%;display:block} .dd .svc--life .svc__waves{opacity:.2} .dd .svc--consulting .svc__waves{opacity:.2} .dd .svc__panel{ top:0;right:0;bottom:0;left:auto;width:min(58%,820px);z-index:0; -webkit-mask-image:linear-gradient(to left,#000 0%,#000 42%,transparent 94%); mask-image:linear-gradient(to left,#000 0%,#000 42%,transparent 94%); } .dd .svc__panel svg{width:100%;height:100%;display:block} /* the light band's drift is forest on linen, so it needs a lighter hand */ .dd .svc--leadership .svc__panel{opacity:.1} /* Small type in the three rooms is forest on white/linen (5.6:1 and 5.4:1), the same pair the live site already holds. */ .dd .svc .svc__label{font-weight:550} /* ── the hero accent word ───────────────────────────────── Fuchsia keeps the word "begin" (round-3 decision, Aug 28). ?hero=green is the forest alternative that removes the nav-CTA / hero-button / word diagonal; ?hero=line is the whole-second-line option. */ .dd.ac[data-hero="green"] .hero__title .acw{color:var(--forest-deep,#22563F)} .dd.ac[data-hero="line"] .hero__title .b, .dd.ac[data-hero="line"] .hero__title .acw{color:var(--acc-txt);font-weight:400} .dd.ac[data-hero="line"] .hero__title .acw{font-weight:500} /* 8 · the Welcome portrait stays the 4:5 rectangle (round 3, decided): the circle fitted inside the column lost a third of its area, all vertical, and the green ground went from a panel to a ring. */ /* ── chrome · the scrolled header rides five dark rooms ─── */ /* Glass, carried over from the live site (rgba(linen,.86) + blur(14px)) into the dark palette. Sept 11 · CONTRAST FIX. This used to run two tint densities, .78 while a light section was under the bar and .58 once a dark room was, chosen by dd-chrome.js from a hard-coded list of LIGHT sections. Two failures came out of that: any section missing from the list was read as dark, so the thin .58 plate composited over white to a mid grey (#7A8B8C) that #D3DED8 nav text cleared at only 2.5:1; and even the dense .78 plate over pure white came to 4.43:1, under AA. A fixed bar travels over grounds an automated checker cannot see, so the plate can no longer depend on knowing what is underneath. One density now, .85, dark enough that the composite clears AA over the lightest ground on the site (white) and gets better from there: nav text 8.4:1 on white, 12.7:1 on midnight. The glass reads through the remaining 15% plus the blur and saturation. .on-dark survives as a nuance — it opens the blur and lifts the edge over a dark room — but no longer changes the tint, so the crossfade between the two states cannot pass through a failing value mid-transition. The inset hairline is the lit top edge; without it the panel reads as flat paint no matter how transparent it is. */ .dd .hdr.scrolled{ background:rgba(14,34,24,.85); -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:rgba(242,242,240,.1); box-shadow:inset 0 1px 0 rgba(242,242,240,.07); } .dd .hdr.scrolled.on-dark{ background:rgba(14,34,24,.85); -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6); border-bottom-color:rgba(242,242,240,.14); box-shadow:inset 0 1px 0 rgba(242,242,240,.1); } /* The ring inside the bar: forest is 1.3:1 on the plate. Linen is 9.9:1. */ .dd .hdr.scrolled :focus-visible,.dd .spy-bar :focus-visible{outline-color:var(--linen)} /* the scrolled wordmark swaps to the real light asset (see the page's script) */ .dd .hdr.scrolled .nav__link{color:#D3DED8} .dd .hdr.scrolled .nav__link:hover,.dd .hdr.scrolled .nav__link--active{color:var(--fern)} .dd .hdr.scrolled .nav__link::after{background:var(--fern)} .dd .hdr.scrolled .burger{color:var(--linen)} .dd .hdr.scrolled .nav__cta{color:var(--acc-on)} /* the spy bar reproduces the live treatment in the dark palette: translucent (not transparent) + the same blur, so room copy passing under it stays separated from the labels. Live is rgba(linen,.95) + blur(12px) — a step denser than the header above it, same relationship kept here (.88 to the header's .85). Raised from .74 on Sept 11 with the header: the fern active label was 3.1:1 on the old plate over a light ground, and the active label is the one thing in the bar that has to be read. */ .dd .spy-bar{ background:rgba(14,34,24,.88); -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid rgba(242,242,240,.1); } .dd .spy-bar__lead{color:var(--greige)} .dd .spy-bar__list a{color:#C6D3CB} .dd .spy-bar__list a:hover{color:var(--linen)} .dd .spy-bar__list a[aria-current]{color:var(--fern);border-bottom-color:var(--fern)} /* the sliding ink is the active indicator — a graphical object, so 3:1. Forest is 1.8:1 on the plate; fern is 5.1:1. The border above already uses fern. */ .dd .spy-bar__ink{background:var(--fern)} /* dead on Home by design: .chalsec--tint, .signoff__line and consulting's .btn--ghost have no nodes here — they carry the rooms into the subpage template (Coaching / Consulting) unchanged. focus ring stays visible on every new dark room */ .dd .welcome :focus-visible,.dd .beacon :focus-visible, .dd .cta--photo :focus-visible{outline-color:var(--linen)} .dd .svc--life :focus-visible,.dd .svc--leadership :focus-visible, .dd .svc--consulting :focus-visible{outline-color:var(--forest)}