/* GENERATED shared stylesheet for the 11 group hub pages. Do not hand-edit generated sections; edit tools/generator/skins/guides-hub-fresh-lens.js and re-sync. */ :root{ --ground:#F6F7F4; --surface:#FFFFFF; --ink:#1B231D; --growth:#2F6B4F; --harvest:#B8853A; --line:#DCD9D0; --font-display:"Bricolage Grotesque",system-ui,sans-serif; --font-body:"Hanken Grotesk",system-ui,sans-serif; --font-mono:"IBM Plex Mono",monospace; --step--1:0.75rem; --step-0:1rem; --step-1:1.333rem; --step-2:1.777rem; --step-3:2.369rem; --step-4:3.157rem; --step-5:4.209rem; --sp-1:0.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:2.5rem; --sp-6:3rem; --sp-8:4rem; --sp-10:5rem; --radius-s:6px; --radius-m:10px; --maxw:1160px; --ease:cubic-bezier(.22,.61,.36,1); --cluster-accent:var(--harvest); }@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700&family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"); *{box-sizing:border-box} html{font-size:18px;-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.65;font-size:var(--step-0);-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3{font-family:var(--font-display);font-weight:700;color:var(--ink);line-height:1.12;margin:0} p{margin:0} a{color:var(--growth);text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--growth);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)} /* BANDS: stone -> white -> stone -> white -> stone -> ink -> stone */ .band{padding:var(--sp-10) 0} .band-stone{background:var(--ground)} .band-white{background:var(--surface)} .band-ink{background:var(--ink);color:var(--ground)} .band-ink h1,.band-ink h2,.band-ink h3{color:var(--ground)} .band-ink a{color:var(--harvest)} .band+.band{border-top:1px solid var(--line)} .band-ink+.band,.band+.band-ink{border-top-color:var(--ink)} /* BUTTONS: filled ink on light bands, filled ground on the dark band -- same component, palette swapped so the two "act now" moments visually rhyme. */ .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;font-size:var(--step-0);padding:0.75em 1.6em;border-radius:var(--radius-m);min-height:46px;cursor:pointer;text-decoration:none;transition:transform .18s var(--ease),opacity .18s} .btn-primary{background:var(--ink);color:var(--ground);border:1px solid var(--ink)} .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn-ghost:hover{opacity:.7} .band-ink .btn-primary{background:var(--ground);color:var(--ink);border-color:var(--ground)} .band-ink .btn-ghost{color:var(--ground);border-color:var(--ground)} .cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5);align-items:center} /* Mobile CTA pair: a shrink-wrapped flex-wrap reads as an accidental overflow stack on narrow phones (2 buttons of uneven width, second one left-aligned under the first). Make the two-CTA pattern deliberate instead: full-width, equal-width, stacked with consistent rhythm -- reads as a designed mobile CTA block, not a wrap accident. Shared across every page kind (homepage + how-it-works both use .cta-row from this one module). */ @media(max-width:600px){ .cta-row{flex-direction:column;align-items:stretch;gap:var(--sp-2)} .cta-row .btn{width:100%} } @media(prefers-reduced-motion:reduce){.btn-primary:hover{transform:none}} /* SECTION TAGS: mono chrome labels, CSS content only (never text nodes). Each page kind declares its own .tag-::after rule alongside its sections; only the shared .tag base styling lives here. */ .tag{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--harvest);margin:0 0 var(--sp-4);display:block} /* NUMBERED CAPABILITY GRID: a 3-item counter-numbered set (title + body), hairline-top-rule per column, no icons/cards. First shape: homepage's "what living means" triad; reused verbatim by how-it-works' "monthly". */ .caps{display:grid;gap:var(--sp-5);counter-reset:capnum} @media(min-width:720px){.caps{grid-template-columns:repeat(3,1fr)}} .cap{counter-increment:capnum;border-top:1px solid var(--line);padding-top:var(--sp-3)} .cap::before{content:"0" counter(capnum);display:block;font-family:var(--font-display);font-weight:700;color:var(--harvest);font-size:var(--step-3);line-height:1;letter-spacing:0;margin-bottom:var(--sp-2);opacity:.92} .cap-title{font-family:var(--font-display);font-weight:600;font-size:var(--step-0);display:block;margin-bottom:var(--sp-2)} .cap p{color:#3E4A40;font-size:.94rem;line-height:1.65} /* CAP--GLYPH MODIFIER: opts a .cap item out of the counter-numeral device (above) in favor of a small decorative line-glyph -- used where a page already has a numbered-feeling section elsewhere and a second one on the same page needs a visually distinct device (design spec's "match the device to content, never repeat the same device twice on one page"). */ .cap--glyph::before{content:none} .cap-glyph{display:block;width:26px;height:26px;margin-bottom:var(--sp-2)} .cap-glyph path,.cap-glyph circle{fill:none;stroke-linecap:round;stroke-linejoin:round} /* FAQ ACCORDION: flat list, hairline dividers, "+" rotates to "x" on open. */ .faq{border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line)} .qa summary{cursor:pointer;list-style:none;padding:var(--sp-3) 0;font-family:var(--font-display);font-weight:500;font-size:var(--step-0);color:var(--ink);display:flex;align-items:center;gap:var(--sp-3)} .qa-glyph{flex:none;width:18px;height:18px} .qa-glyph path{fill:none;stroke:var(--growth);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .qa-title{flex:1} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";font-family:var(--font-display);font-size:1.3em;line-height:1;color:var(--harvest);transition:transform .2s var(--ease);margin-left:auto} .qa[open] summary::after{transform:rotate(45deg)} .qa p{color:#3E4A40;font-size:var(--step-0);line-height:1.7;padding:0 0 var(--sp-3)} /* FOOTER COLOPHON: brand + location + honesty disclosure, the line every Fresh Lens page kind emits directly above the canonical siteFooter(). */ .foot-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:baseline} .foot-brand{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:var(--step-0)} .band-ink .foot-brand{color:var(--ground)} .foot-loc{font-family:var(--font-mono);font-size:var(--step--1);color:#5B6A5F;letter-spacing:.04em} .honesty{width:100%;margin-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--step--1);color:#5B6A5F;letter-spacing:.04em} /* SECTION PHOTO: a generated, Niagara-grounded, purely illustrative image -- NEVER placed near a sourced/dated claim (see design spec's hard constraint). Rendered as a CSS background-image on an aria-hidden div, never an IMG element with a src attribute, so the spine-invariant fingerprint gate's src=/href= URL scan sees nothing new to compare against the neutral skin (confirmed by reading tools/generator/spine-fingerprint.js's extractUrls()). */ /* SCROLL MOTION (R11 Fresh Lens, 2026-07-08): reveal-on-enter baseline + band color-morph + ambient heartbeat. Wiring: public/fresh-lens-motion.js (imported via each skin's bodyScript -- this file's sibling, tools/generator/skins/fresh-lens-motion.js's FRESH_LENS_MOTION_JS bootstrap string). Progressive-enhancement safe: these rules only take effect once JS adds .js-motion to -- content is fully visible in plain CSS if JS never runs. Design: docs/superpowers/specs/2026-07-08-fresh-lens- scroll-motion-design.md */ .js-motion [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .55s ease-out,transform .55s ease-out;transition-delay:0ms} .js-motion [data-reveal].is-revealed{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} } /* Band color-morph: only ever active on a real color-change boundary (JS sets data-morph + --band-from/--band-to only there). Same-color adjacent bands are untouched. Mid-transition text-contrast dip is a known, accepted, self-correcting trade-off (the incoming band's own text color is fixed by its class for the whole transition) -- tune the zone in bandMorphProgress if it reads as a problem once seen scrolling for real. */ /* Ambient heartbeat: pure decorative motif, no real data -- never wire this to a live count/rate (anti-fabrication rule, spec-binding). */ .heartbeat-dot{position:fixed;right:var(--sp-3);bottom:var(--sp-3);width:8px;height:8px;border-radius:50%;background:var(--growth);z-index:40;pointer-events:none;animation:heartbeat 2.4s ease-in-out infinite} @keyframes heartbeat{0%{transform:scale(.7);opacity:.55}50%{transform:scale(1);opacity:1}100%{transform:scale(.7);opacity:.55}} @media(prefers-reduced-motion:reduce){ .heartbeat-dot{animation:none;opacity:.7;transform:scale(1)} } @media(max-width:560px){ .wrap{padding:0 var(--sp-3)} .band{padding:var(--sp-8) 0} } /* canonical nav + footer chrome, Fresh Lens light */ .ins-header{border-bottom:1px solid var(--line);background:rgba(246,247,244,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:0;z-index:50} .ins-header-inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:24px} .mark{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none} .mark:hover{color:var(--ink)} .mark svg path{stroke:var(--growth)} .mark svg circle{fill:var(--harvest)} .navr{display:flex;align-items:center;gap:30px;font-family:var(--font-display);font-size:13.5px;color:#4A554C} .navr a{color:#4A554C;transition:color .2s} .navr a:hover{color:var(--ink)} .navr a[aria-current="page"]{color:var(--growth)} .nav-burger{display:none;background:none;border:0;padding:8px;margin:-8px -6px;cursor:pointer;color:#4A554C;line-height:0} .nav-burger:hover{color:var(--ink)} .nav-burger-box{display:block;position:relative;width:22px;height:14px} .nav-burger-bar,.nav-burger-bar::before,.nav-burger-bar::after{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease} .nav-burger-bar{top:6px} .nav-burger-bar::before{top:-6px} .nav-burger-bar::after{top:6px} .nav-burger[aria-expanded="true"] .nav-burger-bar{background:transparent} .nav-burger[aria-expanded="true"] .nav-burger-bar::before{transform:translateY(6px) rotate(45deg)} .nav-burger[aria-expanded="true"] .nav-burger-bar::after{transform:translateY(-6px) rotate(-45deg)} /* nav dropdown groups ("Option A", dropdown-grouped nav) -- same markup/ toggle contract as public/insights/insights.css's dark-theme .navr-drop* rules (tools/site-chrome.js's navGroupsMarkup()/NAV_DROPDOWN_SCRIPT), restyled onto the Fresh Lens light tokens used by hub-class pages + every generated guide leaf/sub-hub page. */ .navr-drop{position:relative} .navr-drop-trigger{font:inherit;color:#4A554C;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px} .navr-drop-trigger:hover,.navr-drop-trigger[aria-expanded="true"]{color:var(--ink)} .navr-drop-caret{font-size:10px;line-height:1;transition:transform .18s ease} .navr-drop-trigger[aria-expanded="true"] .navr-drop-caret{transform:rotate(180deg)} .navr-drop-menu{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:190px;background:var(--ground);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -20px rgba(27,35,29,.25);display:none;z-index:60} .navr-drop-menu.is-open{display:block} .navr-drop-menu li+li{margin-top:2px} .navr-drop-menu a{display:block;padding:9px 12px;border-radius:6px;font-size:13.5px;white-space:nowrap;color:#4A554C} .navr-drop-menu a:hover{background:rgba(27,35,29,.06);color:var(--ink)} .navr-drop-menu a[aria-current="page"]{color:var(--growth)} .ins-footer{border-top:1px solid var(--line);padding:56px 0 64px;background:var(--ground);color:var(--ink)} .ins-footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)} .ins-footer-cta{text-align:center;margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--line)} .ins-footer-cta p{color:#3E4A40;font-size:1.05rem;line-height:1.6;max-width:44ch;margin:0 auto 24px} .go{font-family:var(--font-display);font-weight:500;font-size:15px;padding:15px 30px;border-radius:var(--radius-m);display:inline-block;transition:transform .16s;text-decoration:none} .go.teal{background:var(--ink);color:var(--ground)} .go.teal:hover{transform:translateY(-2px);color:var(--ground)} .ins-footer-nav{display:flex;flex-wrap:wrap;gap:6px 28px;margin-bottom:32px;font-family:var(--font-display);font-size:13.5px} .ins-footer-nav a{color:#4A554C;transition:color .2s} .ins-footer-nav a:hover{color:var(--ink)} .ins-footer-fine{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .ins-footer-fine .mark{font-size:16px} .ins-footer-fine-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .ins-footer-fine-right a{font-family:var(--font-mono);font-size:13px;color:var(--growth);transition:color .2s} .ins-footer-fine-right a:hover{color:var(--ink)} .ins-footer-fine-right p{font-family:var(--font-mono);font-size:12.5px;color:#5B6A5F} /* footer-email-copy: click-to-copy replacement for the old mailto: anchor (no-mailto standard, 2026-07-24 self-maintenance sweep) -- a real