/* ============================================================ PODRONES /NANOHUB — HOME (marketing landing) SCOPED STYLES ------------------------------------------------------------ Reproduces the Claude Design "NanoHub" landing artifact (nanohub/NanoHub.dc.html) as a plain, self-contained page that renders inside the STANDARD Podrones site chrome (headerphp / headermain / headerbody + podronesfooter). The original artifact was built on the Claude Design framework (, DCLogic, {{ }} bindings, ) whose runtime is not part of this site. This stylesheet + nanohub-home.js replace that runtime with plain CSS classes and vanilla JS. EVERYTHING here is scoped under `.nh-home` so the artifact's blue / Fraunces look never leaks into — or is clobbered by — the site header/footer CSS (css/style.css, css/podrones.css, ...). The artifact's bare `a{}` override is intentionally dropped for the same reason; link colours are re-scoped under `.nh-home` below. The ONE deliberate exception to the scoping rule is the page background (`--nh-page-bg`, applied to and the shared site `#header` below). This stylesheet is only ever linked from the /nanohub pages, so those global rules cannot reach the rest of the site — the same trade-off /d2c makes with its `--paper` tone. ============================================================ */ /* ------------------------------------------------------------ PAGE BACKGROUND — warm greige (Claude Design: #F5F1EA / #E8E1D6). The pair is a light surface and its rule/border tone; both are tokenised below. Defined on :root (not .nh-home) because and the shared site header both need to read it. ------------------------------------------------------------ */ :root { --nh-page-bg: #F5F1EA; /* light greige surface */ --nh-page-rule:#E8E1D6; /* its darker partner — rules and borders */ /* Tone of the site header — see the CARDINAL RULE block below. The greige default suits a page whose first band is the greige stripe (3pl.php, vending.php); the :has() rule flips it for pages that open on the white stripe (index.php). */ --nh-header-bg: var(--nh-page-bg); } body { background: var(--nh-page-bg); } /* ------------------------------------------------------------ CARDINAL RULE — the site header ALWAYS carries the same background as the page's FIRST band. Any disagreement makes the header read as a detached strip floating above the content. Rather than hand-setting the tone per page (which silently rots the moment a page re-stripes its bands — and did, when index.php's hero went from greige to white while 3pl.php and vending.php, sharing this stylesheet, kept their greige heros), the tone is DERIVED from the first band: `.nh-home > section:first-of-type` is that band, and `.nh-band-warm` on it means greige. So a page fixes its own header just by striping its bands, and any new /nanohub page inherits the rule for free. :has() is baseline in every current browser; where it is missing the selector is dropped and the header falls back to the greige default — still correct for the two pages that open greige. !important is required throughout: the theme's sticky/scroll class swaps re-assert their own background on #header / .header-inner as the user scrolls, as do its `.dark` and `.header-colored` variants. */ body:has(.nh-home > section:first-of-type:not(.nh-band-warm)) { --nh-header-bg: #FFFFFF; /* first band is the white stripe */ } #header, #header .header-inner { background-color: var(--nh-header-bg) !important; } /* ------------------------------------------------------------ SECTION STRIPES ------------------------------------------------------------ The site theme paints EVERY
white (css/style.css:121 `section { background-color: #ffffff }`). That rule beats the background, so without the override below the page colour only ever shows through the header — which is exactly the seam that made the tinted header look detached from the white content under it. The page alternates: white stripe, greige stripe, white, greige … The first band under the header is white so the header reads as part of it rather than as a separate strip (see the #header rule above). Band order and tone: hero white five audiences greige four capabilities white problem greige closing CTA white client ribbon white ← the one doubled-up seam; the ribbon must stay white for its white-background JPEG logos, so it carries a hairline rule instead of a tone change. counters (site theme's own dark parallax band) `:not(.background-overlay)` leaves the shared counters component alone — that band carries its own parallax image and dark overlay from the site theme, and must not be repainted here. ------------------------------------------------------------ */ .nh-home > section:not(.background-overlay) { background-color: #FFFFFF; /* the white stripe */ } .nh-home > section.nh-band-warm { background-color: var(--nh-page-bg); /* the greige stripe */ } /* ------------------------------------------------------------ Design tokens (from the artifact's inline palette). Kept as CSS variables so the four capability accents stay in one place. ------------------------------------------------------------ */ .nh-home { /* Ink — warmed off pure neutral so text sits in the greige palette rather than on top of it. --nh-ink-faint is darker than the artifact's #888888, which was borderline on the greige stripe. */ --nh-ink: #14110C; --nh-ink-2: #302B22; --nh-ink-mute: #5A5347; --nh-ink-faint: #6E6559; /* Rules and borders both take the greige pair's darker tone. */ --nh-line: var(--nh-page-rule); --nh-line-2: var(--nh-page-rule); /* Card/tile fill. White: on a greige stripe the card lifts off the page, and on a white stripe it is defined by its border instead. */ --nh-surface: #FFFFFF; --nh-blue: #0F6BAE; --nh-blue-d: #0A4E86; /* Per-capability accents (artifact `capColors`) */ --nh-cap-0: #0F6BAE; --nh-cap-1: #2E86D1; --nh-cap-2: #0A5490; --nh-cap-3: #4B9FDB; font-family: 'Satoshi', 'Inter', system-ui, sans-serif; color: var(--nh-ink); overflow-x: hidden; } /* Scoped link colours (replaces the artifact's global `a{}` rule). */ .nh-home a { color: var(--nh-blue); text-decoration: none; } .nh-home a:hover { color: var(--nh-blue-d); } /* Display serif used throughout the artifact. */ .nh-home .nh-serif { font-family: 'Fraunces', Georgia, serif; } /* ------------------------------------------------------------ Keyframes (moved verbatim from the artifact