/* ==========================================================================
Marketing chrome (PR-2 of the nav redesign) — the signed-out header, Apps
disclosure menu, and mobile sheet. Gate-1B "SKELETON SHELF" design.
Loaded AFTER atlas-retirement-analyzer.css and consumes its tokens
(--atlas-navy/-blue/-cyan, --ink, --muted, --line, --surface, --page).
Nothing in this file may style the signed-in platform chrome beyond the
visibility contract below; add NOTHING for this chrome to the big CSS.
========================================================================== */
/* --------------------------------------------------------------------------
Visibility contract (one place, two rules):
- Default (no JS ran — rung 0 — or JS confirmed a guest): the marketing
chrome is the one header; the platform chrome (the signed-in shell's
substrate, untouched markup) is display:none.
- body.mkt-authed (set by src/shared/marketingNav.js when a session
exists): flip — platform chrome back, marketing chrome gone.
marketingNav.js also sets body.mkt-guest for the confirmed-guest state so
tests and future CSS can key on it; visibility itself keys on .mkt-authed
only, so a JS failure leaves a guest with a fully working menu (rung 0).
-------------------------------------------------------------------------- */
body:not(.mkt-authed) > header.platform-chrome { display: none; }
body.mkt-authed > header.mkt-chrome { display: none; }
/* Skip link: first element in , visually parked off-screen until it
receives keyboard focus. Works signed in or out, so it is never hidden. */
.mkt-skip {
position: absolute;
left: 8px;
top: -52px;
z-index: 120;
background: var(--atlas-navy);
color: #fff;
padding: 10px 16px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: top 0.15s ease;
}
.mkt-skip:focus-visible { top: 8px; }
/* ---------------- Header bar (sticky; 64px desktop / 56px mobile) --------- */
header.mkt-chrome {
position: sticky;
top: 0;
z-index: 60; /* above page content, below .modal-backdrop (100) */
height: 64px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.mkt-chrome-inner {
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
gap: 20px;
padding: 0 20px;
}
/* Compact brand: the existing globe raster cropped into a navy tile via
object-fit (Gate 1B-Q3 "crop only" — no new asset; PR-8 ships the optimized
file). Explicit width/height attrs live on the ![]()
for zero layout shift. */
.mkt-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
letter-spacing: 0.06em;
font-size: 17px;
color: var(--atlas-navy);
text-decoration: none;
border-radius: 10px;
}
.mkt-brand-mark {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--atlas-navy);
overflow: hidden;
display: grid;
place-items: center;
flex: none;
}
.mkt-brand-mark img {
width: 24px;
height: 24px;
object-fit: cover; /* crops the wide ring tips; globe stays centered */
display: block;
}
/* ---------------- Primary nav links --------------------------------------- */
.mkt-nav {
display: flex;
align-items: center;
gap: 4px;
margin-left: 8px;
}
.mkt-navlink {
padding: 9px 14px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
text-decoration: none;
position: relative;
}
.mkt-navlink:hover { background: var(--page); }
/* Current page reads as a LOCATION (dot + underline), not a filled pill. */
.mkt-navlink[aria-current="page"] { font-weight: 700; }
.mkt-navlink[aria-current="page"]::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
background: var(--atlas-navy);
border-radius: 2px;
}
.mkt-navlink[aria-current="page"]::before {
content: "\00b7";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--atlas-blue);
font-weight: 800;
}
/* ---------------- Apps disclosure (native details/summary) ---------------- */
details.mkt-apps { position: relative; }
details.mkt-apps > summary {
list-style: none;
cursor: pointer;
padding: 9px 14px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
gap: 6px;
}
details.mkt-apps > summary::-webkit-details-marker { display: none; }
details.mkt-apps > summary:hover { background: var(--page); }
.mkt-caret { transition: transform 0.15s ease; font-size: 11px; }
details.mkt-apps[open] > summary .mkt-caret { transform: rotate(180deg); }
details.mkt-apps[open] > summary {
background: var(--page);
box-shadow: inset 0 -2px 0 var(--atlas-cyan);
}
/* The Apps entry OWNS app routes (same rule as the platform nav): location
underline on the summary while an app/overview/hub view is current. */
details.mkt-apps[data-current="true"]:not([open]) > summary {
font-weight: 700;
box-shadow: inset 0 -2px 0 var(--atlas-navy);
}
/* Desktop popover panel (same DOM becomes the mobile sheet below 820px). */
.mkt-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 460px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(20, 41, 76, 0.14);
padding: 10px;
z-index: 61;
}
/* Spine masthead: ONE CLIENT PROFILE — {n} CONNECTED APPS (count = navConfig). */
.mkt-spine-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 12px;
border-bottom: 1px solid var(--line);
font-size: 13px;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--atlas-blue);
}
.mkt-spine-node {
width: 12px;
height: 12px;
border-radius: 50%;
border: 3px solid var(--atlas-blue);
flex: none;
}
/* Shelf: vertical rail + one row per visible app (markup = navConfig.renderMenuRows). */
.mkt-shelf { position: relative; margin: 6px 0; padding-left: 17px; }
.mkt-shelf::before {
content: "";
position: absolute;
left: 15px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--line);
border-radius: 2px;
}
.mkt-shelf .nav-app-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
position: relative;
text-decoration: none;
color: var(--ink);
}
.mkt-shelf .nav-app-row:hover,
.mkt-shelf .nav-app-row:focus-visible { background: var(--app-wash, var(--page)); }
.mkt-shelf .nav-app-row:hover::before,
.mkt-shelf .nav-app-row:focus-visible::before {
content: "";
position: absolute;
left: -2px;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 2px;
background: var(--app-accent, var(--atlas-blue));
}
.nav-app-tile {
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--app-accent, var(--atlas-blue));
color: #fff;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
flex: none;
}
.nav-app-text { display: block; min-width: 0; }
.nav-app-name { display: block; font-weight: 600; font-size: 15px; }
.nav-app-sub { display: block; font-size: 13px; color: var(--muted); }
/* Panel exit row: All apps → + honest count line. */
.mkt-panel-exit {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--line);
padding: 10px 12px 6px;
font-size: 14px;
}
.mkt-panel-exit a {
color: var(--atlas-navy);
text-decoration: none;
border-radius: 8px;
}
.mkt-panel-exit a:hover { color: var(--atlas-blue); }
.mkt-count-line { color: var(--muted); font-size: 13px; }
/* Sheet-only content (site links + pinned CTA) stays out of the desktop popover. */
.mkt-sheet-only { display: none; }
/* ---------------- CTA + quiet Log in -------------------------------------- */
.mkt-spacer { flex: 1; }
.mkt-cta {
background: var(--atlas-navy);
color: #fff;
padding: 10px 18px;
border-radius: 12px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.mkt-cta:hover { background: var(--atlas-blue); }
.mkt-login {
font-size: 15px;
color: var(--muted);
padding: 9px 10px;
border-left: 1px solid var(--line);
margin-left: 6px;
text-decoration: none;
border-radius: 8px;
}
.mkt-login:hover { color: var(--ink); }
.mkt-login[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* Keyboard focus: the one visible ring, matching the platform's focus system
(atlas-retirement-analyzer.css :focus-visible pattern — cyan, 2px, offset 2). */
.mkt-skip:focus-visible,
.mkt-brand:focus-visible,
.mkt-navlink:focus-visible,
details.mkt-apps > summary:focus-visible,
.mkt-shelf .nav-app-row:focus-visible,
.mkt-panel-exit a:focus-visible,
.mkt-cta:focus-visible,
.mkt-login:focus-visible,
.mkt-sheet-links a:focus-visible {
outline: 2px solid var(--atlas-cyan);
outline-offset: 2px;
}
/* ---------------- Mobile (≤820px): 56px bar + full-screen sheet ------------
Bar order: brand | spacer | compact Get Started | ☰ (right-most, thumb
corner). The SAME panel becomes a fixed sheet under the bar. */
@media (max-width: 820px) {
header.mkt-chrome { height: 56px; }
.mkt-chrome-inner { gap: 10px; padding: 0 14px; }
.mkt-nav { display: contents; }
.mkt-navlink, .mkt-login { display: none; }
.mkt-spacer { order: 1; }
.mkt-chrome-inner > .mkt-cta { order: 2; margin-left: auto; padding: 8px 14px; font-size: 14px; }
details.mkt-apps { order: 3; }
details.mkt-apps > summary { padding: 8px 10px; font-size: 0; }
.mkt-caret { display: none; }
details.mkt-apps > summary::before { content: "\2630"; font-size: 22px; line-height: 1; }
details.mkt-apps[open] > summary::before { content: "\2715"; }
details.mkt-apps[open] > summary { box-shadow: none; }
details.mkt-apps[data-current="true"]:not([open]) > summary { box-shadow: none; }
.mkt-panel {
position: fixed;
inset: 56px 0 0 0;
width: auto;
border-radius: 0;
border: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px));
}
.mkt-sheet-only { display: block; }
.mkt-sheet-links {
list-style: none;
margin: 10px 0 0;
padding: 8px 0 0;
border-top: 1px solid var(--line);
display: grid;
font-size: 16px;
}
.mkt-sheet-links a {
display: block;
padding: 13px 12px;
border-radius: 12px;
text-decoration: none;
color: var(--ink);
}
.mkt-sheet-links a:hover { background: var(--page); }
.mkt-sheet-links a[aria-current="page"] { font-weight: 700; }
.mkt-sheet-links a[aria-current="page"]::after {
content: "\00b7 here";
color: var(--atlas-blue);
font-size: 13px;
margin-left: 8px;
}
/* Pinned conversion CTA in the thumb zone, above the sheet scroll. */
.mkt-sheet-cta {
position: fixed;
left: 14px;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
text-align: center;
padding: 15px;
font-size: 16px;
z-index: 70;
}
/* Body scroll-lock while the sheet is open (class set by marketingNav.js). */
body.mkt-menu-open { overflow: hidden; }
}
/* The "How it works" jump target must clear the sticky marketing bar
(64px desktop / 56px mobile — the larger value + breathing room covers both).
Guest-scoped: signed-in views use the platform chrome and its own spacing. */
body:not(.mkt-authed) [data-toc-section="How it works"] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) {
.mkt-skip { transition: none; }
.mkt-caret { transition: none; }
}
/* ==========================================================================
Marketing footer (PR-3 of the nav redesign) — navy conversion band +
config-rendered site map. Same skeleton-shelf language as the chrome above.
The