/* ========================================================================= ClearHarbor — Marketing chrome (shared nav + footer + shell primitives) ========================================================================= MOVED out of landing.css, not copied — this file is now the ONE definition of everything a public marketing page (Landing, Privacy, Terms, Getting Started) shares: the .site-nav capsule (every state, every breakpoint), the dark-band footer, .ch-wrap / .ch-band / .ch-grain / .ch-band-dark, and the four hoisted local custom properties (--ink-a08 / --ink-a16 / --shadow-soft-1 / --shadow-soft-2). landing.css keeps only what is genuinely Landing-only: the hero grid, the evidence card, the story band, how-it-works, the art slots, the motion system. LOAD ORDER: tokens.css → site.css → marketing.css → {landing.css | legal.css | getting-started.css}. site.css stays loaded on every page in this trio — .brand, .theme-toggle, .skip-link, .primary-button, .mono-eyebrow, .redaction-chip all come from there, unmodified. THE BUG THIS FILE EXISTS TO FIX: _Layout's brand pointed at /Index (the auth-gated app) and its nav links only ever rendered inside a Context.Session check — so an anonymous visitor on Privacy/Terms saw a brand and a theme toggle and NOTHING ELSE: no way to Terms, no way to the download, no way home. Privacy.cshtml/Terms.cshtml/GettingStarted.cshtml now render _MarketingNav + _MarketingFooter instead of inheriting _Layout's session-gated chrome, and the brand here is a real back to "/" — seePages/Shared/_MarketingNav.cshtml. NAV DEFAULT INVERTED: the nav used to be transparent-by-default with solid-on-scroll, tuned for Landing's full-bleed hero. That left Privacy/Terms/Getting Started's nav floating on open paper with nothing under it. SOLID is now the base state everywhere; a page opts into the old transparent-at-top behaviour with data-nav-mode="over-hero" (Landing only): .site-nav SOLID base .site-nav[data-nav-mode="over-hero"]:not(.is-scrolled) transparent override .site-nav.is-over-dark.is-scrolled band-ink inversion (unchanged mechanism) Solid-mode pages never fire the sentinel/is-scrolled observer (see _MarketingLayout.cshtml's script — that observer is over-hero-only), so their nav is stamped `.is-scrolled` once at load instead: the `.is-over-dark.is-scrolled` selector above stays one shape for every page rather than forking into a solid-mode variant, and a solid nav scrolling past the dark footer band still inverts correctly. RENAMED: .hero-chrome → .site-nav. Not cosmetic — coming-soon.css styles .hero-chrome UNSCOPED, and ComingSoon.cshtml / Download.cshtml both use that exact class for their own, unrelated full-bleed hero bar. A shared nav still named .hero-chrome would double-apply there. Neither file nor either page is touched by this move; .site-nav is a clean, disjoint name. ========================================================================= */ /* ========================================================================= 0. HOISTED LOCAL ALIASES Moved verbatim from landing.css's ".landing-shell, .landing-below, .landing-footer" selector — same four property names LandingStyleContractTests already knows as element-local (see that file's elementLocalAllowlist), just declared on a wider selector list so .marketing-shell (Privacy/Terms/Getting Started, via _MarketingLayout) and .marketing-footer inherit them too. Custom properties inherit down the DOM regardless of which stylesheet declares them, so this move does not change anything Landing.cshtml's own descendants see. ========================================================================= */ .landing-shell, .landing-below, .landing-footer, .marketing-shell, .marketing-footer { /* Warm hairlines, derived from ink so they follow the theme automatically instead of needing a dark-mode counterpart declaration. */ --ink-a08: color-mix(in srgb, var(--ink) 8%, transparent); --ink-a16: color-mix(in srgb, var(--ink) 26%, transparent); /* Softer, wider elevation than the app's --shadow-1/2 — lifts big editorial plates and the nav capsule off a warm page rather than separating dense instrument surfaces. Deliberately marketing-only. */ --shadow-soft-1: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 12px 32px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-soft-2: 0 2px 6px color-mix(in srgb, var(--ink) 7%, transparent), 0 28px 64px color-mix(in srgb, var(--ink) 11%, transparent); } /* ========================================================================= 1. PAGE FRAME ========================================================================= */ /* Flat page ground for every marketing page, in place of site.css's radial-gradient halo wash (body's own rule stays for /app). EXPECTED VISIBLE CHANGE: Privacy/Terms/Getting Started lose that halo the moment this loads — flagged in the migration report, not hidden. */ body { background: var(--bg); } /* The nav is fixed, so an anchor jump to #download-windows would otherwise park the CTA underneath the bar. scroll-padding offsets every in-page jump by the bar's RUNTIME-MEASURED height plus a breath — the same variable the hero's clearance reads on Landing, so the two can never drift apart. Smooth scrolling is turned off automatically by site.css's reduced-motion block (scroll-behavior: auto !important). Page-scoped in practice: marketing.css only loads on the four marketing pages, never on /app. */ html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--landing-nav-h, 6rem) + var(--space-5)); } /* THE CLEARANCE BUG: .page-shell's own padding-top (site.css, a flat 1.75rem) was tuned for _Layout's in-flow topbar (position: relative, pushes the document down by however tall it renders). This shell's nav is position: fixed instead — out of flow, reserving nothing — so a page with no hero of its own (Privacy/Terms/Getting Started) begins right under the viewport's top edge and the floating capsule lands on top of it. Landing never shows this because its hero carries its own nav-derived clearance (landing.css's .hero padding-block-start); every OTHER page through this shell needs the same derivation, once, here — not hand-typed per page, which is the exact literal-number-shipped-short disease that put this clearance value wrong twice already on the hero. Same formula as scroll-padding-block-start above, on purpose: the runtime-measured nav bottom (--landing-nav-h, written by the script in _MarketingLayout.cshtml) plus one deliberate breathing gap, so the two can never drift apart. The 6rem fallback carries first paint and any no-JS visitor — deliberately oversized, per the same reasoning as the hero's own fallback: too much clearance reads as a slightly airy page, too little slices the heading in half. Only padding-top is touched; site.css's padding-bottom (3rem) and the horizontal padding from .topbar-inner, .page-shell stand unchanged. */ .marketing-shell .page-shell { padding-top: calc(var(--landing-nav-h, 6rem) + var(--space-5)); } /* One measure, used by every section on every marketing page, so the left edge of the nav, the footer wordmark, and (on Landing) every section title land on the same vertical line. */ .ch-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } /* Full-bleed bands: the band paints edge to edge, .ch-wrap holds the measure. */ .ch-band { position: relative; width: 100%; } /* Content rides above the band's wash/grain pseudo-elements. */ .ch-band > .ch-wrap { position: relative; z-index: 1; } /* Grain for surfaces that paint their own background — reused by the dark footer band on every marketing page (not just Landing's closing band). Same watercolour-paper-grain reasoning as landing.css's hero atmosphere (see that file's "1b. ATMOSPHERE" section, which stays Landing-only). */ .ch-grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* The dark bands' wash — the draped-silk note (see landing.css's atmosphere section for the full reasoning), in our own tokens. Deliberately asymmetric and off-centre so the band has a light side and a heavy side rather than a symmetrical vignette, which always reads as a filter. */ .ch-band-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 120% at 78% 8%, color-mix(in srgb, var(--band-ink) 9%, transparent), transparent 58%), radial-gradient(60% 90% at 18% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); } /* ========================================================================= 2. NAV — the .site-nav capsule Fixed, so it is reachable at any scroll depth. SOLID by default (see the file header above for the invert reasoning); a page opts into the old transparent-at-top-then-solid-on-scroll behaviour with data-nav-mode="over-hero". ========================================================================= */ .site-nav { position: fixed; inset-block-start: clamp(0.5rem, 1.4vw, 0.9rem); inset-inline: clamp(0.75rem, 3vw, 1.5rem); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: auto; max-width: 1200px; margin-inline: auto; padding: 0.5rem clamp(0.6rem, 1.6vw, 0.85rem) 0.5rem clamp(0.85rem, 2vw, 1.35rem); border-radius: var(--r-pill); /* SOLID base — a page that declares no data-nav-mode gets a working, legible nav on first paint; nothing to wait for. Translucent, so the page keeps moving underneath it — the "paper under glass" read. The hairline is a box-shadow ring rather than a border so it never resizes the capsule's layout box. Where backdrop-filter is unsupported the color-mix alpha alone still clears text, so this degrades to a plain translucent pill rather than to nothing. */ background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 0 0 1px var(--ink-a08), var(--shadow-soft-1); transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), backdrop-filter var(--dur-3) var(--ease); } /* Opt-in transparency — Landing only. A DETACHED FLOATING CAPSULE, bare and background-free at the top of a page whose hero IS the background, condensing into the same solid capsule every other page starts with the moment the sentinel scrolls out of view (see _MarketingLayout.cshtml's script). That sequencing is what makes the scroll state feel earned rather than decorative. */ .site-nav[data-nav-mode="over-hero"]:not(.is-scrolled) { background: transparent; backdrop-filter: none; box-shadow: 0 0 0 1px transparent; } /* Over the dark closing band and footer the capsule must not stay cream — it would be the pale slab this design removed. It inverts to the band's own ground, set from tokens so it follows the theme. Applied by the same is-over-dark observer on every marketing page (see _MarketingLayout.cshtml — it no-ops when the page has no .ch-band-dark to watch). Gated behind .is-scrolled so a still-transparent over-hero nav (nothing to invert) is never touched; solid-mode pages are stamped .is-scrolled once at load specifically so this one selector covers both nav modes. */ .site-nav.is-over-dark.is-scrolled { background: color-mix(in srgb, var(--band) 82%, transparent); box-shadow: 0 0 0 1px var(--band-line), var(--shadow-soft-2); } .site-nav.is-over-dark .brand, .site-nav.is-over-dark .landing-nav-links a, .site-nav.is-over-dark .theme-toggle { color: var(--band-ink); } .site-nav.is-over-dark .brand-mark { background: var(--band-ink); } .site-nav.is-over-dark .brand-suffix { color: color-mix(in srgb, var(--band-ink) 55%, transparent); } .site-nav.is-over-dark .site-nav-cta { background: var(--band-ink); color: var(--band); } .site-nav .brand { font-size: 1.35rem; text-decoration: none; } /* The 1px marker at the TRUE top of the document that the is-scrolled observer watches (over-hero pages only — see _MarketingLayout.cshtml). Absolute so a page's own top padding can't push it down the way a normal flex child would be pushed. Rendered on every marketing page (harmless where unused) so _MarketingNav stays one partial for every nav mode. */ .landing-nav-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; pointer-events: none; } .landing-nav-actions { display: flex; align-items: center; gap: clamp(0.35rem, 1.4vw, var(--space-5)); } /* The divider that makes two clusters read as two clusters — a single hairline between the text links and the toggle/CTA/menu cluster. Hidden below 900px where the links are gone and it would be a rule with nothing on its left. */ .landing-nav-actions::before { content: ""; align-self: center; flex: none; width: 1px; height: 1.15rem; margin-inline-start: clamp(0.1rem, 0.5vw, 0.35rem); background: var(--line); transition: background var(--dur-1) var(--ease); } .site-nav.is-over-dark .landing-nav-actions::before { background: var(--band-line); } /* The theme toggle arrives from site.css wearing the app's control chrome — a --panel-2 fill and a --line-strong hairline, right beside an input and wrong floating on open paper next to a pill CTA. Softened to a borderless ghost that fills on hover. Scoped to the marketing nav only; /app's toggle is untouched. */ .site-nav .theme-toggle { background: transparent; border-color: transparent; color: var(--muted); } .site-nav .theme-toggle:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: transparent; color: var(--ink); } /* ---- Nav links to the site's other pages -------------------------------- Real routes only — no in-page anchors mixed in, because a menu that sometimes navigates and sometimes scrolls is the single most common way a marketing nav confuses a first-time reader. margin-inline-start:auto collapses all the free space to the LEFT of the links, so the capsule reads as one anchor on the left and one dense cluster on the right. */ .landing-nav-links { display: flex; align-items: center; margin-inline-start: auto; gap: clamp(0.75rem, 1.6vw, 1.25rem); } .landing-nav-links a { position: relative; padding-block: var(--space-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text); text-decoration: none; transition: color var(--dur-1) var(--ease); } /* Hover with intent: the underline grows from the left rather than appearing, so the pointer feels like it caused it. */ .landing-nav-links a::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-2) var(--ease-out); } .landing-nav-links a:hover { color: var(--ink); } .landing-nav-links a:hover::after { transform: scaleX(1); } .landing-nav-links a:focus-visible { border-radius: var(--r-sm); } /* The nav's own download affordance — same words as a page's primary CTA so there is one action, said once, in two places, not two competing asks. */ .site-nav-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.55rem 1.1rem; border-radius: var(--r-pill); background: var(--cta-bg); color: var(--cta-ink); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } /* site.css's global a:hover color rule (0,1,1 specificity) outranks .site-nav-cta's own color at rest (0,1,0) — restated here at higher specificity so the label stays at full strength on hover/focus rather than silently swapping to the accent colour, which sits close to the button's own fill in both themes and reads as disabled. */ .site-nav-cta:hover, .site-nav-cta:focus-visible { color: var(--cta-ink); } .site-nav-cta:hover { background: var(--cta-hover); text-decoration: none; } .site-nav-cta:active { background: var(--cta-press); transform: scale(0.975); } /* ---- Narrow-width menu --------------------------------------------------- A
disclosure, not a JS drawer: keyboard and screen-reader support are native, it opens with JS disabled, and it costs no script. The full link row is hidden below 900px and this takes over. */ .landing-nav-menu { position: relative; display: none; } .landing-nav-menu > summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.85rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; list-style: none; } .landing-nav-menu > summary::-webkit-details-marker { display: none; } .landing-nav-menu > summary::marker { content: ""; } .landing-nav-menu-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-2)); display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; padding: var(--space-2); border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--ink-a08); box-shadow: var(--shadow-soft-2); } .landing-nav-menu-panel a { padding: 0.6rem 0.75rem; border-radius: var(--r); color: var(--text); font-size: var(--fs-base); font-weight: 500; text-decoration: none; } .landing-nav-menu-panel a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; } @media (max-width: 900px) { .landing-nav-links { display: none; } .landing-nav-menu { display: block; } /* Nothing to its left once the links are gone — a rule hanging off the brand. */ .landing-nav-actions::before { display: none; } } /* Below 620px the bar would carry brand + toggle + a long CTA pill + Menu, and the CTA is the one that loses — "Download for Windows" cannot shorten without rewording it. It drops out here rather than wrapping. */ @media (max-width: 620px) { .site-nav-cta { display: none; } } /* ========================================================================= 3. FOOTER — the dark foot, shared by every marketing page Moved verbatim from landing.css's "11. FOOTER" section. Class list on the