:root { color-scheme: light; --bg: #f5f5f7; --surface-solid: #ffffff; --surface-2: #f5f5f7; --surface-3: #e8e8ed; --text: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b; --line: #d2d2d7; --line-strong: #c6c6cb; --blue: #0066cc; --blue-hover: #0077ed; --blue-solid: #0071e3; --blue-solid-hover: #0077ed; --blue-soft: #e8f2ff; --green: #147735; --green-soft: #eaf7ee; --red: #c0302e; --red-soft: #fff0ef; /* Admin is maroon, not the red used for losses and for anything that removes something, so a person's role never reads as a warning about their account. It was a lighter crimson, which against a white tag came out pink. */ --crimson: #800020; /* A fourth role needs a fourth colour anybody can tell apart at tag size. Moderator sits between the maroon that runs the exchange and the blue that runs the market, and violet is the one hue on this palette that is neither and is not already saying something else: orange and yellow mean a warning here, and green and red mean money moving. */ /* How many companies a mover card holds, and how tall one of them is. The card reserves the two multiplied together, so it does not resize as the rows arrive. */ /* The second half of every tag colour. A tag stands on a 14 percent tint of its own colour, so the ground under the word moves toward the word as the word gets stronger, and about half a point of contrast disappears into it. The palette above was picked for text on a plain card, where that does not happen. These are the same colours held far enough from their own tint to stay readable at tag size on the lightest and the darkest card the site has. Where a colour was already clear enough, it is the same colour. */ --orange: #a25100; --orange-soft: #fff4e8; --yellow: #856200; --shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --radius-xs: 8px; --radius-sm: 12px; --radius: 18px; --radius-lg: 18px; /* A pill. Apple writes 980px rather than 999px, and it is the shape of every button they have: a capsule at any height, never a rounded rectangle. */ --radius-pill: 980px; /* How far anything floating keeps off the bottom of a small screen. This used to be the height of the bar along the bottom, because everything down there had to sit above the bar. There is no bar now, so the gutter is the same one the card at the top keeps. */ --float-inset: max(var(--island-side), env(safe-area-inset-bottom)); /* How much room the island at the foot of the window takes, published by the page as it is drawn, because its height depends on how long its words are and on the reader's text size. Nought when there is no island. Everything else that lives down there measures from the line below rather than from a number worked out by hand. */ --dock-height: 0px; /* What the cards at the top of the window actually take, measured and published rather than assumed, because the tape and a notice each change it. */ --top-height: 116px; --float-bottom: calc(var(--float-inset) + var(--dock-height)); /* How tall the panel somebody has open is, published by the page as it opens, so the things that share the foot of a phone screen with it can sit above it. Nought when nothing is open. */ --panel-height: 0px; /* A square mark keeps its corner in proportion, so a 32px badge and a 54px one read as the same shape rather than two different ones. */ --radius-mark: 28%; --radius-xl: 28px; --content: 1240px; /* The bar across the top. Apple's is 48. */ --header: 48px; /* The header floats. It is a card with a gap above it and a gutter each side, not a band welded to the top of the window, and the navigation, the tape and any notice travel inside it together. One set of numbers, written once, because everything pinned to a corner of the window has to agree with it: the panels that drop from its buttons, the columns that stay put while a page scrolls, and the bar along the bottom of a phone, which is the same card at the other end of the screen. --island-height is measured from the header itself as the page runs, because it changes when a notice appears. */ --island-top: 10px; --island-side: 10px; --island-x: max(var(--island-side), calc((100vw - var(--content)) / 2)); --island-height: 96px; /* How tall the card offering a tour is right now, measured by the page as it is drawn because the height depends on how long the words are and on the reader's text size. Nothing is showing until it is. */ --tour-height: 0px; --island-bottom: calc(var(--island-top) + var(--island-height)); --row: 48px; /* Apple's own curve. Everything that moves on their sites uses it, which is why a press, a panel and a page change all feel like the same hand did them. */ --ease: cubic-bezier(.28,.11,.32,1); --transition: 200ms var(--ease); --transition-slow: 400ms var(--ease); /* Spacing runs on a 4 point grid with 8 as the working step, the convention Apple's own layouts follow. Every padding, gap and margin picks a step from this list instead of a number that looked about right, which is what left some panels sitting a pixel or two off from the ones beside them. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --card-pad: var(--space-6); --gap: var(--space-5); /* The material, in three weights. The floating layer is the thinnest and the most blurred, because things that sit above the page have to show that the page is still there underneath. Panels - cards, tables, the boxes a page is built out of - are the heaviest, because figures read through a blur are harder to scan and scanning figures is the point here. Controls sit between the two. --ambience was a wash of colour behind the whole page - three radial gradients in blue and green - so that a card blurred into something with depth rather than into flat grey. Apple's pages have no such thing: the ground is one flat colour and the depth comes from the hairline and the shadow on the card itself. It is none now, and kept as a token rather than deleted because the layer it paints is what every panel blurs. */ --glass-panel: color-mix(in srgb, var(--surface-solid) 80%, transparent); --glass-panel-blur: saturate(165%) blur(18px); --ambience: none; --glass: color-mix(in srgb, var(--surface-solid) 72%, transparent); --glass-strong: color-mix(in srgb, var(--surface-solid) 86%, transparent); --glass-blur: saturate(180%) blur(22px); /* The header spans the whole width and stays there, so it is the one surface where the page really has to show through. It is thinner than the rest of the material and blurred harder, which is the trade Apple makes on a navigation bar: you can see that something is moving underneath without being able to read it. */ /* The bar has to stop what is under it being read, not merely soften it. At 56% a blue button and its label came through the tape legibly, so the exchange's own tickers and a control from the page underneath were two lines of text in the same pixels. Glass that you can read a second page through is not glass, it is a tint. */ --glass-bar: color-mix(in srgb, var(--bg) 86%, transparent); /* The seal is blue with a white tick, and stays blue with a white tick on either page. It is the one mark whose colours people already know from everywhere else, so it does not turn over with the theme the way the boxes below it do. */ --badge-blue: #0071e3; --badge-seal-knock: #ffffff; /* The page colour. Every badge in a coloured box knocks its shape out in this, so the shape reads as a hole punched through the box rather than as white ink sitting on a dark ground. The seal does not use it: it has its own, above. */ --badge-knock: #ffffff; /* One colour each, and the same one on either page, which is the point: a rank should not be a different red depending on the theme. Each is measured twice, against the box it sits in and against the page the box sits on. The old pair was a deep red for the light page and a pink-red for the dark one. Both read perfectly well as a box, so this is not a correction of a fault; it is one colour where there were two. The deep one would have failed had it been kept for both, at 2.48 against a dark page, which is why the single value is the brighter of the two. */ /* The two bug hunter tiers keep their real colours, and to do that they need a ground that does not turn over. They were on the same black-or-white box as the ranks, which meant every tone had to survive a white box, and no bright gold does: the gold this is meant to look like reads 1.30 against white. Held to that rule the gold came out mustard. The box is what was wrong, not the gold, so these two sit on a fixed dark ground the way the marks they are modelled on do, and the art is then free to be the colour it should. */ --badge-hunter-box: #2a2d33; /* Nothing on a light page: the box is already 12.7 against it. The dark page cannot say that, so it draws a rim instead. */ --badge-hunter-rim: #2a2d33; --badge-green: #a8e6c4; --badge-green-2: #34a853; --badge-hunter-gold: #ffd166; /* The bag, and the pale one of the pair. The first tier has its light tone on the hoop and its saturated tone on the bag; the second turns that round, which is what makes the two read as a pair rather than as the same picture twice. */ --badge-hunter-gold-2: #fdf2da; /* The foot of the bag. It fades from the tone above to this one, which is what stops the bag reading as a flat shape sitting behind the hoop. */ --badge-hunter-gold-3: #f3d295; /* The shine on the hoop, which only the second tier carries. White rather than a lighter gold: it is light on the thing, not a third colour of it. */ --badge-hunter-shine: #ffffff; --badge-red: #dc1f3f; --badge-gold: #a76a00; /* The moderating box is not a hue. It is the reverse of the page, so it is black while the page is light and white while it is dark, and the wrench is the page showing through it. */ --badge-steel: #0b0b0d; --glass-bar-blur: saturate(200%) blur(36px); /* Light catching the top edge and a darker lip along the bottom. Without these a translucent panel reads as fog; with them it reads as a pane of something. */ --glass-rim: inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 6%, transparent); --glass-shadow: 0 12px 40px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06); /* The same material at the size of a control. A panel is a sheet of glass you look through; a button is a lozenge of it you press, so it is a little denser, blurred a little less, and lit along its top edge rather than shadowed all round. Tinted controls keep their colour and take the same treatment, which is what makes a blue button and a grey one read as the same object in two shades. */ --glass-control: color-mix(in srgb, var(--surface-solid) 64%, transparent); --glass-control-raised: color-mix(in srgb, var(--surface-solid) 84%, transparent); --glass-control-blur: saturate(180%) blur(14px); --glass-control-rim: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 7%, transparent); --glass-tint-strength: 92%; /* The wash behind anything that takes over the screen. One value, so a search overlay and a confirmation do not dim and blur the page by different amounts. */ --scrim: rgba(0,0,0,.28); --scrim-blur: saturate(140%) blur(14px); /* One type scale for the whole site, the way a document has one. Every heading, label, figure and caption picks a step from this list. Nothing on the site names a size of its own, which is what let panels drift into looking heavier than one another - and it is also what makes the text size control work: the whole scale is multiplied by one number, so asking for larger text moves everything together instead of moving nothing. Text that has to fit inside a box of a fixed size - a company's mark, the direction glyphs on the tape, the labels along a chart's axis - is sized in plain pixels where it is used, and says so, because growing it would push it out of the box it exists to fill. */ --type-scale: 1; --text-hero: calc(52px * var(--type-scale)); --text-title: calc(40px * var(--type-scale)); --text-section: calc(24px * var(--type-scale)); --text-card: calc(19px * var(--type-scale)); --text-sub: calc(15px * var(--type-scale)); --text-body: calc(17px * var(--type-scale)); --text-label: calc(15px * var(--type-scale)); --text-small: calc(14px * var(--type-scale)); --text-caption: calc(12px * var(--type-scale)); /* The smallest step never goes below eleven pixels, whatever the scale is set to. Smaller than that is not small text, it is text somebody cannot read. */ --text-micro: max(11px, calc(11px * var(--type-scale))); --text-figure: calc(21px * var(--type-scale)); --text-figure-lg: calc(34px * var(--type-scale)); --tracking-tight: -.03em; --tracking-snug: -.02em; /* Form and toolbar controls share two sizes so a select never sits a few pixels taller than the input beside it. */ /* ----- Layers ------------------------------------------------------------------------ What sits on top of what, declared once, in the order it stacks. There were sixteen hand written numbers running from -1 to 9999 and nothing anywhere saying which of them should win, so every new floating thing was a guess against fifteen others. Read this list from the top of the page down and it is the order you see: the ground, then the page, then the chrome, then everything that opens over it, then the label you point at, then the link a keyboard reaches first. Nothing sets a raw number. */ --layer-ground: -1; --layer-raised: 1; --layer-sticky: 5; --layer-header: 10; --layer-dock: 20; --layer-popover: 30; --layer-search: 40; --layer-drawer: 50; --layer-modal: 60; --layer-toast: 70; --layer-tour: 80; --layer-menu: 90; --layer-tip: 100; --layer-skip: 110; --control-height: 44px; --control-height-compact: 36px; --control-height-inline: 36px; --control-pad: 0 12px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #000000; --surface-solid: #1d1d1f; --surface-2: #2a2a2c; --surface-3: #333336; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #86868b; --line: #424245; --line-strong: #545457; --blue: #2997ff; --blue-hover: #57aaff; --blue-solid: #0071e3; --blue-solid-hover: #0077ed; --blue-soft: #102842; --green: #32d74b; --green-soft: #12351b; --red: #ff6960; --red-soft: #421b1a; /* As near maroon as a dark page allows. A colour has to be light to be legible against black, so this cannot be the maroon the light theme uses - it is the darkest, least pink red that still stands off the page at the contrast everything here is held to. */ --crimson: #e0707f; /* Lifted away from their own tint rather than pushed into it: on a dark page the tint darkens the ground, so a tag colour has to be lighter here, not deeper. Green and yellow are already far enough clear of it to be left alone. */ --orange: #ff9f0a; --orange-soft: #442b0d; --yellow: #ffd60a; --shadow: 0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --glass-panel: color-mix(in srgb, var(--surface-solid) 74%, transparent); --ambience: none; --glass: color-mix(in srgb, var(--surface-solid) 66%, transparent); --glass-strong: color-mix(in srgb, var(--surface-solid) 82%, transparent); --glass-bar: color-mix(in srgb, var(--bg) 82%, transparent); /* Blue disc, white tick, exactly as on the light page. */ --badge-blue: #0071e3; --badge-seal-knock: #ffffff; --badge-knock: #090a0c; /* The hunter box and its art are the same on either page, and stay that way. Inverting the tile to light on a dark page was tried and taken back out: the art is built for a dark ground - that is why the gold is bright - so a light tile forces the gold to go deep or disappear, and it did both in turn. The mark keeps the colours it has always had. Only the rim appears here: the box is 1.44 against a dark ground, which is not enough to find it by, so the boundary does that work instead. */ --badge-hunter-rim: #6b6d70; --badge-red: #dc1f3f; --badge-gold: #a76a00; --badge-steel: #f2f3f5; --glass-rim: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 26%, transparent); --glass-shadow: 0 14px 44px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --glass-control: color-mix(in srgb, var(--surface-solid) 58%, transparent); --glass-control-raised: color-mix(in srgb, var(--surface-solid) 80%, transparent); --glass-control-rim: inset 0 1px 0 color-mix(in srgb, #fff 13%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 28%, transparent); --glass-tint-strength: 92%; --scrim: rgba(0,0,0,.46); } /* Text and spacing together, which is what the control in Settings is called and what it has to do. Spacing was the only half that ever worked: the type scale was a list of fixed pixel sizes, so asking for larger text moved the padding and left every word on the site exactly the size it already was. */ :root[data-density="compact"] { --row: 40px; --card-pad: var(--space-4); --gap: var(--space-3); --type-scale: .92; } :root[data-density="large"] { --row: 56px; --card-pad: var(--space-8); --gap: var(--space-6); --type-scale: 1.14; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin:0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; font-size: var(--text-body); line-height: 1.45; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; } /* The ground behind everything. Fixed, so it does not travel with the scroll. It carries --ambience, which is now flat: Apple's pages put one colour behind the content and let the card's own edge do the separating. */ body::before { content: ''; position: fixed; inset: 0; z-index: var(--layer-ground); background: var(--ambience); pointer-events: none; } /* Browser defaults put paragraph and list spacing on the font size, which lands on values like 15px that sit off the grid. Everything is put back on the scale here. */ p { margin: 0 0 var(--space-3); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); } ul:last-child, ol:last-child { margin-bottom: 0; } h1, h2, h3, h4 { margin: 0 0 var(--space-2); } button, input, select, textarea { font: inherit; color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } button { cursor: pointer; } /* One icon, drawn one way. * * Every symbol on the site is a line drawing on a 24 unit grid, and they were each given * their own weight and their own corners as they were written: nine stroke widths between * 1.8 and 2.2, some with round ends and some with square, some rounding their joins and * some not. Two of them sit beside each other above the Markets table, so the difference * was on screen at the same time. * * The weight, the ends and the joins are set once here and nothing overrides them. A rule * further down says how big a symbol is and what colour it takes, which is what actually * varies between one place and another. */ svg { display: block; } .icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* The two beads are drawn in index.html without the class, so they are named here rather than given a weight of their own. They used to carry 2.1, which is why the arrow that folds the places away looked heavier than every other symbol beside it. */ .guide-bead svg { stroke-width: 1.7; } [hidden] { display: none !important; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding:0 !important; margin:-2px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: var(--layer-skip); background: var(--text); color: var(--bg); border-radius: var(--radius-sm); padding:12px 16px; transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 58%, transparent); outline-offset: 2px; } /* Everything that floats above the page shares one material: a wash of the surface colour over a blur, a bright hairline along the top edge to catch the light, and a soft shadow underneath. Content surfaces are deliberately left solid. Two weights, and only two. A menu that sits beside the control that opened it is the lighter one, because you glance at it. Anything you read or type inside is the heavier one, because a paragraph over moving prices is not readable. Each surface picks a weight; none of them invents its own recipe. */ .popover, .modal, .guide-drawer, .search-panel, .walkthrough-card, .toast { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .popover, .modal, .guide-drawer { background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--glass-shadow), var(--glass-rim); } /* Controls are made of the same glass as the surfaces above, at the size of a thing you press. Every button on the site was flat paint before this: the bar along the bottom of a phone was glass but the six buttons inside it were not, and the same was true of the header on a desktop. The material is applied by what a control is, not by where it happens to sit, so a button reads the same on a card, on a bar and over a chart. */ .icon-button, .account-button, .quiet-button, .secondary-button, .chip, .segmented, .globalnav-links a, .select-field, .toggle, .admin-nav button, .tabs button, .guide-send, th button, .popover-menu button, .popover-menu a { backdrop-filter: var(--glass-control-blur); -webkit-backdrop-filter: var(--glass-control-blur); box-shadow: var(--glass-control-rim); } /* A control that carries no weight of its own stays clear until it is pointed at, so a row of them does not read as a row of pills competing with the page. */ .secondary-button, .chip, .account-button { font-size: var(--text-small); font-weight: 600; gap: var(--space-2); white-space: nowrap; } /* The name in the corner is the one thing on that list with a length it cannot choose, so it is the one that gets capped, and the cap sits on the name rather than on the button around it. It used to sit on every control on the list, which cut "Open or close the market" off mid word and left a row of buttons in the Admin panel each missing its last letter. A label is written to fit; a name is not. */ .account-button-name { max-width: 168px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .secondary-button:hover, .chip:hover, .account-button:hover, .icon-button:hover, .quiet-button:hover { background: var(--glass-control-raised); } /* Tinted glass. The colour is kept and the material is added under it, rather than the colour being replaced by a wash, so a primary action still reads as the primary action. */ .primary-button, .danger-button { backdrop-filter: var(--glass-control-blur); -webkit-backdrop-filter: var(--glass-control-blur); box-shadow: var(--glass-control-rim); } /* Glass belongs to a surface, not to everything standing on one. A control inside a panel is blurring what the panel already blurred, which flattens the material instead of deepening it, and costs a compositing layer for each one. The panel keeps the blur; everything on it keeps its tint. */ .topbar .icon-button, .topbar .account-button, .popover .popover-menu button, .popover .popover-menu a, .menu-panel .menu-item, .modal .segmented, .guide-drawer .icon-button, .card .icon-button, .card .quiet-button, .card .secondary-button, .card .chip, .card .segmented, .card .select-field, .card .toggle, .card .tabs button, .admin-nav button, .empty .primary-button, .empty .secondary-button { backdrop-filter: none; -webkit-backdrop-filter: none; } @supports not (backdrop-filter: blur(1px)) { /* Without a blur the wash would read as a smear, so those surfaces stay solid. */ .globalnav, .market-strip, .popover, .modal, .guide-drawer, .search-panel, .walkthrough-card, .toast { background: var(--surface-solid); } .card, .admin-nav, .empty, .footer-inner { background: var(--surface-solid); } .metric { background: var(--surface-solid); } .topbar { background: transparent; } body::before { display: none; } .secondary-button, .chip, .account-button { background: var(--surface-2); } .globalnav-links a[aria-current="page"], .tabs button.active, .admin-nav button.on { background: var(--surface-2); } .toggle { background: var(--surface-3); } .primary-button { background: var(--blue-solid); } } /* Someone who has asked their system to cut down on transparency gets solid surfaces. The header is the one place on the site where text sits over moving content, so this is the setting that matters most here. */ :root[data-reduce-transparency="true"] .card, :root[data-reduce-transparency="true"] .footer-inner, :root[data-reduce-transparency="true"] .metric, :root[data-reduce-transparency="true"] .admin-nav, :root[data-reduce-transparency="true"] .empty, :root[data-reduce-transparency="true"] .globalnav, :root[data-reduce-transparency="true"] .popover, :root[data-reduce-transparency="true"] .modal, :root[data-reduce-transparency="true"] .guide-drawer, :root[data-reduce-transparency="true"] .search-panel, :root[data-reduce-transparency="true"] .toast, :root[data-reduce-transparency="true"] .walkthrough-card, :root[data-reduce-transparency="true"] .market-strip { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-reduce-transparency="true"] .topbar { background: transparent; } :root[data-reduce-transparency="true"] body::before { display: none; } :root[data-reduce-transparency="true"] .icon-button, :root[data-reduce-transparency="true"] .account-button, :root[data-reduce-transparency="true"] .quiet-button, :root[data-reduce-transparency="true"] .secondary-button, :root[data-reduce-transparency="true"] .chip, :root[data-reduce-transparency="true"] .segmented, :root[data-reduce-transparency="true"] .primary-button, :root[data-reduce-transparency="true"] .danger-button, :root[data-reduce-transparency="true"] .select-field, :root[data-reduce-transparency="true"] .toggle, :root[data-reduce-transparency="true"] .tabs button, :root[data-reduce-transparency="true"] .guide-send, :root[data-reduce-transparency="true"] th button { backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-reduce-transparency="true"] .secondary-button, :root[data-reduce-transparency="true"] .chip, :root[data-reduce-transparency="true"] .account-button { background: var(--surface-2); } :root[data-reduce-transparency="true"] .toggle { background: var(--surface-3); } :root[data-reduce-transparency="true"] .primary-button { background: var(--blue-solid); } :root[data-reduce-transparency="true"] .overlay, :root[data-reduce-transparency="true"] .modal-root:not(:empty) { backdrop-filter: none; -webkit-backdrop-filter: none; } /* The bar across the top of every page. * * Flush to the window's edges, its own full width, translucent over whatever is behind it * - which is how apple.com opens every page it has. It was three rounded cards floating in * a gutter, with a fade drawn above them to dissolve the content passing underneath: a * different idea of a header entirely, and one that costs the top forty pixels of the * window to a margin. */ .topbar { position: sticky; top: 0; z-index: var(--layer-header); background: transparent; display: grid; /* One column that is allowed to be narrower than what is inside it. As a plain auto track the tape's full length counted toward the column's width, and on a phone the header came out twelve hundred pixels wide and took the whole page sideways with it. */ grid-template-columns: minmax(0, 1fr); } .globalnav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); min-height: var(--header); padding: 0 var(--space-5); background: var(--glass-bar); backdrop-filter: var(--glass-bar-blur); -webkit-backdrop-filter: var(--glass-bar-blur); border-bottom: 1px solid var(--line); } /* The places, spread across the middle. Apple's are 12px, weight 400, and dimmed until the pointer is on them, which is what keeps a bar this full from shouting. */ .globalnav-links { display: flex; align-items: center; justify-content: center; gap: var(--space-6); min-width: 0; overflow-x: auto; scrollbar-width: none; } .globalnav-links::-webkit-scrollbar { display: none; } .globalnav-links a { flex: 0 0 auto; color: var(--text); opacity: .82; font-size: var(--text-caption); font-weight: 400; letter-spacing: 0; text-decoration: none; white-space: nowrap; padding: 4px 0; transition: opacity var(--transition); } .globalnav-links a:hover { opacity: 1; } .globalnav-links a[aria-current="page"] { opacity: 1; font-weight: 600; } /* One or the other, never both: the row of places on a wide window, the button that holds them on a narrow one. Letting the row scroll instead left it sitting half way along, showing "Leaderboard" and half of "Listings" with the mark pushed off the front. */ .globalnav-menu { display: none; } @media (max-width: 900px) { .globalnav-links { display: none; } .globalnav-menu { display: inline-flex; } .globalnav { grid-template-columns: auto minmax(0, 1fr); } } /* The tape and a notice, each a band of its own under the bar, flush like it. Written out one at a time rather than grouped, because the contract check reads each band's own rule to see that it takes the shared material rather than inventing one. */ .market-strip { position: relative; width: 100%; background: var(--glass-bar); backdrop-filter: var(--glass-bar-blur); -webkit-backdrop-filter: var(--glass-bar-blur); border-bottom: 1px solid var(--line); } .site-banner { position: relative; width: 100%; background: var(--glass-bar); backdrop-filter: var(--glass-bar-blur); -webkit-backdrop-filter: var(--glass-bar-blur); border-bottom: 1px solid var(--line); } /* The mark and the name, at the weight a bar of 12px links can carry without one of them shouting. It inherited the page's body size, which at 17px made the name half again as big as every place beside it. */ .brand { display: inline-flex; align-items: center; gap:10px; font-size: var(--text-label); font-weight: 620; white-space: nowrap; min-height: 24px; text-decoration: none; color: var(--text); } /* The exchange's mark. * * A rising line inside a filled disc, standing where Apple stands their own mark: first * thing on the bar, the same size as the words beside it, and no colour of its own. The * disc takes the text colour and the line is cut out of it, so it is a black disc with a * white line on a light page and a white disc with a black line on a dark one, inverting * with the page rather than being drawn twice. It was the letters SE. */ .brand-mark { flex: 0 0 auto; width: 22px; height: 22px; display: inline-grid; place-items: center; } .brand-mark svg { width: 22px; height: 22px; display: block; } .brand-disc { fill: var(--text); } .brand-line, .brand-tip { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .brand-name { letter-spacing: -.025em; } /* Where the links do not fit, the row scrolls and fades like every other row on the site that runs out of room, rather than pushing the page wider than the window. */ /* The island at the foot of the window. The same card as the one at the top: the same glass, the same blur, the same corner and the same gutter from the edge of the screen. That one carries who you are and what the market is doing; this one carries where you can go, which is the other half of the chrome and does not belong in the same card as the tape. It tucks itself away downward as you read toward the page and comes back the moment you turn around, so a long page is never read past it and it is never more than one small movement away. Same shape, same place, at every width. */ /* Guide keeps the bottom right corner. * * This whole region used to be the island: a bead above a pill of places, pinned to the * foot of the window, folding away as you read and coming back as you turned around. The * places are in the bar across the top now, which is where an Apple page keeps them, so * the island had nothing left to carry. Guide is the one thing that stays down here, * because a panel that answers questions belongs by the thumb rather than in a navigation * bar - which is where a support page puts it too. */ .top-actions { display: flex; align-items: center; gap:8px; } .icon-button, .account-button, .quiet-button, .primary-button, .secondary-button, .danger-button, .segmented button, .chip { border: 0; border-radius: var(--radius-pill); transition: background var(--transition), transform var(--transition), opacity var(--transition), color var(--transition), border-color var(--transition); } .icon-button { position: relative; width: var(--control-height-compact); height: var(--control-height-compact); display: grid; place-items: center; background: transparent; /* It holds a symbol rather than a word, but it still says what size its words are. Left to inherit, it took the size of whatever it was standing in. */ font-size: var(--text-small); font-weight: 600; } .icon-button:hover { background: var(--surface-2); } /* One answer to a press, for everything that takes one. A control gives a little under the finger and comes back, which is the whole of the animation: enough to feel answered, short enough that it never delays what you asked for. */ .icon-button:active, .account-button:active, .quiet-button:active, .primary-button:active, .secondary-button:active, .danger-button:active, .segmented button:active, .chip:active, .menu-item:active { transform: scale(.965); } :root[data-reduce-motion="true"] .icon-button:active, :root[data-reduce-motion="true"] .primary-button:active, :root[data-reduce-motion="true"] .secondary-button:active{ transform: none; } .icon-button svg { width: 18px; height: 18px; } .account-button, .quiet-button { display: inline-flex; align-items: center; height: var(--control-height-inline); padding: 0 var(--space-3); background: transparent; } .account-button:hover, .quiet-button:hover { background: var(--surface-2); } .account-button { background: var(--surface-2); font-size: var(--text-small); font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Market status board. The status stays pinned on the left the way an exchange board does, and only the tape to its right scrolls. */ .market-strip { display: flex; align-items: stretch; min-height: 40px; font-size: var(--text-caption); color: var(--text-2); /* clip, not hidden. A box with overflow hidden is still a scroll container: nothing can scroll it by hand, but scrollIntoView on anything inside it will, and then the tape sits permanently off to one side of its own box with no way back. clip is the same picture with no scrolling behind it. */ overflow: clip; contain: content; } .strip-status-fixed { display: flex; align-items: center; gap:12px; flex: 0 0 auto; padding: 0 16px 0 24px; border-right: 1px solid var(--line); background: transparent; white-space: nowrap; z-index: var(--layer-raised); } .strip-session { color: var(--text-3); font-size: var(--text-caption); } .strip-index strong { color: var(--blue); font-weight: 700; } .strip-tape { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; /* A real scroller rather than a clipped box, so the tape can be dragged, flicked, wheeled and tabbed through - and so the auto-run and the person moving it are moving the same thing rather than fighting over two. */ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; cursor: grab; /* No fade at the ends. It reached 56 pixels in on one side and 64 on the other, which is not a fade anybody reads as deliberate: at the left it began behind the status pill so the first symbol arrived already half gone, and at the right it dimmed a price you were still trying to read. The card's own rounded edge cuts the tape cleanly, which is what a ticker board does. */ } /* Centred, not sat on a baseline. Every part of an item is the same size, so the baseline and the centre agree about where the text goes - but a baseline stacks the line box at the top of the item and puts all of the spare height underneath it, so the whole tape was riding three pixels above the middle of the card it sits in. */ .strip-item { display: inline-flex; gap:8px; align-items: center; min-height: 24px; font-variant-numeric: tabular-nums; padding:0 2px; transition: opacity var(--transition); /* Every part of an item is one line. A tape item is a flex row, so each part lays out as its own block and breaks where it likes: giving the change a width to hold put the direction arrow on one line and the figure on the next, and the whole tape read as two rows of stacked fragments. */ white-space: nowrap; } a.strip-item:hover { opacity: .62; } .strip-item strong { color: var(--text); font-weight: 650; letter-spacing: .01em; } /* Room for the number rather than room for today's number. A price crossing a hundred gains a digit, and every symbol to the right of it on the tape shifted along by the width of that digit while somebody was reading it - twice, because the tape carries two copies of itself. Held at the width of the widest ordinary price, a tick changes the digits and nothing moves. Right-aligned, so the ones column stays in one place. */ /* Left, not right. Holding the width is what stops the tape shifting under a reader; where the spare width sits inside it is a separate question, and putting it in front of the figure pushed every percentage away from the price it belongs to and left a hole between them. Held on the left, the spare falls after the figure, where it joins the gap to the next company and reads as the space between two things rather than a gap inside one. */ .strip-item [data-strip-price] { min-width: 7.4ch; text-align: left; } .strip-item [data-strip-change] { min-width: 9.6ch; text-align: left; } .strip-change { font-weight: 600; } /* Direction is shown with a shape as well as colour, so it reads without colour vision. */ /* Sized to the box it sits in rather than to the type scale. These are shapes filling a space, and growing them along with the text pushes them out of it. All three states carry one, including flat, and all three are the same width. Flat had no shape at all, so the first move of the session grew every item on the tape by the width of an arrow and shunted every symbol to the right of it along - twice over, since the tape carries two copies of itself. A dash is also the honest thing to show: it says unchanged, rather than leaving somebody to work out that no shape means no move. */ .strip-change::before { content: "\2013"; font-size: 8px; margin-right:4px; vertical-align: 1px; display: inline-block; width: 8px; text-align: center; } .strip-change.up::before { content: "\25B2"; } .strip-change.down::before { content: "\25BC"; } .strip-status { display: inline-flex; align-items: center; gap:8px; padding:4px 12px; border-radius: var(--radius-pill); font-size: var(--text-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .strip-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-open { background: var(--green-soft); color: var(--green); } .status-closed { background: var(--surface-3); color: var(--text-2); } .status-preopen { background: var(--blue-soft); color: var(--blue); } .status-halted { background: var(--red-soft); color: var(--red); } .up { color: var(--green) !important; font-variant-numeric: tabular-nums; } .down { color: var(--red) !important; font-variant-numeric: tabular-nums; } .neutral { color: var(--text-2) !important; font-variant-numeric: tabular-nums; } /* A whole window, whatever the page holds. This used to leave a hundred and ninety pixels for the header and the footer, which is ten more than the two of them take, so the foot of the page finished just inside the window on a short page and just outside it on a long one. Loading a short page therefore ended with the footer rising into view, and that is movement under somebody reading. Filling the window means the footer sits below the fold on every page and in every state, so it never arrives and never leaves. */ #main { min-height: 100vh; } /* Room kept for a page that has not arrived yet. * * The height above is what a short page needs for the footer to land neatly at the bottom * of the window. While the page is still being built there is no page, so on a phone the * footer sat inside the window and was then pushed out of it the moment the content * appeared. Every page on a phone moved by 0.091 as it loaded and the company page by * 0.101, which is past the point where a shift counts against a site. Filling the window * until there is something to show puts the footer below the fold from the start, so * nothing a reader can see moves. */ /* One rhythm down the page. Sections used to set their own margins, so the distance between two blocks depended on which two they happened to be: on one page the gaps ran 32, 12 and 20 pixels. The page owns the spacing now and its sections do not add their own, so every page reads at the same pace. */ /* A page sits inside the same edges as the cards at the top of the window. The header is a card of its own, so the cards under it have to start and finish on the same two lines or the whole column reads as slightly crooked. It used to be inset by its own padding, which put every card twenty four pixels inside the header above it. */ .page { width: 100%; max-width: calc(var(--content) + var(--island-side) * 2); margin: 0 auto; padding: var(--space-6) var(--island-side) var(--space-12); /* Room at the foot for the island, so the last row of a long page can be read and pressed rather than sitting underneath it. * * After the shorthand, not before it. Written above, the shorthand that follows set the * bottom padding back to 48 pixels and this never applied at all: the island is 98 tall * and floats 10 clear of the window, so a hundred pixels of the end of every long page * on this site was underneath it. */ padding-bottom: calc(var(--dock-height) + var(--space-4)); display: grid; align-content: start; gap: var(--space-6); } .page.narrow { max-width: calc(900px + var(--island-side) * 2); } /* A section heading belongs to what follows it, so it sits closer to that than to what came before. */ /* ----- Home ---------------------------------------------------------------------------- Two cards: the index, and one line about what to do next. The index figure takes the largest size on the site because it is the answer to the only question the page asks. Everything else here is the same card, the same buttons and the same chart the rest of the site is built from. */ .home-index { display: flex; flex-direction: column; gap: var(--space-5); } .home-index-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .home-index-value { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .home-index-value strong { font-size: var(--text-hero); font-weight: 680; letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .home-index-value span { font-size: var(--text-card); font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; } .home-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .home-next strong { display: block; font-size: var(--text-card); letter-spacing: var(--tracking-snug); font-weight: 650; font-variant-numeric: tabular-nums; } .home-next p { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--text-small); font-variant-numeric: tabular-nums; } .home-next-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* The card that says who the page is for. A stranger reads what the exchange is; somebody signed in reads what their account is worth. Same slot, same shape, so the page does not rearrange itself around who is looking at it. */ .home-welcome { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .home-welcome h1 { margin: 0; font-size: var(--text-section); letter-spacing: var(--tracking-snug); font-weight: 680; font-variant-numeric: tabular-nums; } .home-welcome p { margin: var(--space-1) 0 0; max-width: 60ch; color: var(--text-2); font-variant-numeric: tabular-nums; } /* ---- Markets ------------------------------------------------------------------------- A table whose rows are grids rather than table rows, because a table's columns are set by the widest cell anywhere in it and one forty character company name then pushed every price on the page sideways. The heading row and the rows under it share one set of column widths, declared once here, so they cannot drift apart. */ /* The name takes the room and the two figures sit together on the right, the same three columns at every width. There was a fourth, the sector, and it was the one that had to go on a tablet, so the table read three different ways depending on the screen. */ .market-card { --market-columns: minmax(0, 1fr) 7rem 7rem; } /* Watching from the list, for somebody signed in. A fourth track holds the button, and because the headings above read the same variable the three of them still sit over the three figures below. One grid, one variable, and nothing to keep in step by hand the next time a column moves. */ .market-card.market-watchable { --market-columns: minmax(0, 1fr) 7rem 7rem 6.5rem; } .market-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .market-head h1 { margin: 0; font-size: var(--text-section); letter-spacing: var(--tracking-snug); font-weight: 680; } .market-head p { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--text-small); } /* The box and the filters travel together, because they do the same job from two ends: one narrows the list by what a company is called, the other by what it is. */ .market-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .market-find { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2); width: 15rem; max-width: 100%; padding: 0 var(--space-4); height: var(--control-height); border-radius: var(--radius-pill); background: var(--glass-control); box-shadow: var(--glass-control-rim); } .market-find svg { width: 17px; height: 17px; color: var(--text-3); } .market-find input { border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--text-body); font-family: inherit; min-width: 0; } .market-find input::placeholder { color: var(--text-3); } .market-find:focus-within { outline: 3px solid color-mix(in srgb, var(--blue) 58%, transparent); outline-offset: 2px; } .market-filters svg { width: 17px; height: 17px; } /* How many filters are on, before you open the menu. A page can otherwise be quietly showing eight companies out of forty with nothing on screen saying why. */ /* The range the index chart is on, worn by the same Filters button. It is the shape of the count badge beside it because it answers the same question - what is this control doing without opening it - but it is a word rather than a number, so it says so in its name. */ .market-filter-count, .range-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: -2px; border-radius: var(--radius-pill); background: var(--blue-solid); color: #fff; font-size: var(--text-micro); font-weight: 700; font-variant-numeric: tabular-nums; } .range-badge { letter-spacing: .02em; } .market-table { margin-top: var(--space-5); } /* One heading a column, each one the control that sorts by it. They were three one word buttons in a row above the list, which is a sort control that does not look like one and has room for exactly three answers. */ /* The same padding as the rows below it, so the two share one set of column edges. They had different padding and their own on top of that, which put every heading between 8 and 24 pixels to the right of the figures it was heading. */ .market-columns { display: grid; grid-template-columns: var(--market-columns); align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border-bottom: 1px solid var(--line-strong); } .market-column { display: flex; align-items: center; gap: var(--space-1); min-height: var(--control-height-compact); /* No padding of its own: the button is the column, so its text sits exactly where the figures under it sit and its hover covers the column rather than part of it. */ padding: 0; border: 0; background: transparent; color: var(--text-3); font-size: var(--text-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: var(--radius-xs); transition: color var(--transition), background var(--transition); } .market-column:hover { color: var(--text); background: var(--surface-2); } .market-column.sorted { color: var(--text); } /* The two figures are read against one another down the page, so their headings sit over the right hand edge their figures line up on. */ .market-column:nth-child(2), .market-column:nth-child(3) { justify-content: flex-end; } .market-arrow { font-size: var(--text-small); line-height: 1; } .market-rows { display: grid; } .market-row { display: grid; grid-template-columns: var(--market-columns); align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border-top: 1px solid var(--line); color: var(--text); border-radius: var(--radius-xs); transition: background var(--transition); } .market-rows > .market-row:first-child { border-top: 0; } a.market-row:hover { background: var(--surface-2); } .market-name { display: grid; min-width: 0; } /* Both lines have a line height of their own, so every row comes out the same height whichever letters are in it. Left to the font, a row of tall letters and a row of short ones differed by a pixel, which is not visible on its own and is visible down a column of forty. */ .market-name strong { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body); line-height: 1.35; font-weight: 650; letter-spacing: var(--tracking-snug); } .market-name > span { font-size: var(--text-small); line-height: 1.35; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Only on a company that is not simply trading. Thirty nine rows reading "Trading" is a column of one word, and the one row that is not gets lost in it. */ .market-status { flex: 0 0 auto; padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--orange-soft); color: var(--orange); font-size: var(--text-micro); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } /* The price and the change as one thing: two readings of the same company, which belong under one another on a narrow screen rather than either side of a name. */ .market-figures { display: contents; } .market-price { font-size: var(--text-body); line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .market-change { font-size: var(--text-body); line-height: 1.35; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } /* The row used to be one link. It cannot be, now that it holds a button, so the link is the company's name and the stylesheet stretches it back over the whole row: the same place to press as before, and a link that still reads as the company rather than as the row it sits in. The button is lifted over that cover so it stays pressable. */ .market-row.market-watch { position: relative; } .market-row.market-watch:hover { background: var(--surface-2); } .market-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .market-watch-button { position: relative; width: 100%; } .market-card .empty { margin-top: var(--space-4); } /* ---- One trader ------------------------------------------------------------------------ Who somebody is in a card of its own, and what their account is doing beside it. The figure, the chart and the four ranges are the same ones the home and company cards use, so the half of this page that is about the market has been read twice already before anybody arrives here from the board. */ .profile-page { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } .profile-main { display: grid; gap: var(--space-6); min-width: 0; } .profile-card { display: grid; justify-items: center; text-align: center; gap: var(--space-4); } .profile-names { display: grid; min-width: 0; max-width: 100%; } /* The same size every other page heading on this site is set at. At the display size it was, an ordinary name broke onto two lines inside a card this narrow. */ .profile-names h1 { margin: 0; font-size: var(--text-section); font-weight: 680; letter-spacing: var(--tracking-tight); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; } .profile-handle { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--text-body); } /* Centred under the name rather than beside it. Beside a name that is centred, one badge pulls the name off centre and three pull it further, so the row of them is its own line and the name stays where it was put. */ .profile-marks { justify-content: center; } /* What is true about somebody, rather than what their account is worth. Read down rather than across, because a column of three short facts in a narrow card reads faster than three columns of one. */ .profile-facts { display: grid; gap: var(--space-3); margin: 0; width: 100%; } .profile-facts > div { display: grid; gap: 1px; } .profile-facts dt { font-size: var(--text-small); color: var(--text-2); } .profile-facts dd { margin: 0; font-size: var(--text-body); font-weight: 620; letter-spacing: var(--tracking-snug); } /* The same five columns the holdings table has anywhere else it appears. */ .market-card.profile-holdings { --market-columns: minmax(0, 1fr) 5rem 7rem 8rem 6rem; } .profile-holdings h2 { margin: 0; font-size: var(--text-section); letter-spacing: var(--tracking-snug); font-weight: 680; } .profile-holdings p { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--text-small); } .profile-shares { font-size: var(--text-body); line-height: 1.35; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .profile-holdings .market-column:not(:first-child) { justify-content: flex-end; } @media (max-width: 480px) { /* Shares and price go and the ticker, what it is worth and today's move stay, because those three are what somebody is reading a holding for. A heading and the cell under it are dropped together, or the row has more cells than it has columns to put them in. */ /* Sized to their contents rather than to a number. At a fixed 7rem and 5rem the two figures took 192 pixels of a 320 pixel screen and the Company heading was drawn 25 pixels past its own column. */ .market-card.profile-holdings { --market-columns: minmax(0, 1fr) auto auto; } .profile-holdings .market-row > :nth-child(4) { padding-left: var(--space-3); } .profile-holdings .market-column:nth-child(2), .profile-holdings .market-column:nth-child(3) { display: none; } .profile-row > :nth-child(2), .profile-row > :nth-child(3) { display: none; } .profile-card .avatar-large { width: 56px; height: 56px; font-size: var(--text-card); } .profile-names h1 { font-size: var(--text-section); } } @media (max-width: 900px) { /* One column under a certain width, because a 20rem card and a table beside it leaves the table too narrow to hold its own five columns. */ .profile-page { grid-template-columns: minmax(0, 1fr); } } /* ---- The board ------------------------------------------------------------------------- The same table, with two things in front of the figures rather than one: where somebody is, and who they are. Everything else it borrows, so a row here and a row on Markets are the same row with different contents. Written as two classes on purpose. The board is a market card too, so a single .leader-card is the same weight as the .market-card rules and loses to whichever of them is written later in this file: the phone rule below set the board back to two columns, and three things in two columns wrap. */ .market-card.leader-card { --market-columns: minmax(3.5rem, auto) minmax(0, 1fr) 8rem 7rem; } /* The place is a figure read down a column, so it is lined up like the figures are. */ .leader-place { font-size: var(--text-body); line-height: 1.35; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-2); } .leader-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .leader-names { display: grid; min-width: 0; } /* Beside the name, and beneath it when the row is too narrow for both. A phone with three badges on one row had nothing left for the name and printed "Dem...", so the badges drop to their own line rather than the name giving up its last few letters to them. */ .leader-names strong { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; row-gap: 2px; font-size: var(--text-body); line-height: 1.35; font-weight: 650; letter-spacing: var(--tracking-snug); min-width: 0; } /* The name gives way, and what somebody has earned does not. Written as one truncating line with the badges inside it, a narrow row spent its width on the name and cut the badges off the end: a moderator on a phone wore nothing at all. */ .leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* What somebody has earned, as one thing. Left as loose badges they wrapped one at a time, so a row could end with a seal beside the name and the other two on the line below it. */ .leader-marks { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; } .leader-handle { font-size: var(--text-small); line-height: 1.35; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leader-card .market-column:nth-child(1) { justify-content: flex-start; } .leader-card .market-column:nth-child(2) { justify-content: flex-start; } .leader-card .market-column:nth-child(3), .leader-card .market-column:nth-child(4) { justify-content: flex-end; } @media (max-width: 480px) { /* The figures stack against the right edge, and the place keeps its own column, because where somebody is on the board is the reason to be looking at it. The rank column takes whatever "Rank" and its arrow need rather than a number somebody guessed. At a fixed 2.25rem the heading ran into the one beside it and the two read as one word, and at the large text size it drew straight past its own edge. */ .market-card.leader-card { --market-columns: minmax(2.5rem, auto) minmax(0, 1fr) auto; } .leader-card .market-column:nth-child(4) { display: none; } .leader-who { gap: var(--space-2); } /* Scoped to the board rather than written as a bare .avatar, because the rule that sizes one is further down this file and a later rule of the same weight wins whatever media query it was written in. */ .leader-card .avatar { width: 32px; height: 32px; font-size: var(--text-small); } /* A phone leaves about 128 pixels for a name and its badges, which one badge misses by a pixel and three miss easily. Left to wrap on its own, some rows put the badges beside the name and some underneath, and a column of rows in two different shapes reads worse than a column all in one. Underneath, every row, at this width. */ .leader-marks { flex-basis: 100%; } } @media (max-width: 480px) { /* The figures stack against the right edge and the headings above them go with it, so the heading row stays exactly as wide as the rows it heads. */ /* The two figures stack against the right edge, and the heading over them goes with them, so nothing is dropped: the same three things are on a phone as on a desktop. */ .market-card { --market-columns: minmax(0, 1fr) auto; } /* The figures fold into one cell here, so the watchable row is a name, that cell, and the button: three things, and three tracks to put them in. The button's track is a fixed width rather than auto, and that is the whole point of it. The headings and the rows are two grids reading one variable, and an auto track sizes to whatever is in it: the heading row holds nothing over the button, the rows hold a button, so the two grids disagreed and the Price heading sat 89px right of the prices. Fixed, both grids put the same edge in the same place, which is all a right aligned figure needs. The button gives back the padding to pay for it. */ .market-card.market-watchable { --market-columns: minmax(0, 1fr) auto 5.5rem; } .market-watch-button { padding-left: var(--space-2); padding-right: var(--space-2); } .market-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .market-column:nth-child(3) { display: none; } /* The box and the filters share one line rather than taking two: they are the same job from two ends, and a phone has more use for the row than the layout does. */ .market-tools { width: 100%; flex-wrap: nowrap; } .market-find { flex: 1 1 auto; width: auto; min-width: 0; } .market-filters { flex: 0 0 auto; } /* The word goes and the symbol stays, because at this width the row is the label. It is hidden from sight and not from a screen reader, by the one rule on this site that does that, so the button is still called Filters to anybody who cannot see the symbol. */ .market-filters .market-filters-word { position: absolute; width: 1px; height: 1px; padding: 0; margin: -2px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .market-filters { padding: 0 var(--space-4); } } /* Whether the market is open, on the card about the market. The tape says so too, in a line that scrolls; this one holds still under the figure it applies to. */ .home-index-state { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-small); color: var(--text-2); } .state-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-3); flex: 0 0 auto; } .state-dot.status-open { background: var(--green); } .state-dot.status-preopen { background: var(--orange); } .state-dot.status-closed, .state-dot.status-halted { background: var(--red); } /* ---- One company --------------------------------------------------------------------- Three cards, in the order somebody reads them: what the price is, what to do about it, and the figures behind it. The first card is the home page's index card with a company in it rather than the exchange, on purpose: a company and the market it trades on are the same kind of thing to look at, so they are the same card to look at. The detail lives here rather than in the table, because a table has one row per company and forty rows of eight figures is a spreadsheet. A page has one company on it and all the room in the world. */ .company-quote { display: flex; flex-direction: column; gap: var(--space-5); } .company-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .company-title { min-width: 0; } .company-title h1 { margin: 0; font-size: var(--text-section); font-weight: 680; letter-spacing: var(--tracking-snug); line-height: 1.2; } .company-title p { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; } .company-ticker { font-size: var(--text-small); font-weight: 650; letter-spacing: .04em; color: var(--text-2); } /* The same figure and the same percentage beside it as the index, at the same sizes. The figure is the level and the percentage is the direction, so the figure takes no colour. */ .company-price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .company-price strong { font-size: var(--text-hero); font-weight: 680; letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .company-price span { font-size: var(--text-card); font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The ticket: buy or sell, how many, and go. One row on a desktop and a stack on a phone, with the two sentences under it saying what it would cost and what is already held. */ .company-trade { display: flex; flex-direction: column; gap: var(--space-4); } .ticket { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* The same glass pill as the box on Markets, because it is the same job: one thing typed into one control. A second treatment for a second box is two things to keep true. */ .ticket-amount { display: flex; align-items: center; flex: 1 1 8rem; min-width: 0; max-width: 12rem; padding: 0 var(--space-4); height: var(--control-height); border-radius: var(--radius-pill); background: var(--glass-control); box-shadow: var(--glass-control-rim); } .ticket-amount input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-family: inherit; font-size: var(--text-body); font-variant-numeric: tabular-nums; } .ticket-amount input::placeholder { color: var(--text-3); } .ticket-amount:focus-within { outline: 3px solid color-mix(in srgb, var(--blue) 58%, transparent); outline-offset: 2px; } .ticket-line, .ticket-position { margin: 0; font-size: var(--text-small); color: var(--text-2); font-variant-numeric: tabular-nums; } .ticket-position { color: var(--text-3); } .company-trade p:first-of-type { margin: 0; max-width: 60ch; color: var(--text-2); } /* The figures behind the price. Two columns of pairs on a desktop, one on a phone, each pair a word and a number rather than a sentence: eight short readings somebody can find one of without reading the other seven. */ .company-facts { display: flex; flex-direction: column; gap: var(--space-4); } /* Four, two, one. It was auto-fit, which gave a desktop eight columns and left the ninth figure alone on a row of its own: eight columns is a strip rather than a grid, and one orphan under it reads as something having gone wrong. Four across is two even rows. */ .fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin: 0; } .fact-grid > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .fact-grid dt { font-size: var(--text-small); color: var(--text-3); } /* A value wraps rather than being cut off. Sector is a word rather than a figure and an Admin writes it, so it is the one of the eight that can be longer than its column, and a sector clipped to "Consumer Discretio" is worse than one on two lines. break-word only breaks what cannot fit, so a price never breaks across its own comma. */ .fact-grid dd { margin: 0; font-size: var(--text-figure); font-weight: 650; letter-spacing: var(--tracking-snug); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .company-about { margin: 0; max-width: 70ch; color: var(--text-2); line-height: 1.55; } /* Watching, and being told. Two jobs in one card because they are the same job: keeping an eye on a company you do not hold. The two controls sit on one row and the alerts stack under them, so a card with no alerts on it is three lines tall rather than a heading over an empty box. The toggle is the one control on this site whose whole meaning is which of two states it is in, so the pressed state is drawn rather than only announced: filled in when it is on, the same weight as a chosen segment elsewhere. aria-pressed carries the same fact for a reader that cannot see the fill. */ .company-watch { display: flex; flex-direction: column; gap: var(--space-4); } .company-watch > p { margin: 0; max-width: 60ch; color: var(--text-2); } .watch-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .watch-toggle.active { background: var(--blue-solid); color: #fff; } .watch-toggle.active:hover { background: var(--blue-solid-hover); } /* One alert per line: what was asked for, when it last went off, and the way to remove it. The same two-line-plus-control shape a market row has, so the eye reads it the same way without the column widths a table needs. */ .watch-alerts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .watch-alerts > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-top: 1px solid var(--line); } .watch-alerts > li:first-child { border-top: 0; } .watch-alert-what { display: grid; min-width: 0; gap: var(--space-1); } /* Both lines carry money - "Goes above $150.00", "Last sent just now" - and figures on this site are set in tabular numerals wherever they stack, so a column of prices lines up on its decimal point instead of wandering. */ .watch-alert-what strong { font-size: var(--text-body); font-weight: 620; line-height: 1.35; letter-spacing: var(--tracking-snug); font-variant-numeric: tabular-nums; } .watch-alert-what .subtle { font-size: var(--text-small); line-height: 1.35; font-variant-numeric: tabular-nums; } /* A watched company is a market row with a Stop beside it. The row keeps the table's column widths by moving them onto the link, because the row itself now has two children rather than the two figures a market row has, and a button inside a link is neither valid nor clickable. */ .profile-watching .market-row.watch-row { grid-template-columns: minmax(0, 1fr) auto; padding-right: var(--space-1); } .watch-row-link { display: grid; grid-template-columns: var(--market-columns); align-items: center; gap: var(--space-2); min-width: 0; color: var(--text); padding: 0 var(--space-1); border-radius: var(--radius-xs); } .watch-row-link:hover .market-name strong { text-decoration: underline; text-underline-offset: 3px; } .profile-alerts { display: flex; flex-direction: column; gap: var(--space-4); } .profile-alerts > p { margin: 0; max-width: 60ch; color: var(--text-2); } .profile-alerts .watch-alert-what a { color: inherit; font-weight: 700; } /* Listing a company. Two fields across where two fields belong together - a name and its ticker, a price and a share count - and one across on a phone. The same shape the panel's dials take, under a name that is not about the panel, because this one is a page anybody can open. */ .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } /* A number and the word it counts, sized to what each holds rather than to half the sheet. */ .suspend-long { grid-template-columns: 7rem minmax(0, 1fr); align-items: center; } .suspend-note { margin-top: var(--space-2); font-size: var(--text-caption); } .listing-form { display: grid; gap: var(--space-4); } .listing-actions { display: flex; justify-content: flex-start; } /* The page gap, the same one .page uses, so these two sit in the site's rhythm rather than two thirds of it. */ .listings-page { display: grid; gap: var(--space-6); } /* The one heading on each of these pages. Without this they fall through to the browser's own 2em, which is not a step on the scale and moves with the density setting into three sizes the scale does not contain - the drift design-check names. Every other page heading on the site is this size, this weight and this tracking, so they are written once here rather than once per page. */ .listings-page h1, .guide-page h1, .news-top h1 { margin: 0 0 var(--space-3); font-size: var(--text-section); font-weight: 680; letter-spacing: var(--tracking-snug); } .listing-rows { display: grid; } .listing-row { padding: var(--space-4) 0; border-top: 1px solid var(--line); } .listing-rows > .listing-row:first-child { border-top: 0; padding-top: 0; } .listing-row-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .listing-row-head strong { font-size: var(--text-body); font-weight: 700; letter-spacing: var(--tracking-snug); font-variant-numeric: tabular-nums; } /* Wider than the panel's, because this one carries "Asking" and "Said" rather than the panel's four-letter words, and 56px cuts both of them in half. */ .listing-row .admin-was { grid-template-columns: 72px minmax(0, 1fr); } .listing-landed { margin: 0; } /* Orders. One per line: what was asked for, how far through it is, and the way to take it back. The same shape the alerts list takes, because it is the same reading job - a sentence and a control - and two shapes for one job is one too many. */ .company-orders, .profile-orders { display: flex; flex-direction: column; gap: var(--space-4); } .company-orders > p, .profile-orders > p { margin: 0; max-width: 60ch; color: var(--text-2); } .order-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .order-rows > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-top: 1px solid var(--line); } .order-rows > li:first-child { border-top: 0; } .order-what { display: grid; min-width: 0; gap: var(--space-1); } /* Same rule, and the one that caught this: "Buy 2 shares at $54.00" is a figure in a stacked list and was drawn in proportional numerals, so the prices down the card did not line up with each other. */ .order-what strong { font-size: var(--text-body); font-weight: 620; line-height: 1.35; letter-spacing: var(--tracking-snug); font-variant-numeric: tabular-nums; } .order-what strong a { color: inherit; font-weight: 700; } .order-what .subtle { font-size: var(--text-small); line-height: 1.35; font-variant-numeric: tabular-nums; } /* The state and the control travel together, so the column of pills stays a column. */ .order-end { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; } /* The price a limit order names. Same pill as the shares box beside it, narrower, and it is only on the page for the kind of order that needs one. */ .ticket-limit { max-width: 10rem; } /* News. Each item is a heading, who it is about, what happened and when - read down the page rather than scanned across a table, which is why it is not one. */ .news-page > .card { display: flex; flex-direction: column; gap: var(--space-5); } .news-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .news-top p { margin: 0; max-width: 62ch; } .news-items { display: grid; gap: 0; } .news-item { padding: var(--space-5) 0; border-top: 1px solid var(--line); } .news-items > .news-item:first-child { border-top: 0; padding-top: 0; } .news-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .news-head h3 { margin: 0; font-size: var(--text-card); font-weight: 680; letter-spacing: var(--tracking-snug); line-height: 1.3; font-variant-numeric: tabular-nums; } .news-marks { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 0 0 auto; } .news-marks a.admin-tag { text-decoration: none; } .news-marks a.admin-tag:hover { background: var(--surface-3); } .news-item > p { margin: var(--space-3) 0 0; max-width: 68ch; color: var(--text-2); line-height: 1.55; font-variant-numeric: tabular-nums; } .news-when { margin-top: var(--space-2); font-size: var(--text-small); } /* On a company's page the same items sit inside a card, so the card's own padding is the gutter and the list does not add a second one. */ .company-news { display: flex; flex-direction: column; gap: var(--space-4); } .company-news > p { margin: 0; max-width: 60ch; color: var(--text-2); } .company-news .news-item { padding: var(--space-4) 0; } .company-news-more { margin: 0; font-size: var(--text-small); } /* The Guide's own page: fifteen things it can explain, each a press away from being asked. A whole row is the control, because the question is the thing being pressed. */ .guide-page { display: grid; gap: var(--space-6); } /* One list, not fifteen buttons. Each topic is the whole row, so each is a