Marketing Landing TOC

<x-wirekit::container padding="sm" max="full">
<x-wirekit::brand-bar padding="sm">
    <x-slot:brand>
        <x-wirekit::brand name="⚡ Acme" />
    </x-slot:brand>
    <x-slot:tagline>Ship faster, in less time.</x-slot:tagline>
</x-wirekit::brand-bar>
<x-wirekit::reading-toc flush />
<x-wirekit::prose density="compact">
    <article style="padding: 0 var(--padding-wk-x-sm);">
        <section id="ml-features">
            <h2>Features</h2>
            <p>Bulleted pitch — three columns, each with an icon and a paragraph. Click "Features" in the strip above to jump straight here. The IntersectionObserver under the hood updates the active link as soon as this heading crosses the viewport-top + offset line.</p>
            <p>What makes the strip useful for marketing pages: flat anchor structure (4 sections, all <code>&lt;h2&gt;</code>), wide content. A vertical sidebar spine would feel excessive when there are only four jumps. The horizontal strip is the right shape.</p>
            <p>Each link auto-truncates at <code>--reading-toc-link-max-width: 24ch</code> so a long heading doesn't push siblings off-screen. The list itself is <code>overflow-x-auto</code>, so a strip with 6+ items still scrolls cleanly without breaking the page layout.</p>
            <p>The strip is mobile-hidden by default (<code>hideBelow="sm"</code>), since narrow viewports can't host a 3-4-link horizontal nav without overflow. The vertical reading-spine takes over below that breakpoint when both are present.</p>
            <p>Scroll past this paragraph to flip the active link to "Pricing". Active-detection uses an IntersectionObserver with a rootMargin that mirrors the offset prop, so the flip lands at the strip's bottom edge — not at the viewport top.</p>
            <p>The strip's keyboard model leans on the underlying anchor links — <kbd>Tab</kbd> moves between visible links, <kbd>Enter</kbd> activates the smooth-scroll. No custom focus ring is needed; the focus-visible state inherits the global <code>--color-wk-ring</code> token so it stays consistent with every other nav primitive on the page.</p>
            <p>Screen readers announce the strip as "Page sections, navigation" thanks to the <code>aria-label="Page sections"</code> on the wrapping <code>&lt;nav&gt;</code>. Each link carries the destination heading text directly — no extra ARIA labeling needed.</p>
            <p>Idle-state link color is <code>--reading-toc-color-idle</code> (muted-text by default). The active state swaps to <code>--reading-toc-color-active</code> (accent by default). Both tokens cascade through the theme system, so a Cupertino-themed page sees the strip in Cupertino blue automatically.</p>
            <p>Reduced-motion users get an instant active-link swap with no fade — the 150 ms transition on the link color collapses to <code>0.01ms</code> via the global <code>@media (prefers-reduced-motion: reduce)</code> block. Smooth-scroll collapses to instant scroll the same way.</p>
            <p>The strip's hover state is intentionally subtle — a 4% accent-tinted background on the link's pill chrome — so an inactive section's hover doesn't compete visually with the active link's bolder weight + accent color. Hover affordance without distraction.</p>
        </section>
        <section id="ml-pricing">
            <h2>Pricing</h2>
            <p>Three tiers, each in a card. The TOC link for "Pricing" highlights as soon as the reader scrolls into this section. The smooth-scroll math accounts for the strip's offset so the destination heading lands just below the strip, not under it.</p>
            <p>The active-state color comes from <code>--reading-toc-color-active</code>. By default it's the accent token; developers can override per-page via inline custom-property declarations or globally via <code>app.css</code>. Idle and active states transition over 150 ms unless <code>prefers-reduced-motion: reduce</code> is set.</p>
            <p>Click any link → smooth-scroll. The URL hash updates via <code>history.replaceState()</code>, not <code>pushState()</code> — back-button still goes to the previous page rather than the previous anchor.</p>
            <p>The hover state on each pricing card uses the same elevation token as the rest of the system (<code>--shadow-wk-md</code>). Adding a discount badge or "most popular" pill is a one-line override on the card's <code>:slot="badge"</code> if the recipe developer needs it.</p>
            <p>For longer pricing pages — multiple tiers per region, add-on rows, FAQ accordions per tier — switch the TOC's <code>levels="2,3"</code> so the strip also picks up the per-tier sub-headings.</p>
            <p>Tier comparison tables nest naturally under a pricing section. The TOC strip ignores any heading deeper than the configured level, so per-tier <code>&lt;h3&gt;</code> headings with <code>levels="2"</code> don't pollute the strip — but pass <code>levels="2,3"</code> and they become first-class anchors.</p>
            <p>Deep-linking works out of the box. Sharing a URL ending in <code>#ml-pricing</code> scrolls the reader directly to this section on page load, with the strip's active link already highlighted. The on-mount scroll honors the offset prop too.</p>
            <p>If your pricing section is dynamically rendered (Livewire pricing-tier component with locale-driven content), the TOC re-observes its target on every Livewire morph — the strip stays in sync as the section's heading or layout changes.</p>
            <p>Pricing-page conversion best practice: keep one canonical CTA per tier, repeat the primary CTA at the section's bottom edge so scrolling past the table lands on a buy button. The TOC handles the navigational symmetry — readers can jump back up to compare tiers without losing the CTA in the fold.</p>
            <p>For currency or region toggles, render them OUTSIDE the article container so they don't interfere with the TOC's section-heading scan. A toolbar above the brand-bar is the canonical placement; a sticky toolbar BELOW the TOC works too with appropriate <code>offset</code> stacking.</p>
        </section>
        <section id="ml-faq">
            <h2>FAQ</h2>
            <p>Common questions in a bulleted list — last anchor in the strip. The strip stays visible all the way down the page (<code>position: sticky; top: 0</code> by default), so the reader can jump back to any earlier section without scrolling all the way up.</p>
            <p>One reasonable extension is to add a "Back to top" pseudo-anchor at the end of the strip. Pass <code>:backToTop="true"</code> on a future revision; until then, developers can append a manual link at the strip's edge using the slot pattern.</p>
            <p>If your landing page grows beyond 5-6 anchored sections, switch to the vertical reading-spine instead. The horizontal strip overflows fast at viewport widths under 1024 px, even with per-link truncation.</p>
            <p>Bottom of the page — scrolling further won't flip any link past "FAQ" because there is no further anchor. The active state stays sticky to the last in-view section, which is the documented behavior.</p>
            <p>FAQ entries themselves benefit from the <code>&lt;x-wirekit::accordion&gt;</code> component — each question becomes an expandable row, with the answer hidden by default. The accordion's open/closed state is independent of the TOC active-link state, so opening an entry doesn't perturb the strip.</p>
            <p>For SEO, an FAQ block paired with <code>&lt;x-wirekit::structured-data type="FAQPage"&gt;</code> emits the schema.org markup search engines parse for rich-result eligibility. The TOC and the structured-data block coexist without interference.</p>
            <p>If a question links to a docs page, prefer same-tab navigation for in-domain links and an opt-in <code>target="_blank" rel="noopener"</code> for cross-domain links. The strip stays anchored to the current page; cross-domain navigation breaks the back-button-to-anchor contract.</p>
            <p>An "Ask another question" CTA at the bottom of the FAQ section flows naturally without disrupting the strip — the section's last paragraph and the CTA share the same anchor (<code>#ml-faq</code>), so the active link doesn't flicker between two sections at the boundary.</p>
            <p>For lengthy FAQ blocks (15+ questions), consider grouping them by topic with sub-headings (<code>&lt;h3&gt;</code>) and passing <code>levels="2,3"</code> to the TOC so each topic group gets its own anchor in the strip.</p>
            <p>The strip's <code>position: sticky</code> + <code>overflow-x: auto</code> combination remains stable to the bottom of the page — even on long FAQ sections that scroll past the natural viewport multiple times. No re-layout, no re-paint of the strip chrome.</p>
        </section>
    </article>
