/** * Site header and primary navigation. * * Figma sources: * desktop bar + Planning dropdown 2048:49815 * Licensing dropdown 2057:49909 * mobile bar (default + back) 1256:25696 * mobile level 2 (About) 1795:40782 * * NOT from Figma — provisional until Ece's styling lands (docs/05): * - mega panel layout (Planning, Projects): the design only has single-column dropdowns * - mobile level 1 screen: built from docs/04 plus the level 2 frame's styles * - nav badge pill, link hover colours, chevron on mobile parent rows * * Mobile first. Desktop from 64rem. */ :root { --site-header-height: 3.5rem; /* mobile bar: 40px area + 8px top and bottom */ } @media (min-width: 64rem) { :root { --site-header-height: 6rem; /* 32px top offset + 64px pill */ } } /* Content starts below the header, which overlays the top of the page. */ .site-main { padding-top: var(--site-header-height); } /* ================================================================== * Header bar * ================================================================ */ /* Anchor the header to #page, not the viewport. When logged in, core pushes * down by the admin bar height; a header positioned against the * viewport would ignore that and sit underneath the bar. */ .site { position: relative; } .site-header { position: absolute; inset: 0 0 auto; z-index: 100; } .site-header__inner { position: relative; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; height: var(--site-header-height); padding: 0.5rem var(--gutter-mobile); } /* Logo: mark in primary, wordmark in text dark (1256:25696). */ .site-logo { display: inline-flex; flex-shrink: 0; color: var(--color-text-dark); --logo-mark-color: var(--color-primary); } .site-logo .logo { width: 6.1875rem; /* 99 */ height: 1.25rem; /* 20 */ } .logo__mark { fill: var(--logo-mark-color, currentColor); } /* On a dark or photographic hero (2048:49815): both parts white. */ .site-header--on-dark .site-header__inner > .site-logo { color: var(--color-text-white); --logo-mark-color: var(--color-text-white); } .site-header__portal { display: none; } /* ================================================================== * Navigation — mobile (full-screen panel) * ================================================================ */ .site-nav { display: none; } /* The open menu covers the whole screen, WordPress admin bar included * (#wpadminbar is z-index 99999). Otherwise the bar hides the close button. */ .site-nav.is-open { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; gap: 1.25rem; padding: 0 var(--gutter-mobile); /* level 1 ends in the pinned tool strip, 1275:20759 */ overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-background-purple); } .has-nav-open { overflow: hidden; } /* The header is a stacking context, so the open menu can only rise above * the admin bar if the header does too. */ .has-nav-open .site-header { z-index: 100000; } /* Heads stay put while a long screen scrolls, so the fixed close button * always sits on the head's background instead of over the rows. */ .site-nav__head, .nav-panel__head { position: sticky; top: 0; z-index: 1; display: flex; flex-shrink: 0; align-items: center; height: var(--site-header-height); padding-inline: var(--gutter-mobile); margin-inline: calc(-1 * var(--gutter-mobile)); background-color: var(--color-background-purple); } /* Stays on top of every drill-down screen. */ .site-nav__close { position: fixed; top: 0.5rem; right: var(--gutter-mobile); z-index: 300; } .site-nav:not(.is-open) .site-nav__close { display: none; } .nav-menu, .nav-panel__list { padding: 0; margin: 0; list-style: none; } /* Rows: 18/23 SemiBold, 20px gap, hairline rule (1795:40782). */ .nav-item { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-border-light); } /* The screen's own 20px gap follows the last rule (1275:20759). */ .nav-menu > .nav-item:last-child, .nav-panel__list > .nav-item:last-child { margin-bottom: 0; } .nav-item__row { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; } .nav-item__link, .nav-item__toggle { display: flex; flex: 1; gap: 0.5rem; align-items: center; min-width: 0; padding: 0; font: var(--type-subtitle-xl); color: var(--color-text-dark); text-align: left; text-decoration: none; background: none; border: 0; } .nav-item__toggle--icon-only { flex: 0 0 auto; } .nav-item__link:hover, .nav-item__toggle:hover { color: var(--color-primary); } .nav-item__label { min-width: 0; } .nav-item__toggle:not(.nav-item__toggle--icon-only) .nav-item__label { flex: 1; } .nav-item__icon { display: none; } .nav-item__chevron { display: inline-flex; flex-shrink: 0; } .nav-item__chevron--down { display: none; } /* icon/arrow-right, 20px (1795:40829) */ .nav-item__chevron--right svg { width: 1.25rem; height: 1.25rem; } /* Badge — provisional. Green pill as described in docs/04. */ .nav-badge { display: inline-flex; flex-shrink: 0; align-items: center; padding: 0.25rem 0.5rem; font: var(--type-subtitle-s); color: var(--color-text-dark); white-space: nowrap; border-radius: 100px; } .nav-badge--secondary { background-color: var(--color-secondary); } .nav-badge--primary { color: var(--color-text-white); background-color: var(--color-primary); } /* Drill-down screens replace the one above them. */ .nav-panel { display: none; } .nav-item.is-open > .nav-panel { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; gap: 1.25rem; padding: 0 var(--gutter-mobile) 5.25rem; overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-background-purple); } .nav-panel__back { display: inline-flex; gap: 0.125rem; align-items: center; padding: 0; font: var(--type-subtitle-l); color: var(--color-text-dark); background: none; border: 0; } .nav-panel__back-icon { display: inline-flex; width: 1.75rem; height: 1.75rem; } .nav-panel__back-icon svg { width: 100%; height: 100%; } .nav-panel__title { font: var(--type-header-s); color: var(--color-text-dark); } .site-nav__actions { display: flex; flex-direction: column; gap: 1rem; } .site-nav__actions .button { width: 100%; } /* ---- Tool strip pinned to the bottom of level 1 (banner 1275:20782) ---- */ .site-nav__tool { position: sticky; bottom: 0; display: flex; flex-shrink: 0; gap: 1rem; align-items: center; justify-content: space-between; padding: 2rem var(--gutter-mobile); margin: auto calc(-1 * var(--gutter-mobile)) 0; /* Figma draws this with a WebGPU shader ("Cost Calculator Square Pattern"). * Same geometry in CSS: diagonal lines both ways, 1px thick, 29px apart, * lineColor rgb(225 213 255) on bgColor rgb(237 231 252). */ background-color: rgb(237 231 252); background-image: repeating-linear-gradient(45deg, rgb(225 213 255) 0 1px, transparent 1px 29px), repeating-linear-gradient(-45deg, rgb(225 213 255) 0 1px, transparent 1px 29px); } .site-nav__tool-text { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; min-width: 0; } .site-nav__tool-title { font: var(--type-header-xs); color: var(--color-text-dark); } /* tag/small (1275:20784) */ .tag { display: inline-flex; gap: 0.25rem; align-items: center; padding: 0.5rem 0.625rem; font: var(--type-subtitle-s); color: var(--color-text-dark); white-space: nowrap; border: 1px solid var(--color-border-dark); border-radius: 100px; } .tag__icon { display: inline-flex; width: 0.75rem; height: 0.75rem; } .tag__icon svg { width: 100%; height: 100%; } /* ================================================================== * Desktop * ================================================================ */ @media (min-width: 64rem) { .site-header__inner { max-width: calc(76.25rem + 2 * var(--gutter-mobile)); /* 1220px bar, 2048:49826 */ height: auto; padding: 2rem var(--gutter-mobile) 0; margin-inline: auto; } .site-logo .logo { width: 8.6875rem; /* 139 */ height: 1.75rem; /* 28 */ } .site-header__menu-toggle, .site-nav__head, .site-nav__close, .site-nav__actions, .site-nav__tool, .nav-panel__head, .nav-panel__title, .nav-item__chevron--right { display: none; } .site-header__portal { display: inline-flex; } /* Pill bar (242:1509). The Figma layer is white with a 45px backdrop blur in * luminosity blend, which renders as solid white; solid white is used here. */ .site-nav, .site-nav.is-open { position: static; display: block; padding: 1.25rem 2rem; overflow: visible; background-color: var(--color-background-white); border: 1.5px solid rgb(255 255 255 / 0.4); border-radius: 100px; box-shadow: 4px 8px 8px rgb(0 0 0 / 0.15); } .nav-menu { display: flex; gap: 1.5rem; align-items: center; } .nav-item { padding: 0; margin: 0; border: 0; } /* Level 1: 16/21 SemiBold, 4px gap to a 13px primary chevron. */ .nav-item--depth-0 { position: relative; } .nav-item--depth-0.nav-item--mega { position: static; } .nav-item--depth-0 > .nav-item__row, .nav-item--depth-0 > .nav-item__link { gap: 0.25rem; } .nav-item--depth-0 > .nav-item__row > .nav-item__link, .nav-item--depth-0 > .nav-item__row > .nav-item__toggle, .nav-item--depth-0 > .nav-item__link { flex: 0 0 auto; gap: 0.25rem; font: var(--type-subtitle-l); white-space: nowrap; } .nav-item__chevron--down { display: inline-flex; width: 0.8125rem; height: 0.8125rem; color: var(--color-primary); transition: transform 0.15s ease; } .nav-item__chevron--down svg { width: 100%; height: 100%; } .nav-item.is-open > .nav-item__row .nav-item__chevron--down { transform: rotate(180deg); } /* ---- Dropdown (2010:59370, 2010:59367) ---- */ .nav-panel, .nav-item.is-open > .nav-panel { position: absolute; inset: auto; z-index: 150; padding: 0; overflow: visible; background: none; } .nav-item--depth-0.is-open > .nav-panel { /* 20px pill padding + 1.5px border + 5px gap below the pill */ top: calc(100% + 1.25rem + 1.5px + 0.3125rem); left: 0; display: block; min-width: max-content; padding: 1.5rem; background-color: var(--color-background-white); border: 1px solid var(--color-background-grey); border-radius: var(--radius-16); box-shadow: 4px 8px 16px rgb(0 0 0 / 0.15); } /* Invisible bridge across the gap so hover does not drop the panel. */ .nav-item--depth-0.is-open > .nav-panel::before { position: absolute; inset: auto 0 100%; height: calc(1.25rem + 1.5px + 0.3125rem); content: ""; } .nav-item--depth-0 > .nav-panel > .nav-panel__list { display: flex; flex-direction: column; gap: 1rem; } /* Level 2 row: 24px icon tile + 8px gap + 16/21 SemiBold. */ .nav-item--depth-1 > .nav-item__link, .nav-item--depth-1 > .nav-item__row > .nav-item__link, .nav-item--depth-1 > .nav-item__row > .nav-item__toggle { gap: 0.5rem; font: var(--type-subtitle-l); white-space: nowrap; } .nav-item__icon { position: relative; display: inline-grid; flex-shrink: 0; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--color-primary); background-color: var(--color-background-purple); border-radius: 0.25rem; } .nav-item__icon svg { width: 1rem; height: 1rem; } /* ---- Mega panel — provisional layout ---- */ .nav-item--mega.is-open > .nav-panel { top: calc(100% + 0.3125rem); right: var(--gutter-mobile); left: var(--gutter-mobile); min-width: 0; } .nav-item--mega.is-open > .nav-panel::before { height: 0.3125rem; } .nav-panel--mega > .nav-panel__list, .nav-item--depth-0 > .nav-panel--mega > .nav-panel__list { display: grid; grid-template-columns: repeat(var(--nav-mega-columns, 4), minmax(0, 1fr)); gap: 1.5rem 2rem; } .nav-panel--mega .nav-item--depth-1 > .nav-item__link, .nav-panel--mega .nav-item--depth-1 > .nav-item__row > .nav-item__link, .nav-panel--mega .nav-item--depth-1 > .nav-item__row > .nav-item__toggle { white-space: normal; } /* Level 2 groups with leaves: heading only, never a toggle. */ .nav-panel--mega .nav-item--depth-1 > .nav-item__row > .nav-item__toggle--icon-only { display: none; } .nav-panel--mega .nav-item--depth-1 > .nav-item__row > .nav-item__toggle { pointer-events: none; } .nav-panel--mega .nav-item--depth-1 .nav-item__chevron { display: none; } /* Level 3 is always visible under its group. */ .nav-panel--mega .nav-panel--depth-2, .nav-panel--mega .nav-item.is-open > .nav-panel--depth-2 { position: static; display: block; padding: 0; margin-top: 0.75rem; box-shadow: none; } .nav-panel--depth-2 > .nav-panel__list { display: flex; flex-direction: column; gap: 0.5rem; } /* When the group has an icon, align leaves with its label: 24px tile + 8px gap. */ .nav-item--depth-1:has(> .nav-item__row .nav-item__icon) > .nav-panel--depth-2 > .nav-panel__list { padding-left: 2rem; } .nav-item--depth-2 > .nav-item__link { font: var(--type-body-s); white-space: normal; } }