/* * Global site chrome — the sticky top header and the footer shared by every page * (catalog shell + single-column pages alike). Brand mark + wordmark, primary * nav, language + theme toggles, and the multi-column footer. * * Playground presentation only (the library ships no CSS). Everything re-themes * off the semantic tokens, so the chrome flips with the dogfooded stimeo--theme * toggle (data-theme on ). */ :root { --header-h: 62px; --shell-max: 1180px; } /* ── Brand (mark + wordmark text, reused in header / footer) ──────────── */ .site-brand { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; text-decoration: none; } .site-brand__mark { display: block; width: 1.625rem; height: 1.625rem; flex: none; } .site-brand__text { font-size: 1.0625rem; font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); color: var(--color-text); white-space: nowrap; } .site-brand__accent { font-weight: var(--weight-medium); color: var(--color-primary); } /* ── Header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--surface-page); border-bottom: 1px solid var(--border-default); } .site-header__inner { max-width: var(--shell-max); margin: 0 auto; padding: 0 1.75rem; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } /* The lead must GROW into the leftover space (not size to its content): the overflow-menu measures the width it is given, so a content-sized lead would shrink once links are banked into "…" and never hand the space back when the window widens again (container sized by content, content sized by container — a one-way ratchet). flex: 1 keeps the measurement anchored to the real available width in both directions. */ .site-header__lead { display: flex; align-items: center; gap: 2.125rem; flex: 1 1 auto; min-width: 0; } /* The nav is width-adaptive via stimeo--overflow-menu: it must be allowed to shrink (flex + min-width: 0) so the rest-links wrapper measures the true leftover space and banks links into the "…" menu instead of overlapping the header actions. */ .site-nav { display: flex; align-items: center; gap: 1.625rem; flex: 1 1 auto; min-width: 0; } .site-nav__list { display: flex; align-items: center; gap: 1.625rem; margin: 0; padding: 0; list-style: none; flex: none; } /* Each item spans the full header height: the submenu panel anchors to the header's bottom edge (top: 100%), and the whole strip doubles as the navigation-menu hoverArea, so the pointer never crosses a dead gap between the link text and the open panel. */ .site-nav__item { position: relative; display: flex; align-items: center; gap: 0.3125rem; height: var(--header-h); } .site-nav__link { position: relative; padding: 0.375rem 0; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; } .site-nav__link:hover { color: var(--color-text); } .site-nav__link[aria-current="page"] { color: var(--color-primary); } /* Active underline sits just beneath the link text (not at the header's bottom edge). */ .site-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--color-primary); border-radius: 2px 2px 0 0; } .site-nav__link:focus-visible, .site-header__lang:focus-visible, .site-header__icon:focus-visible, .site-header__cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ── Components submenu (stimeo--navigation-menu, top-level-links) ────── */ /* The ▾ disclosure next to the Components link. A separate button keeps the top-level link navigating on click; this button only opens/closes the panel. */ .site-nav__disclosure { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; flex: none; color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; } .site-nav__disclosure:hover { color: var(--color-text); } .site-nav__disclosure:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .site-nav__caret { width: 0.75rem; height: 0.75rem; transition: transform var(--duration-fast) var(--ease-out); } .site-nav__disclosure[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .site-nav__caret { transition: none; } } /* The submenu panel drops from the header's bottom edge (the
  • spans the full header height, so top: 100% lands exactly there). Closed state is the library's `hidden` attribute (the reset's [hidden] rule wins over display). */ .site-nav__panel { position: absolute; top: 100%; left: -1.0625rem; /* aligns the panel link text with the top-level link text */ z-index: 40; display: flex; flex-direction: column; min-width: 12rem; padding: 0.375rem; background: var(--surface-page); border: 1px solid var(--border-default); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); } .site-nav__panel-link { display: block; padding: 0.4375rem 0.6875rem; border-radius: var(--radius-sm); font-size: 0.84375rem; font-weight: var(--weight-semibold); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; } .site-nav__panel-link:hover { color: var(--color-text); background: var(--surface-subtle); } .site-nav__panel-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* ── Overflow "…" menu (stimeo--overflow-menu + stimeo--menu) ─────────── */ /* The rest-links wrapper takes the leftover nav width; the controller measures it and banks links that no longer fit. overflow: hidden on the items row only masks the ≤100ms debounce window between a resize and the rebalance (the "…" dropdown lives in a sibling, so it is never clipped). */ .site-nav__rest { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .site-nav__rest-items { display: flex; align-items: center; gap: 1.625rem; overflow: hidden; } .site-nav__more, .site-nav__mobile { position: relative; display: flex; align-items: center; height: var(--header-h); flex: none; } .site-nav__more { margin-left: 1.625rem; } .site-nav__more-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; flex: none; color: var(--color-text-muted); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; } .site-nav__more-trigger:hover { color: var(--color-text); border-color: var(--border-strong); } .site-nav__more-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .site-nav__dots { width: 1rem; height: 1rem; } /* Dropdown list shared by the overflow "…" and the mobile site menu. Same family as .site-nav__panel: anchored to the header's bottom edge. */ .site-nav__menu { position: absolute; top: 100%; left: 0; z-index: 40; margin: 0; padding: 0.375rem; list-style: none; min-width: 12rem; background: var(--surface-page); border: 1px solid var(--border-default); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); } /* Links inside a menu switch from the inline bar look to menu-row look; the aria-current underline (a bar affordance) is replaced by the colored text that .site-nav__link[aria-current] already provides. */ .site-nav__menu .site-nav__link { display: block; padding: 0.4375rem 0.6875rem; border-radius: var(--radius-sm); } .site-nav__menu .site-nav__link::after { display: none; } .site-nav__menu .site-nav__link:hover { background: var(--surface-subtle); } .site-nav__menu .site-nav__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* Hairline between the regular sections and the Pro teaser entry — the teaser is a different kind of destination, so it sits set off at the menu's tail. */ .site-nav__menu-separator { margin: 0.375rem 0.375rem; border-top: 1px solid var(--border-default); } /* The mobile site menu appears only ≤768px (see the media query below). */ .site-nav__mobile { display: none; } .site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; } .site-header__lang { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: var(--weight-semibold); color: var(--color-text-muted); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0.25rem 0.6875rem; text-decoration: none; white-space: nowrap; } .site-header__lang:hover { color: var(--color-text); border-color: var(--border-strong); } .site-header__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; flex: none; color: var(--color-text-muted); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; } .site-header__icon:hover { color: var(--color-text); border-color: var(--border-strong); } /* Theme toggle: swap sun/moon based on the resolved theme on . Default (light / no attribute) shows the moon; dark shows the sun. */ .site-theme-toggle__icon { display: inline-flex; } .site-theme-toggle__sun { display: none; } [data-theme="dark"] .site-theme-toggle__sun { display: inline-flex; } [data-theme="dark"] .site-theme-toggle__moon { display: none; } .site-header__cta { font-size: 0.84375rem; font-weight: var(--weight-bold); /* Slightly muted white at rest; hover restores pure white — the same faint-to-full text-color shift as the nav / lang / icon controls. */ color: color-mix(in srgb, var(--color-on-primary) 85%, transparent); background: var(--color-primary); border: 0; border-radius: var(--radius-md); padding: 0.5625rem 1rem; text-decoration: none; white-space: nowrap; } .site-header__cta:hover { /* Rest is a slightly muted white, so hover sharpens it to pure white (the same faint-to-full shift as nav / lang / icon). The background stays put — the primary colors are constant across both themes, so it is stable — and this also cancels the reset's a:hover color (which would sink into the button). */ color: var(--color-on-primary); } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border-default); background: var(--surface-subtle); } .site-footer__inner { max-width: var(--shell-max); margin: 0 auto; padding: 3rem 1.75rem 2.5rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; } .site-footer__brand .site-brand { margin-bottom: 0.875rem; } .site-footer__tagline { margin: 0 0 1rem; max-width: 22rem; font-size: 0.84375rem; line-height: var(--leading-normal); color: var(--color-text-muted); } .site-footer__social { display: flex; gap: 0.625rem; } .site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--color-text-muted); border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; } .site-footer__social-link:hover { color: var(--color-text); border-color: var(--border-strong); } .site-footer__col { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; } .site-footer__heading { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-subtle); } .site-footer__link { font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none; } .site-footer__link:hover { color: var(--color-text); } .site-footer__stay { margin: 0 0 0.25rem; font-size: 0.84375rem; line-height: var(--leading-snug); color: var(--color-text-muted); } .site-footer__waitlist { font-size: 0.84375rem; font-weight: var(--weight-bold); color: var(--color-primary); background: var(--color-primary-soft); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.5625rem 0.9375rem; text-decoration: none; } .site-footer__waitlist:hover { border-color: var(--color-primary); } .site-footer__social-link:focus-visible, .site-footer__link:focus-visible, .site-footer__waitlist:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .site-footer__bar { border-top: 1px solid var(--border-default); } .site-footer__bar-inner { max-width: var(--shell-max); margin: 0 auto; padding: 1.125rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-footer__bar-inner span { font-size: 0.78125rem; color: var(--color-text-subtle); } /* Copyright group: a list of items, separated by a slim hairline rule. */ .site-footer__legal > span:not(:first-child)::before { content: ""; display: inline-block; width: 1px; height: 0.85em; margin: 0 0.6875rem; background: var(--border-strong); vertical-align: -0.12em; } /* Motto reads as a formula in mono — (name) = (meaning) — so an equals sign pairs with the "+" and states the etymological equivalence directly. */ .site-footer__motto > span:not(:first-child)::before { content: "="; margin: 0 0.4375rem; } .site-footer__motto { font-family: var(--font-mono); } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 768px) { .site-header__inner { padding: 0 1rem; gap: 0.75rem; } /* No overflow: hidden here — the lead used to clip the old scrolling nav, but as a scroll container it would get scrolled by focus() when the site menu opens (focusing the first menuitem below the header shifts the whole lead up). The "…" button needs no clipping. */ .site-header__lead { gap: 1rem; } /* Mobile: collapse the whole primary nav into the static "…" site menu — no horizontal scrolling, and it carries the Components / Pro (coming soon) entries, so the Core/Pro destinations stay reachable on phones without clashing with the catalog's left drawer. */ .site-nav__list, .site-nav__rest { display: none; } .site-nav__mobile { display: flex; } /* The Install CTA duplicates the Install nav link; drop it when space is tight. */ .site-header__cta { display: none; } } @media (max-width: 560px) { .site-footer__inner { grid-template-columns: 1fr; } /* Stacked bottom bar: the motto reads better above the copyright line, so reverse the DOM order (legal first) when the row wraps into a column. */ .site-footer__bar-inner { flex-direction: column-reverse; align-items: flex-start; gap: 0.375rem; } }