</x-wirekit::prose>
</x-wirekit::container>

<x-wirekit::container padding="sm" max="full">
<x-wirekit::brand-bar padding="sm">
    <x-slot:brand>
        <x-wirekit::brand name="Brand" />
    </x-slot:brand>
    <x-slot:actions>
        <x-wirekit::text size="sm" as="span"><x-wirekit::link href="/login" variant="muted" underline="none">Sign in</x-wirekit::link></x-wirekit::text>
    </x-slot:actions>
</x-wirekit::brand-bar>
<x-wirekit::reading-toc flush />
<x-wirekit::prose density="compact">
    <article style="padding: 0 var(--padding-wk-x-sm);">
        <section id="ml-offset-features">
            <h2>Features</h2>
            <p>The TOC strip is offset by 4rem so it sits 4rem below the viewport top once you scroll past the brand-bar. Both the visual position (<code>position: sticky; top: 4rem</code>) and the IntersectionObserver root margin honor the same offset value — so the active section flips at the strip's bottom edge, not at the viewport top.</p>
            <p>Try scrolling: the brand-bar above is in normal flow and scrolls away, while the TOC pins below the imagined fixed nav. The active link cycles between Features and Pricing as the headings cross the strip's bottom edge.</p>
            <p>The offset value passes through to all three places at once: <code>position: sticky; top</code>, the IntersectionObserver's <code>rootMargin</code>, and the smooth-scroll target offset. A single source of truth keeps the visual position and the active-detection point in lockstep.</p>
            <p>Mounting a fixed brand-bar above the TOC is the common production shape. Pass <code>offset="var(--brand-bar-height)"</code> (or whatever your brand-bar's height token resolves to) and the TOC pins directly beneath it. No manual math needed if the brand-bar has a documented height token.</p>
            <p>Brand-bar heights commonly land at 3.5rem, 4rem, or 5rem depending on whether they carry a logo + nav + actions or just a slim brand-only strip. Set the offset value once at the app-shell level and every TOC instance inherits it.</p>
            <p>If multiple TOCs are present on the same page (rare but legitimate — e.g. a long-form article with both a top strip and a sidebar spine), each carries its own offset prop. They observe the same headings but render independently.</p>
            <p>For a sticky brand-bar instead of fixed, the offset behavior is identical — sticky elements occupy the same viewport region. The TOC's <code>top: 4rem</code> just stacks below the brand-bar's own <code>top: 0</code>; the IntersectionObserver root margin clears both.</p>
            <p>When the offset value comes from a JS-resolved measurement (e.g. <code>document.querySelector('.brand-bar').offsetHeight</code>), pass it via <code>x-bind:style</code> or set the CSS custom property at the app-shell level on first paint. The Alpine helper re-reads the offset on every IntersectionObserver tick.</p>
            <p>Keep scrolling — Features's section keeps pulling content while Pricing waits below. The active link should flip exactly when this section's bottom edge crosses the strip's bottom edge, not earlier and not later.</p>
        </section>
        <section id="ml-offset-pricing">
            <h2>Pricing</h2>
            <p>Click either link in the strip to smooth-scroll. The math accounts for the offset so the destination heading is fully visible — not hidden under the strip. The same offset value drives all three concerns: visual position, active-detection rootMargin, and scrollTo target.</p>
            <p>If your real app's fixed nav changes height, update the offset in lockstep. They're two halves of the same layout contract.</p>
            <p>For developers whose top nav is sticky rather than fixed, the offset still applies — sticky elements occupy the same viewport region, so the TOC has to clear them either way.</p>
            <p>Responsive brand-bars (taller on desktop, slimmer on mobile) benefit from a CSS-variable offset that flips at breakpoints. The TOC re-reads the offset every paint, so the sticky position adjusts cleanly when the breakpoint crosses.</p>
            <p>For Tailwind-driven responsive offsets, declare the offset prop with an arbitrary value referencing a CSS variable: <code>offset="var(--toc-offset)"</code>, then set <code>--toc-offset</code> in your app.css under each breakpoint media query.</p>
            <p>The smooth-scroll math also honors <code>scroll-margin-top</code> on the target heading. If you've set <code>h2 { scroll-margin-top: 5rem }</code> globally, the TOC's offset value is added on top — usually you want one or the other, not both.</p>
            <p>Mobile-hidden default (<code>hideBelow="sm"</code>) means the offset prop is effectively dormant under 640 px viewports. The strip is display:none, so the offset doesn't push any content. Override with <code>hideBelow="false"</code> if your design has space for the strip on mobile.</p>
            <p>The brand-bar's own <code>z-index</code> stacks above the TOC by default (the strip is sticky inside the article container; the brand-bar is fixed outside). If you flip that order, the TOC briefly disappears under the brand-bar on overlap — usually not desired.</p>
            <p>Pricing-page-specific tip: the offset prop also accepts a raw pixel value (<code>offset="64"</code>). Useful when integrating with a third-party fixed-nav whose height isn't exposed as a CSS variable.</p>
        </section>
        <section id="ml-offset-extras">
            <h2>Extras</h2>
            <p>If your top nav lives outside the article container — a sibling to <code>&lt;main&gt;</code> at the layout root — the offset is the only adjustment the TOC needs. The article body itself sits in normal flow and doesn't need a matching <code>padding-top</code>.</p>
            <p>If your top nav lives INSIDE the article container (as a header preceding the TOC, like the brand-bar in this preview), the article body's padding-top is implicit — the brand-bar takes its own vertical space.</p>
            <p>The offset prop is the single layout primitive: bump it to match whatever sits above the TOC, regardless of whether that thing is fixed, sticky, or in flow.</p>
            <p>For deeply nested layouts (e.g. a sidebar shell with a header bar and a sub-nav per route), stack offsets via CSS-custom-property addition: <code>offset="calc(var(--header-height) + var(--subnav-height))"</code>. The TOC accepts any computed-style value.</p>
            <p>When the page has both a brand-bar AND a secondary nav row (e.g. category tabs), the offset stacks both heights. The TOC re-reads the computed value every IntersectionObserver tick, so dynamic nav heights (e.g. a sub-nav that appears on certain routes) reflow correctly.</p>
            <p>If your article-body container has its own padding-top (e.g. <code>&lt;main style="padding-top: 2rem"&gt;</code>), that padding doesn't affect the TOC's offset — the strip's sticky position is relative to the viewport, not the article container. The article's padding only affects where the heading text sits, not the strip.</p>
            <p>For pages with anchor-based deep-linking (URL hashes that scroll the reader directly to a section), the offset prop's value is added to the on-load scroll target. So <code>#ml-offset-pricing</code> in the URL scrolls to the heading + offset, leaving the strip visible above.</p>
            <p>Print stylesheets typically want the TOC hidden — <code>@media print { .wk-reading-toc { display: none } }</code> achieves that. The article body retains its anchor structure, which prints fine without the strip.</p>
            <p>Final note on the offset contract: it's a one-way push. The TOC clears content ABOVE it via the offset; content BELOW the TOC is unaffected. No magic — just a sticky-top + IO-rootMargin + scroll-target-math triple that all read the same value.</p>
        </section>
    </article>
</x-wirekit::prose>
</x-wirekit::container>

<x-wirekit::reading-shell :toc="true" :spine="false" :bookmark-key="'landing-page'">
    {{-- your sections --}}
</x-wirekit::reading-shell>