/* ═══════════════════════════════════════════════════════════════════════════ STITCHA NICHE HOME — shared homepage layout for data-driven niches ─────────────────────────────────────────────────────────────────────────── One light editorial homepage, themed entirely via --dk-* tokens, used by every registry niche (js/data/niches.js). js/skins/niche-home.js fills #pageHomeNiche and adds .nh-active to . Loaded for all niches but inert unless a niche activates it (yachting/equestrian have their own homepages). ═══════════════════════════════════════════════════════════════════════════ */ /* Hide the default (yachting) homepage when a data-driven niche is active. */ html.nh-active #pageHome { display: none !important; } /* Runtime (admin-created) niches: hide the default homepage immediately, before the async config resolves and renders #pageHomeNiche — avoids an unstyled flash. */ html[data-skin="niche"] #pageHome { display: none !important; } #pageHomeNiche { background:var(--dk-paper); color:var(--dk-paper-ink); height:100%; overflow-y:auto; overflow-x:hidden; } .nh-topbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.1rem 2.5rem; border-bottom:1px solid rgba(0,0,0,0.08); position:sticky; top:0; background:var(--dk-paper); z-index:50; } .nh-brand{ font-family:var(--dk-serif); font-size:18px; font-weight:700; letter-spacing:.05em; } .nh-brand-sub{ font-family:var(--dk-sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dk-paper-dim); margin-top:2px; } .nh-nav{ display:flex; gap:1.6rem; justify-self:center; } .nh-nav a{ font-family:var(--dk-sans); font-size:12.5px; color:var(--dk-paper-ink); text-decoration:none; opacity:.78; } .nh-nav a:hover{ opacity:1; color:var(--dk-accent); } .nh-actions{ justify-self:end; display:flex; gap:.6rem; } .nh-btn{ font-family:var(--dk-sans); font-size:12.5px; font-weight:600; padding:.6rem 1.2rem; border-radius:4px; cursor:pointer; border:1px solid var(--dk-accent); background:var(--dk-accent); color:#fff; transition:background .15s; } .nh-btn:hover{ background:var(--dk-accent-deep); } .nh-btn.ghost{ background:transparent; color:var(--dk-accent); } .nh-btn.ghost:hover{ background:var(--dk-accent); color:#fff; } /* Demo/Your store link + disabled Help — content parity with the yachting header, kept light. */ .nh-store{ font-family:var(--dk-sans); font-size:12.5px; font-weight:500; color:var(--dk-paper-ink); background:none; border:none; cursor:pointer; opacity:.78; padding:.6rem .4rem; transition:opacity .15s, color .15s; } .nh-store:hover{ opacity:1; color:var(--dk-accent); } .nh-nav-help{ font-family:var(--dk-sans); font-size:12.5px; color:var(--dk-paper-ink); opacity:.45; cursor:default; } .nh-cta-short{ display:none; } /* desktop shows the full "Start a Collection"; mobile swaps to "Start" */ .nh-hero{ max-width:760px; margin:0 auto; padding:5rem 2rem 3.5rem; text-align:center; } .nh-eyebrow{ font-family:var(--dk-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dk-accent); } .nh-hero h1{ font-family:var(--dk-serif); font-weight:700; font-size:54px; line-height:1.05; margin:1rem 0 1.1rem; } .nh-hero h1 .accent{ color:var(--dk-accent); font-style:italic; } .nh-hero p{ font-family:var(--dk-sans); font-size:15px; line-height:1.6; color:var(--dk-paper-dim); max-width:520px; margin:0 auto 1.8rem; } .nh-hero .nh-btn{ font-size:14px; padding:.8rem 1.7rem; } .nh-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(0,0,0,.08); border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); } .nh-cat{ background:var(--dk-paper); padding:2.2rem 1.4rem; text-align:center; cursor:pointer; transition:background .15s; } .nh-cat:hover{ background:var(--dk-paper-tile, #efece6); } .nh-cat-ic{ width:38px; height:38px; margin:0 auto .9rem; color:var(--dk-accent); } .nh-cat h3{ font-family:var(--dk-serif); font-size:18px; margin-bottom:.3rem; } .nh-cat p{ font-family:var(--dk-sans); font-size:12px; color:var(--dk-paper-dim); } .nh-steps{ max-width:980px; margin:0 auto; padding:3.5rem 2rem 5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; } .nh-step .n{ font-family:var(--dk-serif); font-size:22px; color:var(--dk-accent); } .nh-step h4{ font-family:var(--dk-sans); font-size:13.5px; font-weight:600; margin:.5rem 0 .3rem; } .nh-step p{ font-family:var(--dk-sans); font-size:12px; color:var(--dk-paper-dim); line-height:1.5; } .nh-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:2rem 2.5rem; border-top:1px solid rgba(0,0,0,0.08); } .nh-footer-brand{ font-family:var(--dk-serif); font-size:14px; letter-spacing:.05em; color:var(--dk-paper-ink); } .nh-footer-links{ display:flex; align-items:center; gap:1.4rem; font-family:var(--dk-sans); font-size:12px; color:var(--dk-paper-dim); flex-wrap:wrap; } .nh-footer-links a{ color:var(--dk-paper-dim); text-decoration:none; } .nh-footer-links a:hover{ color:var(--dk-accent); } @media(max-width:760px){ .nh-topbar{ padding:1rem 1.2rem; grid-template-columns:1fr auto; align-items:center; } .nh-brand{ font-size:15px; white-space:nowrap; } .nh-nav{ display:none; } /* Compact header so brand + Log In + Start fit one row: drop the secondary store link and shorten the CTA to "Start". */ .nh-actions{ gap:.4rem; } .nh-store{ display:none; } .nh-actions .nh-btn{ padding:.45rem .7rem; font-size:11px; } .nh-cta-full{ display:none; } .nh-cta-short{ display:inline; } .nh-cats,.nh-steps{ grid-template-columns:repeat(2,1fr); } .nh-hero{ padding:3rem 1.2rem 2.5rem; } .nh-hero.has-img .nh-hero-inner{ padding:2.5rem 1.4rem; } .nh-hero h1{ font-size:38px; } } /* ── Hero with image (per-niche hero.image, or a placeholder) + image cards ── */ /* Full-bleed banner. The base .nh-hero has `margin:0 auto`, which in the flex-column page suppresses the stretch and shrinks the hero to its content width — so reset margin + force full width here, else the hero renders as a centered box. */ .nh-hero.has-img{ position:relative; max-width:none; width:100%; margin:0; padding:0; min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .nh-hero.has-img .nh-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; } .nh-hero.has-img .nh-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(var(--dk-ink-rgb),0.42), rgba(var(--dk-ink-rgb),0.74)); } .nh-hero.has-img .nh-hero-inner{ position:relative; max-width:680px; padding:3rem 2rem; } .nh-hero.has-img .nh-eyebrow{ color:var(--dk-accent-bright); } .nh-hero.has-img h1{ color:#fff; } .nh-hero.has-img h1 .accent{ color:var(--dk-accent-bright); font-style:italic; } .nh-hero.has-img p{ color:rgba(255,255,255,.85); } .nh-cat-img{ width:100%; height:128px; background-size:cover; background-position:center; border-radius:6px; margin-bottom:.9rem; }