/* ============================================================================
PropertyInsider.sg — navigation: section dropdowns + mobile drawer
Added 23 Aug 2026. Loaded on every chrome-bearing page, AFTER theme.css.
Direction
---------
The house rule of this publication is that every median carries its
denominator. This menu applies the same rule to navigation: each
destination states the size of the dataset behind it before you click,
and each panel closes with one italic line naming what that section
promises. Everything else stays hairline-quiet — paper, ink, and a
single 2px clay tick on the row under the cursor. The accent appears
once per row and nowhere else, matching theme.css's demoted-red rule.
Structure
---------
The submenu markup is baked into every page's HTML by
scripts/apply_meganav.py, so the links are crawlable and work with
JavaScript disabled — the desktop panel opens on :hover and
:focus-within with no script at all. assets/nav.js adds the disclosure
buttons (needed for touch and for explicit keyboard control) and builds
the mobile drawer by READING this markup, so there is exactly one
source of truth for the menu.
Stacking
--------
The drawer and its scrim are appended to , never inside .nav:
.nav carries backdrop-filter, which makes it the containing block for
any position:fixed descendant and would pin the drawer to the header.
Drawer 4000 / scrim 3999 sits above .nav (100-1000) and below the media
lightbox (5000), which must still win if both ever open.
========================================================================== */
/* ---------------------------------------------------------------- 1. Skip */
.pi-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 4100;
padding: 12px 20px;
background: var(--ink, #232A1F);
color: #fff;
font-family: var(--font-sans, 'Source Sans 3', -apple-system, sans-serif);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.pi-skip:focus {
left: 0;
}
/* ------------------------------------------------- 2. Desktop dropdowns */
/* The panel is positioned against .nav-inner, not against its own .
Two reasons, both learned by measuring:
1. top:100% of a text-height lands the panel at y=42 inside a 72px
bar, overlapping it. Against the container, top:100% is the bar's
bottom edge by definition, at any bar height.
2. A panel anchored to its trigger runs off the viewport: the nav links
cluster on the right, so a 484px left-aligned panel under "Research"
reached x=1451 on a 1280px screen. Right-aligning instead breaks at
769-1024px, where the cluster has shifted left and the panel runs off
the other side. No static alignment is safe at every width. The
container is never narrower than the panel, so left:0 against it
always fits — and nav.js then slides each panel across to sit under
its own trigger, clamped to the container. With JavaScript off the
panels align to the container's left edge: visually plainer, never
broken. */
.nav .nav-inner {
position: relative;
}
/* The trigger has to reach the panel, or hover dies in the space between.
Measured at 1280px before this rule: the is text-height (24px) and
vertically centred in a 72px bar, so its box ran y=24..48, while the panel
is positioned against .nav-inner and opens at the bar's bottom edge, y=71.
That left a 23px band belonging to neither. Moving the pointer down from
the link crossed it, :hover went false, and the panel closed before it
could be reached — the dropdown was unusable by pointer.
Stretching the list and its items to the full bar height makes each
trigger's hover box end at y=72, overlapping the panel's -1px top margin
by a pixel, so the pointer is never over dead space. The links stay
vertically centred because every centres its own content. */
.nav .nav-links,
.nav .nav-links > li {
align-self: stretch;
}
.nav .nav-links > li {
display: flex;
align-items: center;
}
.nav .nav-has-sub > a {
display: inline-flex;
align-items: center;
}
/* Disclosure chevron, injected by nav.js. It is the touch and keyboard
affordance; hover alone would strand tablet users. */
.nav .nav-disc {
border: 0;
background: none;
padding: 4px 2px 4px 5px;
margin-left: 1px;
cursor: pointer;
line-height: 0;
color: var(--text-soft, #6C6E5E);
border-radius: 4px;
}
.nav .nav-disc svg {
width: 11px;
height: 11px;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
transition: transform .16s ease;
}
.nav .nav-has-sub:hover .nav-disc,
.nav .nav-has-sub:focus-within .nav-disc {
color: var(--text-ink, #262B1F);
}
.nav .nav-has-sub[data-open="true"] .nav-disc svg {
transform: rotate(180deg);
}
.nav-panel {
position: absolute;
top: 100%;
left: 0;
margin-top: -1px;
z-index: 20;
min-width: 288px;
background: var(--paper, #fff);
border: 1px solid var(--line, #E5E4D6);
border-radius: 0 0 12px 12px;
box-shadow: 0 20px 44px -16px rgba(15, 23, 42, .20),
0 2px 6px rgba(15, 23, 42, .04);
padding: 18px 20px 0;
display: none;
}
/* Opened three ways: pointer hover, keyboard focus, explicit toggle.
The hover rule is guarded so a touch device never gets a sticky panel. */
@media (hover: hover) and (pointer: fine) {
.nav .nav-has-sub:hover > .nav-panel {
display: block;
}
}
.nav .nav-has-sub:focus-within > .nav-panel,
.nav .nav-has-sub[data-open="true"] > .nav-panel {
display: block;
}
.nav-panel-cols {
display: flex;
gap: 26px;
}
.nav-panel[data-cols="1"] .nav-panel-cols {
display: block;
}
.nav-col {
min-width: 208px;
flex: 1;
}
.nav-col-eyebrow {
margin: 0 0 5px 9px;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--text-soft, #6C6E5E);
}
.nav-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-col li {
list-style: none;
}
.nav-panel a {
display: block;
position: relative;
padding: 7px 10px 8px;
border-radius: 7px;
text-decoration: none;
transition: background .12s ease;
}
.nav-panel a:hover,
.nav-panel a:focus-visible {
background: var(--mist, #F5F4EC);
}
/* The one clay mark: a ledger tick against the active row. */
.nav-panel a::before {
content: '';
position: absolute;
left: 0;
top: 9px;
bottom: 9px;
width: 2px;
border-radius: 2px;
background: var(--red-primary, #5E6B33);
opacity: 0;
transition: opacity .12s ease;
}
.nav-panel a:hover::before,
.nav-panel a:focus-visible::before,
.nav-panel a[aria-current]::before {
opacity: 1;
}
.nav-panel a[aria-current] {
background: var(--mist, #F5F4EC);
}
.nav-item-label {
display: block;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 14.5px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.005em;
color: var(--text-ink, #262B1F);
}
.nav-item-note {
display: block;
margin-top: 1px;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: var(--text-soft, #6C6E5E);
font-variant-numeric: tabular-nums;
}
/* The section's promise, in the editorial voice used by every section
title on the site. One line, never two. */
.nav-panel-note {
margin: 16px -20px 0;
padding: 11px 20px 12px;
border-top: 1px solid var(--line, #E5E4D6);
background: var(--mist-2, #FBFAF4);
border-radius: 0 0 11px 11px;
font-family: var(--font-serif, 'Newsreader', Georgia, serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--text-soft, #6C6E5E);
}
/* --------------------------------------------------- 3. Mobile: trigger */
.pi-nav-toggle {
display: none;
align-items: center;
gap: 7px;
background: none;
border: 1px solid var(--line, #E5E4D6);
border-radius: 8px;
padding: 8px 12px 8px 11px;
margin-left: auto;
cursor: pointer;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .02em;
color: var(--text-ink, #262B1F);
}
.pi-nav-toggle svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
fill: none;
}
@media (max-width: 768px) {
.pi-nav-toggle {
display: inline-flex;
}
/* The baked panels are drawer content below this width, never dropdowns. */
.nav .nav-links {
display: none;
}
}
/* ---------------------------------------------------- 4. Mobile: drawer */
.pi-scrim {
position: fixed;
inset: 0;
z-index: 3999;
background: rgba(35, 42, 31, .48);
opacity: 0;
visibility: hidden;
transition: opacity .26s ease, visibility 0s linear .26s;
}
.pi-scrim[data-open] {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.pi-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 4000;
width: min(88vw, 380px);
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
background: var(--paper, #fff);
box-shadow: -26px 0 52px -22px rgba(15, 23, 42, .38);
transform: translateX(100%);
transition: transform .26s cubic-bezier(.4, 0, .2, 1);
visibility: hidden;
}
.pi-drawer[data-open] {
transform: none;
visibility: visible;
}
/* Kept out of the tab order and off screen readers while shut, without
display:none — that would kill the slide transition. */
.pi-drawer:not([data-open]) {
transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .26s;
}
.pi-drawer-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 64px;
padding: 0 10px 0 18px;
border-bottom: 1px solid var(--line, #E5E4D6);
}
.pi-drawer-title {
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 11px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-soft, #6C6E5E);
}
.pi-drawer-close {
border: 0;
background: none;
padding: 10px;
margin-right: 4px;
cursor: pointer;
line-height: 0;
border-radius: 8px;
color: var(--text-ink, #262B1F);
}
.pi-drawer-close svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
fill: none;
}
.pi-drawer-body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.pi-dr-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--line, #E5E4D6);
}
/* Label is the hub link, chevron is the disclosure — split so the hub page
is still reachable in one tap. Merging them is the usual way a mega menu
makes its own section pages unreachable on mobile. */
.pi-dr-row > a {
flex: 1 1 auto;
min-width: 0;
padding: 15px 8px 15px 18px;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 16px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--text-ink, #262B1F);
text-decoration: none;
}
.pi-dr-row > a[aria-current] {
color: var(--red-primary, #5E6B33);
}
.pi-dr-toggle {
flex: 0 0 auto;
width: 54px;
border: 0;
border-left: 1px solid var(--line, #E5E4D6);
background: none;
cursor: pointer;
color: var(--text-soft, #6C6E5E);
display: flex;
align-items: center;
justify-content: center;
}
.pi-dr-toggle svg {
width: 13px;
height: 13px;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
transition: transform .18s ease;
}
.pi-dr-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.pi-dr-sub {
display: none;
background: var(--mist-2, #FBFAF4);
border-bottom: 1px solid var(--line, #E5E4D6);
padding: 6px 0 10px;
}
.pi-dr-sub[data-open] {
display: block;
}
.pi-dr-sub-group {
padding-top: 6px;
}
.pi-dr-sub-eyebrow {
margin: 4px 0 2px;
padding: 0 18px;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-soft, #6C6E5E);
}
.pi-dr-sub ul {
list-style: none;
margin: 0;
padding: 0;
}
.pi-dr-sub li {
list-style: none;
}
.pi-dr-sub a {
display: block;
position: relative;
padding: 10px 18px 10px 30px;
text-decoration: none;
}
.pi-dr-sub a::before {
content: '';
position: absolute;
left: 18px;
top: 13px;
bottom: 13px;
width: 2px;
border-radius: 2px;
background: var(--red-primary, #5E6B33);
opacity: 0;
}
.pi-dr-sub a[aria-current]::before {
opacity: 1;
}
.pi-dr-sub .nav-item-label {
font-size: 15px;
font-weight: 500;
}
.pi-dr-sub a[aria-current] .nav-item-label {
font-weight: 600;
}
.pi-dr-sub .nav-item-note {
font-size: 12px;
}
.pi-dr-note {
margin: 8px 18px 2px;
padding-top: 9px;
border-top: 1px solid var(--line, #E5E4D6);
font-family: var(--font-serif, 'Newsreader', Georgia, serif);
font-style: italic;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-soft, #6C6E5E);
}
.pi-drawer-foot {
flex: 0 0 auto;
border-top: 1px solid var(--line, #E5E4D6);
padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
background: var(--paper, #fff);
}
.pi-drawer-cta {
display: block;
padding: 13px 20px;
border-radius: 999px;
background: var(--red-primary, #5E6B33);
color: #fff !important;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 15px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.pi-drawer-meta {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-family: var(--font-sans, 'Source Sans 3', sans-serif);
font-size: 12.5px;
}
.pi-drawer-meta a {
color: var(--text-soft, #6C6E5E);
text-decoration: none;
}
body.pi-nav-locked {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.pi-drawer,
.pi-scrim,
.nav-disc svg,
.pi-dr-toggle svg {
transition: none;
}
}