/* * nav-v2.css — the redesigned navigation. * * Loaded only while config.php has 'nav' => 'v2'. Every rule is scoped under * .hk-nav-v2 on , so nothing here can reach the page with the flag off. * * Tokens are read from assets/css/tokens.css rather than invented here, and * this file declares none of its own: Palatino Linotype for display, Lato for UI, the leather tan * #8A583C measured from the site's own photography, and #70707E rather than * the #8A8A94 that failed AA at 3.42:1 on white. */ /* Every colour and face below comes from assets/css/tokens.css, which loads first. Nothing here declares a value of its own — that is what stops the palette drifting between the header and the footer, as it did. */ .hk-nav-v2 { --hkn-ink: var(--ink); --hkn-fg: var(--grey-9); --hkn-muted: var(--grey-5); --hkn-hairline: var(--grey-2); --hkn-paper: var(--paper); --hkn-accent: var(--accent); --hkn-accent-deep: var(--accent-deep); --hkn-sans: var(--sans); --hkn-display: var(--display); --hkn-bg: var(--hkn-paper); --hkn-link: var(--hkn-fg); --hkn-bar-h: 60px; } /* The dark variant. config.php: 'nav_theme' => 'dark'. #000000 is not a guess: it is the background the site's own footer already uses, so the bar at the top and the block at the bottom are the same black rather than two nearly-equal darks arguing with each other. */ .hk-nav-v2.hk-nav-dark { --hkn-bg: var(--black); --hkn-link: var(--fg-dark); /* 15.46:1 — the site's most-used colour */ --hkn-muted: var(--dim-dark); /* 10.78:1 */ --hkn-hairline: var(--rule-dark); } /* The dropdown panel follows the bar down, or it reads as a light box punched out of a black header. */ .hk-nav-dark .hkn__sub { background: var(--raised-dark); border-color: var(--rule-dark); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); } .hk-nav-dark .hkn__sublink { color: var(--fg-dark); } .hk-nav-dark .hkn__sublink:hover, .hk-nav-dark .hkn__sublink:focus-visible { background: var(--hover-dark); color: var(--accent-light); } /* ── neutralise the jNews bar this nav is injected into ────────────────── The seam sits four wrappers deep in a three-column flex row. Rather than fight that layout from the inside, the columns either side are removed and the middle one is allowed to span the bar. */ .hk-nav-v2 .jeg_bottombar.jeg_navbar { background: var(--hkn-bg) !important; border-top: 1px solid var(--hkn-hairline); border-bottom: 1px solid var(--hkn-hairline); } /* The logo band was 160px tall to hold a 41px logo — 119px of empty black on every page, above the fold, before a reader sees anything. The theme sets a fixed height on .jeg_nav_row; this replaces it with padding around the logo so the band is as tall as its contents. 255px of header chrome becomes 183. Scoped to .hk-nav-v2, so 'nav' => 'classic' in config.php restores the captured height along with everything else. */ .hk-nav-v2 .jeg_midbar, .hk-nav-v2 .jeg_midbar .jeg_nav_row { height: auto !important; min-height: 0 !important; } .hk-nav-v2 .jeg_midbar .jeg_nav_row { padding: 1.5rem 0 !important; } @media (max-width: 1024px) { /* responsive.css hides this band below 1024 anyway; keep it out of the way rather than leaving a rule that only matters on desktop. */ .hk-nav-v2 .jeg_midbar .jeg_nav_row { padding: 1rem 0 !important; } } /* ── making the bar stay put ───────────────────────────────────────────── position:sticky on the bar itself does NOT work here, and the reason is easy to miss: a sticky element only sticks while its PARENT box is on screen. .jeg_header is about 255px tall, so past that the bar left with it and the navigation could only be reached by scrolling back to the top. The fix is to stick an ancestor whose own parent is the full page — .jeg_header_wrapper, inside .jeg_viewport — and pull it up by exactly the height of everything above the bar. The top strip and the logo band scroll away; the bar stops at zero. nav-v2.js measures that offset, because it differs between breakpoints (the top strip is hidden under 1024px). */ .hk-nav-v2 .jeg_header_wrapper { position: sticky; top: calc(-1 * var(--hk-stick, 194px)); z-index: 90; } .hk-nav-v2 .jeg_bottombar .jeg_nav_row { display: block; } .hk-nav-v2 .jeg_bottombar .jeg_nav_col:not(.jeg_nav_center) { display: none; } .hk-nav-v2 .jeg_bottombar .jeg_nav_col.jeg_nav_center, .hk-nav-v2 .jeg_bottombar .item_wrap, .hk-nav-v2 .jeg_bottombar .jeg_nav_item, .hk-nav-v2 .jeg_bottombar .jeg_mainmenu_wrap { display: block; width: 100%; position: static; text-align: left; } /* The theme's own sticky clone and off-canvas drawer are redundant now: the bar above is sticky and this nav carries its own panel. */ .hk-nav-v2 .jeg_header_sticky, .hk-nav-v2 .jeg_navbar_mobile_wrapper, .hk-nav-v2 #jeg_off_canvas { display: none !important; } /* responsive.css hides the whole desktop header below 1024px and swaps in the mobile bar above. With that bar gone this nav went with it — toggle and all — which is the one failure this navigation is not allowed to have. The header stays; only the top strip, which is a date and a login link, drops away on small screens. */ .hk-nav-v2 .jeg_header { display: block !important; } @media (max-width: 1024px) { .hk-nav-v2 .jeg_topbar { display: none !important; } .hk-nav-v2 .jeg_midbar { padding-block: .5rem; } } /* ── the nav itself ─────────────────────────────────────────────────────── */ /* No width of its own: the bar's own .container is already the measured 1170px with 15px gutters, and adding a second box here pushed the call to action past the container's right edge. */ .hkn { font-family: var(--hkn-sans); } .hkn__panel { display: flex; align-items: center; gap: 1.5rem; min-height: var(--hkn-bar-h); } .hkn__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; } .hkn__item { position: relative; } .hkn__link { display: block; padding: 0 1rem; line-height: var(--hkn-bar-h); font-size: 0.8125rem; /* 13px — measured button/UI size */ letter-spacing: 1px; /* measured */ text-transform: uppercase; text-decoration: none; color: var(--hkn-link); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .hkn__link:hover, .hkn__item:focus-within > .hkn__link { color: var(--hkn-accent); } /* The one accent, used once: the current section. */ .hkn__item.is-current > .hkn__link { color: var(--hkn-accent); border-bottom-color: var(--hkn-accent); } .hk-nav-dark .hkn__item.is-current > .hkn__link { color: var(--accent-light); border-bottom-color: var(--accent-light); } .hk-nav-dark .hkn__link:hover { color: var(--accent-light); } /* ── dropdowns: a hairline panel, no shadow stack, square corners ───────── */ .hkn__sub { list-style: none; margin: 0; padding: 0.5rem 0; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--hkn-paper); border: 1px solid var(--hkn-hairline); border-radius: 0; box-shadow: 0 12px 28px rgba(16, 16, 24, .08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 20; } .hkn__item--sub:hover > .hkn__sub, .hkn__item--sub:focus-within > .hkn__sub { opacity: 1; visibility: visible; transform: none; } /* The dropdown was set in a different type system from the bar above it — 14px, no tracking, against the bar's 13px/1px/uppercase — so the two read as two designs stacked. 13px and a little tracking ties them together; sentence case stays, because a column of uppercase is slower to read than a row of it. The hover is a 2px accent edge rather than a full grey block: a solid fill inside a 250px panel is the heaviest possible way to say "this one". */ .hkn__sublink { display: block; padding: 0.55rem 1.25rem; line-height: 1.45; /* not the bar's inherited 60px */ font-size: 0.8125rem; letter-spacing: .04em; color: var(--hkn-fg); text-decoration: none; border-left: 2px solid transparent; transition: color .14s ease, border-color .14s ease; } .hkn__sublink:hover, .hkn__sublink:focus-visible { color: var(--hkn-accent); border-left-color: var(--hkn-accent); } .hkn__sublink.is-current { color: var(--hkn-accent); border-left-color: var(--hkn-accent); } /* A caret, drawn rather than iconographic — no font dependency. */ .hkn__item--sub > .hkn__link::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .55em; vertical-align: .12em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .65; } /* ── the call to action ─────────────────────────────────────────────────── */ .hkn__cta { flex: 0 0 auto; align-self: center; /* The theme gives every anchor in this bar `line-height: 60px` to size the nav items. Inherited here it made a 38px button 82px tall and burst it out of a 61px bar. */ line-height: 1.2; padding: 0.72rem 1.35rem; background: var(--hkn-accent); color: var(--paper); /* 5.93:1 on the tan */ font-size: var(--t-sm); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); transition: background .15s ease; } .hkn__cta:hover, .hkn__cta:focus-visible { background: var(--hkn-accent-deep); color: #FFF; } /* ── the toggle ───────────────────────────────────────────────────────── Ships hidden. nav-v2.js reveals it only once it can also collapse the panel, so a script that never runs leaves the menu OPEN rather than unreachable. Mobile is 71% of this site's clicks. */ .hkn__toggle { display: flex; align-items: center; gap: .6rem; height: var(--hkn-bar-h); padding: 0; background: none; border: 0; cursor: pointer; color: var(--hkn-link); font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase; } .hkn__toggle[hidden] { display: none; } .hkn__burger { display: block; width: 20px; } .hkn__burger i { display: block; height: 1px; background: currentColor; margin: 5px 0; transition: transform .2s ease, opacity .2s ease; } .hkn__toggle[aria-expanded="true"] .hkn__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hkn__toggle[aria-expanded="true"] .hkn__burger i:nth-child(2) { opacity: 0; } .hkn__toggle[aria-expanded="true"] .hkn__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .hkn__disclose { display: none; } /* ── below 900px ──────────────────────────────────────────────────────── 1024px is where responsive.css swaps the theme to its mobile header, so this nav collapses at the same point rather than leaving a band where the theme thinks it is mobile and the nav does not. A previous

