/* ═══════════════════════════════════════════════════════════════════ GLASS BRIDGE — legacy class names → Liquid Glass ═══════════════════════════════════════════════════════════════════ glass.css is a verbatim copy of the original design system and should stay that way, so nothing here edits it. This file adapts the class vocabulary the Workers rebuild happened to ship with. Two vocabularies need adapting: • The short names (.fld .tbl .top .ghost .sm .tile) that the Hub used and that I copied into the Portal and Tarly Admin. • The .admin-* / .auth-* / .sb-* names I invented for Site Admin. Aliasing rather than rewriting ~90 page files is a deliberate call: the pages themselves work, and find-and-replace across all of them is how subtle breakage gets introduced. New markup should use the glass names directly — everything below is a compatibility layer, and a name can be deleted from here once no page renders it. ═══════════════════════════════════════════════════════════════════ */ /* ── Layout aliases ──────────────────────────────────────────────── */ /* The original had NO wrapper: body was the flex row, with .sidebar and .main as its direct children (glass.css still sets body{display:flex}). The rebuild wraps both in .shell, which therefore becomes a flex ITEM of body — and a flex item does not grow unless told to. Without flex:1 it shrinks to its content width, so .main's own flex:1 resolves against a collapsed parent and the whole page renders as a narrow column beside the sidebar. That was the "acting weird" layout on 2026-08-05. min-width:0 lets wide tables scroll inside instead of forcing .shell wider than the viewport. */ .shell { display: flex; flex: 1; min-width: 0; min-height: 100vh; } .shell > .main, .shell > main { min-width: 0; } /* Safari on a Mac rubber-bands the whole document at the top and bottom of a scroll, and unlike Chrome it drags sticky and fixed elements with it, so the sidebar (position: sticky) visibly slid a few pixels and sprang back on every overscroll. Reported 2026-09-13 as "the sidebar also kind of scrolls" in Safari but not in the Mac app. Switching off the bounce on the root is the only fix that leaves the sidebar sticky; `.main` is not a scroller of its own, so nothing else changes. */ html { overscroll-behavior-y: none; } /* ═══════════════════════════════════════════════════════════════════ PERCEIVED SPEED ═══════════════════════════════════════════════════════════════════ The portal answers in 107 to 129ms, which is genuinely fast for a server-rendered page, and it still FELT slower than a Next.js app whose server takes 377ms. Measured both, 2026-08-17. The reason is that a single-page app never navigates. Nothing is torn down, so there is no flash, and the eye reads the flash rather than the milliseconds. Three things cause that impression here, and NONE of them is the 150ms: 1. the white gap between the old document being destroyed and the new one painting 2. no acknowledgement of the click, so the wait reads as lag 3. the sidebar, which is identical on both pages, being rebuilt from scratch and flickering as it goes All three are fixable without prefetching anything, which matters: every authenticated page is deliberately `no-store`, because a timesheet in a shared cache is a data leak, and prefetching wants to store the response. This route leaves that decision untouched. PROGRESSIVE ENHANCEMENT. A browser without cross-document view transitions navigates exactly as it does today. Nothing is required for correctness. */ @view-transition { navigation: auto; } /* The sidebar is the same element on every page, so naming it makes the browser MORPH it rather than cross-fade it out and back in. That is what removes the flicker and makes the chrome feel like it never went away — the single biggest part of the SPA illusion. */ .side { view-transition-name: tarly-side; } /* Named separately so it holds its scroll position rather than being treated as part of the sidebar's own morph. */ .side nav { view-transition-name: tarly-nav; } /* Only the content crossfades, and quickly: this is a page change, not an animation to admire. 90ms is below the threshold at which people report noticing a transition at all, which is the point — it should remove the flash without announcing itself. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 90ms; } /* The chrome does not fade at all. It is the same thing, in the same place, before and after. */ ::view-transition-old(tarly-side), ::view-transition-new(tarly-side), ::view-transition-old(tarly-nav), ::view-transition-new(tarly-nav) { animation: none; mix-blend-mode: normal; } /* A click is acknowledged before the network says anything, so the wait is spent looking at a UI that has already responded rather than one that appears to have ignored you. THE COLOURS ARE SET INLINE BY Layout.tsx, not here. A rule at this selector did not take effect even though it was present in document.styleSheets, matched the element, and used a token that resolves — verified live and never explained. An inline style beats every stylesheet rule short of !important, so the press state does not depend on winning a cascade in a file whose own notes say specificity here is load-bearing. This selector stays declared so tools/check-classes.mjs can resolve the hook, and so the next person finds this note rather than the silence. */ .side nav a[data-going] { transition: none; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } .side { /* alias of .sidebar */ width: 232px; min-height: 100vh; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 14px 12px 14px 14px; background: transparent; border: none; z-index: 5; } .side::before { content: ""; position: absolute; inset: 14px 0 14px 12px; background: var(--glass-1); border: 1px solid var(--edge); border-top-color: var(--edge-top); border-radius: var(--radius-lg); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge-top); z-index: -1; } .side > * { position: relative; z-index: 1; } /* Sidebar internals: .brand/.logo, plain , .on, .side-foot, .who/.av */ .side .brand { padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px; } .side .brand b { font-family: Sora, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); display: block; } .side .brand small { color: var(--muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; } .side .brand .logo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: #1a1204; background: linear-gradient(145deg, var(--amber), var(--amber-strong)); box-shadow: 0 0 14px var(--amber-dim); } /* The nav scrolls when there are more links than room, and it did so with NO indication that anything was below the edge. Measured on a 1470x780 window: 426px of visible nav holding 662px of links, so a third of the navigation was invisible and undiscoverable — you had to already suspect it was there to find it. The fade is a mask on the element's own box, so it stays at the bottom edge while the content scrolls under it, and `.at-end` removes it once there is genuinely nothing more. A fade that never goes away teaches people to ignore it. */ .side nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; flex: 1; overflow-y: auto; scrollbar-width: thin; transition: mask-image var(--dur-base, .2s) linear; } .side nav.can-scroll { mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%); } .side nav.can-scroll.at-end { mask-image: none; -webkit-mask-image: none; } /* The section headings in glass.css carry 14px above and 6px of margin; with the tighter rows that is most of the remaining slack. */ .side nav .sb-section { padding-top: 10px; margin-top: 2px; } /* prefers-reduced-motion has nothing to say about a static gradient, so the mask stays; only the transition goes. */ @media (prefers-reduced-motion: reduce) { .side nav { transition: none; } } /* 7px, not 9: twelve links plus four section headings and the search trigger measured 662px, and the nav's box is 643px on a 997px-tall window and about 500px on a 13" laptop, so Settings (and on a laptop Team and Monitoring too) sat below the fold behind the fade. Tighter rows put the whole list on screen at 997px and leave two items, not four, to scroll for on a laptop. */ .side nav a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--radius); color: var(--subtle); font-size: .84rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: background var(--dur-base), color var(--dur-base); } .side nav a:hover { background: var(--glass-2); color: var(--text); } .side nav a.on { background: var(--glass-3); color: var(--text); border-color: var(--edge); border-top-color: var(--edge-top); box-shadow: inset 0 1px 0 var(--edge-top); } .side nav a.on svg { color: var(--amber); } .side nav svg { width: 16px; height: 16px; flex-shrink: 0; } .side-foot { padding: 10px; display: flex; flex-direction: column; gap: 6px; } .who { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius); background: var(--glass-1); border: 1px solid var(--edge); border-top-color: var(--edge-top); font-size: .8rem; color: var(--subtle); } .av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; color: #1a1204; background: linear-gradient(145deg, var(--amber), var(--amber-strong)); } /* Rendered as a