/* ============================================================ ps-nav - ONE shared desktop header (site + app modes). Injected by ps-nav.js on every page (marketing, legal, app). Fixes the 7-headers drift: one geometry, one auth state, one style. Self-contained palette so it looks identical regardless of the page's own tokens. Mobile (<=860px) keeps each page's own nav - ps-nav hides itself there. ============================================================ */ .ps-nav{ --psn-ink:#1C2B39; --psn-mute:#6B7683; --psn-line:#E1E5EA; --psn-ground:#F6F7F9; --psn-coral:#F9675A; --psn-coral-ink:#E8503F; --psn-card:#fff; position:sticky; top:0; z-index:200; display:flex; align-items:center; gap:22px; height:72px; padding:0 34px; background:transparent; border-bottom:1px solid transparent; font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif; transition:background .28s ease, border-color .28s ease, backdrop-filter .28s ease; } /* solid frosted ground once scrolled (or always, on non-hero pages) */ .ps-nav.is-solid{ background:rgba(246,247,249,.86); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border-bottom-color:var(--psn-line); } /* home: fixed transparent overlay so the full-bleed hero runs behind it (not pushed down) */ .ps-nav.psn-home{position:fixed; left:0; right:0} .ps-nav .psn-brand{flex:0 0 auto; display:flex; align-items:center; min-height:44px; padding:7px 4px 7px 0} .ps-nav .psn-brand img{height:30px; width:auto; display:block} .ps-nav .psn-links{display:flex; align-items:center; gap:26px; margin-left:20px} .ps-nav .psn-links a{ position:relative; padding:7px 0; color:var(--psn-mute); white-space:nowrap; text-decoration:none; font-weight:500; font-size:15px; transition:color .2s; } .ps-nav .psn-links a:hover{color:var(--psn-ink)} .ps-nav .psn-links a.active{color:var(--psn-ink); font-weight:600} .ps-nav .psn-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--psn-coral); } .ps-nav .psn-right{margin-left:auto; display:flex; align-items:center; gap:14px} /* right-side controls */ .ps-nav .psn-hi{font-size:14.5px; font-weight:600; color:var(--psn-ink); white-space:nowrap} /* signed-in greeting: plain text that opens a menu. No button chrome; the caret is the only "this opens" cue */ .ps-nav .psn-hi-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 2px; border:0; background:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--psn-ink); white-space:nowrap; } /* The first name is the one thing in the bar that may give way. Links never wrap (nowrap above), so when a long name meets a narrow window the name shortens to an ellipsis instead of pushing Create off the edge or the page sideways. min-width:0 down the chain lets it shrink. */ .ps-nav .psn-right, .ps-nav .psn-hi-wrap, .ps-nav .psn-hi-btn{min-width:0} .ps-nav .psn-hi-btn .psn-name{min-width:0; max-width:9em; overflow:hidden; text-overflow:ellipsis} .ps-nav .psn-hi-btn .psn-caret{transition:transform .2s, color .2s} .ps-nav .psn-hi-btn:hover .psn-caret{color:var(--psn-coral)} .ps-nav .psn-hi-btn[aria-expanded="true"] .psn-caret{transform:rotate(180deg); color:var(--psn-coral)} .ps-nav .psn-login{ display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:100px; border:1.5px solid rgba(28,43,57,.22); color:var(--psn-ink); font-weight:700; font-size:14.5px; text-decoration:none; transition:background .2s,color .2s,border-color .2s; } .ps-nav .psn-login:hover{background:var(--psn-ink); color:#fff; border-color:var(--psn-ink)} .ps-nav .psn-create{position:relative} .ps-nav .psn-create > .psn-create-btn{ display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 20px; border:0; cursor:pointer; background:var(--psn-coral); color:#fff; border-radius:100px; font-family:inherit; font-weight:700; font-size:14.5px; box-shadow:0 8px 20px rgba(249,103,90,.32); transition:transform .18s, background .2s; } .ps-nav .psn-create > .psn-create-btn:hover{background:var(--psn-coral-ink); transform:translateY(-1px)} .ps-nav .psn-create .psn-caret{font-size:11px; opacity:.9} .ps-nav .psn-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:220px; padding:8px; background:#fff; border:1px solid var(--psn-line); border-radius:14px; box-shadow:0 22px 46px rgba(20,33,46,.16); display:none; z-index:10; } .ps-nav .psn-menu.open{display:block} .ps-nav .psn-menu a, .ps-nav .psn-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; background:none; border-radius:9px; color:var(--psn-ink); font-family:inherit; font-weight:600; font-size:14px; text-decoration:none; text-align:left; cursor:pointer; } .ps-nav .psn-menu a:hover, .ps-nav .psn-menu button:hover{background:var(--psn-ground)} .ps-nav .psn-menu .psn-sep{height:1px; background:var(--psn-line); margin:6px 4px} .ps-nav .psn-menu a.active{color:var(--psn-coral-ink)} /* "How it works" inside the "Hi, name" menu: only shown on the narrow signed-in band below */ .ps-nav .psn-menu-more{display:none} /* account (app mode) trigger */ .ps-nav .psn-acct{position:relative} .ps-nav .psn-acct > .psn-acct-btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 14px; border:1px solid var(--psn-line); background:#fff; color:var(--psn-ink); border-radius:100px; font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; } .ps-nav .psn-acct > .psn-acct-btn .psn-av{width:26px; height:26px; border-radius:50%; background:var(--psn-coral); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px} /* theme switch inside the account menu: a Light / Dark / Auto segmented control. Self-contained (own tokens, beats the generic menu-button rule) so it renders the same with or without salt-glass.css - the editors don't load it. */ .ps-nav .psn-theme{display:block; padding:10px 12px 6px} .ps-nav .psn-theme .psn-theme-lbl{display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--psn-mute); margin-bottom:8px} .ps-nav .psn-theme .sg-switch{display:flex; gap:3px; padding:3px; background:var(--psn-ground); border:1px solid var(--psn-line); border-radius:100px} .ps-nav .psn-theme .sg-switch button{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; width:auto; height:32px; padding:0 6px; border:0; border-radius:100px; background:none; color:var(--psn-mute); font-family:inherit; font-size:13px; font-weight:600; text-align:center; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; } .ps-nav .psn-theme .sg-switch button:hover{color:var(--psn-ink); background:none} .ps-nav .psn-theme .sg-switch button.on{background:var(--psn-card); color:var(--psn-ink); box-shadow:0 2px 6px rgba(20,40,58,.12)} /* Single-button theme toggle for signed-in users (2026-09-26). Shows the icon of the theme it WILL switch to: moon in light mode, sun in dark mode. */ .ps-nav .psn-theme-h{display:inline-flex;flex:0 0 auto} /* Desktop notifications bell + dropdown (2026-09-28). Placed between the theme toggle and the "Hi, Name" dropdown so the header order matches the mobile island: theme, notifications, self. */ .ps-nav .psn-notifs-wrap{position:relative;display:inline-flex;flex:0 0 auto} .ps-nav .psn-notifs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--psn-line);border-radius:100px;background:var(--psn-ground);color:var(--psn-ink);cursor:pointer;transition:transform .18s ease,background .15s,color .15s,border-color .15s} .ps-nav .psn-notifs-btn svg{width:16px;height:16px} .ps-nav .psn-notifs-btn:hover{background:var(--psn-card);border-color:var(--psn-coral);color:var(--psn-coral)} .ps-nav .psn-notifs-btn:active{transform:scale(.95)} .ps-nav .psn-notifs-badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:100px;background:var(--psn-coral);color:#fff;font-size:9.5px;font-weight:800;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--psn-bg,#fff);letter-spacing:-.02em} :root[data-theme="dark"] .ps-nav .psn-notifs-badge{box-shadow:0 0 0 2px var(--psn-bg,#0f1a24)} .ps-nav .psn-notifs{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(90vw,380px);max-height:min(70vh,520px);overflow-y:auto;background:var(--psn-card,#fff);border:1px solid var(--psn-line);border-radius:16px;box-shadow:0 26px 54px rgba(20,33,46,.22);padding:8px;z-index:30} .ps-nav .psn-notifs.open{display:block} .ps-nav .psn-notifs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--psn-line);margin-bottom:6px} .ps-nav .psn-notifs-head b{font-size:14px;font-weight:700;color:var(--psn-ink)} .ps-nav .psn-notifs-clear{border:0;background:none;color:var(--psn-coral-ink,var(--psn-coral));font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 10px;border-radius:8px} .ps-nav .psn-notifs-clear:hover{background:var(--psn-ground)} .ps-nav .psn-notifs-list{display:flex;flex-direction:column;gap:2px} /* Reuse the shared .ps-notifs-item styling from salt-glass.css so the item look is consistent between the desktop panel and the mobile island panel. If a page loads ps-nav.css but not salt-glass.css (marketing pages), the item styles below stand in for them. */ .ps-nav .psn-notifs .ps-notifs-item{color:var(--psn-ink);text-decoration:none} .ps-nav .psn-notifs .ps-notifs-item:hover, .ps-nav .psn-notifs .ps-notifs-item:active{background:var(--psn-ground)} .ps-nav .psn-notifs .ps-notifs-item.is-unread{background:rgba(249,103,90,0.06)} :root[data-theme="dark"] .ps-nav .psn-notifs .ps-notifs-item.is-unread{background:rgba(255,110,82,0.10)} .ps-nav .psn-theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--psn-line);border-radius:100px;background:var(--psn-ground);color:var(--psn-ink);cursor:pointer;transition:transform .18s ease, background .15s, color .15s, border-color .15s} .ps-nav .psn-theme-btn svg{width:16px;height:16px} .ps-nav .psn-theme-btn:hover{background:var(--psn-card);border-color:var(--psn-coral);color:var(--psn-coral)} .ps-nav .psn-theme-btn:active{transform:scale(.95)} .ps-nav .psn-sheet-theme{margin:4px 0 2px} /* open-state: the trigger whose dropdown is open lights up + its caret flips, so it's clear which button owns the menu (mirrors the mobile island) */ .ps-nav .psn-create > .psn-create-btn[aria-expanded="true"]{background:var(--psn-coral-ink)} .ps-nav .psn-create-btn .psn-caret{display:inline-block;transition:transform .2s} .ps-nav .psn-create-btn[aria-expanded="true"] .psn-caret{transform:rotate(180deg)} .ps-nav .psn-acct > .psn-acct-btn[aria-expanded="true"]{border-color:var(--psn-coral);background:var(--psn-ground)} .ps-nav .psn-acct-btn .psn-caret{display:inline-block;transition:transform .2s,color .2s} .ps-nav .psn-acct-btn[aria-expanded="true"] .psn-caret{transform:rotate(180deg);color:var(--psn-coral)} /* auth visibility: guest vs signed-in slots (script sets body.is-authed) */ .ps-nav [data-when="authed"]{display:none} body.is-authed .ps-nav [data-when="authed"]{display:inline-flex} body.is-authed .ps-nav [data-when="guest"]{display:none} /* DARK: applies to EVERY dark-capable page (app + site). ps-nav.js only sets data-theme="dark" on pages that actually render dark, so the bar never goes dark over a light body. */ :root[data-theme="dark"] .ps-nav{ --psn-ink:#ECEFF2; --psn-mute:#9DB0BE; --psn-line:#2A3743; --psn-ground:#16222E; --psn-coral:#FF6E52; --psn-coral-ink:#FF8168; --psn-card:#243444; } :root[data-theme="dark"] .ps-nav.is-solid{background:rgba(22,34,46,.86); border-bottom-color:#2A3743} :root[data-theme="dark"] .ps-nav .psn-menu{background:#1C2B39; border-color:#2A3743} :root[data-theme="dark"] .ps-nav .psn-acct > .psn-acct-btn{background:#1C2B39; border-color:#2A3743} :root[data-theme="dark"] .ps-nav .psn-sheet{background:#1C2B39; border-color:#2A3743} :root[data-theme="dark"] .ps-nav .psn-burger span{background:var(--psn-ink)} :root[data-theme="dark"] .ps-nav .psn-login{border-color:rgba(255,255,255,.24); color:var(--psn-ink)} :root[data-theme="dark"] .ps-nav .psn-login:hover{background:#ECEFF2; color:#16222E} :root[data-theme="dark"] .ps-nav .psn-sheet-cta{background:var(--psn-coral); color:#16222E !important} :root[data-theme="dark"] .ps-nav .psn-sheet-cta:hover{background:var(--psn-coral-ink)} /* ---- mobile burger + sheet (SITE pages) ---- */ .ps-nav .psn-burger{display:none; margin-left:auto; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; border:0; background:none; cursor:pointer} .ps-nav .psn-burger span{width:22px; height:2px; border-radius:2px; background:var(--psn-ink); transition:transform .25s var(--psn-ease,ease), opacity .2s} .ps-nav .psn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .ps-nav .psn-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .ps-nav .psn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .ps-nav .psn-sheet{display:none; position:absolute; top:calc(100% + 8px); right:max(14px, env(safe-area-inset-right)); left:auto; width:220px; padding:8px; background:var(--psn-card,#fff); border:1px solid var(--psn-line); border-radius:16px; box-shadow:0 26px 54px rgba(20,33,46,.22); z-index:30} .ps-nav .psn-sheet.open{display:block} .ps-nav .psn-sheet a, .ps-nav .psn-sheet button{display:flex; align-items:center; width:100%; padding:12px 14px; border:0; background:none; border-radius:11px; color:var(--psn-ink); font-family:inherit; font-weight:600; font-size:15.5px; line-height:1.1; text-decoration:none; text-align:left; cursor:pointer} .ps-nav .psn-sheet a:hover, .ps-nav .psn-sheet button:hover{background:var(--psn-ground)} .ps-nav .psn-sheet .psn-sheet-link.active{color:var(--psn-coral-ink)} .ps-nav .psn-sheet-sep{height:1px; background:var(--psn-line); margin:6px 8px} /* these need the extra .psn-sheet class to beat the generic ".psn-sheet a{background:none}" rule */ .ps-nav .psn-sheet .psn-sheet-signout{color:var(--psn-coral-ink)} .ps-nav .psn-sheet .psn-sheet-cta{justify-content:center; margin-top:6px; background:var(--psn-ink); color:#fff !important; font-weight:700} .ps-nav .psn-sheet .psn-sheet-cta:hover{background:#0e1a26} /* auth toggling inside the sheet: full-width flex rows (beats the generic inline-flex rule) */ .ps-nav .psn-sheet [data-when="authed"]{display:none} body.is-authed .ps-nav .psn-sheet [data-when="authed"]{display:flex} body.is-authed .ps-nav .psn-sheet [data-when="guest"]{display:none} /* ---- responsive handoff ---- App mode hides at 1023 (its sg-island bottom dock takes over). Site mode STAYS on phones as a burger + sheet (<=860), replacing the old per-page navs. */ @media (max-width:1023px){ .ps-nav[data-mode="app"]{display:none !important} } /* Signed-in SITE bar between the burger and full width (2026-10-03). Signed in, the bar carries 5 links plus theme, bell, "Hi, name" and Create: about 1020px at full spacing, more with a long name, so from 861px the links wrapped onto 2 or 3 lines and Create was pushed off the right edge. Guests (3 links + Login) fit at every width and are untouched. Step 1 (861-1099) tightens the spacing, on app pages too (owner, 2026-10-05: there it only applies from 1024, where the app bar appears, and keeps a 9+ letter name whole instead of "Chri..."). Step 2 (861-999, site pages only) moves "How it works" into the "Hi, name" menu and drops the "Hi," so the name and Create stay whole. Home has no header Create, so it fits with step 1 alone and keeps all its links. */ @media (min-width:861px) and (max-width:1099px){ body.is-authed .ps-nav[data-mode]{gap:16px; padding:0 24px} body.is-authed .ps-nav[data-mode] .psn-links{gap:20px; margin-left:8px} body.is-authed .ps-nav[data-mode] .psn-right{gap:10px} body.is-authed .ps-nav[data-mode] .psn-create > .psn-create-btn{padding:0 16px} } @media (min-width:861px) and (max-width:999px){ body.is-authed .ps-nav[data-mode="site"]:not(.psn-home) .psn-links a[href="./how-to-use.html"]{display:none} body.is-authed .ps-nav[data-mode="site"]:not(.psn-home) .psn-menu-more{display:block} body.is-authed .ps-nav[data-mode="site"]:not(.psn-home) .psn-hi-word{display:none} } @media (max-width:860px){ .ps-nav[data-mode="site"]{height:64px; padding:0 clamp(14px,4vw,20px)} .ps-nav[data-mode="site"] .psn-links, .ps-nav[data-mode="site"] .psn-right{display:none} .ps-nav[data-mode="site"] .psn-burger{display:inline-flex} /* opted-in app pages (dashboard, profile) also get the top burger bar on phones, alongside their bottom-dock island */ html[data-ps-appmenu] .ps-nav[data-mode="app"]{display:flex !important; height:64px; padding:0 clamp(14px,4vw,20px)} html[data-ps-appmenu] .ps-nav[data-mode="app"] .psn-links, html[data-ps-appmenu] .ps-nav[data-mode="app"] .psn-right{display:none} html[data-ps-appmenu] .ps-nav[data-mode="app"] .psn-burger{display:inline-flex} } /* Light / Dark / Auto switch, shared by every island's profile menu (editors included). */ .sg-switch{display:inline-flex;gap:2px;padding:3px;background:var(--psn-ground,#f6f8fa);border:1px solid var(--psn-line,#e4e9ee);border-radius:100px} .sg-switch button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;border:0;border-radius:100px;background:none;color:var(--psn-mute,#6f7b85);cursor:pointer} .sg-switch button svg{width:16px;height:16px} .sg-switch button.on{background:var(--psn-card,#fff);color:var(--psn-ink,#14283a);box-shadow:0 2px 6px rgba(20,40,58,.10)} :root[data-theme="dark"] .sg-switch{background:#243444;border-color:#2A3B49} :root[data-theme="dark"] .sg-switch button{color:#9DB0BE} :root[data-theme="dark"] .sg-switch button.on{background:#1C2B39;color:#EAF0F5;box-shadow:0 2px 8px rgba(0,0,0,.4)} /* Marketing-page island (injected by ps-nav.js). Mirrors .sg-island in salt-glass.css: same size, glass, radius, 7-slot grid, coral centred Create. Signed-in phones only: it shows where the top bar turns into the burger (<=860). It used to run to 1023, so at 861-1023 signed-in visitors got the full bar AND this island, Create and alerts twice (owner chose bar only, 2026-10-05). */ .psn-island{display:none} @media (max-width:860px){ body.is-authed .psn-island{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));width:calc(100% - 40px);max-width:460px;z-index:60;background:rgba(246,248,250,.62);-webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%);border:0;border-radius:26px;box-shadow:0 10px 40px rgba(20,40,58,.07);font-family:inherit} :root[data-theme="dark"] body.is-authed .psn-island{background:rgba(26,38,52,.58);-webkit-backdrop-filter:blur(40px) saturate(150%);backdrop-filter:blur(40px) saturate(150%);box-shadow:0 6px 20px rgba(0,0,0,.40),0 2px 8px rgba(0,0,0,.28)} body.is-authed.has-psn-island{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))} .psn-ibar{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;padding:8px 8px 9px} .psn-ii{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:50px;padding:6px 1px;border:0;background:none;border-radius:16px;color:#6f7b85;text-decoration:none;font:inherit;cursor:pointer;min-width:0;transition:transform .08s,background .15s,color .15s} :root[data-theme="dark"] .psn-ii{color:#9DB0BE} .psn-ii svg{width:20px;height:20px} .psn-ii>span:last-child{font-size:8px;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .psn-ii.active,.psn-ii[aria-expanded="true"]{color:#e8503f;background:#ffe7e2;margin-inline:4px} :root[data-theme="dark"] .psn-ii.active,:root[data-theme="dark"] .psn-ii[aria-expanded="true"]{color:#FF6E52;background:#3A2118} .psn-ii:active{transform:scale(.92)} .psn-ii-bell{position:relative;display:inline-grid;place-items:center} .psn-ii-dot{position:absolute;top:-5px;right:-7px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:100px;background:#f9675a;color:#fff;font-size:9.5px;font-weight:800;line-height:16px;text-align:center;box-shadow:0 0 0 2px #f6f8fa} :root[data-theme="dark"] .psn-ii-dot{box-shadow:0 0 0 2px #16222E} .psn-icreate{justify-self:center;align-self:center;width:52px;height:52px;border-radius:50%;border:0;background:#f9675a;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 22px rgba(249,103,90,.40);transition:transform .3s,background .2s} .psn-icreate svg{width:24px;height:24px;transition:transform .34s cubic-bezier(.22,.9,.24,1)} .psn-icreate[aria-expanded="true"]{background:#e8503f} .psn-icreate[aria-expanded="true"] svg{transform:rotate(45deg)} .psn-icreate:active{transform:scale(.92)} .psn-ip{padding:14px 10px 4px;max-height:60vh;overflow-y:auto;border-bottom:1px solid rgba(20,40,58,.08)} :root[data-theme="dark"] .psn-ip{border-bottom-color:#2A3B49} .psn-ip[hidden]{display:none} .psn-ip-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6f7b85;font-weight:700;padding:0 12px 8px} .psn-ip-row{display:flex;align-items:center;justify-content:space-between} .psn-ip-row button{border:0;background:none;color:#e8503f;font:inherit;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer} .psn-ip>a,.psn-ip>button{display:flex;align-items:center;gap:14px;width:100%;padding:11px 12px;border:0;background:none;border-radius:14px;color:#14283a;text-decoration:none;font:inherit;font-weight:600;font-size:15px;text-align:left;cursor:pointer} :root[data-theme="dark"] .psn-ip>a,:root[data-theme="dark"] .psn-ip>button{color:#EAF0F5} .psn-ip>a svg,.psn-ip>button svg{width:20px;height:20px;color:#e8503f;flex:0 0 auto} .psn-ip>a:active,.psn-ip>button:active{background:rgba(20,40,58,.05)} .psn-ip-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px 10px;border-bottom:1px solid rgba(20,40,58,.08);margin-bottom:4px} .psn-ip-theme>span:first-child{font-size:11px;font-weight:700;letter-spacing:.14em;color:#6f7b85;text-transform:uppercase} } /* Notification list items, global so every island panel (app, editors, marketing) matches. */ .ps-notifs-item{display:flex;align-items:flex-start;gap:12px;padding:11px 10px;border-radius:12px;text-decoration:none;color:#14283a;position:relative} :root[data-theme="dark"] .ps-notifs-item{color:#EAF0F5} .ps-notifs-item:active{background:rgba(20,40,58,.05)} .ps-notifs-item.is-unread{background:rgba(249,103,90,.05)} :root[data-theme="dark"] .ps-notifs-item.is-unread{background:rgba(255,110,82,.09)} .ps-notifs-item-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#ffe7e2;color:#e8503f;display:grid;place-items:center} :root[data-theme="dark"] .ps-notifs-item-ic{background:#3A2118;color:#FF6E52} .ps-notifs-item-ic svg{width:18px;height:18px} .ps-notifs-item-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .ps-notifs-item-tx b{font-size:13.5px;font-weight:700;line-height:1.25} .ps-notifs-item-tx small{font-size:12px;color:#6f7b85;line-height:1.35} :root[data-theme="dark"] .ps-notifs-item-tx small{color:#9DB0BE} .ps-notifs-item-ts{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:#6f7b85;text-transform:uppercase;font-style:normal} .ps-notifs-item-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#f9675a;align-self:center} .ps-notifs-empty{padding:24px 18px;text-align:center;color:#6f7b85;display:flex;flex-direction:column;align-items:center;gap:6px} .ps-notifs-empty-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffe7e2;color:#e8503f} .ps-notifs-empty-ic svg{width:20px;height:20px} .ps-notifs-empty b{font-size:14px;color:#14283a} :root[data-theme="dark"] .ps-notifs-empty b{color:#EAF0F5} .ps-notifs-empty small{font-size:12.5px;max-width:240px;line-height:1.4} /* iOS: strip native button chrome so island buttons only highlight while open. */ .psn-ii,.psn-icreate{-webkit-appearance:none;appearance:none} .psn-ii{background:none} /* Notification list: scoped to [data-notifs-list] so it beats editor menu styles (.nav-pop a) and renders identically in every panel. Thin light divider between items. */ [data-notifs-list]{display:flex;flex-direction:column;gap:0} [data-notifs-list] .ps-notifs-item{display:flex;align-items:flex-start;gap:12px;padding:12px 10px;margin:0;border-radius:12px;font-size:inherit;font-weight:400;text-decoration:none;position:relative;width:auto} [data-notifs-list] .ps-notifs-item + .ps-notifs-item::before{content:"";position:absolute;left:56px;right:10px;top:0;height:1px;background:rgba(20,40,58,.07)} :root[data-theme="dark"] [data-notifs-list] .ps-notifs-item + .ps-notifs-item::before{background:rgba(255,255,255,.07)} [data-notifs-list] .ps-notifs-item-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center} [data-notifs-list] .ps-notifs-item-ic svg{width:18px;height:18px;flex:0 0 auto} [data-notifs-list] .ps-notifs-item-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left} [data-notifs-list] .ps-notifs-item-tx b{display:block;font-size:13.5px;font-weight:700;line-height:1.25} [data-notifs-list] .ps-notifs-item-tx small{display:block;font-size:12px;font-weight:400;line-height:1.35} [data-notifs-list] .ps-notifs-item-ts{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-style:normal} .psn-ibar svg{stroke-width:1.8} .psn-icreate svg{stroke-width:2} /* While a panel is open the island turns near-solid so lists stay readable over busy pages. */ body.is-authed .psn-island.ip-open{background:rgba(246,248,250,.96)} :root[data-theme="dark"] body.is-authed .psn-island.ip-open{background:rgba(28,43,57,.97)} /* Open island menus: slightly different shade + soft shadow (lifted card, not full contrast). */ @media (max-width:860px){ body.is-authed .psn-island.ip-open{box-shadow:0 -6px 30px rgba(20,33,46,.10),0 16px 44px rgba(20,33,46,.18)} :root[data-theme="dark"] body.is-authed .psn-island.ip-open{box-shadow:0 -6px 30px rgba(0,0,0,.30),0 16px 44px rgba(0,0,0,.55)} } /* Editor popovers (brochure + poster Create / Profile / Alerts): same treatment. */ body .nav-pop{box-shadow:0 18px 48px rgba(20,33,46,.20),0 2px 8px rgba(20,33,46,.06)} :root[data-theme="dark"] body .nav-pop{background:#26384A;border-color:rgba(255,255,255,.06);box-shadow:0 18px 48px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.25)} :root[data-theme="dark"] body #spCreate{background:#26384A;box-shadow:0 18px 48px rgba(0,0,0,.55)} /* Focus scrim: while any island menu (Create / Alerts / Profile) is open the page behind dims + softly blurs. Tapping it closes the menu (outside-click handlers). Injected by ps-nav.js. */ .ps-scrim{position:fixed;inset:0;z-index:55;background:rgba(10,18,26,.36);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s ease} :root[data-theme="dark"] .ps-scrim{background:rgba(0,0,0,.52)} body:has(.sg-island.open) .ps-scrim,body:has(.sg-island.acct-open) .ps-scrim,body:has(.sg-island.notifs-open) .ps-scrim, body:has(.psn-island.ip-open) .ps-scrim,body:has(.nav-pop:not([hidden])) .ps-scrim,body:has(#spCreate.on) .ps-scrim{opacity:1;pointer-events:auto} /* keep the editor bars + their menus above the scrim while it is showing */ body:has(.nav-pop:not([hidden])) #appnav,body:has(#spCreate.on) #appnav{z-index:57} body:has(.nav-pop:not([hidden])) .nav-pop:not([hidden]),body:has(#spCreate.on) #spCreate{z-index:58} /* No boxes inside the menus: unread alerts show a coral dot + bold title, not a tinted box. */ [data-notifs-list] .ps-notifs-item.is-unread,:root[data-theme="dark"] [data-notifs-list] .ps-notifs-item.is-unread{background:transparent} /* dim the top header too while an island menu is open (its own menus are closed then) */ body:has(.sg-island.open) .ps-nav,body:has(.sg-island.acct-open) .ps-nav,body:has(.sg-island.notifs-open) .ps-nav, body:has(.psn-island.ip-open) .ps-nav,body:has(.nav-pop:not([hidden])) .ps-nav,body:has(#spCreate.on) .ps-nav{z-index:50} /* ---- Liquid-glass lens (ps-nav.js). One glass pill behind the active island tab; springs between tabs with a brief liquid squish. Light + dark. */ .sg-bar.ps-lens-bar,.psn-ibar.ps-lens-bar{position:relative} .ps-lens-bar > :not(.ps-lens){position:relative;z-index:1} .ps-lens{position:absolute;left:0;top:0;z-index:0;border-radius:16px;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,231,226,.62)); border:1px solid rgba(255,255,255,.85); box-shadow:0 6px 16px rgba(232,80,63,.16),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(249,103,90,.10); -webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%); transition:transform .52s cubic-bezier(.34,1.32,.42,1),width .52s cubic-bezier(.34,1.32,.42,1),height .3s ease,opacity .2s ease; will-change:transform,width} :root[data-theme="dark"] .ps-lens{background:linear-gradient(180deg,rgba(255,110,82,.26),rgba(255,110,82,.12));border-color:rgba(255,255,255,.10); box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -6px 12px rgba(255,110,82,.10)} .ps-lens.no-anim{transition:none} .ps-lens.squish{animation:psLensSquish .52s cubic-bezier(.3,.7,.3,1)} @keyframes psLensSquish{0%{scale:1 1}35%{scale:1.14 .86}70%{scale:.97 1.03}100%{scale:1 1}} @media (prefers-reduced-motion:reduce){.ps-lens{transition:opacity .2s}.ps-lens.squish{animation:none}} /* the lens replaces the old flat active chip (Create keeps its coral circle) */ .ps-lens-bar > .active:not(.sg-create):not(.nav-create):not(.psn-icreate){background:transparent !important} /* Burger menu: thin light divider between items (same style as the alerts list). */ .ps-nav .psn-sheet > a,.ps-nav .psn-sheet > button{position:relative} .ps-nav .psn-sheet > * + *::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:rgba(20,40,58,.07);pointer-events:none} :root[data-theme="dark"] .ps-nav .psn-sheet > * + *::before{background:rgba(255,255,255,.07)} /* no line above the first VISIBLE item when signed-out (hidden signed-in links precede it), nor on the Log in button */ body:not(.is-authed) .ps-nav .psn-sheet > [data-when="authed"] + :not([data-when="authed"])::before, .ps-nav .psn-sheet > .psn-sheet-cta::before, .ps-nav .psn-sheet > .psn-sheet-theme::before, .ps-nav .psn-sheet > .psn-sheet-theme + *::before{display:none} /* Burger menu icons (muted; the current page + Sign out take their coral text colour). */ .ps-nav .psn-sheet .psn-sheet-ic{width:18px;height:18px;flex:0 0 auto;margin-right:12px;color:var(--psn-mute,#6f7b85)} .ps-nav .psn-sheet a.active .psn-sheet-ic,.ps-nav .psn-sheet .psn-sheet-signout .psn-sheet-ic{color:currentColor} :root[data-theme="dark"] .ps-nav .psn-sheet .psn-sheet-ic{color:#9DB0BE} :root[data-theme="dark"] .ps-nav .psn-sheet a.active .psn-sheet-ic,:root[data-theme="dark"] .ps-nav .psn-sheet .psn-sheet-signout .psn-sheet-ic{color:currentColor} /* dividers start where the text starts (after the icon) */ .ps-nav .psn-sheet > * + *::before{left:44px} /* Notification actions: per-item remove (x) + header "Mark all read" / "Clear all". */ .ps-notifs-x{flex:0 0 auto;align-self:center;display:grid;place-items:center;width:26px;height:26px;margin:-4px -4px -4px 2px;border-radius:50%;color:#9aa6b0;cursor:pointer;transition:background .15s,color .15s} .ps-notifs-x svg{width:14px;height:14px} .ps-notifs-x:hover,.ps-notifs-x:active{background:rgba(20,40,58,.07);color:#14283a} :root[data-theme="dark"] .ps-notifs-x{color:#647889} :root[data-theme="dark"] .ps-notifs-x:hover,:root[data-theme="dark"] .ps-notifs-x:active{background:rgba(255,255,255,.08);color:#EAF0F5} .ps-notifs-actions{display:inline-flex;align-items:center;gap:4px;margin-left:auto} .ps-notifs-act{border:0;background:none;font:inherit;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer;padding:4px 8px;border-radius:8px;color:#e8503f} .ps-notifs-clearall{color:#6f7b85} :root[data-theme="dark"] .ps-notifs-act{color:#FF6E52} :root[data-theme="dark"] .ps-notifs-clearall{color:#9DB0BE} .ps-notifs-act:hover{background:rgba(20,40,58,.06)} :root[data-theme="dark"] .ps-notifs-act:hover{background:rgba(255,255,255,.07)} .ps-notifs-actions .ps-notifs-act + .ps-notifs-act{position:relative} .ps-notifs-actions .ps-notifs-act + .ps-notifs-act::before{content:"";position:absolute;left:-2px;top:25%;bottom:25%;width:1px;background:rgba(20,40,58,.12)} :root[data-theme="dark"] .ps-notifs-actions .ps-notifs-act + .ps-notifs-act::before{background:rgba(255,255,255,.12)} /* editor menus + marketing island style every