/* ========================================================================== CineScope — themes Seven themes, one stylesheet. Nothing below this block names a colour: every rule reads a SEMANTIC token (--bg, --surface, --text, --accent, --danger …), and those tokens are derived once, here, from twenty-odd PALETTE SLOTS (--p-*). A theme is then just those slots filled in. That is what keeps a new theme to one short block instead of an audit of two thousand lines, and it is why the slots are named --p-* rather than after any one palette: "--ctp-teal: #88C0D0" under Nord would be a lie. The slots borrow Catppuccin's shape (crust..text for surfaces, then named hues) because every palette here has an equivalent for each, and having one fixed shape is what lets the derivations below be written once. Applied as by /theme.js, which is a blocking script in every page's so the correct theme is on the element before first paint — a themed page that flashes the wrong colours first is worse than one theme. The one exception is the printed QR placard, which stays black on white whatever the theme, because it goes on paper. See "printed placards". ========================================================================== */ :root { /* Premium pass: the light a glass surface catches on its top edge. */ --rim: inset 0 1px 0 color-mix(in srgb, white 7%, transparent); /* ---------------------------------------------------------------- shared */ --radius-lg: 16px; --radius: 12px; --radius-sm: 9px; --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; --ease: cubic-bezier(0.32, 0.72, 0, 1); /* * For things leaving, which is not the same curve as things arriving. * * `--ease` above is strongly front-loaded — it covers most of its distance in the first * third, which is exactly right for something appearing, because the eye reads the fast * start as responsiveness and the slow settle as weight. Run backwards it is wrong: a * pop-up closing on it was at 11% opacity two frames in and then spent a tenth of a * second being invisible. Leaving should start gently and accelerate away. */ --ease-out: cubic-bezier(0.4, 0, 0.9, 1); /* * For something appearing from nothing, where the movement has to be *seen*. * * `--ease` is wrong for this and measurably so. It is front-loaded hard — a quarter of the * way through its duration it has covered four fifths of its distance — which is right for * an element already on screen that should feel responsive to a press, and wrong for one * arriving: the box was at 80% opacity on the first frame anybody could see it, so it read * as having simply been there. This spreads the distance across the duration instead, so * the middle of the animation is the middle of the movement. */ --ease-arrive: cubic-bezier(0.22, 0.34, 0.28, 1); /* * The reticle's pupil. The one colour in this stylesheet that is not a theme * slot, because it is not decoration — it is the brand, and a mark that * changed colour with the theme would not be one. Every other part of the * wordmark takes currentColor and recolours freely around it. */ --brand-pupil: #d9922b; } /* ----------------------------------------------------------------- semantic Written once in terms of the slots, so a theme sets colours and inherits every relationship between them. color-mix rather than more slots: the step from a surface to its border is a property of the design, not of the palette, and should not be rcircuitd six times. Also applied to [data-preview], the theme picker's swatches. A custom property is substituted where it is DECLARED, so --bg computed on :root keeps :root's crust no matter how a descendant redefines --p-crust — the derivations have to be re-declared on the card for its slots to reach them. */ :root, [data-preview] { --bg: var(--p-crust); --bg-tint: radial-gradient(1200px 600px at 50% -10%, var(--p-tint) 0%, var(--p-crust) 60%); --surface: var(--p-mantle); --surface-2: var(--p-base); --surface-3: color-mix(in oklab, var(--p-base) 80%, var(--p-surface0)); --border: color-mix(in oklab, var(--p-base) 58%, var(--p-surface0)); --border-strong: var(--p-surface1); --text: var(--p-text); --text-dim: var(--p-subtext0); --text-faint: var(--p-overlay1); --accent: var(--p-accent); --accent-hover: color-mix(in oklab, var(--p-accent) 80%, var(--p-text)); /* Solid fills use a deepened accent: a palette's accent is usually tuned for text on the background, and glares when it becomes the background itself. */ --accent-fill: var(--p-accent-fill); --accent-fill-hover: color-mix(in oklab, var(--p-accent-fill) 86%, var(--p-text)); --accent-ink: var(--p-accent-ink); /* text on top of an accent fill */ --accent-soft: color-mix(in oklab, var(--p-accent) 13%, var(--p-crust)); --accent-line: linear-gradient(90deg, var(--p-accent-fill), var(--p-pink)); --focus: var(--p-lavender); --ok: var(--p-green); --ok-soft: color-mix(in oklab, var(--p-green) 13%, var(--p-crust)); --warn: var(--p-yellow); --warn-soft: color-mix(in oklab, var(--p-yellow) 13%, var(--p-crust)); --danger: var(--p-red); --danger-soft: color-mix(in oklab, var(--p-red) 13%, var(--p-crust)); --info: var(--p-blue); --info-soft: color-mix(in oklab, var(--p-blue) 13%, var(--p-crust)); /* Depth comes from a hairline plus a soft drop, not a hard shadow. Both the hairline and the drop are slots because a light theme needs a white hairline and a far weaker drop than a dark one. */ /* * THE GLASS, named once: the dock's material, promoted to the app's own. Two weights — * ordinary surfaces wear --glass, floating chrome (menus, dialogs, sticky bars) wears * --glass-strong with a backdrop blur where content genuinely passes beneath. Buttons and * cards take the mix WITHOUT blur on purpose: over the app's flat ground the translucency * alone gives the look, and a backdrop filter on every card in a long queue is a frame * budget spent on nothing a reader can see. */ --glass: color-mix(in srgb, var(--surface-3) 55%, transparent); --glass-strong: color-mix(in srgb, var(--surface-3) 80%, transparent); --shadow: 0 1px 0 var(--p-hairline) inset, 0 10px 28px -12px var(--p-shadow); --shadow-lift: 0 1px 0 var(--p-hairline) inset, 0 18px 40px -16px var(--p-shadow-strong); } /* ------------------------------------------------------------------ Dark A neutral dark grey with a blue accent, for anyone who wants dark without a palette's opinions. Deliberately not a variation on Mocha — offering both only earns its place if they look meaningfully different. Also the bare :root, which makes it what the page renders with when no data-theme has been set at all — so the stylesheet's fallback and DEFAULT_THEME in src/db.js are the same look. The attribute selectors are more specific, so any theme that IS set still wins over this. */ :root, :root[data-theme='dark'], [data-preview='dark'] { color-scheme: dark; --p-crust: #0e0e11; --p-mantle: #16161a; --p-base: #1c1c21; --p-surface0: #2a2a31; --p-surface1: #3a3a44; --p-surface2: #4c4c58; --p-overlay0: #6a6a78; --p-overlay1: #8a8a99; --p-subtext0: #b4b4c0; --p-subtext1: #d0d0da; --p-text: #e8e8ef; --p-pink: #e79ec8; --p-red: #f2777a; --p-peach: #f0a45d; --p-yellow: #e8d07a; --p-green: #8fd18a; --p-teal: #7fd0c4; --p-blue: #8ab4f8; --p-lavender: #a9b6f0; --p-accent: #8ab4f8; --p-accent-fill: #5b8dd9; --p-accent-ink: #0b1220; --p-tint: #17171d; --p-hairline: rgba(255, 255, 255, 0.05); --p-shadow: rgba(0, 0, 0, 0.7); --p-shadow-strong: rgba(0, 0, 0, 0.82); } /* ------------------------------------------------------------------ Light A proven, contrast-checked light palette rather than one invented here, with one change of its own: the accent is the palette's BLUE, not its mauve, so Light is Dark in daylight rather than a second purple theme. Picking Light should change the time of day, not the accent colour. Two things invert. The page sits on Crust, the DARKEST of the three light surfaces, so cards on Mantle read as raised rather than sunken. And a solid accent fill needs white text on it rather than near-black. */ :root[data-theme='light'], [data-preview='light'] { color-scheme: light; --p-crust: #dce0e8; --p-mantle: #e6e9ef; --p-base: #eff1f5; --p-surface0: #ccd0da; --p-surface1: #bcc0cc; --p-surface2: #acb0be; --p-overlay0: #9ca0b0; --p-overlay1: #8c8fa1; --p-subtext0: #6c6f85; --p-subtext1: #5c5f77; --p-text: #4c4f69; --p-pink: #ea76cb; --p-red: #d20f39; --p-peach: #fe640b; --p-yellow: #df8e1d; --p-green: #40a02b; --p-teal: #179299; --p-blue: #1e66f5; --p-lavender: #7287fd; /* Deeper than the palette's own blue (#1e66f5, kept above for --info): that one only reaches 4.0:1 as text on a card, and --accent IS text here — links, the disclosure toggles, the "set to light right now" line. This clears 5:1, and white on it as a solid fill clears 6:1. */ --p-accent: #1657d8; --p-accent-fill: #1657d8; --p-accent-ink: #ffffff; --p-tint: #eceef4; --p-hairline: rgba(255, 255, 255, 0.9); --p-shadow: rgba(76, 79, 105, 0.16); --p-shadow-strong: rgba(76, 79, 105, 0.22); } /* ------------------------------------------------------------- Your brand The one theme whose colours are not written here. A circuit picks ONE hex in Settings, and the blocking theme script writes four tokens onto the root from it — the fill as picked, an ink that can be read on that fill, a text-legible version of the same hue, and a tint (see brandTokens in js/brand-colour.js, which is also what the picker previews with). EVERYTHING ELSE IS BORROWED. The neutrals are Dark's or Light's, chosen beside the colour, because a picker over all eleven would let a cinema build a page nobody can read — and "match our brand" means the colour on the buttons, not a bespoke greyscale. The two blocks below are the borrowing, keyed on the base the script also writes; the accent slots then take the customer's tokens. The var() fallbacks are what a circuit that has picked NO colour gets: the ordinary Dark or Light accent, so selecting this theme before setting a colour is a no-op rather than a page of black buttons. */ :root[data-theme='custom'][data-brand-base='light'], [data-preview='custom'][data-brand-base='light'] { color-scheme: light; --p-crust: #dce0e8; --p-mantle: #e6e9ef; --p-base: #eff1f5; --p-surface0: #e0e3ea; --p-surface1: #ccd0da; --p-surface2: #bcc0cc; --p-overlay0: #9ca0b0; --p-overlay1: #8c8fa1; --p-subtext0: #6c6f85; --p-subtext1: #5c5f77; --p-text: #4c4f69; --p-pink: #ea76cb; --p-red: #d20f39; --p-peach: #fe640b; --p-yellow: #df8e1d; --p-green: #40a02b; --p-teal: #179299; --p-blue: #1e66f5; --p-lavender: #7287fd; --p-accent: var(--brand-accent, #1e66f5); --p-accent-fill: var(--brand-accent-fill, #1e66f5); --p-accent-ink: var(--brand-accent-ink, #ffffff); --p-tint: var(--brand-tint, #e6e9ef); --p-hairline: rgba(255, 255, 255, 0.9); --p-shadow: rgba(76, 79, 105, 0.16); --p-shadow-strong: rgba(76, 79, 105, 0.22); } :root[data-theme='custom'], [data-preview='custom'] { color-scheme: dark; --p-crust: #0e0e11; --p-mantle: #16161a; --p-base: #1c1c21; --p-surface0: #2a2a31; --p-surface1: #3a3a44; --p-surface2: #4c4c58; --p-overlay0: #6a6a78; --p-overlay1: #8a8a99; --p-subtext0: #b4b4c0; --p-subtext1: #d0d0da; --p-text: #e8e8ef; --p-pink: #e79ec8; --p-red: #f2777a; --p-peach: #f0a45d; --p-yellow: #e8d07a; --p-green: #8fd18a; --p-teal: #7fd0c4; --p-blue: #8ab4f8; --p-lavender: #a9b6f0; --p-accent: var(--brand-accent, #8ab4f8); --p-accent-fill: var(--brand-accent-fill, #5b8dd9); --p-accent-ink: var(--brand-accent-ink, #0b1220); --p-tint: var(--brand-tint, #17171d); --p-hairline: rgba(255, 255, 255, 0.05); --p-shadow: rgba(0, 0, 0, 0.7); --p-shadow-strong: rgba(0, 0, 0, 0.82); } /* ----------------------------------------------------------------- System Not a palette: the device's own light/dark setting, resolved to Light or Dark by these two media queries. No JavaScript and no request — which means it also follows the device LIVE. Switching the OS to dark recolours an open page immediately, where a scripted version would need a reload or a matchMedia listener on every page. The slot values below are copies of the Light and Dark blocks above, because plain CSS has no way to say "be that block" and this project has no build step to generate it. test/theme.test.js asserts they stay identical, so the drift that would otherwise be invisible is a failing test instead. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root[data-theme='system'], [data-preview='system'] { color-scheme: light; --p-crust: #dce0e8; --p-mantle: #e6e9ef; --p-base: #eff1f5; --p-surface0: #ccd0da; --p-surface1: #bcc0cc; --p-surface2: #acb0be; --p-overlay0: #9ca0b0; --p-overlay1: #8c8fa1; --p-subtext0: #6c6f85; --p-subtext1: #5c5f77; --p-text: #4c4f69; --p-pink: #ea76cb; --p-red: #d20f39; --p-peach: #fe640b; --p-yellow: #df8e1d; --p-green: #40a02b; --p-teal: #179299; --p-blue: #1e66f5; --p-lavender: #7287fd; --p-accent: #1657d8; --p-accent-fill: #1657d8; --p-accent-ink: #ffffff; --p-tint: #eceef4; --p-hairline: rgba(255, 255, 255, 0.9); --p-shadow: rgba(76, 79, 105, 0.16); --p-shadow-strong: rgba(76, 79, 105, 0.22); } } @media (prefers-color-scheme: dark) { :root[data-theme='system'], [data-preview='system'] { color-scheme: dark; --p-crust: #0e0e11; --p-mantle: #16161a; --p-base: #1c1c21; --p-surface0: #2a2a31; --p-surface1: #3a3a44; --p-surface2: #4c4c58; --p-overlay0: #6a6a78; --p-overlay1: #8a8a99; --p-subtext0: #b4b4c0; --p-subtext1: #d0d0da; --p-text: #e8e8ef; --p-pink: #e79ec8; --p-red: #f2777a; --p-peach: #f0a45d; --p-yellow: #e8d07a; --p-green: #8fd18a; --p-teal: #7fd0c4; --p-blue: #8ab4f8; --p-lavender: #a9b6f0; --p-accent: #8ab4f8; --p-accent-fill: #5b8dd9; --p-accent-ink: #0b1220; --p-tint: #17171d; --p-hairline: rgba(255, 255, 255, 0.05); --p-shadow: rgba(0, 0, 0, 0.7); --p-shadow-strong: rgba(0, 0, 0, 0.82); } } /* ------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } /* * The browser hides [hidden] with `display: none` at the lowest specificity, so * ANY class rule setting display quietly beats it — and 57 rules here do. Every * page uses the hidden attribute to show and hide panels, which makes that a trap * waiting for whichever component grows a display rule next. One declaration * closes it for all of them. */ [hidden] { display: none !important; } /* * The page's ground is on the ROOT, not on body, and that is load-bearing twice over. * * On a phone it is the fix for a real artefact. Overscroll past the end of a page and the browser * rubber-bands, showing an area beyond the document — and what it paints there is the CANVAS, which * is the root element's background. With the background on body instead, it reaches the canvas only * by the propagation rule (a root with no background of its own borrows body's), and iOS does not * carry a `background-attachment: fixed` background through that reliably: the band came up in the * UA's own dark grey, which is LIGHTER than Crust, so the whole page appeared to lift and show * something paler underneath. Declared here, there is no propagation to get wrong. * * AND BODY MUST NOT HAVE ONE. That is not tidiness, it is paint order: `.dust` sits at `z-index: -1`, * and negative-z-index descendants paint after the root's background but BEFORE the in-flow block * backgrounds — so a background on body would paint over the motes and the dust would silently * vanish. It works today because body's background is propagated away to the canvas and body paints * nothing itself; move it here and that stops being true, so it has to move rather than be copied. */ /* * A COLOUR ONLY, and that is the fix for a strip along the bottom of every page on a phone. * * The tint used to be here too, with `background-attachment: fixed`, so its bright edge stayed at * the top of the screen rather than scrolling away with the top of the document. The intent was * right and the mechanism was not: a fixed background on the ROOT gives Safari a background layer * sized to the layout viewport, and the area exposed when the address bar collapses — or by a * rubber-band scroll past the end of the document — is outside it. What showed through was the * browser's own dark grey, around #2c2c2e against a crust of #11111b: lighter, full width, pinned * to the bottom of the window. The dust was visible over it, which is what said it was the page's * own background missing rather than browser chrome. * * A plain `background-color` has none of that. The root's background is the CANVAS background, and * its painting area is defined to cover the whole canvas — every overscroll region included. So the * colour is here, where it can never fall short, and the tint moved to the pseudo-element below. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--bg); } /* * The scrollbar's space is reserved on EVERY page, whether that page scrolls or not. * * Without this the app moves sideways as you walk through it. The shell and the top bar * are both `max-width: 1180px; margin: 0 auto`, so their left edge is half of whatever is * left over — and what is left over changes by the width of a scrollbar depending on * whether the page you landed on is long enough to need one. Measured, with scrollbars * shown: the wordmark sits at x=65 on the overview and Location info, and at x=70 on * Settings and Needs review. Five pixels, on every navigation between a long page and a * short one, on the one element the eye is anchored to while a new page paints. * * The reticle is what made it obvious rather than what was wrong. Its ring is a mask on a * fractional box (0.82em — 14.95px in the bar), so a shift re-rasterises its edges as well * as moving it: it appears to change weight, which reads as the mark adjusting itself * rather than as the whole page sliding. The letters beside it re-hint and stay crisp. * * These scrollbars are CLASSIC ones — see the ::-webkit-scrollbar block below, which takes * layout width even on the platforms whose default is an overlay — so this is not a * Windows-only nicety. Headless Chromium hides scrollbars by default, which is why no test * saw it; test/browser/wordmark.browser.js now launches a browser that shows them. * * WIDE SCREENS ONLY, and the reason is what a reserved gutter costs. It comes out of the * layout viewport, so on a phone it would take ten of the 390 pixels the whole design is * cut to, push `calc(100vw - 32px)` dialogs into a sideways scroll, and buy nothing: a * phone browser draws overlay scrollbars that never took the width in the first place, so * there was no shift there to fix. The fault this cures is a desktop one. */ @media (min-width: 700px) { html { scrollbar-gutter: stable; } } /* * The tint, on a fixed layer of its own. * * Same result as `background-attachment: fixed` — the gradient is positioned against the viewport, * so its bright edge stays at the top of the screen — with the failure mode removed: if this box * falls short of the visual viewport during an overscroll, what is behind it is the root's own * crust rather than nothing. * * A pseudo-element rather than the `.dust` div, which is fixed and viewport-sized and would * otherwise have been the obvious host. That one is built by js/dust.js, so the tint would arrive * after the module ran and the page would visibly warm up a moment after loading. This is in the * stylesheet, so it is there for the first paint. * * `-2` puts it behind the motes (`-1`) and behind everything in the flow. Both are behind content * and above the canvas, which is the order the two of them want. */ html::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: var(--bg-tint); } body { margin: 0; min-height: 100vh; font-family: var(--font); /* * 1rem, not 16px — identical at rest, and the difference is the whole of the text-size * accessibility option: every component here sizes itself in rem, so the root is the one * dial that scales the app. A hard 16px on the body left the plain prose behind while * headings, labels and figures grew around it, which reads as a broken page rather than a * larger one. See the accessibility block at the foot of this file. */ font-size: 1rem; line-height: 1.6; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv05', 'ss01'; } /* =================================================================== the dust * Motes rising from the bottom of the window, thinning out around halfway up. * * The whole of what this adds to the page. Behind it is the theme's own tint on `body` and * nothing else — two soft washes of colour used to sit between the two, and they are gone: * asked for a background animation, what was wanted was dust, and the washes were a second * answer to a question nobody had asked. * * Fourteen small elements rather than a few big ones, and that is the whole performance * story. Those washes drifted at first, which is to say they were two window-sized layers * being moved by the compositor — cheap on one page and quietly ruinous once several were * open, because a full-window layer has to be composited whole every frame. A mote is two * pixels across. * * Measured both ways, on the same machine, with twenty pages of the app open at once: the * two drifting layers gave a median frame of 237ms and put 55 of 69 frames over 200ms; the * fourteen motes give 48ms and put none of them over. On one page, which is what anybody * actually has, both sit at the 17ms the display asks for. * * Built by public/js/dust.js, which util.js imports on every page, rather than written into * fifteen pages' markup — the same reasoning as the nav's menu button. * * Only `transform` and `opacity` are animated. Both are properties the compositor can do * on its own thread without asking the main one for anything, which matters because this * is running the whole time somebody is reading a queue. */ .dust { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Premium pass: a whisper of grain, riding the layer that already floats behind every page — NOT on body, whose background is forbidden (it would paint over this very layer; see test/background.test.js). It is what stops the dark gradients and veils banding on OLED, and it gives the glass something to frost. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); /* * `clip` rather than `hidden`: hidden makes this a scroll container, and a scroll * container inside a page that already has one is a second thing for a swipe or a * sticky bar to interact with. This only has to stop a mote drawing outside the window. */ overflow: clip; } .dust__mote { /* * Accent mixed toward the theme's own ink, which is what makes one rule work on all * seven themes: on a dark theme the ink is pale, so the mote is pale against a dark * page; on a light theme the ink is near-black and the mote darkens instead. A fixed * pale mote would be invisible on Light, and this is the sheet's only element whose * whole job is to be *slightly* visible. */ --ink: color-mix(in oklab, var(--p-accent) 58%, var(--p-text)); position: absolute; /* Below the fold at rest, so a mote's first frame happens off screen rather than as a dot appearing in mid-air along the bottom edge. */ bottom: -5vh; left: var(--at); width: var(--size); height: var(--size); border-radius: 50%; background: var(--ink); /* The halo is what makes it dust rather than a pixel. Scaled off the mote so the small ones do not end up with the same glow as the large ones. */ box-shadow: 0 0 calc(var(--size) * 2.4) var(--ink); opacity: 0; animation: mote-rise var(--for) linear var(--delay) infinite; } /* * Opacity is 0 at both ends, which is what makes the loop invisible. * * The transform deliberately does NOT return to where it started — a mote that rose and * then slid back down would be the one thing here nobody could stop watching. It does not * need to: by 78% the mote has already faded to nothing, so the jump back to the bottom of * the window happens while it cannot be seen. * * The plateau from 14% to 45% is what puts the fade where it was asked for. Without it the * opacity falls continuously from the fourteen-percent mark, so a mote is brightest just off * the bottom edge and effectively gone by a third of the way up — the field sat in a band * along the bottom of the window instead of dispersing around the middle of it. That is the invariant worth keeping, and it * is the one the tests check: transparent at 0% and transparent at 100%. * * The sway is spent by halfway and returns by the end, so the path is a slight S rather * than a diagonal. Each property interpolates across only the frames that mention it, so * the opacity frames in between leave the transform alone. * * Under `prefers-reduced-motion` the sheet's blanket rule zeroes the duration; with no * `animation-fill-mode` the animation then stops applying and the mote reverts to the * `opacity: 0` above. So a reader who asked for no motion gets no dust at all, rather than * fourteen dots parked in mid-air. Measured, not assumed. */ @keyframes mote-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 14% { opacity: var(--peak); } 45% { opacity: var(--peak); } 50% { transform: translate3d(var(--sway), calc(var(--rise) * -0.5), 0); } 78% { opacity: 0; } 100% { transform: translate3d(0, calc(var(--rise) * -1), 0); opacity: 0; } } /* ================================================================ the network * The case monitor's sky while AI TRIAGE works the queue: the dust is put away and a * CONSTELLATION takes its place — nodes joined by faint lines, packets of light travelling * link to link. The metaphor is the point: the reports are not drifting past anybody, they * are being carried through a working system, and the page says so the whole time it is * open. Built by weaveTriageNetwork in js/dust.js, only on the case monitor, and only * while the agent is genuinely running (the queue response carries triageAvailability's * answer, not the bare setting — see review.js). * * Same performance rules as the dust above, deliberately: hand-placed geometry rather than * a canvas doing distance maths every frame, and the only ANIMATED properties are * transform and opacity — the two the compositor runs without the main thread. The lines * themselves never move; what animates is eleven nodes breathing and fifteen four-pixel * packets, which is the same order of work as the fourteen motes it replaces. The wash at * the foot is static paint, not the drifting window-sized layers this sheet once removed. * * Under prefers-reduced-motion the blanket rule zeroes the durations: packets and lines * rest at opacity 0 and vanish, and what remains is the faint nodes and the wash — a * still sky that still says the state. That is the right trade for a background that is * information (the agent has this queue), where the decorative dust rightly vanishes * whole. */ .network { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: clip; background: linear-gradient( to top, color-mix(in oklab, var(--p-accent) 16%, transparent), transparent 40% ); } .network__node { position: absolute; width: var(--size); height: var(--size); /* Centred on its coordinate, so a node sits ON its lines' meeting point rather than hanging below-right of it — the lines are drawn centre to centre. */ translate: -50% -50%; border-radius: 50%; background: var(--p-accent); /* Softer than the first cut: the nodes are the CONSTANT, there to give a surfacing line somewhere to come from, and eleven bright beacons were half of the busyness. */ box-shadow: 0 0 calc(var(--size) * 1.5) var(--p-accent), 0 0 calc(var(--size) * 4) var(--p-accent), 0 0 1px var(--p-accent); opacity: 0.3; animation: net-breathe var(--for) ease-in-out var(--delay) infinite; } /* * A line RESTS DARK. The first cut of this drew all fifteen at once, permanently, and a * whole mesh pulsing over the queue was a wall — busy exactly the way a background must * not be. Now each line is an EVENT: it fades in, its spark crosses, it fades out, and it * is gone for the rest of its cycle. The phasing in js/dust.js guarantees two or three are * lit at any moment — never none, never a pile-up — with a fresh one surfacing somewhere * every four seconds or so. */ .network__link { position: absolute; height: 1px; /* Anchored at its left end and rotated onto its far node; the packet below rides this same rotation, which is what lets one translateX travel the whole line. */ transform-origin: 0 50%; transform: rotate(var(--angle)); background: linear-gradient( 90deg, transparent, color-mix(in oklab, var(--p-accent) 55%, transparent) 16%, color-mix(in oklab, var(--p-accent) 55%, transparent) 84%, transparent ); opacity: 0; animation: net-line var(--for) linear var(--delay) infinite; } /* * The packet: one spark per link, IN STEP with its line by construction — both animations * share the same duration and delay, so the spark gathers at the near node while the line * fades in (0–4%), crosses while it is fully lit (4–14%), and lands as it starts to fade. * A spark on an unlit line would be a dot crossing empty sky. */ .network__link::after { content: ''; position: absolute; top: -1.5px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 0 9px var(--p-accent); opacity: 0; animation: net-packet var(--for) linear var(--delay) infinite; } @keyframes net-breathe { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.4; } } /* Lit for 18% of the cycle. The bound on how many show at once lives in the LINKS table's phases (js/dust.js) — change this window and that arithmetic changes with it. */ @keyframes net-line { 0% { opacity: 0; } 3.5% { opacity: 0.3; } 14% { opacity: 0.3; } 18% { opacity: 0; } 100% { opacity: 0; } } @keyframes net-packet { 0% { transform: translateX(0); opacity: 0; } 4% { transform: translateX(0); } 5% { opacity: 0.85; } 13% { opacity: 0.85; } 14% { transform: translateX(var(--run)); } 15% { opacity: 0; } 100% { transform: translateX(var(--run)); opacity: 0; } } h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.02em; font-weight: 650; } h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); font-weight: 750; letter-spacing: -0.025em; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 1em; } a { color: var(--p-lavender); text-decoration-color: color-mix(in oklab, var(--p-lavender) 40%, transparent); text-underline-offset: 2px; transition: color 120ms var(--ease); } a:hover { color: var(--accent); } ::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); /* Not a fixed white: on the light theme that is invisible on its own tint. */ color: var(--text); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* Slim, unobtrusive scrollbars that match the theme. */ * { scrollbar-width: thin; scrollbar-color: var(--p-surface1) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--p-surface1); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--p-surface2); background-clip: content-box; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------- layout */ .shell { /* * Named, because one thing needs to escape it: the guest page's send bar is full * bleed and pulls itself back out by exactly this much. The value changes at a * breakpoint and again for print, and a negative margin written as a number was off * by four pixels on a phone — which is a page that scrolls sideways. */ --shell-pad: 20px; max-width: 1180px; margin: 0 auto; padding: 0 var(--shell-pad) 80px; } /* * A PAGE WHOSE CARDS SIT EVENLY, however many dialogs are parked between them. * * The spacing everywhere else comes from `.card + .card`, which is an ADJACENT sibling rule — it * only fires when one card directly follows another. The staffing page keeps its four * elements in the flow between the cards they belong to, and a closed dialog is display:none but * is still a sibling, so it breaks the adjacency: three of the cards there had no top margin at * all and sat flush against the one above, while the rest had their 16px. Reported as "some are * so close the menus are touching, and others are randomly spaced out", which is precisely what * a rule that can be interrupted by an invisible element looks like. * * A flex column with a gap cannot be interrupted that way: a display:none child is not a flex * item, so it contributes no gap and no break. The spacing then describes the page rather than * the order things happen to be written in. */ .shell--stack { display: flex; flex-direction: column; gap: 16px; } /* The gap owns the spacing now, so the margin rule must not add to it. */ .shell--stack > .card + .card { margin-top: 0; } /* The header keeps the 30px it has always had under it: its own 14 plus the column's 16. Written as the remainder rather than left at 30, because the gap is now unavoidably part of that sum. */ .shell--stack > .page-head { margin-bottom: 14px; } .shell--narrow { max-width: 640px; } /* * Settings: wide enough that ten category pills wrap into two rows rather than * five, narrow enough that a line of help text stays readable. */ .shell--medium { max-width: 880px; } /* * ---------------------------------------------- changing pages by swiping sideways * * The gesture is in public/js/swipe.js, over the page header only, on a phone only. * These are the four states it puts the shell in. * * The shell rather than the whole page, so the top bar stays exactly where it is: what * moves is the page's content, which is what changed. The bar is the frame around it. * * Everything is transform and opacity, which the compositor can do on its own thread — * this animation runs while a document is being fetched and parsed, which is the worst * possible moment to be asking the main thread for layout. */ /* The spring back when a drag is released without going far enough. */ .shell { transition: transform 200ms var(--ease), opacity 200ms var(--ease); } /* * Following the finger. No transition, because the transform IS the finger's position — * easing it makes the content lag the thumb, which reads as a slow page rather than as a * drag. * * After the rule above and not before it: both selectors are one class, so this only wins * on being later. Written the other way round it silently loses, and the only symptom is * a drag that trails. */ .shell--dragging { transition: none; } /* * Leaving. The page goes the way the finger went, and the arriving page comes in behind it * from the other side, so one continuous movement crosses the two documents. * * Next goes LEFT and previous goes right, because the links in the bar above read left to * right and the pages are laid out in that order: moving to the next one slides this one * off to the left and brings that one in from the right. See `towards()` in * public/js/swipe.js, which is the same decision on the input side — the two have to * mirror each other or the page moves one way while the finger goes the other. * * Shorter and shallower than the entrance: the exit is time the reader is waiting for a * page, and the entrance is time they are being shown one. */ .shell--leaving-next, .shell--leaving-prev { transition: transform 150ms var(--ease), opacity 150ms var(--ease); opacity: 0; } .shell--leaving-next { transform: translateX(-10%); } .shell--leaving-prev { transform: translateX(10%); } /* * Arriving. * * An animation rather than a transition, because there is no first state to transition * from — the document is new, and an animation carries its own starting point. The * attribute is set by /theme.js before first paint (see `themeScript` in src/app.js) and * removed by swipe.js once this has finished. */ @keyframes shell-swipe-in-next { from { transform: translateX(13%); opacity: 0; } } @keyframes shell-swipe-in-prev { from { transform: translateX(-13%); opacity: 0; } } html[data-swipe='next'] .shell { animation: shell-swipe-in-next 240ms var(--ease) both; } html[data-swipe='prev'] .shell { animation: shell-swipe-in-prev 240ms var(--ease) both; } /* * A shell pushed sideways is wider than the window, which would otherwise be a page that * can be scrolled sideways for the length of the animation — or worse, a scrollbar that * appears and goes again. * * `clip` rather than `hidden`: hidden makes this a scroll container, and a scroll * container is not something the sticky top bar can stick to. Applied only while * something is actually moving, so a legitimately wide child is never clipped at rest. */ html[data-swipe] body, body:has(.shell--dragging), body:has(.shell--leaving-next), body:has(.shell--leaving-prev) { overflow-x: clip; } .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--p-mantle) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .topbar__inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1rem; letter-spacing: -0.02em; text-decoration: none; color: var(--text); } .brand:hover { color: var(--text); } /* Whatever follows the wordmark — on a General Manager's bar, their cinema. */ /* * HOW BIG THE MARK IS DRAWN, which is not the same number for the two products. * * CINESC(O)PE is nine glyphs; F(O)YER is five. At one font size their cap heights are identical * — same typeface, same weights — but the short lockup covers barely half the width, and every * slot in this app was proportioned around the long one. So FOYER at 1.14rem is not smaller * type, it is a smaller OBJECT, and it reads as lost in a bar built for its predecessor. * * Corrected with a multiplier rather than a second set of sizes, so each slot keeps the decision * somebody made about it — the guest hero's mark is deliberately quiet, and must stay quiet, just * not quieter than CineScope's was there. * * 1.3 is a compromise, and it is worth being honest about which one. Measured in all three slots, * FOYER at 1.0 draws 58% of CINESCOPE's width at exactly its cap height; at 1.3 it draws 76% of * the width at 130% of the cap. Matching the width outright would take about 1.7, and a mark * two-thirds again as tall as the one it replaces would tower over the bar it sits in. So this * closes most of the gap in mass and accepts a slightly taller lockup, which is the trade that * looks right rather than the one that measures equal. * * What it costs, also measured: nothing in the top bar, whose height is fixed by its own padding * and does not move at any scale; one pixel on the guest header. In that header the mark ends up * at 18.7px against a 25.4px heading, so it is still the quieter of the two, which is the whole * point of the note above .guest-hero .wordmark. * * TWO SLOTS DELIBERATELY DO NOT TAKE IT, and both override the size with a literal below: * * - the placard byline, where the mark sits inline in "Powered by ____" and has to match the * words beside it rather than out-size them; * - the sign-in page, whose mark is sized in vw and so already grows to fill its space * whatever the glyph count — which is exactly why that one screen looked right when the * fixed-size slots did not. */ :root { --mark-scale: 1; } html[data-edition='standalone'] { --mark-scale: 1.3; } /* ------------------------------------------------------------- the wordmark CINESC⌖PE — the O of SCOPE is a reticle, so the mark IS the name rather than a logo sitting beside it. Set in the UI font at two weights: CINE recedes, SCOPE holds, and the reticle lands where the eye is already going. The reticle is one empty , not seven SVG elements repeated in eight pages: with no build step and no templating, markup duplicated per page is markup that drifts. The ring and ticks are a masked pseudo-element, so they take currentColor and recolour with the theme; the pupil is the other pseudo-element, and the one part of the mark that keeps its own colour. */ .wordmark { display: inline-flex; align-items: baseline; /* Sized for the desktop bar, and stepped down under 700px with the rest of the top bar — the phone version shares its row with the account button and has no room to grow. Everything in the reticle is em-based, so it follows. */ font-size: calc(1.14rem * var(--mark-scale)); letter-spacing: 0.06em; line-height: 1.35; white-space: nowrap; color: var(--text); } .wordmark__cine { font-weight: 400; color: var(--text-dim); } .wordmark__scope { font-weight: 600; } /* * Sized in em so it tracks the type it is standing in for, and placed off the * BASELINE rather than off the line box. * * It used to be `align-self: center`, which centres it in the flex line — and the * flex line's height is the text's line box rounded to whole device pixels, while * the ring is a fractional em. So the two rounded independently and the ring * landed a fraction of a pixel out by an amount that changed with the font size: * dead on at 110px, half a pixel low at 15px, which is the size the top bar * actually uses. On the sign-in page, where the mark is `clamp(1.7rem, 8.5vw, …)`, * it moved as the window was resized. Somebody noticed, which is the point at * which "close enough" stops being a defensible answer for a company's own name. * * Type is aligned on the baseline, so this is too: * * `align-self: baseline` on an empty box makes its BOTTOM EDGE the baseline it * is aligned by, which puts the ring's middle half its height up — 0.41em. * A round letter's ink in this font runs from 0.7031em above the baseline to * 0.0156em below it, so an O's middle is 0.344em up. The difference is the * 0.066em it comes back down by. * * All three numbers are measured from the font rather than guessed, and the whole * offset is in em, so it now rounds the same way the letters beside it do at every * size. Pinned in test/browser/wordmark.browser.js. * * The mask is filled white, which shows through under both mask-mode: alpha and * luminance — black would be correct under one and invisible under the other. */ .wordmark__reticle { --reticle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23fff' stroke-width='12'/%3E%3Cg stroke='%23fff' stroke-width='8.5' stroke-linecap='round'%3E%3Cpath d='M50 6V29'/%3E%3Cpath d='M50 71V94'/%3E%3Cpath d='M6 50H29'/%3E%3Cpath d='M71 50H94'/%3E%3C/g%3E%3C/svg%3E"); position: relative; display: inline-block; width: 0.82em; height: 0.82em; margin: 0 0.05em; align-self: baseline; top: 0.066em; flex: none; } .wordmark__reticle::before { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--reticle) center / contain no-repeat; mask: var(--reticle) center / contain no-repeat; } .wordmark__reticle::after { content: ''; position: absolute; inset: 40%; border-radius: 50%; background: var(--brand-pupil); } /* ------------------------------------------------------------ main nav Exactly one link is ever highlighted: the page you are on. Home used to carry a permanent accent chip so that "how do I get back" needed no guess, but it read as "you are here" from every other page — two links looking picked out at once, one of them lying. Its icon is enough to make it findable. */ .nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-left: 6px; margin-left: 6px; border-left: 1px solid var(--border); } /* On desktop this is just a row inside a row, so the bar looks the same as if the links were direct children. It earns its keep on a phone — see the mobile block. */ .nav__rest { display: flex; align-items: center; gap: 4px; } /* * The menu button that folds the second row away, on a phone only. * * Not shown here: on desktop the links are a row inside a row with room for all of them, * so there is nothing to reveal and a button would be a control whose job is already done. * Built by wireNav() in js/util.js, which is also the thing that knows whether any links * survived the role filter. */ .nav__toggle { display: none; } .nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid transparent; font-size: 0.87rem; font-weight: 550; color: var(--text-dim); text-decoration: none; white-space: nowrap; transition: background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease); } /* * A ROLE-GATED LINK IS NOT DRAWN UNTIL THE ROLE IS KNOWN. * * Three pages carry every role's links and let wireNav in js/util.js remove the ones that are not * yours — the schedule board, Settings and the manager's dashboard — because one markup serving * several roles is one bar to keep right rather than four. The cost was a flash: /api/me answers a * few hundred milliseconds after the page paints, so a General Manager opening the showtime board * saw Case monitor, Location info and Active users appear and then vanish. * * Nothing was reachable — the server refuses those pages and their APIs, which is what actually * keeps somebody out — but a bar that offers a colleague's tools for half a second and takes them * back is the app telling them something untrue about their own account. * * Hiding them until wireNav had run fixed that and left the opposite complaint: the bar arrived as * Home alone and filled in a moment later, so every navigation announced itself as a page being * assembled. The links a reader has are the same on every page — they should look like furniture, * not like content. * * So `data-roles` is written onto by the pre-paint script in src/app.js, next to the theme * and for the same reason, and these rules draw the right links in the FIRST paint. It carries the * set of guards the account satisfies rather than its role, which is why `~=` is the operator here: * a dev counts as an admin, and the sheet does not have to know that. * * `[data-nav='ready']` is still the second way in, and it is not redundant. It is what draws the * bar while a dev is borrowing an account, where the pre-paint script deliberately says nothing * because it cannot see whose dashboard is being looked at. By then wireNav has removed everything * that does not apply, so revealing the rest is safe. * * FAILS CLOSED either way: no flag and no module means Home alone — fewer links than somebody * should have, rather than more. */ .nav__link[data-role] { display: none; } html[data-roles~='admin'] .nav__link[data-role~='admin'], html[data-roles~='gm'] .nav__link[data-role~='gm'], html[data-roles~='maintenance'] .nav__link[data-role~='maintenance'], html[data-nav='ready'] .nav__link[data-role] { display: inline-flex; } /* * A GRANTED link is hidden again unless the grant is on the document, and this rule has to come * AFTER the ones above because the specificities tie and order is what decides. * * `data-grant` marks a link its role alone does not earn — the review queue is a manager's page * only for a manager somebody has granted it to. Without this the rule above would draw it to * every manager on the first paint and wireNav would take it away a moment later, which is the * flash data-roles exists to prevent. * * It overrides `data-nav='ready'` too, deliberately. That flag means "the module has run and the * bar is whatever it made it", and the module has already removed this link if the grant is * missing — so the two agree, and on a page where the module never runs the safe answer is still * the one that shows fewer links rather than more. */ html:not([data-grants~='review']) .nav__link[data-grant='review'] { display: none; } /* And the link the grant replaces — see data-nogrant in wireNav. Same reasoning, opposite direction: without this the old Case monitor link is drawn for a granted manager and taken away once /api/me answers, which is the flash from the other side. */ html[data-grants~='review'] .nav__link[data-nogrant='review'] { display: none; } /* * The edition, over the roles. A standalone circuit's scheduler links stay hidden whatever * the role rules above decided — same first-paint reasoning as data-roles, with the flag * written unconditionally by the pre-paint script because it describes the circuit rather * than the account. AFTER the role rules on purpose: the specificities tie, so order is the * tiebreak, and this one has to win. wireNav then removes the links outright, which is what * keeps the data-nav='ready' fallback above safe on a borrowed view. */ html[data-edition='standalone'] .nav__link[data-edition='cinema'] { display: none; } .nav__link:hover { background: var(--surface-3); color: var(--text); } .nav__icon { flex: none; display: block; } /* * The page you are on, and nothing else. * * The accent rather than a grey chip, now that it is the only mark in the bar: * "you are here" is worth being unmistakable, and there is no longer a second * accented link for it to be confused with. Not a link offering to take you * anywhere either, so hover does not lift. */ .nav__link--current { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); font-weight: 620; cursor: default; } .nav__link--current:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); } /* * THE TABLET'S STRIP, whose links are buttons. * * The back-office tablet's three destinations are panels on one page rather than pages — * the thirty-minute session and the sign-out that ends it belong to that page, and a tab * that navigated away would leave somebody's unlocked session on a counter. So its strip is *