-based nav in this project vanished above 900px; this one is measured at 1440, 1200, 1024, 900, 768 and 390. */ @media (max-width: 1024px) { /* The theme fixes this bar's height, so its background painted only the first 60px and the open drawer rendered transparent over the hero. The bar grows with the panel, and the panel paints its own ground either way. */ .hk-nav-v2 .jeg_bottombar.jeg_navbar { height: auto; } /* The bar's .container is the measured 1170px box with 15px gutters. On a phone that inset the drawer's background by 20px a side and left the hero showing down both edges of an open menu. A drawer is full-bleed; the gutters move onto the items themselves, just below. */ .hk-nav-v2 .jeg_bottombar > .container { max-width: none; width: 100%; margin-inline: 0; padding-inline: 0; } .hkn__panel { display: block; background: var(--hkn-bg); border-top: 1px solid var(--hkn-hairline); padding-block: 0 1rem; /* A seven-item menu with submenus open is taller than a phone. */ max-height: calc(100dvh - var(--hkn-bar-h)); overflow-y: auto; overscroll-behavior: contain; } .hkn__panel[hidden] { display: none; } .hkn__toggle { padding-inline: 1.25rem; } .hkn__list { display: block; } .hkn__item { border-bottom: 1px solid var(--hkn-hairline); } .hkn__item:last-child { border-bottom: 0; } .hkn__link { line-height: 1.4; padding: 1rem 3.5rem 1rem 1.25rem; /* ≥48px target, room for the disclosure */ border-bottom: 0; } .hkn__item.is-current > .hkn__link { box-shadow: inset 3px 0 0 var(--hkn-accent); } .hkn__item--sub > .hkn__link::after { display: none; } /* The disclosure button is revealed by JS for the same reason as the toggle: with no script the submenus stay open and every link is reachable by scrolling. */ .hkn__disclose { display: block; position: absolute; top: 0; right: .5rem; width: 3rem; height: 3.4rem; background: none; border: 0; cursor: pointer; color: var(--hkn-muted); } .hkn__disclose[hidden] { display: none; } .hkn__disclose::after { content: ""; position: absolute; top: 50%; left: 50%; width: .45em; height: .45em; margin: -.35em 0 0 -.25em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } .hkn__disclose[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -.1em; } .hkn__sub { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 .5rem; background: transparent; } .hkn__sub[hidden] { display: none; } .hkn__sublink { padding: .7rem 1.25rem .7rem 2.25rem; font-size: .9375rem; } .hk-nav-dark .hkn__sublink { color: var(--hkn-link); } .hk-nav-dark .hkn__sublink:hover { background: var(--hover-dark); } .hkn__cta { display: block; margin: 1rem 1.25rem 0; text-align: center; } } @media (prefers-reduced-motion: reduce) { .hkn__sub, .hkn__link, .hkn__cta, .hkn__burger i, .hkn__disclose::after { transition: none; } }