/* henry_coolgray.css — SHARED cool-gray product-page conventions (single source of truth). ────────────────────────────────────────────────────────────────────────────────────── WHY THIS FILE EXISTS (owner-directed 2026-06-29, resandbox-products): Mode-B loads each page's mockup CSS verbatim as its OWN scoped sheet (product-.css), so the CROSS-PAGE conventions used to be COPIED into all 6 sheets (foil/suede/cotton/linen/silk/plastic) → a change had to be hand-rolled to all 6 and they drifted (the FAQ empty-

gap, the compare-link underline regression, the FAQ spacing inconsistency). This file holds those conventions ONCE. Change a convention HERE → every cool-gray page updates automatically. LOADING: appended to $_META in www/product.php for pages whose curated file sets 'cool_gray' => true, so it loads AFTER the per-page product-.css (header-v2.php echoes $_META after $page_css) → these conventions WIN over the mockup defaults, exactly as the per-page "tail" blocks did. A page that genuinely needs to DIFFER overrides with a higher-specificity rule in its own scoped sheet (the escape hatch). SCOPE: the conventions that are IDENTICAL across all cool-gray pages live here. The genuinely per-page-tuned bits stay in the scoped sheet (hero-thumb border on a dark vs light hero, the reviews-video grid-vs-main+side variant, silk's layer-visual). Those are "phase 2" extraction candidates — see ORCHESTRATION_ISSUES.md (2026-06-29). ────────────────────────────────────────────────────────────────────────────────────── */ /* ════ COOL-GRAY DE-BOLD STANDARD v2 (GOTCHAS #81) ════ Henry's mockups default most chrome/label/FAQ text to font-weight 900 (linen even sets h1,h2,h3:900). Normalize the LABEL/FAQ/chrome tier to a lighter register. Class names a page doesn't have are harmless no-ops, so this list is the UNION across all cool-gray pages — add a page's heavy selector here, never in a per-page sheet. HEADINGS 700 → 600 (owner-directed 2026-07-06), ⚠️ PREMISE EXPIRED 2026-08-14 — SEE BELOW. The reasoning: every mockup ships WITHOUT a web font (GOTCHAS #11), so Henry authors headings against a HELVETICA fallback that reads lighter than our real Montserrat at the same weight. 700 was the first correction; 600 finished it so live headings matched how mockups display. ✅ RESOLVED 2026-08-14 (owner-directed look-sweep): 600 → 700 under MANROPE. The number is measured, not restored from the mockup — and the distinction matters, because the mockup's own declared weight is NOT the target: HELVETICA CAPS AT BOLD. Measured at 40px — Helvetica 600/700/800/900 ALL render 604.6px, because there is no Helvetica 800 or 900 face. So every mockup's declared 800 or 900 has ALWAYS displayed to Henry as plain Bold. He has never seen an 800 in his own mockup. Against that real target, Manrope measures 600→597.4 · 700→606.8 · 800→616.3. So MANROPE 700 is the closest match to what the mockups actually show (0.4% off), 600 is slightly light, and "restoring the mockup's 800/900" would land FURTHER away than 600 was. ⚠️ Do not "restore this to the mockup's 900" on the reasoning that the mockup says 900 — that number has never been rendered by anything. Measure against Helvetica Bold instead. This governs EVERY cool-gray page (shared sheet loads last → wins over the per-page scoped `h1,h2,h3{font-weight:700}` duplicates, which are now stale-but-harmless cleanup debt). */ h1,h2,h3{font-weight:700} /* ════ SHARED BIG-HEADING NORMALIZATION (owner-directed 2026-07-06) ════ The sample-kit heading (.samples h2 — every variant) and the Worth-Knowing heading (.wk-head) now render at ONE consistent size on every cool-gray page — set ONCE here, not per page. Before: the sample heading inherited each page's own mockup h2 (46–66px, all different) and .wk-head was 28px. Now both are the 66px clamp (owner picked the large end). Specificity (0,1,1) + this sheet loads last, so it wins over the per-page `h2 clamp` and the per-page `.wk-head{28px}` copies (those copies are now stale-but-harmless cleanup debt). */ .samples h2,.worth-knowing .wk-head{font-size:clamp(34px,4.45vw,66px);line-height:1.04;letter-spacing:-.052em;max-width:none} /* Worth-Knowing CARD titles (owner 2026-07-06): the shared site pattern styled .wk-card-title at 18px — smaller than the mockups' h3. Match the mockup h3 size (clamp 22→30px), set once here so every Worth-Knowing page gets the larger card titles (weight stays 700 via the de-bold list). */ .worth-knowing .wk-card-title{font-size:clamp(22px,2vw,30px);line-height:1.12;letter-spacing:-.02em;font-weight:600} .finish-card h3{font-weight:600} .eyebrow,.foilsys-eyebrow{font-weight:800} .btn,.btn-hero,.btn-hero-ink,.sticky-cta-btn,.nav-cta,.subnav-cta,.hero-center .hero-cta-center .btn,.hero-center .hero-cta-center .btn-hero,.hero-center .hero-cta-center .btn-hero-ink{font-weight:700} .faq-grid summary,.faq-item summary,.faq-card summary,.faq-feature-card summary,.faq-all-wrap summary,#faq summary{font-weight:700} .pair-body .tag,.trust-card .num,.confidence-card .num,.fc-more,.chip,.layer-meta .chip,.spec,.decision-card .num,.origin-feature .year,.feature-card .num,.beat .num,.industry-card .num,.range-stmt-card .num,.feel-icon,.origin-ribbon,.guide-card .gl,.choice .label,.material-panel .caption,.mat-link,.text-link,.rating,.touch-note,.wk-card-cue,.wk-card-title,.worth-card .read-more,.answer-card strong,.hs-cell,.badge,.subnav-links,.hero-thumb .thumb-label,.hero-strip-inner,.sticky-subnav-inner,.foil-card .name,.linen-card .name,.linen-card .seal,.silk-card .name,th,.treatment-ladder span,.compare-head,.compare-row.compare-head>div,.compare-row:not(.compare-head)>div:first-child,.confidence-card .num,.why-card .icon,.finish-card .finish-num,.value-badge span,.value-badge strong,.usecase-tag,.material-preview-label,.material-option h3,.video-side-card,.quote-card p{font-weight:700} /* ════ /COOL-GRAY DE-BOLD STANDARD v2 ════ */ /* ════════════════════════════════════════════════════════════════════════════ COOL-GRAY FAQ — TWO universal rulesets, ONE per card STRUCTURE (GOTCHAS #82/#86) owner-directed 2026-06-29: "hub and flat FAQ should have their own rules that are universal for each." The cool-gray pages use TWO FAQ card structures; each gets its OWN single source of truth below, so a change to one can never break the other (no more universal-rule-with-:not()-exceptions). The answer is ALWAYS rendered

