/* Shared header chrome: brand lockup, page links, and account menu. Feedback stays in feedback.css so the action does not look like another destination. Page styles may keep a local .site-header copy for load-order safety; this file is the source of truth. */ /* env() is not readable from script, so publish the left inset as a custom property: site-nav.js widens the edge-swipe zone by it, or the gesture would sit entirely behind a landscape notch. */ :root { --yam-safe-left: env(safe-area-inset-left, 0px); } /* The top inset is applied unconditionally rather than behind `@media (display-mode: standalone)`: iOS does not reliably match that query for home-screen apps launched through the legacy `apple-mobile-web-app-capable` path, and the inset is already 0 in a normal browser, so gating it only risks the header rendering under the status bar. Every override below must use padding longhands — a `padding` shorthand silently resets padding-top and puts the header back under the status bar. */ .site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: calc(62px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-right: max(clamp(18px, 3.5vw, 54px), env(safe-area-inset-right)); padding-bottom: 0; padding-left: max(clamp(18px, 3.5vw, 54px), env(safe-area-inset-left)); border-bottom: 1px solid var(--border, var(--line)); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px); } /* Prepended to by site-nav.js only while an admin is viewing the console as another member; ordinary sessions never allocate it. Sits above the header in normal flow (not fixed) so it works identically across every page's layout without a matching padding-top hack. */ .impersonation-banner { position: relative; z-index: 21; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); font-size: 0.82rem; font-weight: 600; text-align: center; color: var(--on-accent, #10151e); background: var(--amber, var(--warning, #e3ad56)); } .impersonation-banner-exit { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--on-accent, #10151e) 35%, transparent); border-radius: 999px; padding: 3px 12px; font: inherit; font-weight: 700; color: inherit; background: transparent; cursor: pointer; } .impersonation-banner-exit:hover { background: color-mix(in srgb, var(--on-accent, #10151e) 12%, transparent); } .impersonation-banner-exit:disabled { opacity: 0.7; cursor: wait; } .brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .site-header .brand { margin-right: auto; } .brand-mark { display: block; width: 29px; height: 29px; border-radius: 50%; object-fit: cover; } .brand-name { letter-spacing: 0.08em; font-weight: 800; } .brand-divider { width: 1px; height: 18px; background: var(--border-strong, var(--line-strong)); } .brand-section { color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; } .mobile-nav-button, .mobile-nav-backdrop, .mobile-nav-drawer { display: none; } .site-nav { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px; } .site-nav-link { display: inline-flex; align-items: center; position: relative; min-height: 30px; padding: 0 13px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; transition: color 150ms ease, background-color 150ms ease; } /* A thin accent bar under the current page rather than a bordered pill — the indicator animates in on the active link instead of boxing every link in its own capsule. */ .site-nav-link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 999px; background: var(--accent, var(--cobalt, var(--text, var(--ink)))); opacity: 0; transform: scaleX(0.5); transition: opacity 150ms ease, transform 150ms ease; } .site-nav-link:hover { color: var(--text, var(--ink)); background: color-mix(in srgb, var(--text, var(--ink)) 6%, transparent); } .site-nav-link.is-current, .site-nav-link[aria-current="page"] { color: var(--text, var(--ink)); font-weight: 700; } .site-nav-link.is-current::after, .site-nav-link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); } .member-avatar { display: grid; width: 26px; height: 26px; place-items: center; overflow: hidden; border: 1px solid var(--border, var(--line)); border-radius: 999px; background: var(--surface); color: var(--text, var(--ink)); font-size: 0.72rem; font-weight: 750; } .member-avatar img { width: 100%; height: 100%; object-fit: cover; } .member-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu { position: relative; } .account-menu-button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 650; } .account-menu-button:hover, .account-menu.is-open .account-menu-button { color: var(--text, var(--ink)); border-color: var(--border, var(--line)); background: var(--surface); } .account-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 176px; padding: 6px; border: 1px solid var(--border, var(--line)); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42); } .account-menu-item { display: flex; width: 100%; min-height: 36px; align-items: center; padding: 0 10px; border: 0; border-radius: 8px; color: var(--text, var(--ink)); background: transparent; font-size: 0.82rem; font-weight: 650; text-align: left; text-decoration: none; cursor: pointer; } .account-menu-item:hover { background: color-mix(in srgb, var(--text, var(--ink)) 8%, transparent); } .account-menu-item[aria-pressed="true"] { color: var(--text, var(--ink)); } @media (max-width: 880px) { .site-header { padding-right: max(18px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); } .account-menu-button .member-name { display: none; } } @media (max-width: 860px) { /* Deny the document its horizontal overscroll so a left-edge swipe opens the drawer instead of navigating back in an iOS home-screen app. */ html { overscroll-behavior-x: none; } body.mobile-nav-open { overflow: hidden; } .brand-name, .brand-divider { display: none; } /* Opaque and unblurred on phones: with a translucent iOS status bar the frosted header bleeds into the status strip, and the extra padding keeps the row itself clear of it. */ .site-header { gap: 8px; min-height: calc(56px + env(safe-area-inset-top)); padding-top: calc(env(safe-area-inset-top) + 4px); padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); background: var(--surface); backdrop-filter: none; } .site-header .brand { gap: 7px; flex: 0 0 auto; min-width: 0; margin-right: auto; } .brand-mark { width: 27px; height: 27px; } .brand-section { display: block; max-width: min(42vw, 15rem); overflow: hidden; color: var(--text, var(--ink)); font-size: 0.8rem; font-weight: 700; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .header-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; min-width: 0; padding: 0; } .site-header.mobile-nav-ready .site-nav { display: none; } .mobile-nav-button { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; } .mobile-nav-button:hover, .mobile-nav-button:focus-visible { color: var(--text, var(--ink)); background: color-mix(in srgb, var(--text, var(--ink)) 8%, transparent); } .mobile-nav-button:focus-visible, .mobile-nav-close:focus-visible, .mobile-nav-link:focus-visible, .mobile-nav-action:focus-visible { outline: 2px solid var(--accent, var(--cobalt, var(--text))); outline-offset: 2px; } .mobile-nav-button svg, .mobile-nav-close svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 80; display: block; background: rgba(4, 7, 12, 0.62); opacity: 0; pointer-events: none; backdrop-filter: blur(2px); transition: opacity 200ms ease; } body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; } /* Always laid out, translated off-screen: the panel has to be able to track a finger, so it can never be `display: none` or `hidden`. `visibility` keeps the closed panel out of the tab order and the accessibility tree, and only the closing direction transitions it — transitioning it open would leave the panel unfocusable for the first frame, so focus-on-open would no-op. */ .mobile-nav-drawer { position: fixed; inset: 0 auto 0 0; z-index: 81; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(320px, 88vw); padding: calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-right: 1px solid var(--border, var(--line)); color: var(--text, var(--ink)); background: var(--surface); box-shadow: 24px 0 60px rgba(0, 0, 0, 0.4); transform: translateX(-100%); visibility: hidden; touch-action: pan-y pinch-zoom; transition: transform 200ms ease, visibility 200ms; } body.mobile-nav-open .mobile-nav-drawer { transform: none; visibility: visible; transition: transform 200ms ease; } /* While a finger owns the panel, the inline transform is the animation. */ body.mobile-nav-dragging .mobile-nav-drawer { visibility: visible; } body.mobile-nav-dragging .mobile-nav-drawer, body.mobile-nav-dragging .mobile-nav-backdrop { transition: none; } .mobile-nav-drawer-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 5px 8px 10px; } .mobile-nav-drawer-header strong { font-size: 0.92rem; font-weight: 750; } .mobile-nav-close { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; } .mobile-nav-close:hover { color: var(--text, var(--ink)); background: color-mix(in srgb, var(--text, var(--ink)) 8%, transparent); } .mobile-nav-links { display: grid; align-content: start; gap: 3px; min-height: 0; overflow-y: auto; } .mobile-nav-link, .mobile-nav-action { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: inherit; font-size: 0.86rem; font-weight: 650; text-align: left; text-decoration: none; } .mobile-nav-link:hover, .mobile-nav-action:hover { color: var(--text, var(--ink)); background: color-mix(in srgb, var(--text, var(--ink)) 7%, transparent); } .mobile-nav-link.is-current { color: var(--text, var(--ink)); background: color-mix(in srgb, var(--text, var(--ink)) 10%, var(--surface)); cursor: default; } .mobile-nav-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding-top: 8px; border-top: 1px solid var(--border, var(--line)); } .account-menu-button { width: 30px; min-height: 30px; padding: 0; justify-content: center; } .member-avatar { width: 24px; height: 24px; } } /* Last in the file, and naming the open state explicitly: that selector re-declares `transition` at a higher specificity, so listing only `.mobile-nav-drawer` here would still let the panel slide. */ @media (prefers-reduced-motion: reduce) { .mobile-nav-drawer, body.mobile-nav-open .mobile-nav-drawer, .mobile-nav-backdrop { transition: none; } }