/* styles/layout.css */ /* NEXORA navigation layouts ------------------------------------------------------------------------------------------------ Five arrangements of the same shell. Three come from the the reference design design's navigation-layout.ts and the [data-nav-layout] rules in its styles.css; two more are ported from the designer's own Executive and Editorial Command. Its class names are not ours, so this is a port rather than a copy: .nexora-sidebar is .sidebar here, .nexora-topbar is .topbar, .nav-menu is .nav, .nav-section-label is .nav-eyebrow, its .nav-footer button is .ask-btn, and the wrapper it reaches with body > div > div:has(> .nexora-sidebar) is simply .frame. Two rules the port keeps to: - Nothing here touches a page. Every selector starts at .frame, .sidebar, .topbar or .page, so a layout can rearrange the shell and no page script needs to know one exists. - Nothing below 1024px. The rail is already a drawer there and all five share it, so a phone behaves exactly as it does today whichever layout is chosen. Executive puts the navigation and the header's own controls on one band, and how much room the header needs is a measurement, not a guess: scripts/layout.js publishes it as --nx-tools-w. */ /* The mark on the Ask button belongs to the icon rail, where the words are hidden and something has to stand in for them. It was added to the markup without being hidden here, so it turned up on the button in the ordinary rail too, which nobody asked for. */ .ask-mark{display:none} /* The category menus are built into the rail by layout.js for the two layouts that need them, so they exist in the markup everywhere. Only those two show them. */ .nav-groups{display:none} /* the shell animates between arrangements rather than jumping */ .sidebar,.topbar,.frame,.page{ transition:margin .32s ease,border-radius .32s ease,width .32s ease,padding .32s ease} @media(prefers-reduced-motion:reduce){ .sidebar,.topbar,.frame,.page{transition:none} } @media(min-width:1024px){ /* ---- 1. Full rail --------------------------------------------------------------------------- The arrangement the dashboard already had, and the default. It is listed so it can be chosen back, and it adds nothing: whoever never opens the picker sees exactly what they saw before. */ /* ---- 2. Icon rail --------------------------------------------------------------------------- Marks only. The widest working space of the five. */ :root[data-nav-layout="icons"] .sidebar{width:84px;align-items:center;padding:20px 10px} :root[data-nav-layout="icons"] .sidebar .nav-label{display:none} :root[data-nav-layout="icons"] .brand{justify-content:center;padding:0;gap:0} :root[data-nav-layout="icons"] .nav{width:100%;align-items:stretch} :root[data-nav-layout="icons"] .nav-item{justify-content:center;gap:0;min-height:44px;padding-inline:0} :root[data-nav-layout="icons"] .nav-glyph{font-size:0.9375rem} :root[data-nav-layout="icons"] .nav-eyebrow{display:none} :root[data-nav-layout="icons"] .ask-btn{display:grid;place-items:center;width:48px;height:48px; margin-inline:auto;padding:0;font-size:1.125rem} :root[data-nav-layout="icons"] .ask-btn .ask-mark{display:block} /* the live dot sits on the mark itself when there is no room beside a name */ :root[data-nav-layout="icons"] .nav-item.is-active::after{right:8px;top:8px} /* ---- 3. Bottom dock ------------------------------------------------------------------------ .frame stops being a row so the content can take the full width, and the rail becomes a pill centred over the page, the way a phone holds its own. Nothing above or below it belongs to it. The names are measured, not guessed: thirteen of them come to 1062px, so the pill is cut to fit them rather than the other way round. Below that width it scrolls, which is why the nav is a scroller at all. */ :root[data-nav-layout="dock"] .frame{display:block} :root[data-nav-layout="dock"] .content{width:100%} :root[data-nav-layout="dock"] .sidebar{ position:fixed;z-index:90;flex-direction:row;align-items:center;overflow:visible; left:50%;right:auto;bottom:18px;top:auto;transform:translateX(-50%); width:max-content;max-width:calc(100vw - 48px);height:66px;gap:6px; border:1px solid color-mix(in oklab,var(--border) 66%,var(--accent)); border-radius:999px;padding:9px 14px; background-color:color-mix(in oklab,var(--sidebar) 94%,transparent); box-shadow:0 26px 64px color-mix(in oklab,var(--theme-shadow,var(--foreground)) 18%,transparent)} :root[data-nav-layout="dock"] .sidebar .brand, :root[data-nav-layout="dock"] .sidebar .nav-eyebrow, :root[data-nav-layout="dock"] .sidebar .ask-btn{display:none} /* The pill was a fixed 1092px, measured for thirteen names; the Guide made fourteen and the text size setting makes each wider, and a CENTRED scroller that overflows cuts off its start where no scroll can reach it ("ockpit"). The pill now sizes to the names up to the screen, and the names are centred only while they fit: the auto margins centre them, and give way to the left edge once the row is wider than the pill, so every name can be scrolled to. */ :root[data-nav-layout="dock"] .nav{ margin:0;flex:1 1 auto;min-width:0;flex-direction:row;align-items:center;gap:2px;justify-content:flex-start; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain} :root[data-nav-layout="dock"] .nav > :first-child{margin-left:auto} :root[data-nav-layout="dock"] .nav > :last-child{margin-right:auto} :root[data-nav-layout="dock"] .nav::-webkit-scrollbar{display:none} :root[data-nav-layout="dock"] .nav-item{ white-space:nowrap;padding:8px 12px;border-radius:999px;flex:none} :root[data-nav-layout="dock"] .nav-glyph{display:none} :root[data-nav-layout="dock"] .nav-label{font-size:0.8125rem} /* the page keeps clear of the edge the pill is on */ :root[data-nav-layout="dock"] .page{padding-bottom:110px} @media(max-width:1260px){ :root[data-nav-layout="dock"] .nav-item{padding-inline:9px} :root[data-nav-layout="dock"] .nav-label{font-size:0.7812rem} } /* At a small laptop the pill is capped by the viewport itself, so it gives its own padding back before the names have to shrink any further. */ @media(max-width:1100px){ :root[data-nav-layout="dock"] .sidebar{padding-inline:8px} :root[data-nav-layout="dock"] .nav-item{padding-inline:7px} } /* ---- 4 and 5. The designer's own two -------------------------------------------------------- Ported from the design source nexora/nexora_cockpit_analytics.html, where they are menu layouts 6 (Executive) and 17 (Editorial Command). Its shell is not ours - a three-column grid with .premium-nav, aside.left and aside.right - so this is a port, not a copy. Its navigation groups its pages behind a few category menus, and that part is carried over rather than reinvented: thirteen names do not fit on one line beside a search field and an account, and a bar that scrolls sideways is not a premium bar. The menus are built out of the rail itself by layout.js, so they carry the same links with the same data-page and the active one is marked by the same code that marks the rail. One thing is carried over exactly, because it is the whole idea: the designer hides its own topbar in 6. The bar IS the header. It is not a second one under an existing one. Our header carries the search, the view controls and the account, and CSS cannot move them into the bar, so the bar keeps its right-hand side clear of them by --nx-tools-w and they share one band, one ground and one rule. Brand on the left, then the pages, then the tools and you. */ :root[data-nav-layout="exec"] .frame{display:block} :root[data-nav-layout="exec"] .content{width:100%} :root[data-nav-layout="exec"] .sidebar{ position:fixed;left:0;right:0;top:0;z-index:60; width:auto;height:76px;flex-direction:row;align-items:center;gap:20px;overflow:visible; padding:0 20px 0 20px; /* the header's own controls live at the far right of this same band */ padding-right:calc(var(--nx-tools-w,300px) + 28px)} @media(min-width:768px){ :root[data-nav-layout="exec"] .sidebar{padding-left:32px} } :root[data-nav-layout="exec"] .sidebar .nav-eyebrow, :root[data-nav-layout="exec"] .sidebar .ask-btn{display:none} /* the brand keeps the rail's own padding here too, or the hover ground closes on the wordmark */ :root[data-nav-layout="exec"] .sidebar .brand{flex:none;gap:10px} :root[data-nav-layout="exec"] .sidebar .brand .eyebrow{display:none} /* the rail's own list is not shown on the bar; the menus stand in for it */ :root[data-nav-layout="exec"] .nav{display:none} :root[data-nav-layout="exec"] .nav-groups{ display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0} :root[data-nav-layout="exec"] .nav-groups .nav-item{white-space:nowrap;padding:8px 11px} :root[data-nav-layout="exec"] .nav-groups .nav-label{font-size:0.8125rem} /* one category. The summary is the button; the panel under it is the pages. */ .nav-group{position:relative;flex:none} .nav-group-head{ display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer; padding:8px 11px;border-radius:var(--radius-xl); font-size:0.8125rem;line-height:1.125rem;color:var(--muted-foreground); list-style:none;user-select:none; transition:background-color .15s ease,color .15s ease} .nav-group-head::-webkit-details-marker{display:none} .nav-group-head:hover{background:var(--secondary);color:var(--foreground)} .nav-group-head i{ width:7px;height:7px;flex:none;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg); opacity:.6;transition:transform .18s ease} .nav-group[open]>.nav-group-head i{transform:translateY(1px) rotate(-135deg)} .nav-group[open]>.nav-group-head{background:var(--secondary);color:var(--foreground)} /* the category holding the page you are on stays marked while it is shut */ .nav-group:has(.nav-item.is-active)>.nav-group-head{color:var(--foreground)} .nav-group-pages{ position:absolute;top:calc(100% + 9px);left:0;z-index:70; min-width:212px;display:flex;flex-direction:column;gap:2px;padding:7px; border-radius:var(--radius-2xl);border:1px solid var(--border);background:var(--card); box-shadow:0 26px 60px color-mix(in oklab,var(--theme-shadow,var(--foreground)) 18%,transparent); animation:nx-group-in .16s ease both} @keyframes nx-group-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .nav-group-pages{animation:none} .nav-group-head i{transition:none} } .nav-group-pages .nav-item{width:100%;padding:9px 11px} /* the header keeps only its right-hand side, on the same band, with no ground of its own */ :root[data-nav-layout="exec"] .topbar{ position:fixed;top:0;right:0;left:auto;width:auto;z-index:61; height:76px;padding:0 20px;gap:12px;flex-wrap:nowrap; background:transparent;border-bottom-color:transparent} @media(min-width:768px){ :root[data-nav-layout="exec"] .topbar{padding-right:32px} } :root[data-nav-layout="exec"] .topbar-title, :root[data-nav-layout="exec"] .topbar-menu{display:none} :root[data-nav-layout="exec"] .page{padding-top:100px} /* Under about 1320 the band cannot hold the brand, four menus, a search field and the whole tool cluster at once. Rather than let the menus slide under the search, the header gives up what it can spare there: the keystroke badge for a shortcut that does not exist yet, the word beside the hand glyph (the button keeps its label for a screen reader and its tooltip) and the clock. Nothing that does anything is removed. */ @media(max-width:1319px){ :root[data-nav-layout="exec"] .topbar-search{flex:none;width:186px;min-width:0} :root[data-nav-layout="exec"] .topbar-search .eyebrow, :root[data-nav-layout="exec"] .topbar-word, :root[data-nav-layout="exec"] .topbar-clock{display:none} .nav-group-head{padding:8px 9px} } /* 4. Executive: one uninterrupted band on the page's own ground, and the page you are on is marked by a rule under its name rather than by a filled pill. */ :root[data-nav-layout="exec"] .sidebar{ background:var(--background);border-bottom:1px solid var(--border); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} :root[data-nav-layout="exec"] .nav-group:has(.nav-item.is-active)>.nav-group-head, :root[data-nav-layout="exec"] .nav-groups>.nav-item.is-active{ background:transparent;color:var(--foreground);border-radius:0; box-shadow:inset 0 -2px var(--accent)} /* inside the panel a rule under a name would read as a divider, so the page you are on is held */ :root[data-nav-layout="exec"] .nav-group-pages .nav-item.is-active{ background:var(--secondary);color:var(--foreground);border-radius:var(--radius-xl); box-shadow:none} :root[data-nav-layout="exec"] .nav-item.is-active::after{display:none} /* 5. Editorial command: the rail stays on the left but turns into a dark volume with a sharp signal edge and industrial type. The header above the page is left alone. */ :root[data-nav-layout="editorial"] .sidebar{ width:250px;background:var(--ink);color:var(--ink-foreground); border-right:2px solid var(--accent);padding:26px 18px} :root[data-nav-layout="editorial"] .sidebar .brand-name{color:var(--ink-foreground)} :root[data-nav-layout="editorial"] .sidebar .brand-mark{ background:color-mix(in oklab,var(--ink-foreground) 14%,transparent);color:var(--ink-foreground); border-radius:8px} :root[data-nav-layout="editorial"] .sidebar .eyebrow{color:var(--ink-muted)} /* The brand's hover ground is a pale surface meant for a pale rail. On this one it painted a light slab under light text and the wordmark disappeared into it, so here the hover is a lift off the ink rather than a different colour. */ :root[data-nav-layout="editorial"] .sidebar .brand:hover{ background:color-mix(in oklab,var(--ink-foreground) 9%,transparent)} :root[data-nav-layout="editorial"] .nav{gap:0;margin-top:26px} :root[data-nav-layout="editorial"] .nav-item{ border-radius:0;padding:11px 12px;color:var(--ink-muted); border-bottom:1px solid color-mix(in oklab,var(--ink-foreground) 9%,transparent)} :root[data-nav-layout="editorial"] .nav-item:hover{ background:color-mix(in oklab,var(--ink-foreground) 7%,transparent);color:var(--ink-foreground)} :root[data-nav-layout="editorial"] .nav-label{ font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase} :root[data-nav-layout="editorial"] .nav-glyph{color:var(--ink-muted);font-size:0.75rem} :root[data-nav-layout="editorial"] .nav-item.is-active{ background:transparent;color:var(--ink-foreground); box-shadow:inset 3px 0 var(--accent)} :root[data-nav-layout="editorial"] .nav-item.is-active .nav-glyph{color:var(--accent)} :root[data-nav-layout="editorial"] .nav-eyebrow{ margin-top:22px;padding-left:12px;color:var(--ink-muted)} :root[data-nav-layout="editorial"] .ask-btn{margin-top:22px;border-radius:6px} /* ---- what else is pinned to the screen ------------------------------------------------------ The chat dock, the hands panel and the out-of-reach strip are all fixed to an edge. The bottom dock occupies the one they share, so they step over it rather than sitting under it. */ :root[data-nav-layout="dock"] .chat-dock{bottom:104px} :root[data-nav-layout="dock"] .hands-hud{bottom:100px} :root[data-nav-layout="dock"] .nx-stale{bottom:104px} } /* Hand mode takes the whole window and hides the shell, so no layout applies to it. Said here so nobody has to work it out from two stylesheets. */ html.is-holo .sidebar{display:none!important} /* the side of the bottom dock that has more names fades out (scripts/layout.js marks it) */ :root[data-nav-layout="dock"] .nav.has-more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)} :root[data-nav-layout="dock"] .nav.has-more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)} :root[data-nav-layout="dock"] .nav.has-more-left.has-more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}