— NEVER

(admin answers are block HTML, #86). ════════════════════════════════════════════════════════════════════════════ */ /* ── SHARED (both structures) ──────────────────────────────────────────────── */ #faq details{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease} #faq details:hover{border-color:var(--blue);box-shadow:0 0 0 1px rgba(0,194,255,.30),0 12px 30px rgba(0,0,0,.08);transform:translateY(-2px)} /* cyan hover accent + lift */ #faq details:hover > summary{color:var(--blue-dark)} #faq details:hover > summary::after{color:var(--blue-dark)} #faq details .faq-a>p{margin:0;padding:0} /* admin answer HTML: tight inner

*/ #faq details .faq-a>p+p{margin-top:12px} /* gap between multi-paragraph answers */ #faq details .faq-a>p:empty{display:none} /* drop any empty leading

*/ #faq .faq-grid,#faq .faq-feature-grid{align-items:start} /* a collapsed card never stretches to an open sibling */ /* ── FLAT cards (plastic / foil / linen / silk) ──────────────────────────────── bare

/ .faq-card / .faq-item — NO native indicator, so WE own the summary layout: question left, +/- marker right. These mockups give the summary no padding, so the WHOLE Q↔A gap is the .faq-a margin below. */ /* FLAT card SKIN — UNIFIED (owner 2026-06-30): per-mockup these drifted to radius 14/18/20/22 + mixed border colors + card-vs-summary padding models. Card geometry is now single-source HERE → all 4 flat pages render identically; the dead per-page card rules in product-.css are overridden (shared loads after) and slated for removal (ORCH de-dup). NOTE: eyebrow color is NOT a FAQ property — it's Henry's page-level .eyebrow/.eyebrow.blue accent → left per-page. */ #faq details:not(.faq-feature-card){background:#fff;border:1px solid #e2e7ec;border-radius:18px;padding:22px 24px;box-shadow:0 10px 26px rgba(0,0,0,.035)} /* radius/border/pad now single-source; tune here */ #faq .faq-grid{display:grid;gap:16px} /* display:grid now single-source here (was per-page scoped) so inc/page/faq.php works on non-product pages too */ /* HEAD↔GRID gap, single-source here (2026-08-17). h1–h4 carry margin:0 + line-height 1.02 on this chassis, so the default faq.php head (.center) sat flush against the first card and a two-line title's descenders collided with it (design-help). sample-request had been carrying its own `.faq .faq-grid{margin-top:36px}` in sample-kit-cool.css — a page-scoped copy of component geometry that no sibling could find, which is exactly why design-help re-invented nothing and shipped at 0. Scoped to `.center +` so the OVERVIEW skin (head_class 'sec-head', spaced by henry_overview_v2.css) and the 'ind'/'app' variants are untouched by construction. */ #faq .center + .faq-grid{margin-top:36px} #faq details:not(.faq-feature-card) summary{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:0} /* card owns padding now → zero summary padding so linen's mockup 20px doesn't double up; SAFE — :not() never touches the bordered hub cards */ #faq details:not(.faq-feature-card) summary::after{content:"+";font-size:26px;font-weight:400;line-height:.85;color:var(--faq-marker,var(--gold));flex:0 0 auto;transition:color .18s ease} /* marker color is a per-page accent — a page sets --faq-marker (e.g. wood's cherry) in its :root; default gold */ #faq details:not(.faq-feature-card)[open] summary::after{content:"\2212"} #faq details:not(.faq-feature-card) .faq-a{margin-top:16px} /* ← FLAT Q↔A gap — owner-tunable (8 / 16 / 24) */ /* ── HUB cards (suede / cotton) — .faq-feature-card ──────────────────────────── These have a NATIVE ::before chevron + their own left-aligned summary layout + their own summary padding for breathing room, so we do NOT impose flex/marker (that centered the question + doubled the marker, owner 2026-06-29). The Q↔A gap here = the mockup's summary padding + the small .faq-a margin below (reads ~comfortable). */ #faq .faq-feature-card .faq-a{margin-top:8px;padding:0 20px 22px 46px} /* HUB Q↔A gap + the mockup's 46px answer indent (aligns the answer under the question past the chevron; the .faq-a>p reset above zeroes the inner

, so the indent must live on the wrapper — fixes cotton/suede answer-flush-left, owner 2026-07-01) */ /* ════ COOL-GRAY FAQ DIVISIONS (grouped FAQ, owner-directed 2026-07-06) ════ Inline topic-division headers, shown whenever a page's FAQ has categories (faq_load_grouped returns labeled groups). SHARED so every cool-gray page renders divisions consistently once groups are added — NO sidebar (the sidebar read as "linen"; owner wants the flat mockup look with divisions). A flat page with no categories renders one unlabeled group = plain flat. Group SPACING stays per-page (grouped-with-sidebar pages use their own container gap). */ #faq .faq-group-label{font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--muted,#6b7280);margin:0 0 14px} /* ════ /COOL-GRAY FAQ DIVISIONS ════ */ /* ════ /COOL-GRAY FAQ STANDARD ════ */ /* ════ Compare cross-links (D2 sibling-product links) — NO underline, cyan on hover ════ Covers both selector variants in use: #compare .compare-link (plastic/suede/…) and .compare-table .compare-link (foil). Re-authoring this rule from scratch is what re-introduced the underline (COMPONENT_REGISTRY: copy, don't re-author). */ #compare .compare-link,.compare-table .compare-link{color:var(--ink);text-decoration:none;transition:color .18s ease} #compare .compare-link:hover,#compare .compare-link:focus-visible,.compare-table .compare-link:hover,.compare-table .compare-link:focus-visible{color:var(--blue-dark)} /* ════ /Compare cross-links ════ */ /* ════ Shell page-menu chrome (lives in henry_product.css, which bespoke pages don't load) ════ */ .page-menu{position:fixed;top:84px;right:24px;z-index:70;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .24s ease,transform .24s ease} .page-menu.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)} .page-menu-toggle{position:relative;width:48px;height:48px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:var(--blue);color:var(--obsidian);cursor:pointer;box-shadow:0 14px 32px rgba(0,194,255,.32);transition:transform .22s ease} .page-menu-toggle:hover{transform:translateY(-2px)} .page-menu-toggle span{position:absolute;top:50%;left:50%;width:20px;height:2px;border-radius:99px;background:currentColor;transform:translate(-50%,-50%);transition:.2s ease} .page-menu-toggle span::before,.page-menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:99px;background:currentColor;transition:.2s ease} .page-menu-toggle span::before{top:-6px}.page-menu-toggle span::after{top:6px} .page-menu.is-open .page-menu-toggle span{background:transparent} .page-menu.is-open .page-menu-toggle span::before{top:0;transform:rotate(45deg)} .page-menu.is-open .page-menu-toggle span::after{top:0;transform:rotate(-45deg)} .page-menu-panel{display:none;position:absolute;top:calc(100% + 12px);right:0;width:min(300px,calc(100vw - 48px));background:rgba(20,24,29,.97);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 28px 70px rgba(0,0,0,.42);padding:12px;max-height:calc(100vh - 140px);overflow-y:auto} .page-menu.is-open .page-menu-panel{display:block} .page-menu-panel a{display:block;color:rgba(255,255,255,.82);font-size:13px;font-weight:800;padding:12px 14px;border-radius:10px;transition:background .18s ease,color .18s ease} .page-menu-panel a:hover{background:rgba(255,255,255,.08);color:var(--gold-light)} /* ════ /page-menu chrome ════ */ /* ════ Sticky-CTA tray chrome (component inc/page/sticky-cta.php) ════ */ /* HIDDEN state must be TRULY gone until scroll (owner 2026-06-30): opacity:0 hides pixels but NOT hit-testing, and the inner .sticky-cta sets pointer-events:auto — so the buttons were invisible BUT still clickable ("invisible buttons there"). visibility:hidden kills hit-testing on the whole subtree (overrides the inner pointer-events:auto) AND still allows the opacity fade (visibility flips stepwise at the transition's end). This is the fix, NOT bumping opacity. */ .sticky-cta-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);z-index:9999;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .26s ease, transform .26s ease, visibility .26s ease} .sticky-cta-wrap.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .sticky-cta{display:flex;align-items:center;gap:8px;padding:8px;border-radius:18px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.40);box-shadow:0 22px 64px rgba(0,0,0,.16);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);pointer-events:auto} .sticky-cta-btn{min-height:48px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-family:Manrope,Helvetica,Arial,sans-serif;font-size:13px;font-weight:900;text-decoration:none;white-space:nowrap;transition:transform .2s ease, background .2s ease, box-shadow .2s ease} .sticky-cta-primary{background:rgba(201,169,110,.5);border:1.5px solid #C9A96E;color:#0A0A0A;box-shadow:0 10px 24px rgba(201,169,110,.22)} .sticky-cta-secondary{background:rgba(201,169,110,.5);border:1.5px solid #C9A96E;color:#0A0A0A} .sticky-cta-btn:hover{transform:translateY(-2px);background:rgba(201,169,110,.72);border-color:#B8924E} @media (max-width:640px){.sticky-cta-wrap{left:16px;right:16px;bottom:16px;transform:translateY(14px)}.sticky-cta-wrap.is-visible{transform:translateY(0)}.sticky-cta{width:100%}.sticky-cta-btn{flex:1;padding:0 12px;font-size:12px}} /* ════ /Sticky-CTA tray chrome ════ */ /* ════ Hero CTA focus ring (centered own_hero) — identical across pages ════ */ .hero-center .hero-cta-center .btn-hero:focus-visible:not(:hover), .hero-center .hero-cta-center .btn-hero-ink:focus-visible:not(:hover){background:transparent;color:#fff;border-color:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(0,194,255,.45);transform:none} .hero-center .hero-cta-center .btn-hero-ink:focus-visible:not(:hover){color:#14181D;border-color:#14181D} /* ════ /Hero CTA focus ════ */ /* ── HERO VIDEO — INLINE PLAYER (page-photos, 2026-07-01; no-popup, owner-directed) ── The hero video plays IN-PLACE inside the hero stage (no lightbox popup). Fills the stage where the main image sat. Cool-gray pages load this sheet instead of henry_product.css, so the rule lives here (also mirrored in henry_product.css). */ .hero-inline-video { position: absolute; inset: 0; z-index: 2; background: #000; } .hero-inline-video video, .hero-inline-video iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } /* ════ COOL-GRAY PROOF GALLERY — real thumbnails + photo-needed markers (shared component, owner 2026-07-01) ════ Layout .proof-* stays in each scoped sheet (mockup-authored). These are the bits the shared inc/page/proof-gallery.php rebuilt markup adds: a REAL thumbnail (not an SVG icon), a video play overlay, and the OBVIOUS "photo needed" placeholder for an unfilled-but-content-bound slot (owner: slots can't be removed — each maps to a copy item). Team scaffolding (VISUAL-N label / PHOTO·VIDEO badge / SVG icon) is no longer emitted, so its scoped rules are inert. */ .proof-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .proof-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;pointer-events:none} .proof-thumb-play::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-left:2px} /* photo-needed = an OBVIOUS on-page directive to the photo team; vanishes by construction once src is filled */ .proof-thumb.is-needed{border:2px dashed rgba(232,201,154,.6)} .proof-thumb-needed{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#E8C99A;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;padding:4px} /* ════ COOL-GRAY PROOF GALLERY — base LAYOUT, consolidated 2026-07-02 (Phase 1 item 5) ════ Was byte-identical-minus-3-declarations across 5 scoped sheets (suede/cotton/die-cut/ raised-foil/raised-spot-uv) — moved here so a layout fix lands once. The one genuine per-mockup divergence (the .proof-main/.proof-thumb dark-gradient tone + the active-icon text color — suede/cotton authored a warmer #161B21, die-cut/raised-foil/raised-spot-uv a true-black #0b0b0b) is kept as two skin classes via proof-gallery.php's `skin` param (default 'warm') — share drift, not intent, same principle as the FAQ FLAT/HUB split. Dropped as dead: .proof-main-type/-label, .proof-thumb-mark/-tag + their :has() companions — proof-gallery.php stopped emitting those classes 2026-07-01 (team-scaffolding removal); they were unused CSS on all 5 pages. Also fixes a real bug on die-cut/raised-foil/ raised-spot-uv: those 3 never had the `.proof-main .proof-media{position:absolute;opacity:0}` + `.is-active{opacity:1}` cross-fade rule (only suede/cotton did), so their all-empty "photo needed" slots rendered stacked in normal flow instead of one-at-a-time in the box. */ .proof-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center} .proof-gallery{display:flex;flex-direction:column;gap:12px} .proof-main{min-height:380px;aspect-ratio:4/3;border-radius:28px;position:relative;overflow:hidden;box-shadow:var(--shadow)} .proof-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .proof-thumb{aspect-ratio:1;border-radius:14px;position:relative;cursor:pointer;border:2px solid transparent;transition:border-color .2s ease, transform .2s ease;outline:none;padding:0;font-family:inherit;overflow:hidden} .proof-thumb:hover{transform:translateY(-2px);border-color:rgba(0,194,255,.4)} .proof-thumb:focus-visible{border-color:var(--blue)} .proof-thumb.is-active{border-color:var(--blue)} .proof-thumb-num{position:absolute;top:8px;left:10px;font-size:11px;font-weight:800;color:rgba(255,255,255,.6);letter-spacing:.05em} .proof-list{display:grid;gap:10px;margin-top:28px} .proof-item{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:10px 12px;border-radius:14px;cursor:pointer;background:transparent;transition:background .15s ease;outline:none} .proof-item:hover{background:rgba(0,194,255,.04)} .proof-item:focus-visible{background:rgba(0,194,255,.06)} .proof-item.is-active{background:rgba(0,194,255,.06)} .proof-icon{width:44px;height:44px;border-radius:50%;background:var(--soft-blue);display:grid;place-items:center;font-weight:900;color:var(--blue-dark);transition:background .15s ease, color .15s ease} .proof-main .proof-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;opacity:0;transition:opacity .35s ease;pointer-events:none} .proof-main .proof-media.is-active{opacity:1} .proof-gallery--warm .proof-main{background:linear-gradient(135deg, rgba(0,0,0,.50), rgba(0,0,0,.15)), radial-gradient(circle at 65% 35%, rgba(232,201,154,.50), transparent 18%), linear-gradient(145deg, #161B21, #2E3640)} .proof-gallery--warm .proof-thumb{background:linear-gradient(135deg, rgba(0,0,0,.50), rgba(0,0,0,.15)), linear-gradient(145deg, #161B21, #272E37)} .proof-gallery--warm .proof-item.is-active .proof-icon{background:var(--blue);color:#14181D} .proof-gallery--true-black .proof-main{background:linear-gradient(135deg, rgba(0,0,0,.50), rgba(0,0,0,.15)), radial-gradient(circle at 65% 35%, rgba(232,201,154,.50), transparent 18%), linear-gradient(145deg, #0b0b0b, #323232)} .proof-gallery--true-black .proof-thumb{background:linear-gradient(135deg, rgba(0,0,0,.50), rgba(0,0,0,.15)), linear-gradient(145deg, #0b0b0b, #2a2a2a)} .proof-gallery--true-black .proof-item.is-active .proof-icon{background:var(--blue);color:#0A0A0A} @media (max-width:980px){.proof-layout{grid-template-columns:1fr}} /* ════ HERO GALLERY — shared component (inc/page/hero-gallery.php, extracted 2026-07-02) ════ Every scoped sheet already sizes `.hero-center .hero-thumb img` (identical rule, 6×); the shared component's video-thumbnail-accuracy fix adds a REAL first-frame