This is the hero banner
A full-bleed photo sits behind a fixed transparent nav — the only page in this template
where the nav rides on a photo instead of a solid bar. Scroll for the first spotlight panel.
A full-bleed photo sits behind a fixed transparent nav — the only page in this template
where the nav rides on a photo instead of a solid bar. Scroll for the first spotlight panel.
This box spans the full width of the section and sits flush against the bottom edge — the widest of the three docking positions.
The section behind it is display: flex with a min-height: 100vh, not a plain block with .h-100 — a percentage height can't resolve against a min-height-only parent, so flex stretch is what lets this box reach full height instead of collapsing to its own content.
The top border is tinted with the theme accent, the first of three tone colors. It reveals from the bottom, once, the moment it's 15% into view — scroll back up and it stays put.
A narrower box this time — max-width: 28em, vertically centered with a flex column instead of spanning the full width.
Its border runs down the left edge in the second tone color, a variable of its own separate from the accent on panel one — the theme switcher can shift all three independently.
The mirror image of panel two — the same narrow, vertically-centered box, flipped left with its border on the right in the third tone color.
Below 992px all three panels drop this treatment: the fixed background becomes a real, stacked <img> — the same file this box sits on top of here — and the content box goes static, full width, centered.
Every tile below documents a real piece of Harbor — nothing here is decorative
Three full-viewport photo panels, docked bottom, right, and left — the three sections just above this one.
--bs-body-bg, --bs-emphasis-color, and --bs-border-color are overridden at :root — Bootstrap's own components read those variables directly.
Cyan, green, magenta, amber, violet, crimson, slate — flip them live with the dots in the navbar above.
Layouts opens a dropdown; its own Jump to Section item opens a second one — click, hover, or Escape all work.
Left rail, right rail, or no rail at all — every page shares this same chrome, so the layouts mix freely across one site.
Bootstrap's bundle plus one page of vanilla JS runs every interaction: reveals, dropdowns, and the theme picker.
This is the email CTA — a full-width band in the theme accent color with one input and one button