Loading page…
Loading page…
The navigation hung as material: an audited flag field and ink pair printed over the red-texture tile, with a rough deckled tear along its bottom edge in the torn-mask idiom of the marketing site. The photo supplies fibre; a color-blend restates the brand field so every skin shares one asset. The bar rides z-40, so an app sidebar always passes behind it. Below lg the menu trigger sits left, the skull stays centred, and account controls hold the right flank.
The banner over app chrome. Skull + Cold Harbor lockup left from lg, centred uppercase links with the gliding underline, user access on the right. The field is printed cloth — the red-texture tile, re-inked to the flag.
Page body — the bar sits above the content it commands.
<BannerNavbar
brandName="COLD HARBOR"
links={links}
actions={accountActions}
mobileActions={accountActions}
/>--ch-flag-field--ch-flag-ink--ch-focus--ch-borderPrinted field: the red-texture tile, re-inked to the audited flag so fibre reads on every skin.
A secondary strip hangs beneath the deckle — the tear overlaps its top edge and the strip is an opaque canvas so the two read as one surface. Use it for breadcrumbs and page context, or hand it a Marquee for a price ticker.
Page body — the bar sits above the content it commands.
<BannerNavbar
sticky
links={links}
subBar={<Breadcrumbs />}
/>Static context strip. Pair with sticky so the trail pins with the banner.
Page body — the bar sits above the content it commands.
<BannerNavbar
links={links}
subBar={
<Marquee speed={28} pauseOnHover fade className="w-full">
{prices.map((p) => <TickerItem key={p.sym} {...p} />)}
</Marquee>
}
/>--ch-success--ch-danger--ch-font-family-monoThe house Marquee in the sub bar — duplicate-track CSS loop, edge fade, pauses on hover.
The base scheme flies the house red (--ch-flag-field). Under data-brand the flag re-derives from that primary and a color blend re-inks the same paper — corsair stays red; the full skins print in their own colours.
Page body — the bar sits above the content it commands.
Page body — the bar sits above the content it commands.
Page body — the bar sits above the content it commands.
Page body — the bar sits above the content it commands.
<div data-brand="corsair">
<BannerNavbar brandName="COLD HARBOR" links={links} />
</div>
/* or override the derived colours directly */
<BannerNavbar
style={{ "--ch-banner-field": "#8f1712", "--ch-banner-ink": "#e8dfcf" }}
links={links}
/>--ch-primary--ch-banner-field--ch-banner-inksticky pins banner and sub bar as one assembly. animateIn drops the banner in on mount with the unfold spring (skipped under reduced motion). textureSrc swaps in a different paper tile, re-inked the same way.
Page body — the bar sits above the content it commands.
<BannerNavbar
sticky
animateIn
links={links}
textureSrc="/artifacts/privateer-live/red-print-texture.webp"
/>Remount the specimen (navigate away and back) to replay the entrance.