/* ── Renatus v2 navbar ──────────────────────────────────────
Site-wide v2 chrome (brevon-style header). Loaded by
partials/navbar.html in addition to navbar.css. All rules are
scoped under `.v2-nav` so this stylesheet has zero effect on
any page that does not opt into the v2 markup. Sister of
brevon-renatus-overrides.css but page-agnostic (no body.home-v2
scope) so every page that includes the navbar partial picks it
up automatically. */
/* ── tokens ─────────────────────────────────────────────── */
.v2-nav {
--v2-theme: var(--pink, #ff11df);
--v2-header: #1b2230;
--v2-text: #475569;
--v2-white: #ffffff;
--v2-border: rgba(0, 0, 0, 0.08);
--v2-shadow: 0 6px 24px rgba(15, 30, 65, 0.08);
}
/* ── reset base .top-bar so v2 chrome can take over ────── */
.top-bar.v2-nav {
position: absolute;
top: 0; left: 0; right: 0;
width: 100%;
height: auto;
padding: 0;
margin: 0;
background: transparent;
box-shadow: none;
z-index: 999;
display: block;
pointer-events: auto;
}
.top-bar.v2-nav .top-bar-inner {
background: transparent;
border-radius: 0;
padding: 0;
height: auto;
max-width: none;
box-shadow: none;
pointer-events: auto;
display: block;
}
/* Announcement strip — desktop only (matches brevon @ ≤1399 hides).
`margin-bottom: 0` overrides brevon main.css (which sets 30px) so the
navbar sits flush against the strip per the original v2 design. */
.v2-nav .header-top-section {
background-color: var(--v2-header);
position: relative;
margin-bottom: 0;
}
.v2-nav .header-top-section .container-fluid { padding: 0 30px; }
.v2-nav .header-top-wrapper {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0;
position: relative; z-index: 999;
}
.v2-nav .header-top-wrapper .header-left .list {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: 20px;
}
.v2-nav .header-top-wrapper .header-left .list li,
.v2-nav .header-top-wrapper .header-left .list li a {
color: #ffffff; font-size: 15px; font-weight: 500;
text-decoration: none;
}
.v2-nav .header-top-wrapper .header-left .list li a:hover { color: var(--v2-theme); }
.v2-nav .header-top-wrapper .header-right {
display: flex; align-items: center; gap: 20px;
color: #ffffff; font-size: 15px;
}
.v2-nav .header-top-wrapper .header-right span { color: #ffffff; }
.v2-nav .header-top-wrapper .header-right .social-icon {
display: flex; align-items: center; gap: 10px;
}
.v2-nav .header-top-wrapper .header-right .social-icon a {
color: var(--v2-theme); width: 28px; height: 28px;
line-height: 28px; text-align: center;
background-color: #ffffff; opacity: 0.7;
display: inline-block; border-radius: 100px;
font-size: 13px; transition: all 0.3s ease-in-out;
text-decoration: none;
}
.v2-nav .header-top-wrapper .header-right .social-icon a:hover {
opacity: 1; color: var(--v2-header);
}
@media (max-width: 1399px) {
.v2-nav .header-top-section { display: none; }
}
/* ── Main header row ─────────────────────────────────────── */
.v2-nav.header-1 .container-fluid { padding: 0 30px; }
@media (max-width: 575px) {
.v2-nav.header-1 .container-fluid { padding: 0 15px; }
}
.v2-nav .mega-menu-wrapper { background: transparent; }
.v2-nav .header-main {
position: relative;
display: flex; align-items: center; justify-content: space-between;
/* Match brevon main.css .header-main exactly (10px) so /methodology,
/pricing, etc. line up pixel-for-pixel with /. Previously 12px,
which produced a ~4px taller bar on every non-home page. */
padding: 10px 0;
min-height: 64px;
gap: 24px;
}
.v2-nav .header-main .header-left .logo {
display: inline-flex; align-items: center;
}
.v2-nav .header-main .header-left .header-logo img,
.v2-nav .header-main .header-left .header-logo-2 img {
height: 38px; width: auto; max-width: none; display: block;
}
.v2-nav .header-main .header-left .header-logo-2 { display: none; }
/* .header-left is a flex row so the hamburger (now inside it) and
the logo sit side-by-side and centre-align. On desktop the
hamburger is hidden so the only visible child is .logo. */
.v2-nav .header-main .header-left {
display: flex; align-items: center; gap: 4px;
}
/* Mobile logo swap: at ≤767px hide the full symbol+wordmark logo
and reveal the wordmark-only version (header-logo-2 src is
renatus_wordmark-color.svg — see navbar.html). */
@media (max-width: 767px) {
.v2-nav .header-main .header-left .header-logo { display: none; }
.v2-nav .header-main .header-left .header-logo-2 { display: block; }
/* Wordmark viewBox is 560×120 (text fills full height); the full logo
viewBox is 850×226 where text occupies ~120/226 = 53% of the height.
At 38px full-logo height the text renders at ≈20px. Match that here
so the wordmark reads the same visual weight as the desktop logo. */
.v2-nav .header-main .header-left .header-logo-2 img { height: 18px !important; width: auto !important; max-width: none !important; }
body:not(.home-v2) .v2-nav .header-main .header-left .header-logo-2 { position: relative; top: 13px; }
/* Balance: hide the pricing header-btn (now in the drawer, not needed
in the right cluster on mobile — its invisible wrapper was creating
a phantom gap between the language switcher and avatar).
Reduce avatar to 24px. Tighten cluster gap. */
.v2-nav .header-main .header-right .header-btn--pricing { display: none; }
/* Mobile avatar — no disc, navy text, semibold */
.v2-nav .top-bar-user-avatar {
width: 24px; height: 24px; font-size: 16px; font-weight: 600;
background-color: transparent; box-shadow: none;
color: var(--navy); position: relative; top: 2px;
}
/* Language trigger — semibold */
.v2-nav .nav-lang-trigger { font-weight: 600; position: relative; top: 2px; }
/* Help button — plain ? on mobile */
.v2-nav .navbar-help-stars { display: none; }
.v2-nav .navbar-help-text { display: inline; font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1; position: relative; top: 2px; right: 5px; }
.v2-nav .header-main .header-right { gap: 8px; }
/* Flush the hamburger to the left edge — the container's left padding
was creating dead space to the left of the icon. */
.v2-nav.header-1 .container-fluid { padding-left: 4px; }
}
/* base.css ships `.logo-area { order: 2; flex: 1; margin-left: 12px }` inside
its own @media (max-width: 768px) block for the legacy navbar. The v2 navbar
reuses the class name (header-left logo-area) so that rule bleeds in and
pushes the hamburger+logo cluster to the far-right of .header-main on every
non-home page that loads base.css. Reset here so the v2 left cluster stays
left at all mobile widths. Home page is unaffected (home_v2.html does not
load base.css). */
@media (max-width: 768px) {
.v2-nav .header-main .header-left {
order: 0;
flex: 0 0 auto;
margin-left: 0;
}
}
/* Centred nav — absolutely positioned so logo+right cluster don't
shift the centre. Brevon ships this as an inline style on home_v2;
moved here so every page gets it. */
.v2-nav .header-main > .mean__menu-wrapper {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
@media (max-width: 1199px) {
.v2-nav .header-main > .mean__menu-wrapper {
position: static; transform: none;
}
/* Hide desktop centre nav on mobile — offcanvas takes over. */
.v2-nav .main-menu { display: none; }
}
/* Centre menu links + dropdowns (distilled from brevon main.css). */
.v2-nav .main-menu ul {
list-style: none; margin: 0; padding: 0;
}
.v2-nav .main-menu > nav > ul {
display: flex; align-items: center;
}
.v2-nav .main-menu ul li {
position: relative;
list-style: none;
display: inline-block;
/* Match brevon main.css link spacing (50px) so non-home pages have
the same horizontal rhythm as /. Was 38px which made the bar feel
tighter and slightly shorter. */
margin-inline-end: 50px;
}
@media (max-width: 1199px) {
.v2-nav .main-menu ul li { margin-inline-end: 30px; }
}
.v2-nav .main-menu ul li:last-child { margin-inline-end: 0; }
.v2-nav .main-menu ul li a {
display: inline-block;
/* Match brevon main.css link typography exactly (16px font) so the
total navbar height equals the home sticky bar. Christine 2026-05-24. */
font-size: 16px; font-weight: 600;
color: var(--v2-header);
/* Match brevon main.css .main-menu link padding exactly (20px) so
non-home pages have the same total navbar height as /. */
padding: 20px 0;
text-align: left;
position: relative;
text-decoration: none;
text-transform: capitalize;
transition: color 0.3s ease-in-out;
letter-spacing: -0.1px;
}
.v2-nav .main-menu ul li a i { margin-left: 4px; font-size: 12px; }
/* Hover behaviour, consistent across every page.
──────────────────────────────────────────────
brevon ships three things we have to neutralise on hover:
(1) link colour flips to --theme (#F94D00 orange) with
!important;
(2) the link gets margin-left: 10px, which slides the whole
label text rightward;
(3) submenu items get a 10px-wide ::before "hyphen" that
inherits the same orange --theme background.
We want: bold-weight on hover for centre-nav, no colour
flash, no text slide, and the submenu hyphen recoloured
to our pink so it matches selected-state. Christine
2026-05-24. */
.v2-nav .main-menu ul li a:hover { font-weight: 700; }
.v2-nav .main-menu ul li:hover > a {
color: var(--v2-header) !important;
margin-left: 0 !important;
}
/* Christine (28 May): submenu item hover — bold black text on a
soft off-white wash (#FAFCFE) so the row reads as a clearly
active target across every dropdown (Free Reports, Products,
Solutions, Methodology, etc.). Wash colour #f2f3f4 matches the
/home page body background so the hover blends with the surface
rather than reading as a distinct grey chip. Was: var(--v2-theme)
pink text with no background. */
.v2-nav .main-menu ul li .submenu li a:hover,
.v2-nav .main-menu ul li .submenu li:hover > a {
color: var(--navy) !important;
font-weight: 700 !important;
background: #f2f3f4 !important;
margin-left: 0 !important;
}
/* Recolour the brevon hyphen dash from orange → pink.
Hard-coded #FF11DF (not var(--v2-theme)) because brevon's
--theme pink override is scoped to body.home-v2 only, so
any var indirection that resolves through cascade could
still leak orange on non-home pages. The literal removes
all doubt. Christine 2026-05-24. */
.v2-nav .main-menu ul li .submenu li a::before {
background: #FF11DF !important;
}
/* Submenu fallback (no jQuery dependency — CSS hover). */
.v2-nav .main-menu ul li .submenu {
position: absolute;
top: calc(100% - 15px);
inset-inline-start: -70px;
min-width: 240px;
padding: 14px 0;
z-index: 99999;
visibility: hidden; opacity: 0;
transform-origin: top center;
color: var(--v2-header);
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
border-top: 4px solid var(--v2-theme);
background-color: var(--v2-white);
box-shadow: var(--v2-shadow);
border-radius: 10px;
}
.v2-nav .main-menu ul li:hover > .submenu {
visibility: visible; opacity: 1; transform: translateY(0);
}
/* Nested submenus (level 2+: Country Intelligence → Pacific →
Australia/NZ) must CASCADE to the side, not drop straight down.
The generic rule above gives every .submenu top:100%/start:0, which
on a nested submenu stacks it directly beneath its parent item so
the panels overlap and become unusable. Anchoring to the relative
parent , fly the nested panel out to the inline-end edge and
align its top with the parent row. Scoped to a .submenu inside a
.submenu li, so level-1 panels and the home mega-panel are
untouched. */
.v2-nav .main-menu ul li .submenu li .submenu {
top: -18px;
inset-inline-start: calc(100% - 70px);
}
/* Level-3 (third column): much less left overlap so it doesn't
clip the level-2 item text. Higher specificity wins over the rule above. */
.v2-nav .main-menu ul li .submenu li .submenu li .submenu {
inset-inline-start: calc(100% - 20px);
}
/* ── Per-menu overrides (fully isolated per menu + per level) ───────
Each menu uses > direct-child combinators so its rules only apply
to that exact depth within that menu. Global fallbacks above do
not bleed in. Adjust values per menu independently. */
/* Products */
.v2-nav .main-menu ul li.nav-products > .submenu { inset-inline-start: -90px; }
.v2-nav .main-menu ul li.nav-products > .submenu > li > .submenu { inset-inline-start: calc(100% - 100px); }
.v2-nav .main-menu ul li.nav-products > .submenu > li > .submenu > li > .submenu { inset-inline-start: calc(100% - 50px); }
/* Solutions */
.v2-nav .main-menu ul li.nav-solutions > .submenu { inset-inline-start: -90px; }
.v2-nav .main-menu ul li.nav-solutions > .submenu > li > .submenu { inset-inline-start: calc(100% - 100px); }
.v2-nav .main-menu ul li.nav-solutions > .submenu > li > .submenu > li > .submenu { inset-inline-start: calc(100% - 30px); }
/* Free reports */
.v2-nav .main-menu ul li.nav-free > .submenu { inset-inline-start: -70px; }
.v2-nav .main-menu ul li.nav-free > .submenu > li > .submenu { inset-inline-start: calc(100% - 50px); }
.v2-nav .main-menu ul li.nav-free > .submenu > li > .submenu > li > .submenu { inset-inline-start: calc(100% - 50px); }
.v2-nav .main-menu ul li .submenu li {
display: block; width: 100%; margin: 0;
}
.v2-nav .main-menu ul li .submenu li a {
font-size: 14px; font-weight: 500;
color: var(--v2-header);
line-height: 34px;
/* Left padding matches brevon's 32px so the hover dash (::before at
left:14px, width:10px) clears the text with an 8px gap. The
previous flat 22px caused the dash to butt against the label. */
padding: 0 22px 0 32px;
width: 100%;
display: flex; align-items: center; justify-content: space-between;
}
/* Duplicate of the unified hover rule above — kept here only so
the source order is obvious; both resolve to bold-black on
#f2f3f4 per Christine (28 May). */
.v2-nav .main-menu ul li .submenu li a:hover {
color: var(--navy);
font-weight: 700;
background: #f2f3f4;
}
/* ── Home mega panel (has-homemenu) ──────────────────────
The generic v2 .submenu rule above sets `padding: 14px 0`
and `inset-inline-start: 0`, which clobbers brevon's
intended 30px panel padding and -250px centering offset
for the 4-tile home preview. Without these overrides the
tiles stretch edge-to-edge with no frame and the whole
panel anchors to the Home link's left edge. Restore the
brevon geometry only for has-homemenu (extra class bumps
specificity above the generic submenu rule). Also cap
tile width so the placeholders/screenshots render at the
intended ~200px instead of inflating to ~230px+. */
.v2-nav .main-menu ul li .submenu.has-homemenu {
width: 1000px;
left: -250px;
inset-inline-start: -250px;
padding: 30px 30px 10px 30px;
background-color: var(--v2-white);
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu-items {
display: flex;
align-items: flex-start;
gap: 30px;
justify-content: space-between;
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu {
flex: 1 1 0;
min-width: 0;
max-width: 220px;
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu-thumb img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu-title {
display: block;
text-align: center;
margin: 12px auto 0;
font-size: 15px;
font-weight: 600;
color: var(--v2-header);
}
/* Active-page styling — Christine (28 May): unified across every
centre-nav item. The active label renders black, bold, and
underlined (originally a /work-only treatment, now applied to
Free Reports, Products, etc. as well) so the current
destination is signalled identically regardless of which tab
the user is on. The !important is required because the
hover-neutralizer above sets colour with !important to
override brevon's orange — without it, hovering the active
link would knock it back to dark ink. */
.v2-nav .main-menu ul li > a.active,
.v2-nav .main-menu ul li:hover > a.active {
color: var(--navy) !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-underline-offset: 14px;
text-decoration-thickness: 2px;
}
/* ── Right cluster ───────────────────────────────────────── */
.v2-nav .header-right.d-flex,
.v2-nav .header-main .header-right {
display: flex; align-items: center; justify-content: flex-end;
gap: 18px;
position: relative; z-index: 999;
}
.v2-nav .header-btn { display: flex; align-items: center; gap: 14px; }
.v2-nav .header-btn h6 {
margin: 0; font-size: 15px; font-weight: 600;
color: var(--v2-header);
}
.v2-nav .header-btn h6 a {
color: var(--v2-header); text-decoration: none;
transition: color 0.3s ease-in-out;
}
.v2-nav .header-btn h6 a:hover { color: var(--v2-theme); }
.v2-nav .header-btn--pricing h6 { font-weight: 600; }
/* Credits pill — replaces the Pricing link for non-unlimited logged-in users. */
.v2-nav .navbar-credits-pill {
display: inline-flex; align-items: center;
font-size: 13px; font-weight: 600; line-height: 1;
color: var(--navy) !important;
text-decoration: none;
padding: 6px 13px;
border: 1.5px solid var(--navy);
border-radius: 100px;
white-space: nowrap;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.v2-nav .navbar-credits-pill:hover,
.v2-nav .navbar-credits-pill.active {
background: var(--navy);
color: var(--white) !important;
}
.v2-nav .navbar-credits-pill--empty {
border-color: var(--gray-mid);
color: var(--gray-mid) !important;
}
.v2-nav .navbar-credits-pill--empty:hover {
background: var(--navy);
border-color: var(--navy);
color: var(--white) !important;
}
@media (max-width: 767px) { .v2-nav .navbar-credits-pill { display: none; } }
/* Pricing / Sign-in links in the right-side header buttons use the
`.top-bar-link` class (legacy hook). base.css gives that class
`color: var(--white)` and `font-weight: var(--font-medium)` (500),
which on app pages (where base.css loads before navbar-v2.css)
paints the Pricing label white and at the wrong weight — visually
inconsistent with the home page (which doesn't load base.css and
so picks up the v2 h6 styling directly). Override on the v2-nav
scope with matching specificity so the link inherits the same
dark colour + 600 weight regardless of which page it renders on.
Per Christine 2026-05-24. */
.v2-nav .header-btn .top-bar-link,
.v2-nav .header-btn .top-bar-link:link,
.v2-nav .header-btn .top-bar-link:visited {
/* !important needed: base.css ships `.top-bar-link { color: var(--white); }`
as a legacy rule for the old transparent-over-hero navbar. On app pages
base.css loads before navbar-v2.css, and the legacy selector has equal
specificity, so without !important it wins via source order and renders
Pricing as white text on the white v2 navbar. */
color: var(--v2-header) !important;
font-weight: 600;
/* 16px to match the other centre-nav links (brevon parity). */
font-size: 16px;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.v2-nav .header-btn .top-bar-link:hover { color: var(--v2-theme) !important; }
.v2-nav .header-btn .top-bar-link.active { color: var(--v2-theme) !important; }
/* Get Started CTA pill (brevon-style). */
.v2-nav .theme-btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
color: var(--v2-white) !important;
text-decoration: none;
padding: 12px 22px;
background-color: var(--v2-theme);
border-radius: 100px;
border: none;
transition: background-color 0.3s ease, transform 0.3s ease;
gap: 6px;
white-space: nowrap;
}
.v2-nav .theme-btn:hover {
background-color: var(--v2-header);
color: var(--v2-white) !important;
}
/* Hamburger toggle for offcanvas. */
.v2-nav .header__hamburger { display: none; }
@media (max-width: 1199px) {
.v2-nav .header__hamburger { display: inline-flex; }
}
.v2-nav .sidebar__toggle {
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
color: var(--v2-header);
border-radius: 50%;
}
.v2-nav .sidebar__toggle svg { width: 22px; height: 22px; display: block; }
/* ── Solid (always white) — set via navbar_solid=True in the route.
Used on pages where content starts at the top and a transparent
navbar would cause overlap (e.g. public free-report viewer).
No fade-in animation — the bar should appear white on first paint. */
.top-bar.v2-nav.v2-nav--solid,
.top-bar.v2-nav.v2-nav--solid.sticky {
position: fixed !important;
top: 0; left: 0; right: 0; width: 100%;
background-color: var(--v2-white) !important;
box-shadow: 0 4px 18px rgba(15, 30, 65, 0.08) !important;
z-index: 99999;
animation: none !important;
}
/* ── Sticky on scroll (white background, hover lift) ───── */
.v2-nav.sticky,
.top-bar.v2-nav.sticky {
position: fixed !important;
top: 0; left: 0; right: 0; width: 100%;
background-color: var(--v2-white);
box-shadow: 0 4px 18px rgba(15, 30, 65, 0.08);
z-index: 99999;
animation: v2NavFadeDown 0.45s ease both;
}
@keyframes v2NavFadeDown {
from { opacity: 0; }
to { opacity: 1; }
}
.v2-nav.sticky .header-top-section { display: none; }
/* DO NOT shrink .header-main on sticky — brevon's home sticky keeps the
default 10px/20px padding, and the user reported that the v2 sticky
state on non-home pages was visibly shorter than home's sticky bar.
Removed: `.v2-nav.sticky .header-main { padding: 8px 0; }` per
Christine 2026-05-24. */
/* ── Offcanvas drawer (mobile menu) ─────────────────────── */
.v2-nav .offcanvas__info {
background: var(--v2-white);
border-left: 2px solid var(--navy);
position: fixed;
right: 0; top: 0;
width: 200px; max-width: 80vw; height: 100%;
transform: translateX(calc(100% + 60px));
transition: transform 0.45s ease-in-out;
z-index: 9999999;
overflow-y: auto;
overscroll-behavior-y: contain;
scrollbar-width: none;
}
.v2-nav .offcanvas__info::-webkit-scrollbar { display: none; }
.v2-nav .offcanvas__info.info-open { transform: translateX(0); }
.v2-nav .offcanvas__overlay {
position: fixed; inset: 0;
background: #151515;
opacity: 0; visibility: hidden;
z-index: 900;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.v2-nav .offcanvas__overlay.overlay-open { opacity: 0.55; visibility: visible; }
.v2-nav .offcanvas__wrapper { padding: 24px; }
.v2-nav .offcanvas__top {
margin-bottom: 24px;
}
/* ── Shared mobile panel header ──────────────────────────────────────
Used in all three side panels (hamburger, avatar, language) via
templates/partials/nav-panel-header.html. One partial = one change. */
.v2-nav .nav-panel-header {
display: flex; align-items: center; justify-content: flex-end;
padding: 16px 20px 8px; flex-shrink: 0;
}
.v2-nav .nav-panel-symbol img { height: 28px; width: auto; display: block; }
.v2-nav .offcanvas__close button {
width: 32px; height: 32px; line-height: 0;
border: none; border-radius: 0;
background: none;
color: var(--v2-header);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
}
.v2-nav .offcanvas__close button:hover { opacity: 1; }
.v2-nav .offcanvas__close button svg { width: 16px; height: 16px; }
.v2-nav .offcanvas__nav { display: flex; flex-direction: column; }
.v2-nav .offcanvas__nav a {
display: block;
padding: 12px 0;
font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--lh-nav);
color: var(--v2-header);
text-decoration: none;
}
.v2-nav .offcanvas__nav a:hover { color: var(--v2-theme); }
.v2-nav .offcanvas__nav .offcanvas__divider {
height: 1px; background: var(--v2-border); margin: 12px 0;
}
/* ── Dropdown skin upgrade for avatar + language ─────────
Brevon mega-menu submenu look: white rounded card, 4px
pink top border, soft shadow. Applies only inside the
v2 navbar so other usages of these classes (if any) are
untouched. */
.v2-nav .top-bar-user-menu,
.v2-nav .nav-lang-dropdown {
background-color: var(--v2-white);
border: none;
border-top: 4px solid var(--v2-theme);
box-shadow: var(--v2-shadow);
border-radius: 10px;
padding: 14px 0;
min-width: 240px;
}
.v2-nav .nav-lang-dropdown { padding: 8px 0; }
.v2-nav .top-bar-user-menu-header { padding: 4px 18px 12px; }
.v2-nav .top-bar-user-menu-item {
display: block;
width: 100%;
box-sizing: border-box;
padding: var(--space-1-5) 18px;
font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--lh-nav);
color: var(--v2-header);
text-decoration: none;
transition: color 0.2s ease, background 0.2s ease;
}
/* Open state only — base.css hides the menu by default with
`display:none` and reveals via `.open { display:block }`. Our v2
skin needs flex column layout when open, but must NOT force the
menu visible when closed. Previously this rule was unscoped to
`.open`, which meant the dropdown sat permanently expanded under
the avatar on every v2 page (app + home). Per Christine 2026-05-24. */
.v2-nav .top-bar-user-menu.open {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Desktop: hide the mobile-only close bar. */
.v2-nav .user-menu-mobile-top { display: none; }
/* Mobile: convert the dropdown into a slide-in panel matching the
hamburger offcanvas format — same width, same black left border,
same transition. display:flex is forced always and visibility +
transform handle the hidden/shown states instead of display:none. */
@media (max-width: 991px) {
.v2-nav .top-bar-user-menu,
.v2-nav .top-bar-user-menu.open,
.v2-nav .nav-lang-dropdown,
.v2-nav .nav-lang-dropdown.open {
position: fixed !important;
right: 0; top: 0;
width: 200px; max-width: 80vw;
height: 100%; max-height: none !important;
border-radius: 0;
border: none;
border-top: none;
border-left: 2px solid var(--navy);
padding: 0;
z-index: 9999998;
display: flex !important;
flex-direction: column;
align-items: stretch;
overflow-y: auto;
scrollbar-width: none;
}
.v2-nav .top-bar-user-menu::-webkit-scrollbar,
.v2-nav .nav-lang-dropdown::-webkit-scrollbar { display: none; }
/* Hidden state — slide off-screen. */
.v2-nav .top-bar-user-menu,
.v2-nav .nav-lang-dropdown {
transform: translateX(calc(100% + 60px));
transition: transform 0.45s ease-in-out;
visibility: hidden;
pointer-events: none;
}
/* Open state — slide in. */
.v2-nav .top-bar-user-menu.open,
.v2-nav .nav-lang-dropdown.open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
}
/* Zero the hamburger wrapper padding so logo sits at same position as
avatar and language panels. Item left/right indent moves to the items. */
.v2-nav .offcanvas__wrapper { padding: 0; }
.v2-nav .offcanvas__top { margin-bottom: 0; }
.v2-nav .offcanvas__nav a { padding: var(--space-1-5) 24px; }
/* Wrapper is now just a pass-through — nav-panel-header partial owns the layout. */
.v2-nav .user-menu-mobile-top { display: block; }
/* Active language option highlight. */
.v2-nav .nav-lang-option.active { color: var(--v2-theme); }
/* All three panels: consistent item padding, font, line-height. */
.v2-nav .top-bar-user-menu-header { padding: 0 24px 16px; }
.v2-nav .top-bar-user-menu-item,
.v2-nav .nav-lang-option { padding: var(--space-1-5) 24px; font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--lh-nav); }
/* Username and tokens — gray-dark (#727d89) on mobile.
Token not in scope here so hardcoded. */
.v2-nav .top-bar-user-menu-name { color: var(--v2-theme) !important; font-weight: var(--font-semibold); }
.v2-nav .top-bar-user-menu-tokens { color: #727d89 !important; font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--lh-nav); }
/* Hide the "Platform administrator" role label and menu link on mobile. */
.v2-nav .top-bar-user-menu-plan--admin,
.v2-nav .top-bar-user-menu-item--admin { display: none !important; }
}
.v2-nav .top-bar-user-menu-header {
display: block;
width: 100%;
box-sizing: border-box;
/* The identity header used to carry its own border-bottom from
base.css, but the template now renders an explicit
`.top-bar-user-menu-divider` element directly under the header
as the canonical separator. Keeping both produced a visible
double line under the role/plan row. Drop the inherited border
so only the explicit divider paints. Per Christine 2026-05-24. */
border-bottom: 0;
margin-bottom: 0;
}
.v2-nav .top-bar-user-menu-header > span { display: block; }
/* Identity header (name + role/plan/credits) — match the menu-item
typography below so the dropdown reads as one consistent type
scale instead of mixing inherited browser defaults. Per Christine
2026-05-24. */
.v2-nav .top-bar-user-menu-name {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--v2-theme);
line-height: var(--lh-nav);
}
.v2-nav .top-bar-user-menu-plan,
.v2-nav .top-bar-user-menu-tokens {
font-size: var(--text-base);
font-weight: var(--font-normal);
color: var(--v2-header);
line-height: var(--lh-nav);
}
.v2-nav .top-bar-user-menu-divider {
display: block;
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.06);
margin: 6px 0;
}
.v2-nav .top-bar-user-menu-item:hover {
background: rgba(255, 17, 223, 0.05);
color: var(--v2-theme);
}
.v2-nav .nav-lang-option {
padding: var(--space-1-5) 16px;
font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--lh-nav); color: var(--v2-header);
}
.v2-nav .nav-lang-option:hover {
background: rgba(255, 17, 223, 0.05);
color: var(--v2-theme);
}
.v2-nav .nav-lang-option.active { color: var(--v2-theme); font-weight: 600; }
.v2-nav .nav-lang-trigger {
color: var(--v2-header);
font-size: 14px; font-weight: 600;
background: transparent;
border: none;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; padding: 6px 4px;
}
.v2-nav .nav-lang-trigger:hover { color: var(--v2-theme); }
/* User avatar — shared layout */
.v2-nav .top-bar-user-avatar {
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.v2-nav .top-bar-user-avatar:hover { transform: scale(1.05); }
/* Desktop: solid dark-navy disc, white initials */
@media (min-width: 768px) {
.v2-nav .top-bar-user-avatar {
width: 36px; height: 36px;
background-color: var(--navy);
color: var(--v2-white);
font-size: 13px; font-weight: 700;
box-shadow: 0 2px 8px rgba(15, 30, 65, 0.25);
}
}
/* Help (chat) button — shared layout */
.v2-nav .navbar-help-btn {
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
color: var(--v2-header);
border-radius: 50%;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.v2-nav .navbar-help-btn:hover { color: var(--v2-theme); background: rgba(255, 17, 223, 0.06); }
/* Desktop + iPad: show ? text, hide sparkle */
@media (min-width: 768px) {
.v2-nav .navbar-help-btn { width: 36px; height: 36px; }
.v2-nav .navbar-help-stars { display: none; }
.v2-nav .navbar-help-text { display: inline; font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1; }
}
/* RenStars tri-color logo replaces the prior "?" icon. Star fills
mirror .ren-chat-avatar so brand stays consistent. */
.v2-nav .navbar-help-btn .ren-star--cyan { fill: var(--cyan, #ff11df); }
.v2-nav .navbar-help-btn .ren-star--purple { fill: var(--purple, #ff5a5f); }
.v2-nav .navbar-help-btn .ren-star--yellow { fill: var(--yellow, #f5a623); }
.v2-nav .navbar-help-btn:hover { background: rgba(255, 17, 223, 0.08); }
/* Page offset: when the v2 nav is absolutely positioned and the
content underneath is NOT a hero panel, pages may get the navbar
sitting on top of their content. Each consuming template already
handles its own hero offset; we only spend space here to neutralise
the legacy `--topbar-height` reservation that base.css would
otherwise leave for the old chrome. */
.top-bar.v2-nav + * { /* no-op selector kept as a docstring anchor */ }
/* Hide legacy left-cluster pill credits / mobile menu overlay /
page-name fallbacks — v2 chrome doesn't render them. */
.v2-nav .top-bar-page-name { display: none; }
/* meanmenu inserts a .mean-bar div into .mobile-menu when it
initialises. Without meanmenu.css loaded (home_v2 dropped it),
this div is an unstyled block element that adds height to the
navbar — causing content to jump after JS fires. Renatus uses
the custom offcanvas .sidebar__toggle instead, so the mean-bar
is always redundant and safe to hide globally. */
.v2-nav .mean-bar { display: none !important; }
/* On mobile, fix the navbar at top:0 so it always overlays content —
matching the home-page behaviour (body.home-v2 #header-sticky is also
fixed). App-page content already reserves space via
padding-top: calc(var(--topbar-height) + …) in explore-work.css. */
@media (max-width: 1199px) {
.top-bar.v2-nav { position: fixed; top: 0; background: var(--v2-white); z-index: 9999; }
.v2-nav.sticky { animation: none; }
.v2-nav .header-main { padding: 10px 0; }
}
/* Christine (28 May): Free Reports nav entry — recolour the
dropdown's 4px top border and its submenu hover-hyphen from
the default pink (--v2-theme #FF11DF) to brand orange
#ff9100. The active label text itself follows the unified
black/bold/underlined active treatment above; only the
accent chrome (border + dash + hover) is orange-scoped via
:has() to the containing the /free anchor. */
/* Christine (28 May): per-category accent applies to EVERY nested
.submenu (not just the direct child), so the 4px top border on
sub-submenus (e.g. Solutions → Review The Business → Leaders)
inherits the parent category's colour instead of falling back
to the global pink. Same descendant-combinator scope applies
to the ::before hyphen marker below. */
.v2-nav .main-menu ul li:has(a[href="/free"]) .submenu {
/* Free Reports → brand yellow */
border-top-color: #ffd400;
}
.v2-nav .main-menu ul li:has(a[href="/explore"]) .submenu {
/* Products → pink (explicit so it's locked against --v2-theme drift) */
border-top-color: var(--pink, #FF00AA);
}
.v2-nav .main-menu ul li:has(a[href="/solutions"]) .submenu {
/* Solutions → cyan (matches /work palette) */
border-top-color: var(--cyan, #3bc0ff);
}
.v2-nav .main-menu ul li:has(a[href="/methodology"]) .submenu {
/* Methodology → purple (matches /work palette) */
border-top-color: var(--purple, #8011fa);
}
.v2-nav .main-menu ul li:has(a[href="/free"]) .submenu li a::before {
background: #ff9100 !important; /* Free Reports → orange */
}
.v2-nav .main-menu ul li:has(a[href="/explore"]) .submenu li a::before {
background: var(--pink, #FF00AA) !important; /* Products → pink */
}
.v2-nav .main-menu ul li:has(a[href="/solutions"]) .submenu li a::before {
background: var(--cyan, #3bc0ff) !important; /* Solutions → cyan */
}
.v2-nav .main-menu ul li:has(a[href="/methodology"]) .submenu li a::before {
background: var(--purple, #8011fa) !important; /* Methodology → purple */
}
/* Upward caret for Methodology / My Work — matches nmega arrow style.
Arrow tip is 10px above the submenu top (calc(100% - 8px)) so the
base lands exactly on the submenu's top border. */
/* Arrow on the submenu panel itself — identical mechanism to .nmega arrow.
::before = colored tip above the panel (bottom: 100%)
::after = white fill sitting 4px inside the panel, hidden by the
submenu's own white background — gives a solid appearance.
Scoped to first-level submenu only (> direct child). */
.v2-nav .main-menu > nav > ul > li:not([data-nmega]) > .submenu::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--v2-theme);
pointer-events: none;
}
/* Methodology — purple to match its border-top */
.v2-nav .main-menu > nav > ul > li:has(a[href="/methodology"]) > .submenu::before {
border-bottom-color: var(--purple, #8011fa);
}
/* White fill — 4px inside the panel, hidden by submenu background */
.v2-nav .main-menu > nav > ul > li:not([data-nmega]) > .submenu::after {
content: '';
position: absolute;
bottom: calc(100% - 4px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
pointer-events: none;
}
/* ── Mega panel (nmega) — 3-column centred fixed dropdown ──────────────
Replaces the cascading .submenu chain for Free Reports, Products, and
Solutions. All three share this layout; accent colour is set per-panel
via --nmega-accent. Methodology and My Work keep the old .submenu. */
/* Make the mega-menu non-positioned so .header-main (position:relative)
becomes the containing block — this lets .nmega use top:100% to sit flush
with the nav row on every page, exactly like the Methodology submenu. */
.v2-nav .main-menu ul li[data-nmega] {
position: static;
}
.v2-nav .nmega {
--nmega-accent: var(--pink, #FF11DF);
position: absolute;
top: calc(100% - 17px);
left: 50%;
width: min(650px, 96vw);
transform: translateX(-50%) translateY(-10px);
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(15, 30, 65, 0.14);
border-top: 4px solid var(--nmega-accent);
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 999998;
overflow: visible;
}
.v2-nav .nmega.nmega--open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Upward caret sitting above the panel — JS sets --nmega-arrow to the nav item's centre */
.v2-nav .nmega::before {
content: '';
position: absolute;
bottom: 100%;
left: var(--nmega-arrow, 50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--nmega-accent);
pointer-events: none;
}
/* White fill leaves only the 4px accent border visible */
.v2-nav .nmega::after {
content: '';
position: absolute;
bottom: calc(100% - 4px);
left: var(--nmega-arrow, 50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
pointer-events: none;
}
/* Per-menu accent colours */
.v2-nav .nmega--products { --nmega-accent: var(--pink, #FF11DF); }
.v2-nav .nmega--free { --nmega-accent: #ffd400; }
.v2-nav .nmega--solutions { --nmega-accent: var(--cyan, #3bc0ff); }
/* Panel header */
.v2-nav .nmega__head {
display: flex;
align-items: center;
gap: 12px;
height: 50px;
padding: 10px 20px;
flex-shrink: 0;
}
.v2-nav .nmega__title {
font-size: 16px;
font-weight: 700;
color: var(--v2-header, #1b2230);
letter-spacing: -0.1px;
}
.v2-nav .nmega .nmega__head .nmega__viewall {
font-size: 12px;
font-weight: 300;
color: var(--black, #1b2230);
text-decoration: none;
margin-left: 2px;
}
.v2-nav .nmega .nmega__head .nmega__viewall:hover { text-decoration: underline; }
/* 3-column body */
.v2-nav .nmega__body {
display: flex;
min-height: 260px;
max-height: 460px;
padding-bottom: 14px;
}
/* Col 1 — category/persona list */
.v2-nav .nmega__c1 {
width: 160px;
flex-shrink: 0;
padding: 0;
border-right: 1px solid rgba(0, 0, 0, 0.07);
overflow-y: auto;
scrollbar-width: none;
}
.v2-nav .nmega__c1::-webkit-scrollbar { display: none; }
.v2-nav .nmega__cat {
display: block;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--v2-header, #1b2230);
cursor: default;
border-left: 2px solid transparent;
transition: background 0.12s, border-color 0.12s;
user-select: none;
line-height: 1.35;
}
.v2-nav .nmega__cat:hover,
.v2-nav .nmega__cat.is-active {
background: rgba(0, 0, 0, 0.04);
border-left-color: var(--nmega-accent);
}
/* Col 2 — group list */
.v2-nav .nmega__c2 {
width: 210px;
flex-shrink: 0;
padding: 0;
border-right: 1px solid rgba(0, 0, 0, 0.07);
overflow-y: auto;
scrollbar-width: none;
}
.v2-nav .nmega__c2::-webkit-scrollbar { display: none; }
.v2-nav .nmega__glist { display: none; flex-direction: column; }
.v2-nav .nmega__glist.is-active { display: flex; }
.v2-nav .nmega__grp {
display: block;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #475569;
cursor: default;
border-left: 2px solid transparent;
transition: background 0.12s, border-color 0.12s, color 0.12s, font-weight 0.12s;
user-select: none;
line-height: 1.35;
}
.v2-nav .nmega__grp:hover,
.v2-nav .nmega__grp.is-active {
background: rgba(0, 0, 0, 0.04);
border-left-color: var(--nmega-accent);
color: var(--v2-header, #1b2230);
font-weight: 600;
}
/* Col 3 — item links */
.v2-nav .nmega__c3 {
flex: 1;
min-width: 0;
padding: 0;
overflow-y: auto;
scrollbar-width: none;
}
.v2-nav .nmega__c3::-webkit-scrollbar { display: none; }
.v2-nav .nmega__ilist { display: none; flex-direction: column; }
.v2-nav .nmega__ilist.is-active { display: flex; }
.v2-nav .nmega .nmega__c3 .nmega__ilist a {
display: block;
padding: 8px 20px;
font-size: 13px;
font-weight: 500;
color: #1b2230;
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.1s, color 0.1s, font-weight 0.1s, border-color 0.1s;
line-height: 1.35;
}
.v2-nav .nmega .nmega__c3 .nmega__ilist a:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--v2-header, #1b2230);
font-weight: 600;
border-left-color: var(--nmega-accent);
margin-left: 0 !important; /* override brevon slide rule */
}
/* Default highlight: first link in the visible list — clears as soon as
any link in the same list is hovered (uses :has to detect hover state) */
.v2-nav .nmega .nmega__c3 .nmega__ilist.is-active:not(:has(a:hover)) a:first-child {
background: rgba(0, 0, 0, 0.04);
color: var(--v2-header, #1b2230);
font-weight: 600;
border-left-color: var(--nmega-accent);
}
/* Greyed-out products — not yet signed off but still accessible for testing */
.v2-nav .nmega .nmega__c3 .nmega__ilist a.nmega__muted {
color: #b0b8c4;
}
.v2-nav .nmega .nmega__c3 .nmega__ilist a.nmega__muted:hover {
color: #8a95a3;
font-weight: 500;
background: rgba(0, 0, 0, 0.02);
border-left-color: transparent;
}
.v2-nav .nmega .nmega__c3 .nmega__ilist.is-active:not(:has(a:hover)) a.nmega__muted:first-child {
color: #b0b8c4;
font-weight: 500;
background: transparent;
border-left-color: transparent;
}
/* Assessment category items — all signed off, show as black */
.v2-nav .nmega .nmega__c3 .nmega__ilist[data-cat="assessment"] a.nmega__muted {
color: #1b2230;
}
.v2-nav .nmega .nmega__c3 .nmega__ilist[data-cat="assessment"] a.nmega__muted:hover {
color: var(--v2-header, #1b2230);
font-weight: 600;
background: rgba(0, 0, 0, 0.04);
border-left-color: var(--nmega-accent);
}
/* Restore active-first-child highlight for assessment muted items —
the generic muted:first-child rule strips it; assessments are all
signed off so the first item should match the non-muted highlight. */
.v2-nav .nmega .nmega__c3 .nmega__ilist[data-cat="assessment"].is-active:not(:has(a:hover)) a.nmega__muted:first-child {
background: rgba(0, 0, 0, 0.04);
color: var(--v2-header, #1b2230);
font-weight: 600;
border-left-color: var(--nmega-accent);
}
/* Hide on mobile (desktop nav is already hidden ≤1199px, but
guard the fixed panel explicitly so it never bleeds through) */
@media (max-width: 767px) {
.v2-nav .nmega { display: none !important; }
}
/* On iPad (768–1366px) allow nmega panels to show when JS opens them */
@media (min-width: 768px) and (max-width: 1199px) {
.v2-nav .nmega:not(.nmega--open) { display: none !important; }
}
.nav-drawer-divider {
border: none;
border-top: 1px solid var(--gray-light);
margin: 4px 0;
}
/* ── Desktop only: ? position + hover colour ────────────────────────
Shift the ? mark 4px left; swap the pink hover tint for gray-white. */
@media (min-width: 1367px) {
.v2-nav .navbar-help-text { position: relative; right: 9px; }
.v2-nav .navbar-help-btn:hover { color: var(--navy); background: var(--gray-white); }
}
/* ── iPad: show desktop nav, hide hamburger ─────────────────────────
768–1366px gets the full desktop centre nav.
Methodology and Solutions are hidden to keep it compact. */
@media (min-width: 768px) and (max-width: 1366px) {
/* Search bar: trim from desktop 68px down to 40px on iPad.
!important needed: free.css / home-search.css load after this
file and win on source order at equal specificity. */
.home-search-bar--hero,
.free-page .free-search-pill {
height: 52px !important;
min-height: 52px !important;
}
.v2-nav .header__hamburger { display: none; }
.v2-nav .main-menu { display: block; }
.v2-nav .main-menu .nav-solutions,
.v2-nav .main-menu .nav-methodology { display: none; }
.v2-nav .header-main .header-right .header-btn--pricing { display: none; }
/* Tighten right cluster spacing */
.v2-nav .header-main .header-right { gap: 8px; }
/* Avatar: no circle, navy initials */
.v2-nav .top-bar-user-avatar {
background-color: transparent;
box-shadow: none;
color: var(--navy);
font-size: 14px;
}
/* Scale navbar ~20% smaller for iPad */
.v2-nav .header-main {
font-size: 0.8em;
padding: 8px 0;
min-height: 51px;
gap: 19px;
}
.v2-nav .header-main .header-left .header-logo img,
.v2-nav .header-main .header-left .header-logo-2 img {
height: 30px;
}
}
/* Mobile-only Login link for anonymous users — far-right in the navbar.
Hidden at ≥768px where the full header-btn login link takes over. */
.v2-nav .nav-mob-login {
display: none;
}
@media (max-width: 767px) {
.v2-nav .nav-mob-login {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: var(--navy);
text-decoration: none;
white-space: nowrap;
position: relative;
top: 2px;
}
.v2-nav .nav-mob-login:hover { color: var(--v2-theme); }
/* The full header-btn login is redundant on mobile — hide it. */
.v2-nav .header-main .header-right .header-btn:not(.header-btn--pricing) {
display: none;
}
}