/* ============================================================================ Sidebar — the left column that holds the Greeting and the Menu Width comes from the navbar, not from a guess: the Figma navbar frame's `L` slot is 280px with a 24px inline-start inset, so its content measures 256px — exactly the native width of the `p/greeting/bg` artwork. The sidebar therefore shares the navbar's 280px column and the logo's left edge, and the greeting artwork renders at 1:1. TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT. DESIGN.md §12.4 records both as not built. ========================================================================== */ .sidebar { display: flex; flex-direction: column; gap: var(--space-md); /* Width is owned by the layout bands - see the table in layout.css. */ inline-size: var(--layout-rail-left); flex: none; /* Fills the viewport, matching the Figma frames: `b/sidebar/left 2` is 912 tall inside a 960 wrapper at 1440, i.e. wrapper minus the two gutters, and the wrapper is the viewport minus the 64px navbar. So: height = 100dvh - navbar - gutter * 2 A fixed height rather than a max, so the menu card can take the slack. */ position: sticky; inset-block-start: calc(64px + var(--layout-gutter)); block-size: calc(100dvh - 64px - var(--layout-gutter) * 2); /* The scroll now lives on the card that grows (see menu.css), so the column itself never clips - which also retires the padding/negative-margin gutter that used to be needed to keep the indicator bar and focus rings visible. */ overflow: visible; } /* ============================================================================ Collapsed rail - 1024 to 1199 Verified against the Figma frame: the greeting card stays, clipped to the 64px column (`object-fit: cover` already does this), its text hidden; the menu keeps its icons, its divider and the selected indicator bar, and drops the labels. ========================================================================== */ @media (min-width: 1024px) and (max-width: 1199px) { .sidebar .greeting { /* Release the 256x72 ratio; keep the height and let the artwork crop. */ aspect-ratio: auto; block-size: 72px; } .sidebar .greeting__text { display: none; } .menu__item { justify-content: center; padding-inline: var(--space-2xs); gap: 0; } /* NOT `display: none` - that would drop the row's accessible name with it, leaving ten unlabelled links. Hidden visually, kept in the tree. */ .menu__label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The Figma frame truncates "MY STUFF" to a meaningless "MY" at this width. Not reproduced - it is hidden visually and kept as the group's accessible label, so `aria-labelledby` still resolves. See the README. */ .menu__group-heading { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .menu__divider { margin-inline: var(--space-xs); } } /* ============================================================================ Below 1024 - the rail leaves the column row ⚠️ DEVIATION, deliberate. Figma hides the left sidebar entirely below 1024 because the nav becomes its own full-screen route (the `iPhone 13 mini - 7` frame shows `b/sidebar/left 2` at the full 375 width inside the Body). That route does not exist yet, and hiding the rail without it would leave the prototype with no navigation at all under 1024. So the nav is kept - as a DROPDOWN, which is the closer half of that frame's intent: a trigger that opens the navigation. It was a full-width inline grid of ten rows, which worked but spent roughly 200px above the fold on the viewports with the least of it. The disclosure lives in menu.css and menu.js; what stays here is the column becoming a stacked block. Building the real route still needs a nav screen plus a navbar affordance, and `system/menu_line` is not in the icon export (ASSETS.md §3.3 territory), so that trigger's glyph remains a design decision. See the README. ========================================================================== */ @media (max-width: 1023px) { .sidebar { position: static; inline-size: auto; /* Content height once it is a stacked block rather than a column. */ block-size: auto; } /* FILL. The greeting used to stop at the 600 body measure, which left it and the menu trigger as two short cards under a page whose own content runs to 1016 on most routes — they read as a narrower column left behind rather than as the top of the page. Both now span the gutters, and `.greeting` needs no rule at all to do it: the sidebar is `inline-size: auto` in this band and the card was only ever held back by the cap that was here. ⚠️ IT GETS TALL, AND THAT IS THE RIGHT TRADE. `p/greeting/bg` is 256x72, the card carries that ratio, so at 976 wide it is 274 tall — against 169 at the old 600 cap. Capping the height and letting `object-fit: cover` crop was tried and is worse at every value. The artwork is a sky gradient with the sun at the right, so a 72–160px band through the middle of it upscaled 3.7x is a brown stripe with a yellow wedge: the sun loses its shape and the gradient the illustration exists for is gone. ASSETS.md §5 rule 1 says choose the variant and never restyle it — cropping a fixed illustration into a letterbox is restyling it in effect, whatever the CSS property is called. The collapsed 64px rail above DOES crop, and that is not a precedent for doing it here: there the box is narrower than the artwork, so the crop is horizontal and shows a true slice at 1:1. This one would be a vertical crop of an upscale. So the artwork stays whole. It is only tall in the tablet half of the band — at 375 the card is 327x92 — and the page scrolls. TODO(design): a wide variant of `p/greeting/bg`. A 256x72 illustration is being asked to be a 976-wide banner, and no crop makes that free. */ /* The wrapped grid the rows used to sit in moved to menu.css, where it now applies inside the dropdown panel - same rule, one owner, and it belongs next to the thing that opens it. */ }