/* Harbour Lights Community — shared styles Used by every page except index.html (which keeps its own tuned inline styles). Colours, fonts, nav, quick-exit and safety-dialog live here so they only need to be edited once for the whole site. */ :root{ --black:#0b0b0b; --white:#ffffff; --gold:#f4c400; --stone:#f2efe9; --warm-grey:#d8d1c7; --ink:#1a1a1a; --muted:#66615b; --max:1440px; --ease:cubic-bezier(.2,.75,.25,1); /* Knowledge Centre » Guides page — per-guide rollover accent colours, one per cover (see knowledge-centre/guides.html's GUIDE_PRODUCTS accentColor fields for which guide uses which, applied via agg-product.js's buyBox layout). Kept as named vars, not inlined, so the supplied RGB values are on record in one place. */ --guide-green:rgb(134,168,34); --guide-blue:rgb(102,151,226); --guide-yellow:rgb(238,194,0); --guide-orange:rgb(201,99,6); --guide-magenta:rgb(166,58,114); } *{box-sizing:border-box} /* Deliberately NOT scroll-behavior:smooth on globally — it also applies to the browser's own back/forward scroll-position restoration, which made returning via the back button visibly animate up from the top of the page instead of landing instantly where the visitor left off. Opt in per element with .smooth-scroll instead (nothing currently uses it, but it's there for a future deliberately-animated in-page jump, e.g. a "back to top" link). */ .smooth-scroll{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:var(--stone);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden} button,a{font:inherit} a{color:inherit} :focus-visible{outline:3px solid var(--gold);outline-offset:4px} .skip-link{position:fixed;left:12px;top:-80px;z-index:200;background:white;color:#111;padding:10px 14px}.skip-link:focus{top:12px} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 18px;border:1px solid rgba(255,255,255,.6);text-decoration:none;background:rgba(15,15,15,.38);color:white;backdrop-filter:blur(7px);transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)} .btn:hover{transform:translateY(-2px);background:white;color:var(--black);border-color:white}.btn.primary{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:800} .safety-link{display:inline-block;margin-top:22px;color:white;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:5px;cursor:pointer} /* Content-area primary link/button — originated on the homepage's chapter panels, now shared so any page (e.g. the aggregate product template below) can use the same "primary action" treatment. */ .chapter-link{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:12px 17px;text-decoration:none;background:var(--black);color:white;border:1px solid var(--black);font-weight:800;transition:background .25s,color .25s,transform .25s} /* Lighter alternative to .chapter-link — bold text + arrow on a gold rule instead of a solid black pill, per the user's "the black buttons across the site are so heavy" note. A SEPARATE class, not a change to .chapter-link itself: this is a Knowledge Centre-only preview for now, to see how it reads before any wider rollout — every other .chapter-link on the site is untouched. Nested var() fallback checks BOTH accent custom-property names already in use on Knowledge Centre pages — --product-accent (individual Guide/Directory product pages) and --agg-accent (the aggregate listing's own buy-box cards) — so either still picks up that page's own accent colour instead of always defaulting to literal gold regardless of which page it's on. */ .chapter-link-light{display:inline-flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;background:none;color:var(--ink);border:0;border-bottom:3px solid var(--agg-accent,var(--product-accent,var(--gold)));font-weight:800;transition:color .2s} .chapter-link-light:hover{color:var(--agg-accent,var(--product-accent,#8A6A00))} /* Disabled variant — same shape as .chapter-link-light, but a (no href, nothing to navigate with) and muted grey instead of gold, for CTAs pointing at pages that aren't built yet. */ .chapter-link-light-disabled{display:inline-flex;align-items:center;gap:12px;padding:8px 0;color:var(--muted);border:0;border-bottom:3px solid rgba(26,26,26,.15);font-weight:800;cursor:not-allowed;user-select:none} /* var(--product-accent, var(--gold)), not a literal var(--gold) — pages without --product-accent set (most non-Guide pages) fall through to the same gold as before, unaffected, but Guide pages now correctly hover to their own accent instead of always the site's literal gold regardless of which Guide it is (this was hidden on guide-economic.html itself, since --guide-yellow happens to be close enough to --gold to look right by coincidence — it broke visibly once guide-legal.html/ guide-reputational.html used real green/blue accents instead). */ .chapter-link:hover{background:var(--product-accent,var(--gold));color:var(--product-accent-ink,var(--black));border-color:var(--product-accent,var(--gold));transform:translateY(-2px)} /* "Coming Soon" placeholder for an .agg-product whose directory isn't purchasable yet — same box dimensions as .chapter-link so swapping one for the other doesn't shift the card's layout, but a plain grey outline/text instead of the black button. On hover it lightens further (white background, --warm-grey text/border) to still give some feedback even though there's nothing to click through to yet. */ .agg-product-soon{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:12px 17px;background:transparent;color:var(--muted);border:1px solid var(--muted);font-weight:800;transition:background .25s,color .25s,border-color .25s} .agg-product-soon:hover{background:white;color:var(--warm-grey);border-color:var(--warm-grey)} /* Closing / site footer — moved out to footer.css (its own file, linked directly by every page including index.html) so there's exactly one definition site-wide, not a copy that happens to match. See footer.css. */ /* Navigation, quick exit */ .nav-trigger,.quick-exit{position:fixed;z-index:80;border:0;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.18)} .nav-trigger{top:18px;right:18px;min-height:48px;padding:11px 15px;display:flex;align-items:center;gap:10px;color:white;background:var(--black);font-weight:800}.nav-line{width:5px;height:24px;background:var(--gold)} .quick-exit{right:18px;bottom:18px;min-height:46px;padding:11px 15px;background:var(--black);color:white;font-weight:850}.quick-exit:hover{background:var(--gold);color:var(--ink)} /* Personalised-navigation control: only inserted (by site.js) while the visitor has chosen to keep her Constellation results for this browser session. Sits directly under the nav trigger — deliberately kept separate from Quick Exit, which must stay a distinct, unrelated safety function. */ .back-to-results{position:fixed;z-index:79;top:74px;right:18px;display:inline-flex;align-items:center;gap:6px;color:white;text-decoration:none;font-weight:700;font-size:.78rem;background:none;border:0;padding:4px 2px;cursor:pointer} .back-to-results:hover{text-decoration:underline} .back-to-results .arrow{color:var(--gold)} .delete-results-nav{position:fixed;z-index:79;top:104px;right:18px;color:rgba(255,255,255,.75);text-decoration:none;font-weight:700;font-size:.78rem;background:none;border:0;padding:4px 2px;cursor:pointer;font-family:inherit} .delete-results-nav:hover{color:white;text-decoration:underline} @media(max-width:900px){.back-to-results{top:66px;right:10px}.delete-results-nav{top:96px;right:10px}} .site-nav{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(440px,92vw);padding:56px 36px 22px;background:#0c0c0c;color:white;display:flex;flex-direction:column;gap:0;overflow-y:auto;transform:translateX(102%);transition:transform .42s var(--ease)}.site-nav.open{transform:none} .nav-close{position:absolute;right:20px;top:16px;border:0;background:transparent;color:white;font-size:1.6rem;cursor:pointer}.nav-kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-weight:850;font-size:.576rem;margin-top:10px}.nav-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.48)} /* Nav link list, with expandable sub-page groups (Making Sense Of What Is Happening, When Tactics Form A Pattern, Knowledge Centre). Sized to fit the whole 6-item Journey list on screen without the nav itself needing to scroll on realistic viewport heights (~800px+) — see the PSA Framework project memory note on 2026-08-23's nav restructure. */ .nav-section-title{font-size:.61rem;letter-spacing:.13em;text-transform:uppercase;font-weight:850;color:var(--gold);margin:18px 0 5px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.42)} .nav-section-title:first-of-type{margin-top:0} .nav-list{list-style:none;margin:0 0 6px;padding:0} .nav-list>li{border-bottom:1px solid rgba(255,255,255,.12)} .nav-list>li>a,.nav-group-row>a{display:block;padding:7px 0;text-decoration:none;font:500 clamp(.7rem,1.05vw,.9rem)/1.15 Georgia,"Times New Roman",serif} .nav-list>li>a:hover,.nav-group-row>a:hover{color:var(--gold)} .nav-group-row{display:flex;align-items:stretch} .nav-group-row>a{flex:1} .nav-group-toggle{border:0;background:none;color:rgba(255,255,255,.65);cursor:pointer;padding:0 4px;display:flex;align-items:center} .nav-group-toggle:hover{color:var(--gold)} .nav-chevron{display:inline-block;font-size:1.02rem;transition:transform .25s var(--ease)} .nav-group-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(90deg)} .nav-sublist-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)} .nav-sublist-wrap.open{grid-template-rows:1fr} .nav-sublist{overflow:hidden;list-style:none;margin:0;padding:0 0 6px 16px} .nav-sublist li{border-top:1px solid rgba(255,255,255,.08)} .nav-sublist a{display:block;padding:6px 0;text-decoration:none;font:400 .74rem/1.28 Inter,ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.72)} .nav-sublist a:hover{color:var(--gold)} /* Nav items pointing at pages that don't exist/aren't ready yet — per the user, disabled (not just styled — a , no href at all, so there's nothing to click or navigate with) until those pages are built. Same box/type shape as .nav-sublist a, just dimmed further and with a "not allowed" cursor instead of the hover-to-gold affordance. */ .nav-link-disabled{display:block;padding:6px 0;font:400 .74rem/1.28 Inter,ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.32);cursor:not-allowed;user-select:none} /* Safety dialog */ dialog{border:0;padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:0 24px 80px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(0,0,0,.68)}.safety-panel{padding:30px;background:white;border-top:8px solid var(--gold)}.safety-panel h2{font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;margin:0 0 12px}.safety-panel p{margin:0 0 14px}.close-dialog{margin-top:10px;border:1px solid #222;background:white;padding:10px 14px;cursor:pointer} /* Generic inner-page shell — swap out once real content is designed per page. .page-hero/.page-hero-inner/.page-hero h1 (the old simple black-hero header these pages used before the universal .feature-header rollout) removed as dead CSS — zero remaining users sitewide, confirmed via grep, once the last 14 .page-hero pages were converted. .page-kicker itself is kept: still used as a general eyebrow style on ~11 other pages/contexts unrelated to that old header. */ .page-kicker{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:850;color:var(--gold);margin:0 0 14px} .page-kicker a{color:inherit;text-decoration:none} .page-kicker a:hover{text-decoration:underline} .page-body{padding:clamp(48px,7vw,88px) clamp(24px,5vw,64px);width:min(100%,var(--max));margin:0 auto;min-height:30vh} .page-placeholder{color:var(--muted);font-size:1rem;max-width:620px} .page-back{display:inline-block;margin-top:26px;color:var(--ink);text-decoration:underline;text-underline-offset:4px} .child-links{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px} .child-links a{display:inline-flex;align-items:center;min-height:46px;padding:11px 16px;border:1px solid var(--black);text-decoration:none;color:var(--ink);font-weight:700;transition:background .2s,color .2s} .child-links a:hover{background:var(--black);color:white} /* Feature page template — black header, cream band, full-bleed photo with an overlapping white copy panel (a card that overlaps the photo's bottom edge, then continues in normal document flow) and an optional quote card. NOT a fixed-height/internal-scroll design any more — it used to be (page itself never scrolled; only an internal .feature-panel-scroll did, sized to exactly fill the remaining viewport height via position:absolute + overflow:hidden on .feature-photo-wrap). That broke real scrolling for at least one live visitor testing understanding.html: with .feature-panel absolutely positioned, its real content never contributed to the page's own height, so the *page* (body/html) had zero scrollable overflow of its own — reaching content past what fit in one viewport depended entirely on a mouse/trackpad wheel gesture landing precisely inside that one narrow, deliberately-scrollbar-hidden column, with no keyboard/Page-Down fallback and no visible scrollbar to signal it was even possible. It also meant the header could never visibly "scroll away" and the already-fixed .nav-trigger/.quick-exit buttons never visibly "float", since nothing about the page itself ever moved — inconsistent with every other page on the site, which scrolls normally. Fixed by using the same static/overlap layout the sub-900px responsive version already used correctly (this bug was desktop-only) — .feature- panel is a normal in-flow sibling of .feature-photo-wrap now (not nested inside it), pulled up over the photo's bottom edge with a negative margin, like a card overlapping a hero image. That makes the panel's real content height count towards the page's own height, so body/html scroll normally — the standard, reliable mechanism — the same as every other page on this site. See why-we-are-here.html for a worked example — copy that page's markup (photo-wrap, THEN panel as its sibling, not nested inside it) to reuse this template. */ html,body{height:auto;min-height:100%} .feature-page{min-height:100vh;display:flex;flex-direction:column} .feature-header{background:var(--black);color:white;padding:calc(clamp(26px,4vw,42px) - 15px) clamp(24px,5vw,64px);padding-top:calc(clamp(26px,4vw,42px) - 10px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .feature-header .brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--gold)} .feature-header .brand a{color:inherit;text-decoration:none} .feature-header .brand a:hover{text-decoration:none} .feature-header .brand-mark{width:5px;height:calc(.72rem + 4px);background:var(--gold);flex:0 0 auto} .feature-header h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.041rem,2.498vw,2.637rem);line-height:.95;margin:0;letter-spacing:-.03em;font-weight:500;color:white} /* Promoted from understanding.html's own page-scoped