/* HoC - Navigation. Layout only; surfaces, type and buttons come from hoc-main.css so template #2 inherits them unchanged. Proportions and link weight come from the CURRENT site header, measured 2026-09-02: 95px bar, links 18px / 400 / sentence case, buttons 16px / 600. v1.0 had a 76px bar with 14px / 600 links, which is what made it read as a redesign rather than the site's own header. */ /* --- THE BAR IS PINNED TO THE VIEWPORT ---------------------------------- Asked for 2026-09-07: the header has to stay visible for the whole scroll on every page, with an opaque surface so its type is always legible. IT IS `fixed`, NOT `sticky`, AND THAT IS THE WHOLE POINT. `position: sticky` cannot work from where this module sits: the portal nests every module in a dnd_section wrapper no taller than the module itself, so a sticky bar has no containing block to travel through and unsticks the instant it is scrolled. `fixed` ignores the wrapper chain entirely, which is what lets the bar pin from inside the dnd_area -- so the three pages that already exist get this with no edit to their page content at all. (The alternative, moving the nav into the layout as a global partial, is recorded as follow-up work in new-site-theme/REVERT.md and would mean rebuilding all three pages.) Nothing here relies on an ancestor's position, so it cannot be undone by the dnd wrappers. The one thing that WOULD break it is a `transform`, `filter` or `will-change` on an ancestor -- that makes the ancestor the containing block for a fixed child. The scroll-in engine only ever transforms `.hoc-anim-group` children, and this bar is not one, so it is safe today; if a future band puts a transform on the dnd_area or on the page body, this is the file to come back to. (Angle brackets avoided deliberately -- see the note in css/hoc-tokens.css beside --hoc-nav-h.) TWO CONSEQUENCES, both handled below: a fixed element is out of flow, so .hoc-nav-shell reserves the height it used to occupy; and it now floats over other bands, so it needs both an opaque surface and a z-index above them. ------------------------------------------------------------------- */ /* THE SURFACE IS OPAQUE, AND IT HAS TO BE. It comes from the band tone, which is Paper -- #FFFFFF -- by field default and on all three pages, so the bar is white the whole way down and its type stays #010101 over the Quantum hero it now passes over. The tone field still works if a dark bar is ever wanted; it is the opacity, not the colour, that this comment is here to protect. Do not give this element a translucent background or a backdrop-filter. */ .hoc-nav { border-bottom: var(--hoc-rw) solid var(--hoc-hairline); /* The un-pinned bar, which is what a visitor with no JavaScript gets. The dropdown panels have to escape it. */ position: relative; z-index: 20; } /* PINNED ONLY BEHIND .hoc-js, AND THAT IS NOT BELT-AND-BRACES -- it is what makes the spacer exact. The bar's height is 96px at desktop widths but follows the logo below the breakpoint, where the layout is two rows, and the logo's width is an editor field. So the height has to be measured, and only js/hoc-nav.js can measure it. .hoc-js is set by one inline line in before first paint (see templates/layouts/base.html), so there is no flash of an unpinned bar, and hoc-anim.css already gates the scroll-in animation the same way. With no JavaScript the bar simply stays in the flow and scrolls away -- the theme's own behaviour until today, and better than pinning it over a guessed height and having it sit on the hero's first line. --hoc-nav-h starts at 96px in hoc-tokens.css, so the narrow case where JavaScript runs but this one file does not arrive is exact on desktop and a little short on mobile rather than broken. ------------------------------------------------------------------- */ .hoc-js .hoc-nav { position: fixed; top: 0; left: 0; right: 0; /* Above every band on the page. The dropdown panels' own z-index: 20 is scoped inside this stacking context, so it stacks the panels against the bar rather than competing with the page. */ z-index: 900; } .hoc-js .hoc-nav-shell { min-height: var(--hoc-nav-h); } /* THE LINK ROW IS CENTRED ON THE BAR, not packed against the logo. Both the brand handoff ("Link row centre") and the current site do this -- measured on the live header at 1600px, its menu list sits within 10px of dead page centre. v1.0 and v1.1 used `margin-right: auto`, which pins the row hard left against the logo. A three-column grid with EQUAL 1fr sides is what makes it true page centring rather than "centred between the logo and the buttons": the middle column lands on the page's centre line whatever the logo and button widths are, so the row does not shift when someone renames a button. `auto 1fr auto` would not do this. */ .hoc-nav__row { min-height: 95px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--hoc-sp-6); } .hoc-nav__logo { display: inline-flex; line-height: 0; justify-self: start; } .hoc-nav__logo img { display: block; height: auto; } .hoc-nav__links { justify-self: center; min-width: 0; } /* The gap is FLUID, because the bar's budget is not. The content column is capped at 1240px, so a wider window gives the top bar no extra room -- at 1920px and at 1440px there is exactly 1240px to divide up. Measured with the real menu (logo 130, links 563 at zero gap, buttons 199): gap 20 logo->links 169 links->buttons 99 gap 32 logo->links 145 links->buttons 75 gap 40 logo->links 129 links->buttons 59 So spreading the links is the only lever on the dead space either side, which is what the supervisor asked for. 40px is the practical ceiling: the links are centred on the page, so the right-hand clearance shrinks twice as fast as the gap grows, and past 44px it starts crowding the buttons at 1280px. The left gap stays larger than the right by about 70px and that is structural, not an oversight: the logo is 130px and the button pair is 199px, so a row centred on the page cannot leave equal space either side. Equalising the gaps would mean giving up page centring, which is what the brand handoff specifies and what the current site does. */ .hoc-nav__list { display: flex; flex-wrap: wrap; align-items: center; /* NARROWED 2026-09-10, FROM clamp(sp-6, 2.2vw, sp-10). The reasoning above still holds -- spreading the links was the only lever on the dead space either side, and 40px was the ceiling -- but the bar's budget changed when it gained the language control, and that dead space is now occupied. The supervisor's ask was "do not leave the sides empty", not "40px"; the sides are no longer empty. WHY IT HAD TO CHANGE, measured on the LIVE /james header rather than the local preview (the preview renders the 5-item FALLBACK list, whose labels are much shorter than the real menu's, and it reported a comfortable 27px where the real page had 2px -- do not size this bar against the preview): viewport About us -> globe, BEFORE AFTER 1280 10px 27px 1366 42px 61px 1600 32px 53px 1920 22px 46px Before, the globe sat CLOSER to "About us" than the menu items sat to each other, so it read as a sixth menu item. After, the gap is larger than the item gap at every width, which is what makes it read as part of the button group instead. No breakpoint moved. */ gap: clamp(var(--hoc-sp-6), 1.8vw, var(--hoc-sp-8)); margin: 0; padding: 0; list-style: none; } .hoc-nav__item { position: relative; } /* 18px / 400: the live site's own header weight. Hierarchy in this brand comes from weight and size, and a nav is not where either should shout. */ .hoc-nav__link { display: inline-flex; align-items: center; gap: var(--hoc-sp-2); padding: var(--hoc-sp-3) 0; font: 400 var(--hoc-t-body-lg)/1.2 var(--hoc-font-body); color: inherit; text-decoration: none; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: border-color var(--hoc-dur-fast) var(--hoc-ease-out); } .hoc-nav__link:hover { border-bottom-color: var(--hoc-lilac); } /* Caret on the items that carry a dropdown, drawn rather than loaded -- the brand's own icon set was supplied only as raster sheets. */ .hoc-nav__link--parent::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--hoc-dur-fast) var(--hoc-ease-out); } .hoc-nav__item--has-sub:hover .hoc-nav__link--parent::after, .hoc-nav__item--has-sub:focus-within .hoc-nav__link--parent::after { transform: translateY(1px) rotate(225deg); } /* --- Dropdowns ----------------------------------------------------------- Opened by :hover AND :focus-within, so they are keyboard reachable with no JavaScript. Panel is a light surface whatever the bar's tone, so its type is always #010101 -- one hairline border and one soft shadow is the one place the brand allows both, because a floating panel needs the border to define its edge and the shadow to lift it off the page beneath. ------------------------------------------------------------------- */ .hoc-nav__sub { position: absolute; top: 100%; left: calc(-1 * var(--hoc-sp-4)); margin: 0; padding: var(--hoc-sp-5); list-style: none; min-width: 240px; background: var(--hoc-paper); color: var(--hoc-fg-on-light); border: var(--hoc-rw) solid var(--hoc-hairline); border-radius: var(--hoc-r-lg); box-shadow: var(--hoc-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--hoc-dur-base) var(--hoc-ease-out), transform var(--hoc-dur-base) var(--hoc-ease-out), visibility var(--hoc-dur-base); } .hoc-nav__item--has-sub:hover > .hoc-nav__sub, .hoc-nav__item--has-sub:focus-within > .hoc-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } /* With the row centred, a panel hanging off the last item can overrun the right edge -- a two-column panel is 460px wide and the last item sits near page centre plus half the row. Anchor the last one or two items' panels to their right edge instead. */ .hoc-nav__item:last-child > .hoc-nav__sub, .hoc-nav__item:nth-last-child(2) > .hoc-nav__sub { left: auto; right: calc(-1 * var(--hoc-sp-4)); } /* A two-column panel, as the live header's first item uses. */ .hoc-nav__sub--columns { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: var(--hoc-sp-6) var(--hoc-sp-8); min-width: 460px; } .hoc-nav__sub-col { min-width: 0; } .hoc-nav__sub-title { margin-bottom: var(--hoc-sp-3); } .hoc-nav__sub-list { margin: 0; padding: 0; list-style: none; } .hoc-nav__sub :where(a) { display: block; padding: var(--hoc-sp-2) 0; font: 400 var(--hoc-t-body-sm)/var(--hoc-lh-normal) var(--hoc-font-body); color: var(--hoc-fg-on-light); text-decoration: none; } .hoc-nav__sub :where(a):hover { text-decoration: underline; text-underline-offset: 2px; } .hoc-nav__actions { display: flex; align-items: center; gap: var(--hoc-sp-3); justify-self: end; } /* --- THE LANGUAGE SWITCHER ------------------------------------------------ Added 2026-09-10, because the live site header has one and this bar did not: /obf and /james gave a visitor no route to the Norwegian, Danish or Swedish site. IT DELIBERATELY DOES NOT REUSE .hoc-nav__sub, and that is the point of the duplication below. .hoc-nav__sub is `display: none` under 1279px -- right for the menu dropdowns, whose parent link stays in the scrolling row, and wrong here, where it would leave a control that opens nothing on precisely the small screen where somebody is most likely to want their own language. So the panel carries the same surface treatment under its own class and survives the breakpoint. If the menu panels' surface is ever restyled, this block has to follow. ------------------------------------------------------------------- */ .hoc-nav__lang { position: relative; } /* The browser's own disclosure triangle is not this brand's, so it is removed in both dialects and the caret is drawn the way the menu's is. */ .hoc-nav__lang-toggle { display: inline-flex; align-items: center; gap: var(--hoc-sp-2); /* Vertical padding only. Side padding here widens the actions group, and because that group is right-aligned, widening it drags the globe LEFT -- towards the menu, which is the opposite of what is wanted. Worth 8px of the gap above. */ padding: var(--hoc-sp-2) 0; font: 400 var(--hoc-t-body-sm)/1.2 var(--hoc-font-body); color: inherit; white-space: nowrap; cursor: pointer; list-style: none; border-radius: var(--hoc-r-sm); } .hoc-nav__lang-toggle::-webkit-details-marker { display: none; } .hoc-nav__lang-toggle:hover { text-decoration: underline; text-underline-offset: 3px; } .hoc-nav__lang-toggle::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--hoc-dur-fast) var(--hoc-ease-out); } .hoc-nav__lang[open] > .hoc-nav__lang-toggle::after { transform: translateY(1px) rotate(225deg); } .hoc-nav__globe { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; } /* RIGHT-ANCHORED, because this control sits at the right end of the bar and a left-anchored panel would hang off the viewport. Same reasoning as the last-child rule on the menu panels above. */ .hoc-nav__lang-list { position: absolute; top: calc(100% + var(--hoc-sp-2)); right: 0; z-index: 20; margin: 0; padding: var(--hoc-sp-4); min-width: 170px; list-style: none; background: var(--hoc-paper); color: var(--hoc-fg-on-light); border: var(--hoc-rw) solid var(--hoc-hairline); border-radius: var(--hoc-r-lg); box-shadow: var(--hoc-shadow-lg); } .hoc-nav__lang-list :where(a) { display: block; padding: var(--hoc-sp-2) 0; font: 400 var(--hoc-t-body-sm)/var(--hoc-lh-normal) var(--hoc-font-body); color: var(--hoc-fg-on-light); text-decoration: none; white-space: nowrap; } .hoc-nav__lang-list :where(a):hover { text-decoration: underline; text-underline-offset: 2px; } /* A dark bar needs the hairline to read against it, and the panel keeps its own light surface, so its links must not inherit the band's white. */ .hoc-band--quantum.hoc-nav, .hoc-band--core.hoc-nav, .hoc-band--dark.hoc-nav { border-bottom-color: rgba(255, 255, 255, .14); } .hoc-band--quantum.hoc-nav .hoc-nav__sub :where(a, p), .hoc-band--core.hoc-nav .hoc-nav__sub :where(a, p), .hoc-band--dark.hoc-nav .hoc-nav__sub :where(a, p) { color: var(--hoc-fg-on-light); } .hoc-band--quantum.hoc-nav .hoc-nav__lang-list :where(a), .hoc-band--core.hoc-nav .hoc-nav__lang-list :where(a), .hoc-band--dark.hoc-nav .hoc-nav__lang-list :where(a) { color: var(--hoc-fg-on-light); } /* --------------------------------------------------------------------------- THE SINGLE ROW STOPS FITTING AT ABOUT 1140px, NOT 1100px. That off-by-40px window is what made the "Log in" button clip the "About us" caret in the last few pixels before the layout switched. Measured at a 1101px viewport, with the OLD 20px gap: links-to-buttons was **-18px**, i.e. already overlapping, because the content column is only 1005px there and the three equal grid columns cannot hold a 199px button pair. So this was never a gap problem -- it overlapped at every gap value tested -- and nudging the spacing would only have moved the window, not closed it. The breakpoint is now 1279px, where the measured clearance is a comfortable 31px, and there is no width at which the row is squeezed. Cost, recorded honestly: between 1280px and 1100px the bar is now stacked while the hero is still two-column. That is a normal responsive pattern -- a header usually collapses before body content does -- but it is a change from v1.1's first pass. --------------------------------------------------------------------------- */ @media (max-width: 1279px) { /* Back to flex below the breakpoint: three centred columns cannot survive a 130px logo, two buttons and a scrolling link row on a 375px screen. */ .hoc-nav__row { min-height: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--hoc-sp-4); padding-top: var(--hoc-sp-4); padding-bottom: var(--hoc-sp-4); } .hoc-nav__logo { justify-self: auto; } .hoc-nav__actions { justify-self: auto; margin-left: auto; } /* Two rows, not three: logo and buttons on the first, the links on the second as a single line that scrolls sideways. Wrapping them instead left a 46px dead band between two short rows. A burger menu with collapsible dropdowns would be better still, but it needs JS -- recorded in REVERT.md as follow-up rather than smuggled into a WIP theme. */ .hoc-nav__links { order: 3; width: 100%; justify-self: auto; } /* At 375px the 130px logo plus both buttons overshoot the content width by a couple of pixels, which pushed the buttons onto a third row and made the bar 188px tall. max-width wins over the field's inline width, so capping it here keeps the bar at two rows without overriding the editor's setting on any larger screen. */ .hoc-nav__logo img { max-width: 110px; } .hoc-nav__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .hoc-nav__list::-webkit-scrollbar { display: none; } .hoc-nav__link { white-space: nowrap; font-size: var(--hoc-t-body); } /* A hover panel is unusable on touch, and an off-screen absolute panel inside a horizontally scrolling row is worse -- so the panel stays hidden until a tap opens it. THE SENTENCE THAT USED TO END THIS COMMENT WAS WRONG, and it is worth leaving the correction visible. It said: "The parent's own link is still in the row, so nothing becomes unreachable." Measured on the served header on 2026-09-14, three of the five top-level items -- Solutions, Resources, About us -- have NO link of their own. The HubSpot menu gives them none; they exist only to hold their children, and the module renders them as a