/* Symbulator — the shared banner ========================================================================== ONE source for the lockup that appears on all three properties: symbulator.com Documentation/landing/ learn.symbulator.com Documentation/web/ (via build.py) the app repos/local, repos/server This file exists because the same rules were previously written out three times in three repositories, and drifted twice in a single day, in both directions, each fix a person copying values by hand. Import it; do not copy it. Two bands: .topbar carries the lockup alone, .subbar carries each property's own controls in a slightly lighter shade. The sky keyline closes the pair, under the subbar. It is self-contained on purpose. Every colour is var(--name, #literal), so it works whether or not the host defines the tokens, and whatever the host calls them. Scope widened 23 Aug 2026. It used to style the bands and nothing inside them, leaving every property to dress its own ribbon -- which produced three ribbons that looked like three different websites. It now also owns the ribbon's shared vocabulary: the row, and what a link in it looks like. What goes *in* the row is still each property's own business, and genuinely local controls (learn's version picker, the app's Clear all inputs) still layer on top in their own stylesheets. Both .vnum and .tm are matched for the version numeral, because the three properties named that span differently before this file existed. Verified computed values at 1280px wide: lockup band 148px, controls ribbon 62px, container 1152 and left edge 64 on both, logo 80/r12, gap 19.2px, name 32/700/.5px/lh49.6, numeral italic 29.44px #8ec7f5, second line 16px #b7c3d6, keyline 3px. If you change anything here, re-measure — do not judge by eye. ========================================================================== */ :root { --banner-w: 72rem; --banner-pad: clamp(1.25rem, 4vw, 2.75rem); } .topbar { position: relative; z-index: 50; padding-block: 2.2rem 2rem; background: var(--navy, #203864); color: #fff; } /* The controls ribbon: a second, slightly lighter band under the lockup. The lockup band carries the identity and nothing else; every control -- nav links on symbulator.com, Start reading / Download the PDF and the version picker on learn, whatever the app puts there -- sits down here. The two bands are one assembly: the shade change is the only divider between them, and the 3px sky keyline finishes the pair rather than splitting them, so it moved off .topbar and onto .subbar. A page with no subbar keeps the keyline via .topbar:last-child below. #2a4576 is --navy lightened about 8% -- far enough to read as a distinct band on both themes, close enough that the two still read as one header. Deliberately not a token: it exists only in relation to --navy. */ .subbar { /* Above .topbar so the version picker's dropdown, which lives inside this band, is never trapped under the lockup's stacking context. */ position: relative; z-index: 51; background: var(--navy-2, #2a4576); border-bottom: 3px solid var(--sky, #8ec7f5); color: #fff; } .subbar-inner { width: min(var(--banner-w), 100%); margin-inline: auto; padding-inline: var(--banner-pad); min-height: 3.25rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding-block: 0.6rem; } /* Controls sit left, under the wordmark; anything after .subbar-spacer is pushed to the right edge. */ .subbar-spacer { flex: 1 1 auto; } /* The ribbon's links, shared by all three properties. --------------------------------------------------------------------- These moved here on 23 Aug 2026. Until then this file styled the bands and nothing inside them, on the principle that each property owns its own controls -- and the result was three ribbons that read as three different websites: symbulator.com had plain links, learn had two solid chips, the app had no ribbon at all. The lesson is the same one the lockup taught. A shared band with unshared contents is not a shared banner. So the *vocabulary* lives here -- a row of links, and what a link in a navy ribbon looks like -- while what each property puts in the row stays its own business. Anything genuinely local still layers on top: learn's version picker, the app's Clear all inputs. They sit in the same row, at the same size. */ .subbar nav { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; min-width: 0; /* flex-basis 0, so the nav never makes the ribbon two rows (#143). Flexbox wraps a row by hypothetical (content) sizes before it shrinks anything, so with basis auto a crowded learn ribbon dropped its version picker to a second line while the nav still showed all its links -- and the one-line clip below never got its chance. At basis 0 the nav claims no width of its own, growing into what the row can spare, and a link that does not fit wraps inside the nav and is clipped. The row itself stays one line at every width. Grow 999, not 1: .subbar-spacer grows too, and at equal factors it took half the free space and starved the nav into clipping links it had room for (measured at 375px on the landing page). At 999 the nav takes what the row can spare and its own empty tail does the spacer's job; the spacer stays for rows that have no nav. */ flex: 999 1 0; /* One row of links, never two (Roberto, 28 Aug 2026: a link that would wrap should hide instead). The row still flex-wraps, but the box is capped at one line-box (0.875rem x 1.4, the size every link in it is pinned to below) and clipped, so anything that wrapped is simply not shown -- at any width, no media query to keep in step with the labels. The padding is not rhythm: focus rings sit 3px off a link and 2px wide, and without the 0.375rem of breathing room the clip would shave them. box-sizing is pinned because the cap must mean the same thing on a host that sets border-box (learn, the landing) and one that does not. overflow is clip, not hidden, so keyboard focus on a hidden link cannot scroll the row into a half-shown state. */ box-sizing: content-box; padding-block: 0.375rem; max-height: calc(0.875rem * 1.4); overflow: clip; } .subbar nav a { /* font-family is pinned, not inherited. learn.symbulator.com sets its body in IBM Plex Serif for long-form reading, so an inheriting ribbon rendered its links in a serif there and in a sans on the other two -- the same words, three sizes of the same idea, in two different faces. Reported 24 Aug 2026. --sans is whatever the host calls its sans stack; the literal is here for a host that defines nothing. */ font-family: var(--sans, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); color: #dbe6f5; text-decoration: none; font-size: 0.875rem; line-height: 1.4; border-radius: 4px; } .subbar nav a:hover { color: #fff; text-decoration: underline; } .subbar nav a:focus-visible { outline: 2px solid var(--sky, #8ec7f5); outline-offset: 3px; } /* A link that happens to act on the page rather than lead somewhere -- the app's Clear all inputs. Same size and colour as its neighbours; it is a