/* ============================================================ Something From Nothing — navigation bar axes ------------------------------------------------------------ Two independent appearance axes on , composing with data-theme (light/dark) and data-theme-name (palette): data-bar-type = standard | icons | pill data-bar-location = left | top | right | bottom standard+left is the base chrome in app.css (left sidebar with labels + mobile bottom tabs) and has NO overrides here. Every other combination composes a LOCATION block (where the bar sits, how the shell flexes) with a TYPE block (how items present: labels, icon-only, floating pill). All restructuring is desktop-only (>=900px). Phones keep the bottom tab bar in every combination. Bars publish two vars — --sidebar-width and --topnav-height — consumed by docked action bars, sticky page headers and the notifications popover, so dependent chrome follows automatically. Legacy mapping (old data-layout): classic = standard+left, topbar = standard+top, rail = icons+left, dock = pill+bottom. ============================================================ */ /* ============================================================ LOCATION: top — full-width horizontal bar above the content. (Skipped for pill, which floats and has its own placement.) ============================================================ */ @media (min-width: 900px) { [data-bar-location="top"]:not([data-bar-type="pill"]) { --sidebar-width: 0px; /* no side chrome: docked bars + popovers follow */ --topnav-height: 58px; /* sticky page headers offset below the bar */ } [data-bar-location="top"]:not([data-bar-type="pill"]) .app-shell { flex-direction: column; } [data-bar-location="top"]:not([data-bar-type="pill"]) .app-sidebar { position: sticky; top: 0; z-index: 60; width: 100%; height: var(--topnav-height); flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--nav-border); } /* Nav runs horizontally, pushed to the right edge */ [data-bar-location="top"]:not([data-bar-type="pill"]) .side-nav { flex-direction: row; align-items: stretch; gap: 2px; height: 100%; margin-left: auto; padding: 0 8px; } /* Items: underline affordance instead of left rail */ [data-bar-location="top"]:not([data-bar-type="pill"]) .side-item { height: 100%; padding: 0 13px; border-left: none; border-bottom: 3px solid transparent; border-radius: 0; outline-offset: -3px; /* keep focus ring visible inside the bar */ } [data-bar-location="top"]:not([data-bar-type="pill"]) .side-item.active { border-bottom-color: var(--accent); background: transparent; /* cleaner in a bar; keeps --nav-selected color */ } /* Notifications popover: right-anchored just below the bar */ [data-bar-location="top"]:not([data-bar-type="pill"]) .app-shell .sidebar-notif-anchor .notif-panel { left: auto; right: 16px; top: calc(var(--topnav-height) + 10px); } } /* ============================================================ LOCATION: bottom — full-width horizontal bar below the content. (Skipped for pill.) Same bones as top, mirrored. ============================================================ */ @media (min-width: 900px) { [data-bar-location="bottom"]:not([data-bar-type="pill"]) { --sidebar-width: 0px; --topnav-height: 0px; --bottombar-height: 58px; } /* DOM order keeps the aside first; column-reverse paints it last (bottom). */ [data-bar-location="bottom"]:not([data-bar-type="pill"]) .app-shell { flex-direction: column-reverse; } [data-bar-location="bottom"]:not([data-bar-type="pill"]) .app-sidebar { position: sticky; bottom: 0; top: auto; z-index: 60; width: 100%; height: var(--bottombar-height); flex-direction: row; align-items: center; border-right: none; border-top: 1px solid var(--nav-border); } [data-bar-location="bottom"]:not([data-bar-type="pill"]) .side-nav { flex-direction: row; align-items: stretch; gap: 2px; height: 100%; margin-left: auto; padding: 0 8px; } /* Underline flips to the top edge of the bar */ [data-bar-location="bottom"]:not([data-bar-type="pill"]) .side-item { height: 100%; padding: 0 13px; border-left: none; border-top: 3px solid transparent; border-radius: 0; outline-offset: -3px; } [data-bar-location="bottom"]:not([data-bar-type="pill"]) .side-item.active { border-top-color: var(--accent); background: transparent; } /* Fixed Like/Nope bars on detail pages lift clear of the nav bar */ [data-bar-location="bottom"]:not([data-bar-type="pill"]) .docked-bar { bottom: var(--bottombar-height); } /* Notifications popover: right-anchored just above the bar */ [data-bar-location="bottom"]:not([data-bar-type="pill"]) .app-shell .sidebar-notif-anchor .notif-panel { left: auto; right: 16px; top: auto; bottom: calc(var(--bottombar-height) + 10px); } } /* Shared by horizontal bars (top + bottom, non-pill): inline brand, no foot, corner-pinned badges. */ @media (min-width: 900px) { [data-bar-location="top"]:not([data-bar-type="pill"]) .brand-mark, [data-bar-location="bottom"]:not([data-bar-type="pill"]) .brand-mark { padding: 0 18px; font-size: 16px; line-height: 1.1; white-space: nowrap; flex-shrink: 0; } [data-bar-location="top"]:not([data-bar-type="pill"]) .brand-mark br, [data-bar-location="bottom"]:not([data-bar-type="pill"]) .brand-mark br { display: none; } [data-bar-location="top"]:not([data-bar-type="pill"]) .brand-mark .accent, [data-bar-location="bottom"]:not([data-bar-type="pill"]) .brand-mark .accent { display: inline; margin-left: 4px; } [data-bar-location="top"]:not([data-bar-type="pill"]) .side-item .side-badge, [data-bar-location="bottom"]:not([data-bar-type="pill"]) .side-item .side-badge { position: absolute; top: 8px; right: 4px; margin-left: 0; } [data-bar-location="top"]:not([data-bar-type="pill"]) .side-foot, [data-bar-location="bottom"]:not([data-bar-type="pill"]) .side-foot { display: none; } } /* Standard type in a horizontal bar collapses to icons at narrow desktop widths — hide labels accessibly (names stay in the a11y tree). */ @media (min-width: 900px) and (max-width: 1279.98px) { [data-bar-type="standard"][data-bar-location="top"] .side-item > span:not(.icon):not(.side-badge), [data-bar-type="standard"][data-bar-location="bottom"] .side-item > span:not(.icon):not(.side-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } } @media (min-width: 1280px) { [data-bar-type="standard"][data-bar-location="top"] .side-item, [data-bar-type="standard"][data-bar-location="bottom"] .side-item { font-size: 13px; } } /* ============================================================ LOCATION: right — the base left sidebar, mirrored. (Skipped for pill.) ============================================================ */ @media (min-width: 900px) { /* DOM order keeps the aside first; row-reverse paints it on the right. */ [data-bar-location="right"]:not([data-bar-type="pill"]) .app-shell { flex-direction: row-reverse; } [data-bar-location="right"]:not([data-bar-type="pill"]) .app-sidebar { border-right: none; border-left: 1px solid var(--nav-border); z-index: 60; } /* Fixed Like/Nope bars clear the nav on the RIGHT edge instead of the left (app.css's base rule assumes a left rail via left: var(--sidebar-width)). */ [data-bar-location="right"]:not([data-bar-type="pill"]) .docked-bar { left: 0; right: var(--sidebar-width); } /* Active-item accent rail flips to the right edge */ [data-bar-location="right"]:not([data-bar-type="pill"]) .side-item { border-left: none; border-right: 3px solid transparent; } [data-bar-location="right"]:not([data-bar-type="pill"]) .side-item.active { border-right-color: var(--accent); } /* Notifications popover: anchored beside the right rail */ [data-bar-location="right"]:not([data-bar-type="pill"]) .app-shell .sidebar-notif-anchor .notif-panel { left: auto; right: calc(var(--sidebar-width) + 10px); } } /* ============================================================ TYPE: icons — icon-only items in any location. Vertical locations narrow the bar to a 76px rail; horizontal ones keep the 58px bar and just drop the labels. ============================================================ */ @media (min-width: 900px) { [data-bar-type="icons"][data-bar-location="left"], [data-bar-type="icons"][data-bar-location="right"] { --sidebar-width: 76px; } /* Brand collapses to a monogram. The real anchor text shrinks to 0 but remains in the accessibility tree; ::before paints the visual "SFN". */ [data-bar-type="icons"] .brand-mark { font-size: 0; line-height: 0; text-align: center; } [data-bar-type="icons"] .brand-mark::before { content: "SFN"; display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; color: var(--accent); } [data-bar-type="icons"][data-bar-location="left"] .brand-mark, [data-bar-type="icons"][data-bar-location="right"] .brand-mark { padding: 20px 0 16px; } [data-bar-type="icons"][data-bar-location="top"] .brand-mark, [data-bar-type="icons"][data-bar-location="bottom"] .brand-mark { padding: 0 18px; } /* Labels visually hidden, kept for screen readers (and the tooltips below). */ [data-bar-type="icons"] .side-item > span:not(.side-badge):not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Vertical rails: centered 44px hit areas with soft active pill */ [data-bar-type="icons"][data-bar-location="left"] .side-nav, [data-bar-type="icons"][data-bar-location="right"] .side-nav { flex: 1; padding: 0 10px 14px; gap: 4px; } [data-bar-type="icons"][data-bar-location="left"] .side-item, [data-bar-type="icons"][data-bar-location="right"] .side-item { justify-content: center; gap: 0; width: 100%; padding: 12px 0; border-left: none; border-right: none; border-radius: var(--radius-m); } [data-bar-type="icons"][data-bar-location="left"] .side-item.active, [data-bar-type="icons"][data-bar-location="right"] .side-item.active { background: var(--accent-soft); color: var(--nav-selected); } /* Badge rides the item's top-right corner (item is position:relative). */ [data-bar-type="icons"] .side-badge { position: absolute; top: 4px; right: 8px; margin-left: 0; min-width: 16px; height: 16px; font-size: 9.5px; line-height: 16px; } /* No room for the strapline on an icon bar. */ [data-bar-type="icons"] .side-foot { display: none; } } /* ============================================================ TYPE: pill — floating icon pill, detached from every edge. Location decides which edge it hugs; content goes full-bleed. ============================================================ */ @media (min-width: 900px) { [data-bar-type="pill"] { --sidebar-width: 0px; --topnav-height: 0px; } [data-bar-type="pill"] .app-sidebar { position: fixed; width: auto; height: auto; align-items: center; gap: 2px; padding: 7px 10px; background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-overlay); backdrop-filter: blur(16px) saturate(1.2); z-index: 60; transition: bottom 0.25s ease, top 0.25s ease; } /* --- Placement per location --- */ [data-bar-type="pill"][data-bar-location="bottom"] .app-sidebar { left: 50%; bottom: 18px; top: auto; transform: translateX(-50%); flex-direction: row; max-width: calc(100vw - 48px); } [data-bar-type="pill"][data-bar-location="top"] .app-sidebar { left: 50%; top: 18px; bottom: auto; transform: translateX(-50%); flex-direction: row; max-width: calc(100vw - 48px); } [data-bar-type="pill"][data-bar-location="left"] .app-sidebar { left: 18px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 48px); } [data-bar-type="pill"][data-bar-location="right"] .app-sidebar { left: auto; right: 18px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 48px); } /* Detail pages render a fixed bottom .docked-bar (Like/Nope): lift a bottom pill clear of it. */ [data-bar-type="pill"][data-bar-location="bottom"] .app-shell:has(.docked-bar) .app-sidebar { bottom: 86px; } /* Chrome we don't need on a pill */ [data-bar-type="pill"] .brand-mark, [data-bar-type="pill"] .side-foot { display: none; } [data-bar-type="pill"] .side-nav { flex-direction: inherit; align-items: center; gap: 2px; padding: 0; } /* Items: icon-only pills (42x42 hit area) */ [data-bar-type="pill"] .side-item { justify-content: center; padding: 11px; border-left: none; border-right: none; border-radius: var(--radius-pill); } [data-bar-type="pill"] .side-item.active { background: var(--accent-soft); color: var(--nav-selected); } [data-bar-type="pill"] .side-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Accessibly hide text labels (kept in the a11y tree). */ [data-bar-type="pill"] .side-item > span:not(.side-badge):not(.icon) { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Badge: corner-pinned mini pill */ [data-bar-type="pill"] .side-badge { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 15px; height: 15px; padding: 0 4px; font-size: 9px; line-height: 15px; } /* Content clears the floating pill on its edge */ [data-bar-type="pill"][data-bar-location="bottom"] .app-content { padding-bottom: 110px; } [data-bar-type="pill"][data-bar-location="top"] .app-content { padding-top: 90px; } [data-bar-type="pill"][data-bar-location="left"] .app-content { padding-left: 90px; } [data-bar-type="pill"][data-bar-location="right"] .app-content { padding-right: 90px; } /* Notifications popover hugs the pill's edge */ [data-bar-type="pill"][data-bar-location="bottom"] .app-shell .sidebar-notif-anchor .notif-panel { left: 50%; right: auto; top: auto; bottom: 96px; transform: translateX(-50%); } [data-bar-type="pill"][data-bar-location="top"] .app-shell .sidebar-notif-anchor .notif-panel { left: 50%; right: auto; top: 96px; bottom: auto; transform: translateX(-50%); } [data-bar-type="pill"][data-bar-location="left"] .app-shell .sidebar-notif-anchor .notif-panel { left: 96px; right: auto; } [data-bar-type="pill"][data-bar-location="right"] .app-shell .sidebar-notif-anchor .notif-panel { left: auto; right: 96px; } } /* ============================================================ Menu ordering — vertical bars sink the utility group (Notifications + Settings, marked .side-item-push) to the bottom of the rail. Horizontal bars keep source order. ============================================================ */ @media (min-width: 900px) { [data-bar-location="left"]:not([data-bar-type="pill"]) .side-nav, [data-bar-location="right"]:not([data-bar-type="pill"]) .side-nav { flex: 1; } [data-bar-location="left"]:not([data-bar-type="pill"]) .side-item-push, [data-bar-location="right"]:not([data-bar-type="pill"]) .side-item-push { margin-top: auto; } /* Vertical pills too — same idea, tighter chrome. */ [data-bar-type="pill"][data-bar-location="left"] .side-item-push, [data-bar-type="pill"][data-bar-location="right"] .side-item-push { margin-top: 10px; } } /* ========================================================================== Icon tooltips — icons + pill types The icon-only presentations hide each nav item's label with the accessible clip pattern; on hover / keyboard focus the same span un-clips into a themed tooltip bubble (no extra markup, label text stays the single source of truth). Bubble side follows the bar's location. ========================================================================== */ @media (min-width: 900px) { /* Shared bubble chrome (position differs per location below). */ [data-bar-type="icons"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="icons"] .side-item:focus-visible > span:not(.side-badge):not(.icon), [data-bar-type="pill"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="pill"] .side-item:focus-visible > span:not(.side-badge):not(.icon) { width: auto; height: auto; overflow: visible; clip: auto; padding: 6px 11px; background: var(--overlay-bg); color: var(--text); border: 1px solid var(--panel-stroke); border-radius: var(--radius-m); box-shadow: var(--shadow-overlay); backdrop-filter: blur(8px); /* keeps translucent glass themes legible */ font-size: 12px; font-weight: 600; letter-spacing: 0.01em; z-index: 70; pointer-events: none; /* never steal the hover from the item */ } /* Left-edge bars: bubble to the right of the icon. */ [data-bar-type="icons"][data-bar-location="left"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="icons"][data-bar-location="left"] .side-item:focus-visible > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="left"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="left"] .side-item:focus-visible > span:not(.side-badge):not(.icon) { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); } /* Right-edge bars: bubble to the left of the icon. */ [data-bar-type="icons"][data-bar-location="right"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="icons"][data-bar-location="right"] .side-item:focus-visible > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="right"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="right"] .side-item:focus-visible > span:not(.side-badge):not(.icon) { right: calc(100% + 10px); left: auto; top: 50%; transform: translateY(-50%); } /* Top bars: bubble below the icon. */ [data-bar-type="icons"][data-bar-location="top"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="icons"][data-bar-location="top"] .side-item:focus-visible > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="top"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="top"] .side-item:focus-visible > span:not(.side-badge):not(.icon) { top: calc(100% + 10px); bottom: auto; left: 50%; transform: translateX(-50%); } /* Bottom bars: bubble above the icon. */ [data-bar-type="icons"][data-bar-location="bottom"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="icons"][data-bar-location="bottom"] .side-item:focus-visible > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="bottom"] .side-item:hover > span:not(.side-badge):not(.icon), [data-bar-type="pill"][data-bar-location="bottom"] .side-item:focus-visible > span:not(.side-badge):not(.icon) { bottom: calc(100% + 10px); top: auto; left: 50%; transform: translateX(-50%); } }