/* PBD Customer Control Center -- shared top header CSS ("Modernist dark" refresh).
Single 64px bar (dark default + `.pbd-header-light` variant for TechCenter pages) that
replaces the old two-row (utility strip + logo/links) header. The utility strip is gone:
the tagline now lives only in the dashboard hero, and the messages icon + account chip
moved into this one bar. Colors are the design's exact hex values (source of truth =
the handoff comps 1a/1b/1c) rather than page-level CSS vars, so the header renders
pixel-identically regardless of which page's local :root it sits inside.
Structure built per page:
(adds .pbd-header-light on TechCenter)
…logo lockup…
(filled by nav-links.js)
…
…messages + account…
Include via in .
*/
/* Sticky wrapper: the single bar pins to the top and sits above the dashboard hero. */
.pbd-nav-sticky{position:sticky;top:0;z-index:50;}
/* ---------- The bar ---------- */
header.topnav{
position:relative;
display:flex;align-items:center;gap:32px;height:64px;padding:0 32px;
background:#0b0b0d;border-bottom:2px solid #26262b;
font-family:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
color:#d6d6dc;
}
/* ---------- Logo lockup (official brand SVG, added 2026-07-27) ----------
Replaces the old CSS-text approximation with the real Palm Beach Dyno logo file.
Source: Ken's logos/ handoff, "V3-STRAIGHT copy.svg" -- this is the OFFICIAL brand
asset (confirmed by Ken); do not swap it for a re-approximated/CSS text lockup again.
Shipped as two color variants since the mark's "PALM BEACH" wordmark is a fixed light-gray
fill in the source file (poor contrast on the white TechCenter header):
assets/img/pbd-logo.svg -- default, for the dark bar (light-gray + red)
assets/img/pbd-logo-onlight.svg -- same file with the gray swapped to near-black, for
.pbd-header-light (TechCenter's white bar)
The red block ("DYNO") is identical in both -- #cc1f36 reads fine on both backgrounds. */
.brand{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:none;text-decoration:none;line-height:1;}
/* The logo image is its own row (::before), sized independently of the subtitle text below it.
NOTE: the source SVG's own viewBox had ~75px of dead vertical whitespace and a 26px left inset
baked in above/before the actual artwork (measured via getBBox() -- not visible to the eye in
an SVG editor at a glance, but it silently shrank *any* on-page size to a sliver and threw off
left alignment against the subtitle below). Both assets/img/pbd-logo*.svg had their viewBox
cropped to the real ink (plus a few px of padding) so sizing here is now WYSIWYG -- if the logo
file is ever replaced, re-crop the new file's viewBox to its content bounding box the same way,
or this same "looks tiny/offset" bug comes back. */
.brand::before{
/* Sized down from the original 335x30 lockup (2026-08-01, Ken's ask -- also intended to trim
the header's minimum width on narrow viewports); 201x18 (60%) read a bit too small, bumped
to 240px wide (~71.6% of original) same day, aspect ratio preserved. */
content:"";display:block;width:240px;height:21.5px;
/* Manual cache-buster (?v=N) -- these SVGs are referenced from CSS, which the deploy workflow's
__ASSET_VERSION__ stamp does NOT touch (it only rewrites .html files). GoDaddy serves these
with no Cache-Control header, so browsers happily keep an old cached copy indefinitely unless
the URL itself changes. BUMP THIS NUMBER any time pbd-logo*.svg's content changes, or visitors
with a cached copy will keep seeing the old file no matter what the CSS says. */
background-image:url("assets/img/pbd-logo.svg?v=2");
background-repeat:no-repeat;background-position:left center;background-size:contain;
}
.pbd-header-light .brand::before{background-image:url("assets/img/pbd-logo-onlight.svg?v=2");}
/* .brand-main ("PALM BEACH"+"DYNO" spans) is now redundant with the logo image -- kept in the
DOM for accessibility/SEO but visually hidden. .brand-sub (the small tracked-out subtitle,
"CONTROL CENTER" / "TECHCENTER" per page) stays visible under the logo, as it always was. */
.brand .brand-main{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.brand .brand-sub{font:700 10px/1 'Archivo';letter-spacing:.3em;color:#9a9aa2;white-space:nowrap;}
/* Any legacy per-page logo inside .brand stays hidden -- the background-image above is the source of truth. */
.brand .brand-logo-img{display:none;}
/* ---------- Nav ---------- */
nav.links{display:flex;align-items:stretch;height:100%;margin-left:auto;gap:0;}
nav.links a{
/* Scaled to 95% of the original 14px/0 15px sizing (2026-08-01, alongside the logo bump above
-- trims a little width back out of the header row). */
display:flex;align-items:center;gap:6px;padding:0 14.25px;height:100%;
font:500 13.3px 'Archivo';color:#d6d6dc;white-space:nowrap;
border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;
transition:color .13s ease,border-color .13s ease;
}
nav.links a:hover{color:#fff;}
nav.links a.active{font-weight:700;color:#fff;border-bottom-color:#d1132e;}
.pbd-nav-chevron{width:11.4px;height:11.4px;flex:none;margin-top:1px;}
/* Nav group (Tuning) -- desktop dropdown. */
.nav-group{position:relative;display:flex;align-items:stretch;height:100%;}
.nav-group>a{/* the group toggle inherits nav.links a */}
.nav-group-menu{
position:absolute;top:100%;left:0;min-width:200px;z-index:30;
background:#131316;border:1px solid #232329;border-top:2px solid #d1132e;
box-shadow:0 12px 28px rgba(0,0,0,.35);
display:none;flex-direction:column;padding:6px 0;
}
.nav-group.open>.nav-group-menu,
.nav-group:hover>.nav-group-menu{display:flex;}
.nav-group-menu a{
display:block;height:auto;padding:11px 18px;margin-bottom:0;border-bottom:none;
font:600 13.5px 'Archivo';color:#d6d6dc;
}
.nav-group-menu a:hover{background:#d1132e;color:#fff;}
.nav-group-menu a.active{background:#d1132e;color:#fff;border-bottom:none;}
/* The Tuning toggle keeps its red underline when any child page is active. */
.nav-group.group-active>a{font-weight:700;color:#fff;border-bottom-color:#d1132e;}
/* Section-label element only shows inside the mobile drawer (hidden on desktop). */
.nav-group-label{display:none;}
/* TechCenter's mobile-drawer-only nav group (built by techcenter-subnav.js), mirroring .tc-subnav's
section tabs into the drawer since .tc-subnav itself is hidden below 860px (techcenter.css). Hidden
on the desktop bar -- .tc-subnav already provides this navigation there. */
.nav-group.nav-group--tc-sections{display:none;}
/* ---------- Quick search (header quick-jump) ---------- */
.pbd-search{
position:relative;display:flex;align-items:center;gap:10px;flex:none;
height:44px;width:250px;padding:0 14px;
border:1px solid #3a3a42;background:#1c1c22;cursor:text;
transition:width .2s ease, border-color .13s ease, background-color .13s ease;
}
/* Hover = subtle lift only (no red). Red border is reserved for focus. */
.pbd-search:hover{border-color:#4a4a54;background:#212128;}
/* On focus the box grows (right-anchored, so the nav slides left, not the account cluster). */
.pbd-search.focused,.pbd-search:focus-within{width:320px;border-color:#d1132e;background:#212128;}
.pbd-search-icon{width:18px;height:18px;flex:none;color:#c4c4cc;}
.pbd-search input{
flex:1;min-width:0;border:none;outline:none;background:transparent;
font:500 15px 'Archivo';color:#f2f2f2;padding:0;
}
/* No inner focus ring -- the box border already signals focus (kills the double outline). */
header.topnav .pbd-search input:focus,
header.topnav .pbd-search input:focus-visible{outline:none;box-shadow:none;}
.pbd-search input::placeholder{color:#9a9aa2;opacity:1;}
/* Hide the native search-type clear/decoration so it stays clean. */
.pbd-search input::-webkit-search-cancel-button,
.pbd-search input::-webkit-search-decoration{display:none;}
/* Neutralize the browser autofill background/text so a stray email fill can't make the box ugly. */
.pbd-search input:-webkit-autofill,
.pbd-search input:-webkit-autofill:hover,
.pbd-search input:-webkit-autofill:focus,
.pbd-search-drawer input:-webkit-autofill{
-webkit-box-shadow:0 0 0 1000px #212128 inset;
-webkit-text-fill-color:#f2f2f2;
caret-color:#f2f2f2;
transition:background-color 99999s ease-in-out 0s;
}
.pbd-header-light .pbd-search input:-webkit-autofill,
.pbd-header-light .pbd-search input:-webkit-autofill:hover,
.pbd-header-light .pbd-search input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px #f6f5f4 inset;
-webkit-text-fill-color:#111111;
}
.pbd-search-key{
flex:none;font:600 11px 'Archivo';color:#c4c4cc;
border:1px solid #4a4a54;padding:2px 6px;
}
.pbd-search.focused .pbd-search-key,
.pbd-search:focus-within .pbd-search-key{display:none;}
/* Suggestion menu (page-name + vehicle quick-jump; a "results" section can slot in later). */
/* Suggestion menu: a fixed, comfortably-wide panel anchored to the box's RIGHT edge so it
extends LEFT (readable regardless of how narrow the box is), and never depends on the box
resizing. max-width keeps it on-screen. */
.pbd-search-menu{
position:absolute;top:calc(100% + 6px);right:0;left:auto;width:360px;max-width:calc(100vw - 32px);z-index:40;
background:#131316;border:1px solid #232329;border-top:2px solid #d1132e;
box-shadow:0 12px 28px rgba(0,0,0,.35);
display:none;flex-direction:column;padding:6px 0;max-height:440px;overflow-y:auto;
}
.pbd-search-menu.open{display:flex;}
.pbd-search-group-label{
font:700 10px 'Archivo';letter-spacing:.16em;color:#8a8a92;
padding:10px 18px 6px;
}
.pbd-search-item{
display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;
font:600 15px 'Archivo';color:#e4e4ea;border:none;background:transparent;text-align:left;width:100%;
}
.pbd-search-item .pbd-search-item-meta{font:400 13px 'Archivo';color:#9a9aa2;margin-left:auto;white-space:nowrap;}
.pbd-search-item:hover,.pbd-search-item.active{background:#d1132e;color:#fff;}
.pbd-search-item:hover .pbd-search-item-meta,.pbd-search-item.active .pbd-search-item-meta{color:#fff;}
.pbd-search-item svg{width:15px;height:15px;flex:none;}
.pbd-search-empty{padding:12px 16px;font:400 12.5px 'Archivo';color:#8a8a92;}
/* ---------- Messages + account cluster ---------- */
.nav-right{
display:flex;align-items:center;gap:20px;flex:none;height:36px;
border-left:2px solid #26262b;padding-left:24px;
}
.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;color:#9a9aa2;background:none;border:none;cursor:pointer;padding:0;transition:color .13s ease;}
.icon-btn:hover{color:#d1132e;}
.icon-btn svg{width:20px;height:20px;}
/* The old ✉ HTML entity is replaced by an inline SVG in markup; hide any stray text node. */
.badge{
position:absolute;top:-8px;right:-9px;background:#d1132e;color:#fff;
font:700 9px 'Archivo';padding:1px 4px;line-height:1;border-radius:0;min-width:0;height:auto;
}
.account-wrap{position:relative;}
.account-chip{
display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;
transition:opacity .13s ease;background:none;border:none;padding:0;
}
.account-chip:hover{opacity:.85;}
.avatar{
width:32px;height:32px;border-radius:0;background:#d1132e;color:#fff;
display:flex;align-items:center;justify-content:center;font:700 14px 'Archivo';flex:none;
}
.account-name{display:flex;flex-direction:column;gap:2px;min-width:0;}
.account-name #accountName{font:600 13px/1 'Archivo';color:#fff;white-space:nowrap;}
/* Account dropdown (Account Settings / Log Out) -- radius 0, red top rule to match the system. */
.account-menu{
display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:190px;z-index:60;
background:#131316;border:1px solid #232329;border-top:2px solid #d1132e;
box-shadow:0 12px 28px rgba(0,0,0,.35);padding:6px 0;
}
.account-menu.open{display:block;}
.account-menu button{
width:100%;text-align:left;padding:11px 18px;border:none;background:transparent;
font:600 13px 'Archivo';color:#d6d6dc;cursor:pointer;
}
.account-menu button:hover{background:#d1132e;color:#fff;}
.account-menu button.danger{color:#f2b8bf;}
.account-menu button.danger:hover{background:#d1132e;color:#fff;}
.account-menu hr{border:none;border-top:1px solid #232329;margin:4px 0;}
/* ---------- Hamburger (mobile only) ---------- */
.hamburger-btn{
display:none;width:40px;height:40px;flex:none;margin-left:8px;
background:none;border:none;color:#fff;cursor:pointer;
align-items:center;justify-content:center;position:relative;z-index:300;
}
.hamburger-btn svg{width:22px;height:22px;}
/* ================= LIGHT VARIANT (TechCenter pages) ================= */
.pbd-header-light header.topnav{background:#ffffff;border-bottom-color:#e2e0dd;color:#3a3835;}
.pbd-header-light .brand .brand-main{color:#111111;}
.pbd-header-light .brand .brand-sub{color:#6b6864;}
.pbd-header-light nav.links a{color:#3a3835;}
.pbd-header-light nav.links a:hover{color:#111111;}
.pbd-header-light nav.links a.active{color:#111111;border-bottom-color:#d1132e;}
.pbd-header-light .nav-group.group-active>a{color:#111111;}
.pbd-header-light .nav-group-menu{background:#ffffff;border-color:#e2e0dd;}
.pbd-header-light .nav-group-menu a{color:#3a3835;}
.pbd-header-light .nav-group-menu a:hover,.pbd-header-light .nav-group-menu a.active{background:#d1132e;color:#fff;}
.pbd-header-light .pbd-search{border-color:#d8d6d2;background:#ffffff;}
.pbd-header-light .pbd-search:hover{border-color:#c4c1bc;background:#ffffff;}
.pbd-header-light .pbd-search.focused,.pbd-header-light .pbd-search:focus-within{border-color:#d1132e;background:#ffffff;}
.pbd-header-light .pbd-search-icon,.pbd-header-light .pbd-search-key{color:#6b6864;}
.pbd-header-light .pbd-search-key{border-color:#e2e0dd;}
.pbd-header-light .pbd-search input{color:#111;}
.pbd-header-light .pbd-search input::placeholder{color:#9a9691;}
.pbd-header-light .pbd-search-menu{background:#ffffff;border-color:#e2e0dd;}
.pbd-header-light .pbd-search-item{color:#3a3835;}
.pbd-header-light .pbd-search-group-label{color:#9a9691;}
.pbd-header-light .nav-right{border-left-color:#e2e0dd;}
.pbd-header-light .icon-btn{color:#6b6864;}
.pbd-header-light .account-name #accountName{color:#111;}
.pbd-header-light .account-menu{background:#fff;border-color:#e2e0dd;}
.pbd-header-light .account-menu button{color:#3a3835;}
.pbd-header-light .hamburger-btn{color:#111;}
/* ================= MOBILE ================= */
/* Elements only meaningful in the desktop bar; drawer versions are rendered by nav-links.js. */
.pbd-search-drawer{display:none;}
.drawer-acct{display:none;}
.nav-account-divider,.nav-account-link{display:none;}
@media(max-width:860px){
header.topnav{height:56px;padding:0 16px;gap:0;}
.brand{gap:1px;}
.brand::before{width:131px;height:12.04px;}
.brand .brand-sub{font-size:7.5px;letter-spacing:.28em;}
/* Desktop-only bits vanish; the bar becomes logo (left) + messages + hamburger (right). */
nav.links{margin-left:0;}
.pbd-search{display:none;}
.account-wrap{display:none;}
.nav-right{border-left:none;padding-left:0;gap:14px;margin-left:auto;height:auto;}
.hamburger-btn{display:flex;}
/* Backdrop behind the drawer. IMPORTANT: .pbd-nav-sticky (position:sticky;z-index:50) creates a
stacking context, and .nav-backdrop is a SIBLING of .pbd-nav-sticky in the DOM (not nested inside
it), so its z-index is compared against .pbd-nav-sticky's z-index at the root level -- NOT against
nav.links' z-index:200, which is trapped inside that stacking context. Keep this below 50 or the
backdrop will paint over the entire header+drawer box and swallow all clicks meant for drawer links. */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;}
.nav-backdrop.open{display:block;}
/* nav.links becomes the full-screen slide-in drawer. top = header.topnav's own 56px height
(see line 277) PLUS whatever the shared portable nav bar (pbd-shared-nav.js, mounted above
the sticky header on every page) is actually rendering at right now.
This used to be a hardcoded top:93px (56px header + a guessed 37px for the old thin family
bar) -- and it went stale THE MOMENT the family bar was replaced by the taller shared nav
(Ken, Aug 2026: "huge gap above the buttons" -- the drawer was opening ~40-60px too low,
with its first real content hidden behind the shared bar). A hand-synced pixel guess here
will keep going stale every time that bar's own height changes for an unrelated reason (a
new quick-strip row, a taller/shorter hamburger button, etc.), so instead this reads
--pbd-shared-nav-height, a CSS custom property pbd-shared-nav.js publishes on after
every render of its own header -- no more hand-syncing two files for one number. The 98px
fallback (for the rare instant this variable isn't set yet) matches that bar's own current
no-logo mobile height (64px row + ~34px quick-strip). */
nav.links{
position:fixed;top:calc(56px + var(--pbd-shared-nav-height, 98px));left:0;bottom:0;width:100%;max-width:340px;z-index:200;
flex-direction:column;align-items:stretch;height:auto;gap:0;
background:#0b0b0d;border-right:1px solid #232329;
padding:8px 0 0;overflow-y:auto;
transform:translateX(-100%);transition:transform .25s ease;
box-shadow:8px 0 30px rgba(0,0,0,.45);
}
nav.links.open{transform:translateX(0);}
/* Drawer search field (rendered by nav-links.js at the top of the drawer). */
.pbd-search-drawer{
display:flex;align-items:center;gap:8px;margin:6px 20px 10px;padding:0 12px;height:40px;
border:1px solid #232329;background:#131316;
}
.pbd-search-drawer svg{width:15px;height:15px;flex:none;color:#8a8a92;}
.pbd-search-drawer input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:500 13px 'Archivo';color:#f2f2f2;}
.pbd-search-drawer input::placeholder{color:#8a8a92;opacity:1;}
.pbd-search-drawer-menu{position:static;margin:0 20px 8px;box-shadow:none;max-height:220px;}
/* Drawer nav rows (flush-left, 3px red left rule when active). */
nav.links a{
display:block;height:auto;padding:13px 20px;margin-bottom:0;
font:600 15px 'Archivo';color:#d6d6dc;border-bottom:none;
border-left:3px solid transparent;
}
nav.links a:hover{color:#fff;}
nav.links a.active{font-weight:600;color:#fff;border-left-color:#d1132e;background:#131316;border-bottom:none;}
/* Tuning group in the drawer = section label + always-visible indented children. */
.nav-group{display:contents;}
.nav-group.nav-group--tc-sections{display:contents;}
nav.links .nav-group>a{display:none;} /* hide the desktop toggle in the drawer */
.nav-group-menu{
position:static;display:flex;flex-direction:column;min-width:0;padding:0;
background:none;border:none;box-shadow:none;
}
nav.links .nav-group-label{
display:block;padding:14px 20px 6px;font:700 10px 'Archivo';letter-spacing:.22em;color:#8a8a92;
}
nav.links .nav-group-menu a{padding:11px 20px 11px 32px;font:500 14.5px 'Archivo';color:#d6d6dc;border-left:3px solid transparent;}
nav.links .nav-group-menu a.active{color:#fff;border-left-color:#d1132e;background:#131316;}
/* 2px rule separator above Media (inserted by nav-links.js as .nav-drawer-rule). */
.nav-drawer-rule{height:2px;background:#26262b;margin:8px 20px;}
/* Account identity row pinned at the drawer bottom (populated by nav-toggle.js on open). */
.drawer-acct{
display:flex;align-items:center;gap:12px;margin-top:8px;
border-top:2px solid #26262b;padding:14px 20px;
}
.drawer-acct .avatar{width:36px;height:36px;font-size:15px;position:relative;overflow:visible;}
.drawer-acct .prem-star{position:absolute;bottom:-5px;right:-5px;font-size:13px;line-height:1;color:#f5d78e;text-shadow:0 0 2px #0b0b0d,0 1px 2px rgba(0,0,0,.7);display:none;pointer-events:none;}
.drawer-acct.is-premium .prem-star,.drawer-acct.is-premium-plus .prem-star{display:block;}
.drawer-acct-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.drawer-acct-name{font:600 14px 'Archivo';color:#fff;white-space:nowrap;}
.drawer-acct-prem{display:none;font:700 8.5px 'Archivo';letter-spacing:.2em;color:#d1132e;border:1px solid #d1132e;padding:2px 5px;align-self:flex-start;}
.drawer-acct.is-premium .drawer-acct-prem,.drawer-acct.is-premium-plus .drawer-acct-prem{display:block;}
/* Drawer account action buttons (Account Settings / Log Out) kept for function. */
.nav-account-link{
display:block;width:100%;text-align:left;font-family:'Archivo',sans-serif;cursor:pointer;
border:none;padding:13px 20px;font:600 14px 'Archivo';background:transparent;color:#d6d6dc;
}
.nav-account-link:hover{background:#131316;color:#fff;}
.nav-account-link.danger{color:#f2b8bf;}
/* Light drawer variant. */
.pbd-header-light nav.links{background:#ffffff;border-right-color:#e2e0dd;}
.pbd-header-light .pbd-search-drawer{background:#f6f5f4;border-color:#e2e0dd;}
.pbd-header-light nav.links a{color:#3a3835;}
.pbd-header-light nav.links a.active{color:#111;background:#f6f5f4;}
.pbd-header-light .nav-group-menu a{color:#3a3835;}
.pbd-header-light .drawer-acct{border-top-color:#e2e0dd;}
.pbd-header-light .drawer-acct-name{color:#111;}
.pbd-header-light .nav-drawer-rule{background:#e2e0dd;}
.pbd-header-light .nav-account-link{color:#3a3835;}
.pbd-header-light .nav-account-link:hover{background:#f6f5f4;color:#111;}
}
/* Collapse the quick-search to an icon-only square below ~1366px (before touching nav labels),
per the design's nav-fit note. Still opens/behaves as the full quick-jump. */
@media(min-width:861px) and (max-width:1366px){
/* Tighten the bar so the focused search still fits without wrapping the nav. */
header.topnav{gap:24px;}
nav.links a{padding:0 11.4px;}
/* At rest it's a compact icon button in the flow. Clicking in expands it as a right-anchored
OVERLAY (absolute) so the bar doesn't reflow or overflow -- the wide menu hangs beneath it. */
.pbd-search{width:44px;padding:0;justify-content:center;}
.pbd-search input,.pbd-search-key{display:none;}
.pbd-search.focused{position:absolute;top:50%;transform:translateY(-50%);right:32px;width:340px;padding:0 14px;justify-content:flex-start;background:#212128;z-index:45;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.pbd-search.focused input{display:block;}
}
/* ---------- Focus-visible ring (design token) ---------- */
/* Keyboard focus ring for links/buttons only. The search box shows focus via its own red
border (see .pbd-search.focused / :focus-within) -- no outline, so there's no double ring. */
header.topnav a:focus-visible,
header.topnav button:focus-visible{outline:2px solid #d1132e;outline-offset:2px;}