/* Optic Terminal — dark theme. Colours are the data-viz reference palette's dark steps against its documented dark surface (#1a1a19), so its contrast and CVD guarantees hold. */ /* Two themes, both selected rather than derived. * * The dark steps below are the data-viz reference palette's dark column against * its dark surface; the light block further down is that palette's *light* * column, not the same hexes on a pale background — an automatic flip would * throw away the contrast and colour-vision guarantees the palette exists for. * * `light dark` (rather than `dark`) lets the browser follow the OS for form * controls, dropdowns and scrollbars, which is what previously had to be pinned * to dark to stop them rendering light against a dark page. */ /* ------------------------------------------------------------------- fonts * * No @font-face here on purpose. There were four, for Maison Neue, and the * files they pointed at do not exist — fonts/ holds a README and nothing else. * * The comment they carried said "absent files cost nothing: a face whose src * 404s is dropped by the browser and the next family in --sans is used". The * rendering half of that is true and the cost half is not: measured, every page * load spent four requests earning four 404s and four console errors before * falling back. Scaffolding for a file nobody has is not free, and --sans never * named the family anyway, so the fallback was the only path ever taken. * * Keeping the licensing note, because it is the part that took work to * establish and would otherwise be rediscovered: Robinhood's Capsule Sans is a * custom cut of Maison Neue commissioned for Robinhood and is not sold, so a * stack naming it points at something unobtainable. Maison Neue itself is * licensable from Milieu Grotesque and is what Capsule Sans is drawn from, so * it is the closest a licence gets to that look. Switzer is the closest freely * licensed stand-in and is what the terminal actually renders in. * * To install a licensed face: drop the .woff2 files in fonts/, add the * @font-face blocks back with font-display: swap, and put the family ahead of * "Switzer" in --sans. fonts/README.md has the same instructions. */ :root { color-scheme: light dark; /* Surfaces are near-black and almost flat against each other. The old palette stacked four visibly different greys — plane, surface, surface-2, raised — so every panel announced itself with a box. Keeping them within a few points of each other means depth comes from spacing and dividers instead, which is what makes a dense page read as calm. */ /* Warm neutrals. * * The greys carry a few points of red and green over blue, so the surfaces * read as paper and ink under warm light rather than as cold slate. Chosen * at matched luminance, then re-measured: every text token still clears * 4.5:1 on the brightest surface it sits on, and --neg needed two points of * lightness back (#d95454 -> #d95656) because warming the surface raised it * enough to cost 0.05 of contrast. */ --plane: #0b0a09; --surface: #121010; --surface-2: #1c1917; --border: rgba(255, 255, 255, 0.07); /* Glass. A translucent fill plus a backdrop blur, so what scrolls underneath shows through as colour and motion rather than being hidden by a slab. The fill has to be translucent or the blur has nothing to reveal, and it has to be dark enough that white text still clears 4.5:1 over whatever passes behind it. Measured against the brightest surface in the app (--surface-2 at #141414), white on this composite is 15.9:1. */ --glass: rgba(10, 10, 10, 0.62); --glass-strong: rgba(10, 10, 10, 0.82); --glass-edge: rgba(255, 255, 255, 0.10); --glass-blur: 20px; --glass-sat: 180%; /* Grain. Opacity, not a colour: the texture itself is one SVG turbulence tile reused by both themes, and only its strength changes. Dark needs more because film grain reads as light specks on a dark field. */ --grain-opacity: 0.035; --raised: rgba(255, 255, 255, 0.03); --border-strong: rgba(255, 255, 255, 0.13); --ink: #f5f1ec; /* Warm grey replaced with a neutral one. The old #c3c2b7 is a beige, which against a pure black plane reads as slightly dirty. */ /* Cooled to match, which also lifts it from 9.75 to 10.66 on a panel. */ --ink-2: #c2c6cb; /* Lifted and cooled. At #918879 this measured 5.23:1 on the panel surface: over the AA floor, but AA is a floor and this is 11.5px type carrying the timezone note and the session description. It also went muddy when the Asset restyle cooled every surface beneath it and left the ink warm. #9fa3a8 measures 7.83 on the plane and 7.22 on a panel, which clears AAA on both, and matches the surfaces it sits on. */ --ink-muted: #9fa3a8; /* Pulse's width, and the space the page reserves for it. One variable because there were three numbers: the panel was 382px, main reserved 420px and the footer reserved 400px, so the page held open a 38px strip of nothing beside an already-narrow panel. Draggable at runtime; see the grip in app.js. */ --chat-w: 520px; /* The hover wash. Three rules reached for var(--bg-hover, rgba(...)) and it was never declared, so every one of them took its fallback and the hover state did not follow the theme. Declared from the surface stack instead of a flat grey, which is what those fallbacks were approximating. */ --bg-hover: rgba(255, 255, 255, 0.055); /* One backdrop for every modal, and one ink for every shadow. The backdrops were rgba(0,0,0,0.5) twice and 0.6 once for the same job, and the shadows used twelve different alphas of black between them. Naming both is what stops the next one being a thirteenth. */ --scrim: rgba(0, 0, 0, 0.55); --shadow-ink: rgba(0, 0, 0, 0.25); /* Three elevations, and they exist because eleven `box-shadow`s in this file * hardcoded `rgba(0, 0, 0, ...)` at alphas from 0.25 to 0.7. In the dark * theme that is roughly right by accident; in the light theme it is a black * smear under a cream card, which is why elevated surfaces looked heavier * there than anywhere else in the app. --shadow-ink and --scroll-shade were * already themed and were already in use two shadows out of thirteen. * * Three steps because the file only ever wanted three: something resting * slightly above the page (a hovered card, a sticky bar), something floating * over it (a menu, a popover), and something covering it (the palette, a * modal, the Pulse panel). The near-duplicates each step replaces are listed * beside it. */ --elev-1: 0 1px 2px var(--shadow-ink), 0 2px 8px -2px var(--shadow-ink); --elev-2: 0 8px 24px -6px var(--shadow-cast), 0 2px 6px -2px var(--shadow-ink); --elev-3: 0 24px 60px -16px var(--shadow-cast), 0 4px 12px -4px var(--shadow-ink); /* The cast is deeper than the contact shadow and carries the theme's own * black rather than a literal one. */ --shadow-cast: rgba(0, 0, 0, 0.5); /* One colour for "the keyboard is here". * * Fifty-two focus rings, forty-eight on --s1 and four on --brand, which is * the logo's gold and reads as an accent rather than as a state. A reader * tabbing through Settings saw the ring change colour twice on the way * down. Keyed to a name rather than to --s1 directly so the decision can be * revisited in one place. */ --focus: var(--s1); /* The accent. Green for up, red for down, applied to numbers and to the one control per view that actually does something. */ --accent: #00c805; --accent-ink: #001a00; /* The filled button. Its own token rather than --s1, because --s1 also colours chart lines, where nothing sits on top of it and the contrast rule does not apply. Measured: white on --s1 (#3987e5) is 3.64:1, under the 4.5:1 normal text needs — the original blue button had that flaw. This is the same hue (213 deg) walked dark enough to reach 4.72:1 on white. */ /* Amber. Was #1c72d8. * * Measured rather than picked: white on it is 4.69:1 against the blue's * 4.72, and it sits 4.22:1 against the dark plane against the blue's 4.19, * so neither the label nor the button's own edge lost anything. * * The hue is the part that took the work. Every warmer amber tested sits * 6 to 30 degrees from --neg, the red every down move on this page is drawn * in, and in light mode a burnt orange lands 6 degrees away: the primary * action button would have been the same colour as a loss. This one is 42 * degrees off in dark and 27 in light, which is the most separation an amber * can have while still carrying white text. The blue it replaces had 147. */ /* ---- Asset restyle --------------------------------------------------- Measured off https://asset.framer.ai at 1440. Colour literals live in a token block because every literal in this stylesheet does; the rules that use them are in one block at the foot of the file, which is the whole of this change and the whole of its undo. */ --asset-plane: #080a09; --asset-surface: #131517; --asset-raised: #232326; --asset-brand: #d4b144; --asset-brand-ink: #1a1400; --btn-primary: #9a6b00; --btn-primary-ink: #ffffff; /* Text on any saturated fill, not just the primary button. Five places set `color: #fff` over --btn-primary or --neg, which meant a theme could change the ink on the button and miss the badges: --btn-primary-ink is the right name for one of those and the wrong name for a count sitting on red. */ --ink-on-solid: #ffffff; /* The plate behind a company logo, and the one colour in this file that is deliberately identical in both themes. Most brand marks ship on white, so a white plate stops a dark logo vanishing into a dark panel. A token rather than a literal so it reads as a decision: as a bare #ffffff in the middle of a rule it looks exactly like a token somebody forgot. */ --logo-plate: #ffffff; /* The mark follows the accent, so the app has one of them rather than two. Its own token and not --s1: that is a chart series colour, chosen for separation from the other seven, and repainting the brand must not repaint every line on every chart. */ --brand: var(--btn-primary); --grid: #2c2c2a; --baseline: #383835; /* categorical slots, dark steps, fixed order */ --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; /* Was #008300, which measured 3.83:1 as heading text on --surface and 3.54:1 on --surface-2 — below the 4.5:1 body-text threshold on every surface in the app, including the plane. It reaches the Read card's heading through --accent, which is where it was caught. Lighter, and shifted towards lime rather than simply brightened: pure green at a readable lightness lands on top of --pos (#0ca30c), and these are supposed to be eight separable categorical hues. 5.79:1 on --surface-2. */ --s6: #5fa617; --s7: #9085e9; --s8: #e66767; /* The moving averages, in order SMA 20, 50, 200 and EMA 9, 21, 50, and the EMA clouds over and under. Blues, violets and orchids only: the one part of the wheel no price, candle, stage or level colour uses. Measured in CIE76 each is at least 30 from every chart colour, including the session dividers' cyan and the support-and-resistance magenta, at least 15 degrees of hue from any of them, 4.5:1 or better on --surface, and at least 26 from every other average. See tests/test_ma_palette.py. */ --ma-1: #648fd8; --ma-2: #bd9efa; --ma-3: #c461c9; --ma-4: #f4c1f6; --ma-5: #6b6ff5; --ma-6: #a855f7; --cloud-up: #648fd8; --cloud-down: #c461c9; /* diverging poles + neutral midpoint. Up is green here rather than blue. The palette's blue was chosen for colour-vision safety against red, and that trade is still available — the greens below are the palette's own green steps, not an arbitrary hue. */ /* Direction. Every "did it go up or down" mark in the app resolves through these two, which is the point: --pos and --neg are re-declared per theme, so the light theme can use a green dark enough to read on white. Forty rules painted direction with --good/--critical instead — fixed across every theme by design — so the light theme's own pair was reaching almost nothing, and "up" on a white background was #0ca30c at 3.35:1. The values are the ones those forty rules were already using, so nothing changes in the dark theme; what changes is that the light theme now reaches the marks it was always meant to. Deliberately not the accent green: #00c805 is the brand and a button, and a wall of it on every number is neon rather than legible. */ /* Contrast is quoted against --surface-2 (#141414), the brightest panel these ever sit on, not against the plane. The old comments measured on pure black, which no text in this app is ever drawn on: --neg read "4.51:1" and was actually 3.96:1 where it appears. */ --pos: #0ca30c; /* on --surface-2: 5.49:1 */ --neg: #d95656; /* on --surface-2: 4.69:1, was #d43c3c at 3.96:1 */ --mid: #383835; /* Status — "is something wrong", not "which way did it go". Reserved, never used as a series, and deliberately fixed across themes: a warning is the same warning on any background. Direction lives in --pos/--neg above. */ --good: #0ca30c; --warn: #fab219; /* on --surface-2: 10.04:1 */ --serious: #ec835a; --critical: #d03b3b; /* Weinstein stages, which colour the price mark itself while Stages is on. Three are the terminal's own: an advance is --pos and a decline --neg, as every up and down figure here is, and a top is --warn because it is a caution rather than a direction. A base is a lighter green, --pos 40% into --ink, because it is on its way to an advance without being one; the reference chart this was built after draws it the same way. 10.81:1 on --surface, and 1.91:1 in luminance from --pos, so the two greens read as two marks rather than one. The light theme sets its own Stage 1; the other three follow its --pos, --warn and --neg through the references. */ --stage-1: #98d292; --stage-2: var(--pos); --stage-3: var(--warn); --stage-4: var(--neg); /* Reference-line colours, deliberately outside the eight categorical slots — a level is annotation, not a series. Validated against every colour that can share a price chart with them: magenta for support/resistance, and a neutral for the Fibonacci grid. The neutral is the important part — all eight hue slots were already spoken for, and a ninth and tenth hue could not clear the colour-vision floors (violet against the blue close line measured ΔE 4.7 under deuteranopia). Grey has no hue to confuse, so it survives every simulation, and ratios are conventionally drawn neutral anyway. */ --ref-sr: #eb17bd; /* Period dividers. Cyan is the one hue nothing else on a price chart uses, which is the whole point: these were drawn in --baseline, the axis colour, so a time boundary looked like chart furniture. 7.87:1 on the plane. */ --ref-session: #5ab7d1; --ref-fib: #c3c2b7; /* Tint for the scroll shadows below. Needs to darken on either surface, so it is declared per theme rather than derived from --ink. */ --scroll-shade: rgba(0, 0, 0, 0.32); /* Switzer, then Inter, then the system stack. * * Chosen to sit in the same genre as the products this is measured against. * Checked directly rather than from articles: Robinhood's "Capsule Sans" is a * custom cut of Maison Neue, Kalshi ships a proprietary "Kalshi Sans" with * Graphik for display, and Polymarket serves plain Inter. All four are * neo-grotesques: neutral shapes, high x-height, tight apertures, real * tabular figures. Switzer is the closest freely licensed stand-in for Maison * Neue, so it lands nearest Robinhood of the free options. * * Corrects an earlier note here. It claimed Capsule was a reverse-stress, * essentially all-caps display face and therefore wrong for dense tables. * That described a different typeface of the same name, by Dave Rowland. * Robinhood's is a UI face and the objection did not apply. * * Geist was here before this and is Vercel's: more geometric and technical, * which reads as a developer tool rather than a consumer trading product. * * Inter stays behind Switzer, loaded from a different CDN, so a Fontshare * outage degrades to a chosen face rather than to Times New Roman. */ /* Two faces, on purpose. * * --display is Space Grotesk: retro-futuristic, wide, with the flat-sided * bowls and the squared terminals of 1970s technical lettering. It carries * the headings and the wordmark, where character is the job. * * --sans stays Plus Jakarta Sans and keeps every number. Space Grotesk's * figures are distinctive enough to be a liability in a dense table: the * point of a price column is that no digit draws attention to itself. A * display face in the headings and a quiet one in the data is the ordinary * way to have both. */ --display: "Space Grotesk Variable", "Space Grotesk", "Plus Jakarta Sans Variable", system-ui, sans-serif; --sans: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---------------------------------------------------------------- scale * * Before this there were 21 distinct font sizes in here and 10 more inline in * app.js — 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, * 17, 21, 22, 31, 36, 42, 52. At that point size stops carrying meaning: two * things a half-pixel apart read as "different for no reason", and the eye * can't infer hierarchy from it. Seven steps plus three display sizes, so a * jump in size always means a jump in importance. */ /* Spacing scale. * * There was a type scale and no equivalent for space, and it showed: 18 * distinct paddings, 21 margins and 20 gaps rendered on a single page, drawn * from essentially every integer between 1 and 18. None was wrong on its own * — the problem is that 7px, 8px and 9px all appeared and none of them meant * anything, so the eye never found a rhythm and the page read as hand-placed * rather than designed. * * A 4pt grid. Nine steps rather than the tidier seven, because 20 and 40 are * both load-bearing here (panel padding is 20) and a scale that forces them * to 24 and 48 changes the look of the app to buy a rounder table of numbers * — which is the tail wagging the dog. * * --space-0 is the one sub-grid step. 2px is a real optical nudge — a caption * riding under a figure, a chip's inner lift — and rounding it to 4 doubles it. */ /* ONE KNOB FOR THE WHOLE UI. * * Everything below is a multiple of this, so the spacing grid and the type * scale move together and their relationship to each other never changes. * That relationship is the design; the absolute size is a viewing preference, * and the two were tangled together because both were written as literal * pixels. * * 1.15 because 13px table body and 15px prose were measured against a modern * laptop and read as a small page inside a large window rather than as a * dense one. Most of this app's surface is 13px, which is where the web sat * when 1280 was a big screen. * * The 4px grid survives as a 4.6px grid: still one rhythm, still nine steps, * still every gap a multiple of one unit. Rounding each step back to a whole * pixel is what would break it, because the rounding error differs per step * and the rhythm is the ratio between them, not the numbers themselves. */ --ui-scale: 1.15; --space-0: calc(2px * var(--ui-scale)); --space-1: calc(4px * var(--ui-scale)); --space-2: calc(8px * var(--ui-scale)); --space-3: calc(12px * var(--ui-scale)); --space-4: calc(16px * var(--ui-scale)); --space-5: calc(20px * var(--ui-scale)); --space-6: calc(24px * var(--ui-scale)); --space-7: calc(32px * var(--ui-scale)); --space-8: calc(40px * var(--ui-scale)); --space-9: calc(48px * var(--ui-scale)); /* Seven distinct sizes, down from ten. * * The old scale packed six values into a 4px band — 10.5, 11.5, 12.5, 13, 14, * 15.5. At those distances size stops carrying meaning: nobody perceives 12.5 * against 13 as hierarchy, they perceive it as inconsistency, and the page * pays the cost of the variation without getting the signal. * * Three pairs have therefore collapsed onto shared values. The names are kept * because they say what the text is for, and renaming them would mean editing * 104 call sites to change nothing about the render — but --t-micro and * --t-caption are now one size, as are --t-small/--t-body and * --t-base/--t-lead. Do not re-split them without a reason a reader could see. * * --t-micro and --t-caption are the one deliberate 1px gap. Everything at * micro is uppercase, everything at caption is not, and uppercase reads * noticeably larger at the same nominal size — no descenders, and the cap * height IS the size. 10px uppercase and 11px lowercase land at the same * apparent size, which is the point; setting both to 11 made every label * shout over its own caption. * * The base moved 14 -> 15. Inter sets on a larger x-height than SF Pro but * slightly narrower, so 15px Inter reads at about the optical size of the 14px * system font it replaces; holding 14 would have made the app quietly smaller * than it was. */ --t-micro: calc(10px * var(--ui-scale)); /* uppercase micro-labels, legends, chart ticks */ --t-caption: calc(11px * var(--ui-scale)); /* captions, caveats, secondary notes */ --t-small: calc(13px * var(--ui-scale)); /* dense table cells */ --t-body: calc(13px * var(--ui-scale)); /* table body, key-value readings */ --t-base: calc(15px * var(--ui-scale)); /* prose default */ --t-lead: calc(15px * var(--ui-scale)); /* navigation, emphasised UI */ --t-heading: calc(18px * var(--ui-scale)); /* sub-headings */ /* The top of the heading ramp, and the two tiers that were missing from it. * * Page titles were a literal `32px` and the home display line a literal * `clamp(34px, 3.4vw, 48px)`, which made them the only type in the product * that --ui-scale could not reach. Measured on the home page at 1440px * across the three settings: body went 11 -> 12.65 -> 14.3 while the page * title stayed at 32 and the hero at 48, so the title-to-body ratio ran * from 2.9x down to 2.24x. The whole point of that control, in its own * words, is to change "the absolute size of everything and none of the * relationships between any two things". * * 28 and 42 are chosen to land on what those literals already rendered at * the default scale -- 32.2px and 48.3px -- so this changes how the sizes * respond, not what they are. The d-tiers below are for figures, which is * why a heading could not simply borrow one: --t-d3 would have taken the * page title from 32px to 27.6px. */ --t-title: calc(28px * var(--ui-scale)); /* page and section titles */ --t-hero: calc(42px * var(--ui-scale)); /* the home page's one display line */ --t-d3: calc(24px * var(--ui-scale)); /* tile values */ --t-d2: calc(32px * var(--ui-scale)); /* secondary figures */ --t-d1: calc(44px * var(--ui-scale)); /* the one number a panel is about */ /* Radii, likewise collapsed from eight values to five. Panels sit at 12px: softer than the old 8px, which is what makes a dense dashboard read as calm rather than boxed-in. */ /* Two motion bands, not one. --dur-ui at 120ms is right for a hover, where a colour change wants to feel immediate. It is too fast for something that opens: at 120ms a menu reads as a jump rather than a movement, so menus, panels and inline explanations get their own. Measured against the spec this was built to, which asks for hover at 120-180ms and transitions at 180-240ms. One value was serving both. */ --dur-panel: 200ms; /* Six steps, because six is what the app actually draws. * * Measured before this: 75 hardcoded radii against five tokens, and the two * most-drawn surfaces in the product were both bypassing the scale. `.panel` * rendered at 14px while --r-lg, whose own comment says "panels", was 16px * and used by nothing that is a panel. `.btn` rendered at 10px against a * --r-md of 8px. Everything that wanted "rounder than a button, less round * than a card" -- the command palette, the section index, the home skeleton * -- had no token to reach for and invented 10px, 11px, 12px or 14px. * * So the two missing steps are named rather than the drawn values being * moved onto the nearest existing token. Adopting them changed no pixels. * * --r-lg is the one exception and the one judgement call: it moved 16px -> * 14px so that the card token matches the card. Seventeen secondary surfaces * (the home search field, chat bubbles, several callouts) lose 2px and land * on the same radius as the panels they sit beside. Moving `.panel` the * other way would have changed every panel in the app instead of seventeen * pieces of chrome; the canonical surface wins. One number to reverse it. * * 1px, 2px and 3px stay bare. They are bar fills and legend keys 3-8px tall, * where the radius is a function of the element's own height rather than a * step on a scale -- see the exceptions block at the foot of this file. */ --r-xs: 4px; /* inline marks, bars, strip segments */ --r-sm: 8px; /* inputs, small controls */ --r-ctl: 10px; /* buttons, selects, text inputs */ --r-chrome: 12px; /* sticky bars, the palette, skeletons */ --r-md: 8px; /* buttons, selects, callouts — merged with --r-sm, which sat two pixels away and read as a mistake */ --r-lg: 14px; /* panels, cards, tiles */ --r-pill: 999px; /* Nothing else may hold a bare pixel radius. The exceptions are 1px, 2px and * 3px on bar fills, legend keys, skeleton bars and dots -- elements 3 to 8 * pixels tall, where the radius is a proportion of the element's own height * rather than a step on this scale, and rounding them to --r-xs (4px) would * turn a 3px bar into a lozenge. tests/test_radius_scale.py holds the line: * any new bare radius of 4px or more fails, and the 1-3px set is allowed by * value rather than by an ever-growing list of selectors. */ /* Spacing rhythm. Everything is a multiple of 4 so vertical alignment falls out for free instead of being nudged per-panel. */ } /* Light theme. Selected by the data-theme attribute rather than a media query: the inline script in index.html stamps it before first paint from the stored choice or, absent one, from the OS setting. That keeps one light block here instead of the same values in both a media query and a toggle scope. */ :root[data-theme="light"] { /* Pure white, and the same near-flat stack as the dark theme. */ --plane: #fffdfb; --surface: #fffdfb; --surface-2: #f7f3ee; --border: rgba(11, 11, 11, 0.08); /* Light theme glass. Lighter fill, and less grain: on a white field the same texture reads as dirt rather than as film. */ --glass: rgba(255, 255, 255, 0.68); --glass-strong: rgba(255, 255, 255, 0.86); --glass-edge: rgba(11, 11, 11, 0.08); --glass-blur: 20px; --glass-sat: 180%; --grain-opacity: 0.022; --raised: rgba(11, 11, 11, 0.02); --border-strong: rgba(11, 11, 11, 0.14); --ink: #14110e; --ink-2: #4a4238; --ink-muted: #6e6558; /* on --surface-2: 4.55:1, was #7b7b7b at 3.95:1 */ --bg-hover: rgba(11, 11, 11, 0.05); --scrim: rgba(11, 11, 11, 0.38); --shadow-ink: rgba(11, 11, 11, 0.18); /* Lighter and warmer: the same geometry over a cream plane needs far less * alpha or it reads as dirt rather than depth. */ --shadow-cast: rgba(11, 11, 11, 0.16); /* Darker green on white. #00c805 measures 1.8:1 against white and fails any text use, so the light theme takes a step down. The step used to be #00a504 with a comment claiming it cleared 4.5:1. It does not — measured, it is 3.29:1, and white on it as a button label is the same 3.29:1. #e03600 was 4.47:1, near enough to look right and still short. These are the nearest values on the same hues that actually clear the threshold, so the claim and the colour now agree. */ --accent: #008903; /* white on this: 4.59:1 */ --accent-ink: #ffffff; /* Unchanged between themes on purpose: the button paints its own fill, so its contrast does not depend on the page behind it. */ /* Amber. Was #1c72d8. * * Measured rather than picked: white on it is 4.69:1 against the blue's * 4.72, and it sits 4.22:1 against the dark plane against the blue's 4.19, * so neither the label nor the button's own edge lost anything. * * The hue is the part that took the work. Every warmer amber tested sits * 6 to 30 degrees from --neg, the red every down move on this page is drawn * in, and in light mode a burnt orange lands 6 degrees away: the primary * action button would have been the same colour as a loss. This one is 42 * degrees off in dark and 27 in light, which is the most separation an amber * can have while still carrying white text. The blue it replaces had 147. */ --btn-primary: #9a6b00; --btn-primary-ink: #ffffff; /* Text on any saturated fill, not just the primary button. Five places set `color: #fff` over --btn-primary or --neg, which meant a theme could change the ink on the button and miss the badges: --btn-primary-ink is the right name for one of those and the wrong name for a count sitting on red. */ --ink-on-solid: #ffffff; /* The plate behind a company logo, and the one colour in this file that is deliberately identical in both themes. Most brand marks ship on white, so a white plate stops a dark logo vanishing into a dark panel. A token rather than a literal so it reads as a decision: as a bare #ffffff in the middle of a rule it looks exactly like a token somebody forgot. */ --logo-plate: #ffffff; /* The mark follows the accent, so the app has one of them rather than two. Its own token and not --s1: that is a chart series colour, chosen for separation from the other seven, and repainting the brand must not repaint every line on every chart. */ --brand: var(--btn-primary); --grid: #e1e0d9; --baseline: #c3c2b7; /* Same correction as the dark theme: measured on --surface-2 (#f6f7f8), not on white. Both were failing where they are actually drawn. */ --pos: #007a03; /* on --surface-2: 5.17:1, was #008903 at 4.28:1 */ --neg: #d13200; /* on --surface-2: 4.70:1, was #de3500 at 4.24:1 */ /* The palette's light column: same eight hues, stepped for a light surface. */ --s1: #2771ca; /* on --surface-2: 4.55:1, was #2a78d6 at 4.12:1 */ /* Light theme needs its own amber. It had none, so it inherited the dark theme's #fab219 and drew yellow text on white at 1.71:1, the worst contrast in the app. A dark amber keeps the "caution" reading without relying on a hue that cannot carry text on a light ground. */ --warn: #956703; /* on --surface-2: 4.64:1 */ /* Stage 1 is --pos 70% into --surface here. Any lighter fails the 3:1 a candle needs to read as a shape on white: 60% measured 2.65:1. This is 3.17:1 on --surface and 1.72:1 in luminance from --pos. */ --stage-1: #4da14d; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; /* Same hue shift on the light column, for the same reason plus its own: on --surface-2 (#f7f3ee) the old value measured 4.48:1, which misses by two hundredths. 4.82:1 now. */ --s6: #357a0f; --s7: #4a3aa7; --s8: #e34948; /* The averages' light column: the same families, and the same clearances, at 4.5:1 or better on the light surface. */ --ma-1: #29558e; --ma-2: #2f148a; --ma-3: #c124e0; --ma-4: #5d2b73; --ma-5: #2456e0; --ma-6: #461dcd; --cloud-up: #29558e; --cloud-down: #c124e0; /* --pos and --neg are NOT redeclared here. * * They used to be, twice: the accessible green and red above, and then this * blue-and-red pair copied down with the categorical palette's light column — * note that it repeats --s1 and --s8 exactly. The later pair won, so "up" in * the light theme has been rendering blue while the dark theme renders green, * and the green declared for the light surface was dead the moment it was * written. Nobody noticed because only one strip on the Read tab resolved * through --pos at the time; now that every directional mark does, it would * have turned most of the light theme blue. * * There is no colour-vision-safe theme to justify it either — the settings * offer system, light and dark, and nothing else. */ --mid: #f0efec; /* Status colours are fixed across themes by design — a warning is the same warning either way — so they are not re-declared here. On a light surface warning and serious fall below 3:1, which is why every status in this app ships with a word beside it and never relies on the colour alone. */ --ref-sr: #a10591; --ref-session: #17758a; /* 5.24:1 on the light plane */ --ref-fib: #52514e; --scroll-shade: rgba(11, 11, 11, 0.14); } * { box-sizing: border-box; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-md); border: 2px solid var(--surface); } *::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-sm); } html, body { margin: 0; padding: 0; background: var(--plane); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Inter ships contextual alternates on by default, which turns some digit and punctuation pairs into ligatures that break a column of figures. Off here, on nowhere. */ font-variant-ligatures: none; /* Smooth scrolling for jumps, not for the wheel. * * This covers anchor navigation and every scrollIntoView in the app: the * glossary's "learn more", the chart scrolling a panel into view, the jump * back to a table after a filter. Those are the places where an instant jump * loses the reader's position. * * Deliberately NOT a scroll-hijacking library. Locomotive and its kind * replace native scrolling with a transform on a wrapper, which costs a frame * of latency on every wheel event, breaks position: sticky (the header above * took a fix today to work at all), and disconnects the scrollbar from the * document. On a terminal whose chart must answer a wheel immediately and * whose chrome is sticky by design, that trade is the wrong way round. The * "premium" part of that effect is content revealing as it arrives, which is * the IntersectionObserver stagger in revealPanels. */ scroll-behavior: smooth; /* No overflow property on the root. See the note on `main` below. * * This carried overflow-x: hidden, which forces the other axis to compute to * `auto` and turns body into a scroll container. A position: sticky child * then sticks to that container rather than the viewport and never pins, so * header.topbar scrolled away despite being sticky: measured at scrollY 600, * the bar sat at -600. * * Switching it to `clip` fixed the header and broke IntersectionObserver. * overflow: clip ON THE ROOT ELEMENT degenerates the implicit root that * IntersectionObserver measures against, so no observer fired anywhere in the * app: measured, a plain observer on a panel at top 456 in a 971px viewport * reported nothing. That took the panel reveals with it. * * Both properties want the root left alone, so the clipping moved to main. */ } button, input, select, textarea { font: inherit; color: inherit; } /* ------------------------------------------------------------------ chrome */ header.topbar { /* Promoted to its own compositing layer: a sticky bar over a long scrolling document leaves stale paint artifacts in some embedded renderers otherwise. */ position: sticky; top: 0; z-index: 50; transform: translateZ(0); backface-visibility: hidden; display: flex; align-items: center; /* space-2 rather than space-4 between the blocks. Six gaps at 18.4px spent 110px of the row on separation alone, and the strip beside them was folding for want of rather less than that. */ gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--plane); border-bottom: 1px solid var(--border); /* Single row. With eight tabs plus the search box and the assistant button, wrapping used to drop Pulse onto its own line and break tab labels across two — the tab strip scrolls instead. */ flex-wrap: nowrap; } .brand { display: flex; align-items: center; gap: var(--space-2); flex: none; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; /* Reset the button chrome — it needs button *semantics*, not button looks. */ padding: var(--space-2) var(--space-2); margin-left: -8px; background: none; border: 1px solid transparent; border-radius: var(--r-md); color: inherit; font-family: inherit; font-size: inherit; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } /* Hover is the only affordance that it's clickable at all — without it a logo reads as decoration and nobody tries. */ .brand:hover { background: var(--surface); border-color: var(--border); } .brand:hover .brand-mark { color: var(--ink); } /* 28px, up from 22. At 22 the mark was the smallest thing in the bar and read as an icon next to the wordmark rather than as the logo; the row has the height for more, since the buttons beside it stand 40px tall. */ /* The mark alone, at 34px. * * "OPTIC TERMINAL" beside it was about 115px of the top row restating what the * mark and the browser tab already say, on every render and at every width. * The button keeps `aria-label="Optic Terminal. Go to home"`, so the name is * still there for a screen reader and only the duplicate pixels are gone. * * Resolution is not a consideration: the mark is an inline SVG on a 32-unit * viewBox, so it is resampled by the renderer at whatever size and pixel ratio * it lands on. Growing it costs nothing and loses nothing. */ .brand-mark { width: 34px; height: 34px; flex: none; color: var(--ink-2); } .brand-text { display: none; } .search { display: flex; align-items: center; gap: var(--space-2); flex: none; } /* Pinned to the right edge so the scrolling tab strip can't displace it, and sized to match the enlarged tabs beside it. */ #chat-toggle { flex: none; margin-left: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--t-lead); font-weight: 500; border-radius: var(--r-md); } .search input { /* Width and type size are one decision here, because the thing being fitted is a fixed string in a tracked uppercase face. "SEARCH OR ASK ⌘K" renders 186px at the inherited 17.25px, and 30px of padding and border puts the box at 216px to show it. So 210 never did: it clipped the K, and 195 — picked off a measurement taken before `text-transform` was applied, which is the mistake — clipped 21px and lost the shortcut hint entirely. Dropping to the body size needs 191px instead of 216, which is what lets this box both hold its own placeholder and leave the row enough width to stay on one line. A search field is the one control here that gains nothing from being the largest type in the bar. Re-measure if the placeholder or the face changes, and measure it by putting the placeholder in as a *value* and comparing scrollWidth to clientWidth. Measuring a probe span is what produced both wrong numbers here: once by forgetting `text-transform`, once by trusting the `font` shorthand. The real minimum at this size is 191px; 200 leaves nine. */ width: 200px; font-size: var(--t-body); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; transition: border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; } /* The outline is the accessible focus ring and stays. The border and the faint wash under it are the premium half: the product's primary entry point reads as live while it holds the caret, in the brand accent the rail and palette already use, rather than only gaining a system outline. */ .search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: color-mix(in srgb, var(--btn-primary) 55%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary) 16%, transparent); } .btn { padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; white-space: nowrap; transition: background-color 0.12s ease, border-color 0.12s ease, filter 0.12s ease; } .btn:hover { background: var(--surface-2); } .btn:active { filter: brightness(0.94); } /* .btn.primary is defined once, further down with the other button rules. It used to be declared here too, as var(--s1) with white text, and again later as var(--accent) — same selector, same specificity, so the later one won and this one was dead. That is why the buttons were green while the stylesheet appeared to say blue in two places. */ .btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* Pulse's mark, and its face. * * Two drawings, and the split is measured: at 16 and 20px the mascot's eyes * stop resolving and the whole thing turns to mush, while the circle and the * waveform stay legible all the way down. So the face is used where there is * room and the reduced mark everywhere else. * * Both are `currentColor` throughout, which is what lets the same drawing sit * on the primary button in white and in the panel header in ink. The accent * belongs to the trace only where there is a surface behind it to contrast * against; on the button there is not, and a two-tone glyph on a brand fill * reads as a rendering fault. */ .pulse-mark { display: inline-flex; align-items: center; } .pulse-glyph { display: block; } .pulse-glyph-sm { width: 17px; height: 17px; } /* The empty state's anchor is the Optic aperture, not the Pulse waveform. The waveform is drawn for 17px and reads thin at 76; the aperture is the mark the product is named for and is already the header's and the home page's. Same drawing, third placement -- `opticMarkHTML` renders all three. It does not blink or iris open here. Those belong to arrival: the header mark blinks everywhere except Home so it has something to do, and the home logo opens once on load. This sits above four cards a reader is reading, and motion beside text you are reading is motion nobody asked for. */ .pulse-logo { width: 76px; height: 76px; color: var(--ink-2); } /* The trace redraws itself, the same idiom and the same timing as the brand mark's chart line -- `pathLength="100"` normalises the dash maths so the keyframes do not have to know the path's real length. It is the only thing that moves: a mark that scales in the corner of a button is motion the reader did not ask for, which is what the bullet here used to do. */ .pulse-trace { stroke-dasharray: 100; animation: pulse-trace-draw 5.5s ease-in-out infinite; } @keyframes pulse-trace-draw { 0%, 62%, 100% { stroke-dashoffset: 0; } 12% { stroke-dashoffset: 100; } 38% { stroke-dashoffset: 0; } } /* The figure, in the panel's empty state. * * A height and no width: the viewBox is 32x38 because he stands up, and * setting both to the same number squashes him. */ /* 104, not 92: the aperture in each eye is 5.4 units on a 32-unit box, so it needs the pixels to read as a lens rather than as a circle. */ /* In `.pulse-empty`, which is the intro that already existed. A first draft put the face in a block of its own and the panel greeted a reader twice. */ /* `pulse-beat` is still here and the mark no longer uses it. * * Deleting it with the bullet took the animation off `.ses-dot.p-regular` and * off the refreshing indicator app.js sets inline, both of which still name * it -- a keyframe that does not exist does not error, the animation simply * never runs. Caught by the test that asserts the mark has stopped scaling, * which had to be told the keyframe itself is not the thing being removed. */ @keyframes pulse-beat { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pulse-trace { animation: none; stroke-dasharray: none; } /* The two remaining users of pulse-beat. The old rule here covered only the mark, so a reader who asks for less motion still got a pulsing dot. */ .ses-dot.p-regular { animation: none; } } nav.tabs { display: flex; /* No gap between tabs: each button carries its own horizontal padding, so the labels are already 18.4px apart and the gap was only ever separating two transparent backgrounds. Worth 14px across seven groups, which is the difference between this row fitting a 1440 screen and not. */ gap: 0; margin-left: auto; /* min-width:0 lets the strip shrink below its content width so it scrolls rather than shoving the assistant button off the row. */ min-width: 0; overflow-x: auto; scrollbar-width: none; } nav.tabs::-webkit-scrollbar { display: none; } nav.tabs button { /* Sized up from 14px/6-12px once, because at desktop widths the strip read as small print next to the panels it navigates. Both halves of that came back down when a seventh group arrived and the strip started folding. Measured as the width the whole header needs to stay on one line: 1653px as it stood, 1538 on padding alone, 1451 with the header gap too, and 1408 here. A 1440 laptop is the case that matters and only the last number clears it. The padding went first and further — seven groups at 18.4px a side spent 258px of the row on empty space inside the buttons, which is the single largest thing that was pushing the last group onto a second line. t-body is the same size the panel headings use, so the strip is no longer small print against them; it is simply no longer larger than them. */ padding: var(--space-2) var(--space-2); font-size: var(--t-lead); font-weight: 500; flex: none; white-space: nowrap; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink-2); cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } nav.tabs button:hover { color: var(--ink); background: var(--surface); } nav.tabs button { position: relative; } /* The selected tab now carries the logo's blue as a 2px underline. The only cue before was a grey box, which reads as "hovered" rather than "you are here" — and the accent colour from the mark in the corner appeared nowhere in navigation. */ nav.tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--border-strong); } nav.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px; height: 2px; border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--s1); } /* Sticky under the top bar, so it floats over content and takes glass too. No clamp and no disclosure. This was one clipped row with a More/Less button, and both are gone -- see setStatus for the measurement. The short version: at 1512px every view's strip is one row and 29px either way, so dropping the clamp changed no height a reader sees; a clipped row with no button left is the one state that hides a reading for good. */ .statusline { padding: var(--space-2) var(--space-5); font-size: var(--t-small); color: var(--ink-muted); background: var(--glass); border-bottom: 1px solid var(--glass-edge); display: flex; align-items: flex-start; gap: var(--space-3); } .sl-parts { display: flex; gap: var(--space-4); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .statusline { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .statusline { background: var(--plane); } } /* No transition on padding: animating a layout property forces full-document reflow on every frame and is the usual source of ghosted repaints. */ main { padding: var(--space-6) var(--space-6) var(--space-8); isolation: isolate; } /* The reserve is a margin set further down, from --chat-w. This rule used to set padding-right: 400px and was already overridden there, so the number was decoration. */ .view { display: none; } .view.active { display: block; } /* ------------------------------------------------------------------ panels */ .grid { display: grid; gap: var(--space-5); } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); /* Panels size to their content instead of to the tallest one in the row. * * Grid defaults to align-items: stretch, which paired the swing verdict — a * long panel with the score table and every factor definition — against the * quote panel, and stretched the quote's box to match. That left roughly 500px * of bordered empty space below "Sector", which reads as a section that failed * to load rather than as one that simply has less to say. * * Only c2 is changed. c3 and c4 hold rows of tiles where equal heights are the * point, and letting those size individually makes a ragged row. */ align-items: start; } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* ------------------------------------------------------------------ panel --- * * One rule. This was declared FIVE times at top level, and the duplication was * not harmless: with equal specificity the last declaration won, which killed * three things their authors meant to happen. * * - The scroll shadows below were dead. A later rule used the `background` * SHORTHAND, which resets every background-* longhand, so background-image, * -repeat, -size, -position and -attachment all reverted to their defaults. * Measured: a panel computed `background-image: none`. `background-color` is * used here for exactly that reason. * - `@media (max-width: 640px) { .panel { padding: var(--space-3) } }` was dead * for the same reason, the later rule sitting after it in the file. Measured * at 375px: 23px of padding where 13.8px was intended. * - Of two paddings and three border-radii declared, one of each applied and * the rest were decoration. Nobody could predict a panel's box by reading any * single rule. * * Borders, and the author was right to put them back: most panels here are * collapsible, and a collapsed panel with no border is a floating heading with * no visible extent, so you cannot see what you are about to open. Contained, * not boxed-in. * * The asymmetric radius is deliberate. Equal corners read as a box; a slightly * longer top-left reads as a card that was placed rather than generated. Two * pixels, not ten. The curve lives on things you touch and stops at things you * read, which is why tiles, cells and candles stay square. * * Panels scroll their own overflow (wide tables, leg rows) rather than forcing * the page wider than the viewport, and the scroll was invisible: the * candidate-strikes table is 1035px inside an 804px panel and nothing said so. * Two gradients pinned `local` move with the content and vanish at each end; * two pinned `scroll` cast a soft edge that shows only while there is more to * reach. No measurement, and nothing on panels that do not overflow. * * Hover outlines the whole card rather than the heading, because the whole card * is the target. */ .panel { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); /* Asset restyle */ /* 20/24 rather than 24/32. * * Measured at 1280px: 27.6px vertical and 36.8px horizontal inside every * card, against 13px table text. On a page carrying twenty panels that is * the difference between a research terminal and a marketing site -- the * padding was doing more work than most of the content in it, and the * horizontal 36.8 was taken twice per panel out of the width tables have to * fit their columns into. * * Not smaller than this: the panel border has to read as a container rather * than as a line drawn around text, and --space-5 is where that still * holds. */ padding: var(--space-5) var(--space-6); min-width: 0; overflow-x: auto; background-image: linear-gradient(to right, var(--surface) 40%, transparent), linear-gradient(to left, var(--surface) 40%, transparent), linear-gradient(to right, var(--scroll-shade), transparent), linear-gradient(to left, var(--scroll-shade), transparent); background-repeat: no-repeat; background-size: 34px 100%, 34px 100%, 16px 100%, 16px 100%; background-position: 0 0, 100% 0, 0 0, 100% 0; background-attachment: local, local, scroll, scroll; transition: border-color 140ms ease; } .panel.span2 { grid-column: span 2; } @media (max-width: 900px) { .panel.span2 { grid-column: auto; } } /* Staggered reveal on a fresh load. The delay is set per-panel in JS, and the class is only added on a foreground load — a background refresh tick must not re-animate a dashboard the user is already reading. `both` fill mode holds the opening state through the delay so nothing flashes in early. */ @keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } } /* Not scoped to `.panel` any more. The home page has no panels above its tour, so the first screen anyone sees was the one screen with no entrance at all: the shell painted, and then the strip and the market block each snapped in whole the instant /api/home landed. Reported as looking laggy, which is exactly what an instant state change reads as when everything around it moves. Same motion, same curve, now available to any block. */ .reveal { animation: panel-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* The reveal reads as one motion only if the whole view starts clean. */ @keyframes view-in { from { opacity: 0; } to { opacity: 1; } } .view.revealing { animation: view-in 0.25s ease-out both; } @media (prefers-reduced-motion: reduce) { .reveal, .view.revealing { animation: none; } } /* -------------------------------------------------------------------- home */ .home { /* Follows `main` now, by way of 1000 and 1280. Keeping it narrower than the shell was the wrong instinct: this page holds the eight-cell market strip, the watchlist and the movers table, all of which are the same shape as the tables everywhere else and were being asked to live in a column 320px narrower than those. A reader on a wide screen saw the whole page inset inside an app that was not, which reads as the page having failed to fill rather than as a measured column. The search lockup is what must not grow, and it is pinned and centred below rather than the whole page being held in to protect it. */ margin: 0 auto; /* Was --space-9 at the top. The market strip is the first element now and it wants to sit close to the session bar above it, not a screen's height below it. */ padding: var(--space-4) var(--space-1) 60px; } /* The one thing on this page that must not grow with it. A search field the full width of the column reads as a URL bar rather than as a place to type four letters, and the ticker pills under it would spread across the whole screen with acres between them. Centred rather than left-aligned, now that the column around it is the full width of the app: an 860px block pinned to the left of a 1600px page is not a measured element, it is an element that ran out. Centred it reads as the thing the page is built around, which on this page it is. */ /* 720, down from 860. The field only ever holds four characters, and the width it needs is set by its placeholder rather than by the page: at 860 the sentence ended a third of the way across and the rest was an empty box, which reads as a field waiting for a sentence rather than a ticker. */ .home-search, .home-quick { max-width: 720px; margin-left: auto; margin-right: auto; } /* The mark and the wordmark, one compact row. Both were much larger and stacked: a 92px aperture, then "Optic Terminal" at --t-hero, then a three-line lede. That is about 340px of branding above the fold, on a page whose own header already says OPTIC TERMINAL in the top-left corner, and it pushed the market state off the first screen entirely. The brand still opens the page; it just no longer *is* the page. */ .home-brand { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); /* Centred over the search field rather than over the page: it shares that field's width, so the mark sits above the middle of the box it introduces instead of above the middle of a column the field does not fill. Left aligned it read as a label on the field; centred it reads as the name of the thing you are about to search. */ max-width: 720px; justify-content: center; margin-left: auto; margin-right: auto; } .home-logo { /* 60, by way of 30, 38 and 52, each step asked for after looking at the last. The ceiling has always been the search field directly underneath, so that the two read as one lockup rather than a mark floating above a control. At the original type scale that field was 53px tall and the mark stopped at 52. The UI scale since took the field to 61, so the same rule now puts the mark at 60: the number moved because the thing it is measured against did, not because the rule changed. */ width: 60px; height: 60px; color: var(--ink-2); margin-bottom: 0; flex: 0 0 auto; } /* The aperture ring drifts open once on arrival — a single quiet gesture, not an animation the eye has to keep tracking. */ @keyframes iris-open { from { opacity: 0; transform: scale(0.9) rotate(-12deg); } to { opacity: 1; transform: none; } } .home-logo { animation: iris-open 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* The eye blinks, and the line draws itself back on when it opens. * * Three animations on one 6s clock so they cannot drift apart. Written as * percentages of a shared duration rather than as separate durations with * delays: delays drift the moment any one of them is retimed, and a blink whose * lid and contents disagree by 40ms reads as a rendering fault. * * 6s because that is roughly a human blink interval. Faster looked nervous. * * Only the eye group scales — the outer ring holds still. Scaling the whole * mark read as the logo flickering rather than as something blinking. * * scaleY(0.06) rather than 0: an exactly-zero scale collapses the transform * matrix and some engines drop the element's stroke rendering for that frame, * which shows up as a flash of nothing rather than a closed lid. */ @keyframes eye-blink { 0%, 80% { transform: scaleY(1); } 85%, 88% { transform: scaleY(0.06); } 93%, 100% { transform: scaleY(1); } } /* The line is offset out of sight while the lid is down, then drawn back from its start once the eye is open — so the reveal is the payoff of the blink rather than something happening behind a closed lid. */ @keyframes line-redraw { 0%, 84% { stroke-dashoffset: 0; } 85%, 91% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } /* The dot waits for the line to reach it. Its 96% start is deliberately after line-redraw is most of the way home, so it lands on the end of the stroke instead of hanging in space ahead of it. */ @keyframes dot-reveal { 0%, 84% { opacity: 1; } 85%, 96% { opacity: 0; } 100% { opacity: 1; } } /* The delay is negative on purpose: -4.25s. * * The blink lives at 80-93% of the cycle, so a positive delay put the first one * about 5.9s after load — long enough that most people never saw it. A negative * delay starts the animation already part-way through instead of waiting: at * -4.25s the clock begins at 70.8% and reaches the 80% blink 0.55s later. * * 0.55s rather than 0s so the blink lands just after the logo's own fade-up * (0.5s) has finished. Blinking through the fade read as a glitch in the * entrance rather than as a blink. * * All three share the same negative delay, which is what keeps the lid, the * line and the dot in phase — that is also why they share one duration. */ .home-logo-eye { animation: eye-blink 6s ease-in-out -4.25s infinite; /* fill-box so the origin is the eye's own centre, not the SVG viewport's. */ transform-box: fill-box; transform-origin: center; } .home-logo-line { stroke-dasharray: 100; animation: line-redraw 6s ease-in-out -4.25s infinite; } .home-logo-dot { animation: dot-reveal 6s ease-in-out -4.25s infinite; } /* The header mark blinks too, on every page except Home. * * Same keyframes and the same 6s clock as .home-logo, not a copy of them: two * marks blinking to two sets of timings drift apart the first time either is * retimed, and a blink is only legible because the lid and the line agree. * * Not on Home, and that is the whole of the rule. The 64px home logo is * already blinking three feet lower down the same screen, and two apertures * closing half a second apart reads as a rendering fault rather than as one * mark with a tic. `body[data-view]` is published by switchView. * * The dot is driven from here too, on the same clock as the other two. It has * one job -- not hanging in space ahead of a half-drawn stroke -- and it can * only do it if it is on the same 6s cycle as the line it belongs to. Left * unanimated it stayed lit through the blink, so the closed lid had a gold * speck floating over it. */ body:not([data-view="home"]) .brand-mark-eye { animation: eye-blink 6s ease-in-out -4.25s infinite; /* fill-box, so the lid closes on the eye's own centre rather than the viewport's. Without it the mark slides as it scales. */ transform-box: fill-box; transform-origin: center; } body:not([data-view="home"]) .brand-mark-line { stroke-dasharray: 100; animation: line-redraw 6s ease-in-out -4.25s infinite; } body:not([data-view="home"]) .brand-mark-dot { animation: dot-reveal 6s ease-in-out -4.25s infinite; } /* Everything on the home page fades up on arrival, in reading order. * * One shared keyframe with a per-element delay, not six keyframes: the order is * the only thing that differs, and the stagger is the whole effect — * simultaneous fades read as the page being slow rather than as motion. * * `both` holds the from-state through the delay, so nothing paints at full * opacity and then jumps back to start. The last element is in by ~0.62s: * renderHome runs on every visit to the tab, and an entrance you wait through * stops being an entrance. */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .home-logo, .home-title, .home-search, .home-quick, .home-foot { animation: fade-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .home-logo { animation-delay: 0s; } .home-title { animation-delay: 0.08s; } .home-search { animation-delay: 0.32s; } .home-quick { animation-delay: 0.40s; } .home-foot { animation-delay: 0.56s; } /* Every animation above is decorative — nothing in them carries information that is not also in the static layout, so switching them all off costs nothing. iris-open was previously unguarded and is covered here too. */ @media (prefers-reduced-motion: reduce) { .home-logo, .home-logo-eye, .home-logo-line, .home-logo-dot, .brand-mark-eye, .brand-mark-line, .brand-mark-dot, .home-title, .home-search, .home-quick, .home-foot { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } } /* --t-lead, not --t-d1. This is a label beside a 30px mark now, not a hero. */ .home-title { /* Grows with the mark. They are one lockup, and a mark enlarged on its own stops reading as a logo beside a name and starts reading as a logo with a caption: at 52px against 15px type the mark was three and a half times the words next to it. --t-d3 holds the ratio near two, which is where it was at 30 and 15. */ font-size: var(--t-d3); font-weight: 600; letter-spacing: -0.01em; line-height: 1; margin: 0; } /* One colour across the whole wordmark. * * "Terminal" was set in --ink-muted against --ink on "Optic", which reads as * two words in two voices rather than one name. It was inherited from the * topbar's `.brand-text span`, where the same two-tone treatment had the same * problem and where the wordmark is now hidden entirely. * * The weight stays lighter. That is the part of the original that was doing * real work: it separates the two words without breaking the name into two * colours. */ .home-title span { font-weight: 400; } /* The hovered bar's date, shown in the chart header only while scrubbing. Tabular figures so the row does not jitter as the digits change under the cursor — the whole point is to read it while moving, and a header that reflows on every bar is unreadable. */ .ws-ohlc-date { color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-right: var(--space-1); } .ws-ohlc { font-variant-numeric: tabular-nums; } /* The ticker box is the one thing to do on this page, so it gets real weight. */ .home-search { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } /* A layer of its own, above the blocks after it. The results list's z-index 80 only counts inside this form, because `.reveal`'s entrance leaves every revealed block a stacking context of its own (fill-mode both keeps the transform). The "Or jump to" chips and the Today card are revealed after this form, so they painted over its results list: ORCL's matches came out under SPY, QQQ and NVDA. */ .home-search { position: relative; z-index: 6; } .home-search input { flex: 1 1 240px; min-width: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); color: var(--ink); font: inherit; font-size: var(--t-heading); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-3) var(--space-4); } .home-search input::placeholder { color: var(--ink-muted); letter-spacing: 0.02em; text-transform: none; } .home-search input:focus { outline: none; border-color: var(--s1); } .home-search button { padding: var(--space-3) var(--space-6); font-size: var(--t-lead); border-radius: var(--r-lg); } .home-quick { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-7); } .home-quick .label { font-size: var(--t-small); color: var(--ink-muted); } .home-quick button { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--ink-2); font: inherit; font-size: var(--t-small); letter-spacing: 0.04em; padding: var(--space-1) var(--space-3); cursor: pointer; } .home-quick button:hover { color: var(--ink); border-color: var(--s1); } .home-foot { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); display: flex; gap: var(--space-2) var(--space-5); flex-wrap: wrap; font-size: var(--t-small); color: var(--ink-muted); } .home-foot .dot-sep { display: flex; align-items: center; gap: var(--space-2); } /* A button that reads as the footer's own text, because that is what it is: navigation to the control in Settings, at the footer's weight. Left as a bare