/* ========================================================== TYPEFACES ==== All self-hosted, latin-subset woff2: no third-party request, nothing for the CSP to block, no render-blocking round trip. Licences in assets/fonts/. Classic · Softer (v84): four faces, one job each. Signika Negative (Anna Giedryś, SIL OFL; one variable file, 300-700) is drawn for light text on dark grounds: it carries the words. JetBrains Mono (JetBrains, SIL OFL; one variable file, 400-800) carries the table figures; its code ligatures are switched off with the body. VT323 (Peter Hull, SIL OFL) carries only the big figures in stat wells (the overview's six, Wyrm Picks' cards), like the game's own stat numerals. Alagard (Hewett Tsoi / Pix3M; pixel blackletter on a 16-pixel em) is the ONE display face, in both games and on the neutral pages. It is pixel art: only at 16, 20 or 32px (24px for the phone page title), never tracked, never faux-bold. Its range is the characters it draws; any other (an em dash, a curly quote) goes straight to the text face, so no second display file is ever fetched for one glyph. Signika and VT323 are Google Fonts' own latin files, byte for byte, and each unicode-range is Google's latin range for them. The faces v84 retired have no @font-face here, so no rule can fetch them; their files stay on disk for the older release folders, which still name them. Nothing preloads or precaches them. Where the display face may appear is set down with the DISPLAY TIER rules. */ @font-face{font-family:"Signika Negative";src:url("/assets/fonts/signika-negative-var.woff2") format("woff2"); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight:400 800;font-style:normal;font-display:swap} /* the file's wght axis is 400-800 */ @font-face{font-family:"Alagard";src:url("/assets/fonts/alagard.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0020-007E,U+00A2-00A3,U+00A5,U+20AC} @font-face{font-family:"VT323";src:url("/assets/fonts/vt323.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ====================================================== DESIGN TOKENS ==== One token system; components use these, never literals. 1. :root tokens no edition changes: type, shape, elevation, the grain, game marks, indicator hues, motion 2. RS3 edition :root[data-theme=rs3] and the RS3 subtree hosts 3. OSRS edition :root[data-theme=osrs] and the OSRS subtree hosts; ALSO the neutral edition: the bare :root, home, admin and the sign-in card (#login) 4. roles what each primitive is FOR, on :root and every host Classic · Softer: the site dressed as the game's own interface windows. OSRS and RS3 are two EDITIONS of one skin. OSRS: brown stone with a faint grain, orange titles, yellow figures. RS3: slate metal, bronze trim, gold titles, cream figures. Only colours differ (plus the RS3 brushed title strip and bronze corner ticks, both token-driven); type, shape and layout are identical. The pages that show both games (home, admin) and the sign-in card wear the OSRS edition exactly (owner, v84: no separate neutral look), so one rule serves both and they cannot drift apart. app.js stamps at boot and in setGame(); every page's inline head script stamps data-theme and data-page before first paint. Home and admin get a data-theme too, which is why rule 3 comes AFTER rule 2: at equal specificity, :root:is([data-page=home],[data-page=admin]) beats :root[data-theme=rs3] by order. Rules 2 and 3 must set the SAME list of tokens: rule 3 also matches the bare :root on RS3 pages, so a token only it set would leak into RS3. Subtree hosts: inside a neutral page, the home portal cards, the home totals cards and the admin game areas wear their own game's edition. The edition rules list them, and every alias (rule 4) is declared on every host, because a custom property resolves WHERE IT IS DECLARED: an alias set only on :root would carry the root's colour into the RS3 card. For the same reason, paint built from primitives (window bodies, title strips) is composed at the element, never stored in a :root token. The gold law: solid gold (--btn-*) is the primary action, nothing else. */ :root{ /* ---- type ---- */ --sans:"Signika Negative","Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,monospace; --pix:"VT323","Lucida Console",ui-monospace,monospace; /* the stat wells' big figures only */ /* The one display face. Its fallback is the text face, never another display file: one would be DOWNLOADED just to draw an em dash. */ --display:"Alagard","Signika Negative","Trebuchet MS",system-ui,sans-serif; /* Alagard's three sizes. It is drawn on a 16-pixel em (1024 units, a 64-unit grid), so it is pixel-exact where size x devicePixelRatio / 16 is whole: 32px at 1x, 1.5x, 2x and 3x; 16px at 1x, 2x and 3x. 20px is exact at none of them but is the approved window-title size (owner, from 1x renders). */ --dt-s:16px; /* small headings inside a panel */ --dt-m:20px; /* every title in a title strip */ --dt-l:32px; /* page titles, gate titles, the sign-in title, the home hero */ /* Seven steps, one unit: 1 micro-label · 2 meta and units · 3 secondary UI · 4 table body 5 body · 6 heading and window title · 7 the big stat figures. Signika Negative is wider and taller than the v83 text face it replaced, so the reading steps sit half a step lower. Step 1 (11px) is the floor: no text anywhere is smaller (look-rules.test.mjs). The auth card deliberately opts out: it scales in em from one viewport-keyed knob (15px floor, SIGN-IN) so the whole panel resizes as one unit. Do not tokenise it. */ --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:15px; --fs-5:15.5px; --fs-5b:16px; --fs-6:20px; --fs-7:27px; /* Roles the steps do not name. */ --fs-num:14.5px; /* mono figures inside 15px table rows */ --fs-nav:14.5px; /* header navigation tabs */ --fs-lede:15.5px; /* the one-line description under a page title (the title is --dt-l) */ /* ---- shape ---- Square corners everywhere, as the game's windows are. Written once; no edition changes them. */ --panel-radius:0; --r-1:0; --r-2:0; --r-3:0; --r-4:0; --r-pill:0; /* ---- elevation ---- A window is a pair of 1px hairlines (lighter top-left, darker bottom-right) on one soft drop: no black ring, no catchlight. Popovers and modals keep the deeper drops. --edge (the old top catchlight) is an EMPTY shadow, not `none`: it sits inside shadow lists (var(--edge),var(--sh-2)), where `none` would void the whole declaration. */ --panel-shadow:0 6px 14px -8px rgba(0,0,0,.65); --edge:0 0 transparent; --sh-1:0 4px 13px -6px rgba(0,0,0,.78); --sh-2:0 10px 28px -12px rgba(0,0,0,.82); --sh-3:0 24px 54px -18px rgba(0,0,0,.9); /* ---- grain ---- Fine grain over slow mottling, grey so it suits stone and metal alike. Tiled at 240px on windows, strips, the header and footer, and (OSRS only) the page. */ --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23b)' opacity='.12'/%3E%3Crect width='240' height='240' filter='url(%23a)' opacity='.075'/%3E%3C/svg%3E"); /* ---- marks that name a game ---- On the neutral pages (home chart lines and legend, typeahead game tags, admin marks): OSRS orange, RS3 steel blue (the RS3 open-tab hue; gold sits too close to orange for two chart lines). On the neutral (= OSRS) stone the orange is 5.6:1, the steel blue only 4.7:1 (4.2 on a window's top, 4.0 on a hovered row or a lifted face). So the marks colour small TEXT only on a well (the typeahead's game tags, 6.8:1); elsewhere a game is named by a line, a square swatch or a bar beside words in the ink (home's chart legend and totals, the admin nav, tiles and open section), or by a 20px title on the page (the admin areas', 7.5:1). */ --accent-osrs:#ff981f; --accent-rs3:#6aa6e0; /* ---- chart ---- chartColors() in app.js reads these once per draw; the .t-leg legend chips and the canvas must stay in lockstep through them. Indicator hues are identical in every edition: an indicator must not change meaning per game, nor look like a level or like the price. MA90 is a neutral grey; bid/ask are teal/pink AND dashed, so no two lines share a look. The price, grid and label hues are each edition's. */ --ch-res:#af95df; --ch-sup:#6ebe80; --ch-exit:#e8796e; --ch-proj:#a99e7f; --ch-bid:#4fd1c5; --ch-ask:#ff8fa3; --ch-sma7:#62b6e0; --ch-sma30:#e08fcf; --ch-sma90:#cfcfcf; --ch-rsi:#bda0ff; /* ---- motion ---- Four durations by role, three easings. Never animate `all`, never width/height: a 250-row table cannot afford layout animation. */ --dur-1:110ms; --dur-2:180ms; --dur-3:240ms; --dur-4:380ms; --ease-out:cubic-bezier(.22,.61,.36,1); --ease-emph:cubic-bezier(.16,.84,.28,1); --ease-in:cubic-bezier(.45,0,1,1); } /* RS3: slate-blue metal, bronze trim, gold titles, cream figures. A deep blue-black page under the metal windows, with no grain on the page; its fade is painted once (no-repeat) and --page carries on below it, so no seam appears every screen-height on a long page. */ :root[data-theme="rs3"],.adm-area[data-game="rs3"],.home-rs3-column,.home-total.rs3{ --page:#04070b; --page-paint:radial-gradient(1400px 700px at 50% -8%,rgba(120,170,220,.09),transparent 62%) no-repeat, linear-gradient(180deg,#0a1119,#04070b 60%) no-repeat; /* surfaces: window metal, the title strip (top, mid, bottom; brushed), the footer ledge, wells, the column-head band, the alternating row bands */ --stone:#1a2633; --stone-top:#213042; --bar-top:#2f4257; --bar-mid:#22344a; --bar-bot:#1b2938; /* the title strip's top layers (PANELS): brushed steel, no grain */ --strip-brush:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,rgba(255,255,255,0) 1px 3px); --strip-grain:none; --foot-top:#152130; --foot-bot:#0c141d; --well:#0a1017; --head-band:#0e1822; --row-a:#132030; --row-stripe:#182838; --row-hover:#22374f; /* lines: the window hairlines; a muted bronze divider under each title strip and rule under the header / over the footer; slate under column heads; the 1px line round wells and slots */ --edge-hi:#3e5167; --edge-lo:#020407; --div:#7c6136; --div2:#2c3d51; --rule:#8a6c3a; --inset:rgba(0,0,0,.5); --line:#0f1925; --line-strong:#384a5e; --row-line:rgba(0,0,0,.35); --row-line2:rgba(0,0,0,.35); /* flat interface faces; the open tab (a deep blue a clear step brighter than the idle slate, with a warm 1px edge); the gold action button */ --face:#203041; --face-hover:#293b50; --face-hi:#3a4e64; --face-edge:#0f1925; --face-off:#142030; --on-fill:#234870; --on-edge:#b08a46; --on-ink:#ffe8a8; --btn-top:#f2d07a; --btn-bot:#d2a042; --btn-edge:#8a6326; --btn-hi:rgba(255,246,214,.6); --btn-ink:#1a1206; --btn-hov-top:#fbe09c; --btn-hov-bot:#e0b25a; --ring:#4d6480; /* the one thin ring round each orb */ --corner:#9c7b3e; /* bronze corner ticks, no brighter than the other bronze */ /* text: titles, figures, item names and column heads, body steps */ --title:#f0c35c; --title-hot:#ffe39a; --fig:#f5dc8f; --name:#ece6d6; --ink:#ece6d6; --dim:#c9cdcf; --faint:#a1adb9; --flat:#a3adb7; --gold:#ddae4c; --gold-quiet:#f0c35c; --gold-bg:rgba(240,195,92,.13); --emph:#ffe39a; --on-gold:#1a1206; /* other grounds */ --panel:#132030; --panel2:#182838; --input-bg:#070b10; --inset-bg:#070b10; --skel-sheen:#26394f; --backdrop:rgba(3,3,4,.78); /* direction: a gain is green and a loss red in both games; zero movement is not a gain (--flat). Chips are a soft tint of the row, never lighter than it. Loss red is a step lighter than the approved #ff7065 so it keeps 4.5:1 on a hovered row. Never put signed text on the open-tab fill: 3.5-3.8:1 whatever the red. */ --up:#62de6b; --up-bg:#15301c; --down:#ff7d72; --down-bg:#3a161a; --chip-up:rgba(20,96,34,.36); --chip-down:rgba(110,16,16,.42); --chip-flat:rgba(0,0,0,.2); --warn:#ee9a52; --warn-bg:rgba(238,154,82,.13); /* the accent (paper.js reads --theme-accent) and the overview orbs */ --theme-accent:#f0c35c; --orb-a:#4f6f8f; --orb-b:#1f9fc4; --orb-c:#d89a1c; /* chart */ --ch-price:#f5dc8f; --ch-grid:#16263a; --ch-label:#a1adb9; --ch-fill:rgba(245,220,143,.10); --ch-tag-bg:rgba(4,7,11,.94); --ch-cross:rgba(236,230,214,.44); scrollbar-color:#384a5e var(--page); } /* OSRS: brown-grey stone with a faint grain, orange titles, yellow figures. Also the neutral edition (the bare :root default, home and admin whatever game the head script stamped, the sign-in card), so it stays AFTER RS3; see the section head. */ :root,:root[data-theme="osrs"],:root:is([data-page="home"],[data-page="admin"]),#login, .adm-area[data-game="osrs"],.home-osrs-column,.home-total.osrs{ --page:#120e0a; --page-paint:var(--tex) 0 0/240px 240px repeat, radial-gradient(1400px 700px at 50% -8%,rgba(255,152,31,.07),transparent 62%) no-repeat; /* surfaces (as RS3) */ --stone:#3e3529; --stone-top:#463c2f; --bar-top:#372f25; --bar-mid:#30291f; --bar-bot:#29221a; /* the title strip's top layers: no brush (an empty layer), the grain */ --strip-brush:linear-gradient(transparent,transparent); --strip-grain:var(--tex); --foot-top:#2e271d; --foot-bot:#241e16; --well:#1d1812; --head-band:#2a231a; --row-a:#2e271d; --row-stripe:#372e23; --row-hover:#4b3e2c; /* lines (as RS3). --line is mostly control borders and separators across the site, so it is the face edge, a mid-dark stone: near-black would read as a ring round every control */ --edge-hi:#5a4d3a; --edge-lo:#0b0805; --div:#4f4334; --div2:#463b2d; --rule:#5c4f3c; --inset:rgba(0,0,0,.42); --line:#261e15; --line-strong:#5c4f3c; --row-line:rgba(0,0,0,.30); --row-line2:rgba(0,0,0,.30); /* faces, the open tab (a calm dark red with a warm 1px edge), the gold action button */ --face:#3f3529; --face-hover:#4a3f31; --face-hi:#5b4e3b; --face-edge:#261e15; --face-off:#2c251c; --on-fill:#5a2013; --on-edge:#a14f2c; --on-ink:#ffe14a; --btn-top:#f8c552; --btn-bot:#e39a22; --btn-edge:#9c6110; --btn-hi:rgba(255,241,190,.6); --btn-ink:#1e1103; --btn-hov-top:#ffd877; --btn-hov-bot:#f0ac38; --ring:#6a5a43; --corner:transparent; /* OSRS windows are plain matte stone: no metal corners */ /* text */ --title:#ff981f; --title-hot:#ffd84d; --fig:#ffe14a; --name:#f4ead3; --ink:#f4ead3; --dim:#ddcfb0; --faint:#bcab8a; --flat:#b9ad97; --gold:#f2a92c; --gold-quiet:#ff981f; --gold-bg:rgba(255,152,31,.14); --emph:#ffef5a; --on-gold:#1e1103; /* other grounds */ --panel:#2a231a; --panel2:#2e271d; --input-bg:#15110c; --inset-bg:#15110c; --skel-sheen:#4a3f30; --backdrop:rgba(11,8,4,.8); /* direction (as RS3). Loss red is a step lighter than the approved #ff6b57, which measured 4.29:1 on bare stone and 3.70:1 on a hovered row */ --up:#5fe05a; --up-bg:#1c3518; --down:#ff8a76; --down-bg:#3d1912; --chip-up:rgba(24,96,18,.38); --chip-down:rgba(96,14,5,.45); --chip-flat:rgba(0,0,0,.16); /* lifted a step from the old #f08f4a, which fell to 4.3:1 on a hovered row */ --warn:#f39752; --warn-bg:rgba(243,151,82,.13); /* the accent and the overview orbs: a neutral stone orb for the plain counts, blue and gold for the others */ --theme-accent:#ff981f; --orb-a:#8c7a52; --orb-b:#1f9fc4; --orb-c:#d89a1c; /* chart */ --ch-price:#ffe14a; --ch-grid:#2f281e; --ch-label:#bcab8a; --ch-fill:rgba(255,225,74,.10); --ch-tag-bg:rgba(18,14,10,.94); --ch-cross:rgba(244,234,211,.44); scrollbar-color:#5c4f3c var(--page); } /* Roles: what each primitive is FOR. One rule on :root and on every subtree host, so each host re-resolves the aliases from its own edition's primitives (see the section head). */ :root,#login,.adm-area[data-game],.home-game-column,.home-total{ --th-ink:var(--name); /* column heads */ --accent:var(--gold); /* checkbox accent, admin chart line, progress fills */ --surface-top:var(--stone-top); --surface-bottom:var(--stone); --chrome-top:var(--stone-top); --chrome-bottom:var(--stone); --chrome-rule:linear-gradient(var(--rule),var(--rule)); --ico-bg:var(--well); --seg-on:var(--on-fill); --ch-up:var(--up); --ch-down:var(--down); --ch-ring:var(--page); /* quiet candles (no trades, the last price held): the edition's muted chart ink, drawn dotted (line) or as a thin flat mark (candles) */ --ch-quiet:var(--ch-label); } *{box-sizing:border-box} /* The hidden attribute must beat every display rule (v1 lesson: #loginview's flex kept the login form on screen after signing in). */ [hidden]{display:none!important} html,body{margin:0;height:100%} /* Use a real scrollbar only when needed. Reserving an empty lane on short pages left the header/footer rule and background short of the right edge. */ html{scrollbar-gutter:auto} /* The page paint is one token per edition, and each layer carries its own repeat INSIDE it (OSRS: the grain tiles, its glow does not; RS3: a glow and a fade painted once). So no background-repeat longhand here: one would stop the OSRS grain tiling. Below the painted layers the ground is --page. */ body{background:var(--page-paint);background-color:var(--page);color:var(--ink);font-family:var(--sans); font-size:var(--fs-5);line-height:1.5;font-variant-numeric:lining-nums;font-variant-ligatures:no-contextual; -webkit-font-smoothing:antialiased} /* Form controls take the document's face AND its figure and ligature settings (the UA font shorthand would otherwise reset them to old-style figures). */ button,select,input{font-family:inherit;font-size:var(--fs-5);font-variant-numeric:inherit; font-variant-ligatures:inherit;color:var(--ink)} /* An interface button is a flat face: a 1px edge a step darker than the face and a 1px highlight along its top; no ring, no glow. Gold actions, trays and link-like buttons paint themselves. */ button{cursor:pointer;border-radius:var(--r-3);border:1px solid var(--face-edge); background:var(--face);box-shadow:inset 0 1px 0 var(--face-hi);padding:8px 14px} /* A plain face lifts on hover, its label to the bright yellow, its edge unchanged. :where() holds it at class level (the :hover alone counts), as the press below: it beats the element rule above, and any classed button that paints itself (gold, a tray, a ghost, a row), all of them later in the sheet, keeps its own paint. Inside :where() it counted for nothing and lost to `button` itself, so no plain face ever lifted. */ :where(button):hover{background-color:var(--face-hover);color:var(--emph)} /* A real disabled treatment: opacity:.4 dropped labels under 3:1. Colour and surface carry the state instead (a dimmer face without its highlight, like the header's locked tools), so it stays legible while clearly inert. */ button:is(:disabled,[aria-disabled="true"]){cursor:default;color:var(--faint);background:var(--face-off); border-color:var(--face-edge);box-shadow:none;filter:none} /* Keyboard focus is one 2px ring in the action gold on every control, link and card, here and in the components (one colour site-wide). */ button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:1px} /* Links, link-cards and the brand get the same gold ring as controls (they showed the UA blue ring); text selection stops being UA blue on a gold UI. */ a:focus-visible,.pick:focus-visible,.cat-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px} a:not([class]):focus-visible{border-radius:var(--r-1)} .brand:focus-visible{outline-offset:4px} ::selection{background:var(--gold);color:var(--on-gold)} input[type=checkbox],input[type=radio]{accent-color:var(--accent)} button.ghost{background:transparent} /* A text box is recessed: a dark field, one 1px edge, a 1px shade along its top; focus turns the edge to the title colour. */ select,input{background:var(--input-bg);border:1px solid var(--face-edge);border-radius:var(--r-3); box-shadow:inset 0 1px 0 var(--inset);padding:8px 10px} /* :not(:focus-visible) is load-bearing — the bare `outline:none` that used to be here deleted the ONLY focus ring in the app, leaving keyboard users a 1px border tint. Mouse focus stays clean; keyboard focus keeps the ring above. */ input:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none} input:focus,select:focus{border-color:var(--title)} ::placeholder{color:var(--faint);opacity:1} /* Links default to the action gold (they fell to UA blue wherever a component didn't set its own colour — e.g. inside prose in the gate cards). */ a{color:var(--gold)} a:hover{color:var(--emph)} .num{font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums} .up{color:var(--up)} .down{color:var(--down)} /* Neutral delta. Zero movement is not a gain — app.js picks this class at 0. */ .flat{color:var(--flat)} /* ---- interaction states ------------------------------------------------- One button family (CONTROLS): gold actions brighten, faces lift, ghosts gain a face, everything presses. A face (a tab, a game, a tray button, a link drawn as a button) lifts to the lighter face, its label to the bright yellow, its edge unchanged; the open tab and a chosen tray face stay as they are. A face that paints itself in its own section is listed here, so its section never needs a hover of its own. A red (danger) face keeps its red hover with its own rule: loss red on the lifted face is under 4.5:1. */ .tabs :is(button,a):not(.on):hover,.games :is(button,a):not(.on):hover, :is(.ch-tf,.ch-chip,.ch-mode,.ch-ci,.wy-rng,.home-range-tabs button,.home-view-tabs button,.pt-chart-tools button,.pt-side button, .pt-ledger-tabs button):not(.on,:disabled,[aria-disabled="true"]):hover, :is(.wy-seg-opts,.wy-yn) label:hover>input:not(:checked)+span,.wy-checks label:not(:has(input:checked)):hover, .adm-opt:not(:has(input:checked,input:disabled)):hover, :is(.doc-links a,.ca-more a,.home-game-actions a,.home-tool,.pager a,.catalogue-page-links>button,.wl-follow,.t-back,.t-burger, .wy-vchip,.wy-mod:not([aria-disabled="true"]),.wy-pre,.wy-add,.wy-ungroup,.wy-btn,.wy-sumbtn,.wy-pick-adv, button.ghost:not(.wy-danger)):hover{ background:var(--face-hover);color:var(--emph);border-color:var(--face-edge)} .mclose:hover{color:var(--ink);background:var(--face-hover)} /* The secondary is a face: it lifts like one, its gold label to the bright yellow. */ .msecondary:hover{border-color:var(--face-edge);color:var(--emph);background:var(--face-hover)} /* The gold action buttons (Sign in, .mprimary, .t-follow until the item is followed, the end tile's "All items", a house panel's call to action, which lights with its whole panel) brighten to the lighter pair of golds; the .on chip's own hover (unfollow → red) is defined with the .t-follow rules. */ .btn-signin:hover,.mprimary:hover,.t-follow:not(.on):hover,.cat-all .ca-go:hover,.mw-house:hover .mw-house-cta, .contact-card .mail:hover{ background:linear-gradient(180deg,var(--btn-hov-top),var(--btn-hov-bot));border-color:var(--btn-edge);color:var(--btn-ink)} /* Every button presses, in every edition (touch has no hover to fall back on): it drops a pixel, and a plain face sinks to the dimmer face with a shade along its top. :where() holds the sink at class level, so a classed button that paints itself (gold, a tray, a ghost) keeps its paint and only drops. */ button:active{transform:translateY(1px)} :where(button):active{background-color:var(--face-off);box-shadow:inset 0 1px 0 rgba(0,0,0,.35)} .mprimary:active{filter:brightness(.94)} button,tbody tr,.pick,.cat-tile,.t-item{ -webkit-tap-highlight-color:var(--gold-bg)} /* Motion: explicit property lists only — never `all`, never width/height. */ button,.tabs :is(button,a),.games :is(button,a),.menu button, .btn-signin,.mprimary,.msecondary,.t-follow,.mclose,.acct-chip, select,input,tbody tr,.t-item,.pick,.cat-tile,a{ transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important} } /* ============================================================= PANELS ==== ONE frame for every window, card and tile: the game's interface window. A pair of 1px hairlines (--edge-hi along the top and left, --edge-lo along the bottom and right), the grain over a stone body lit from the top, and one soft drop; no ring, no catchlight. The body is composed HERE, from the primitives, at the element: a subtree host (a home card, an admin area, DESIGN TOKENS) re-declares --stone, and its windows must paint that stone, which a gradient stored in a :root token would not. Every member matches at class specificity, so a component's own state rules win without !important. A tint, hover or state sets --panel-body (the whole body gradient) and, for a toned frame, --panel-hi / --panel-lo, ON THE MEMBER ITSELF; never `background:`, which would drop the grain. Never on :root or a container either: they inherit, and a member inside would wear the tint. A card whose words sit straight on its body (not on a well, a row or a strip, as the overview's always do) sets --panel-grain:none on itself: the grain lifts the stone's rendered luminance by about half (measured on the pixels: the OSRS title colour on stone-top, 5.0:1 flat, reads 4.1:1 under the grain, the faint words 4.0:1), which would put them under AA. Its frame, body and hover are unchanged (CATEGORIES, LIST CARDS, the drawers in MARKET). A table sitting inside a panel drops its own frame: no double frames. */ :is(.board,.cat-tile,.list-card,.perf-grid,.wy-cl-sum,.perf-note,.perf-t,.wy-edit,.wy-pane,.wy-admin,.wy-item, .pt-panel,.pt-cards,.gate,.pick,.t-lock,.t-panel,.t-stats,.t-sim,.list-empty-related,.seo-related,.modal,.tldr, .contact-card,.doc-links,.home-total,.home-game-column,.home-value-panel,.wl-pick,.mw-house,.adm-nav), :where(.market.overview)>.pulse,.pt-modal>:where(div), .seo-list-links>:where(a),:is(.about-feats,.about-games)>:where(li){ border:1px solid;border-color:var(--panel-hi,var(--edge-hi)) var(--panel-lo,var(--edge-lo)) var(--panel-lo,var(--edge-lo)) var(--panel-hi,var(--edge-hi)); border-radius:var(--panel-radius); background:var(--panel-grain,var(--tex)) 0 0/240px 240px,var(--panel-body,linear-gradient(180deg,var(--stone-top),var(--stone) 140px)); background-color:var(--stone); box-shadow:var(--panel-shadow)} :is(.board,.pt-panel,.adm) .perf-t{border:0;border-radius:0;background:none;box-shadow:none} /* Cards that are links lift on hover: the body brightens to the hovered row's stone; the frame stays. House panels are not in the list: their call to action brightens instead (HOUSE PANELS). */ :is(.cat-tile,.list-card,.pick,.wy-item,.wl-pick):hover,.seo-list-links>a:hover{ --panel-body:linear-gradient(180deg,var(--row-hover),var(--stone) 140px)} /* RS3 corner ticks. The RS3 interface trims its windows in metal, so every window (not the small cards and tiles: too busy) carries a 12x2px L of --corner over each corner of its frame. One rule for every edition: --corner is transparent in OSRS and on the neutral pages, so an RS3 home card or admin area gets its ticks from its own edition. The ticks sit over the hairlines (inset:-1px); a window that clips its overflow keeps them just inside its frame (inset:0). */ :is(.board,:where(.market.overview)>.pulse,.perf-grid,.wy-cl-sum,.wy-pane,.wy-edit,.wy-admin,.t-panel,.t-lock,.t-stats,.t-sim,.gate, .modal,.tldr,.contact-card,.home-value-panel,.home-total,.home-game-column,.pt-panel){position:relative} :is(.board,:where(.market.overview)>.pulse,.perf-grid,.wy-cl-sum,.wy-pane,.wy-edit,.wy-admin,.t-panel,.t-lock,.t-stats,.t-sim,.gate, .modal,.tldr,.contact-card,.home-value-panel,.home-total,.home-game-column,.pt-panel)::before{ --t:linear-gradient(var(--corner),var(--corner)); content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none; background:var(--t) left top/12px 2px,var(--t) left top/2px 12px,var(--t) right top/12px 2px,var(--t) right top/2px 12px, var(--t) left bottom/12px 2px,var(--t) left bottom/2px 12px,var(--t) right bottom/12px 2px,var(--t) right bottom/2px 12px; background-repeat:no-repeat} :is(.board,.pt-panel,.home-value-panel,.home-game-column)::before{inset:0} /* Title strips: a window's head is the game's darker title bar under its top hairline, closed by one quiet divider (RS3: brushed steel and a muted bronze divider; the brush and grain layers are edition tokens). Painted here from the primitives, as the body is; the title in it, its size and the strip's layout stay with the component, and a strip inside a padded window pulls out to the frame with negative margins in its own rule. Class specificity, like the frame (:where() holds the qualifiers), so print and a component's state rules can still repaint it. A strip built of two stacked rows (the item list's filter row over its label, ITEM TERMINAL) gives each row its half of the bar through --strip-body, on the row itself, so the bar runs on unbroken. */ :is(:where(.board) .b-head,.wy-pane-head,:where(.wy-res)>.wy-res-head,.adm-head,.home-value-head,.home-updatebar, .ht-head,.pt-panel-head,.pt-market-head,.pt-ledger-tabs,.t-search,.t-lhead,:where(.t-panel,.t-lock,.t-sim)>.t-shead:where(:first-child), :where(.tldr)>h2:where(:first-child),.wy-filters-toggle){ background:var(--strip-brush),var(--strip-grain) 0 0/240px 240px, var(--strip-body,linear-gradient(180deg,var(--bar-top),var(--bar-mid) 45%,var(--bar-bot))); background-color:var(--bar-bot);box-shadow:inset 0 -1px 0 var(--div)} /* =============================================================== HEADER ==== The header is viewport chrome, not part of any page or advertising grid. One markup on every page (the index.html shell, which also carries every SEO page, the static pages and 404) and one size: 58px at every width with a 48px logo, in one row from 1280px. Narrower, the section tabs take a second row; on phones they become the fixed bottom nav. The neutral pages (home, admin) hide the game switch and the game-scoped tabs. Layering: the header (55) > the phone bottom nav (45) > the detail overlay (40), so the chrome works from item pages too; the account dropdown (.menu, 30) lives inside the header's stacking context. app.js measures the live height into --chrome-h for the overlay and rails. Paint: a ledge of the edition's stone (RS3: slate) with the grain, one --rule line along its foot (a stone ledge on OSRS, a bronze rule on RS3) and a soft drop. Its controls are the interface faces: flat tabs, the game switch in a well, the status slot, a plain text box, the gold Sign in. */ .hdr{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:6px 10px;min-height:58px; /* viewport-fit=cover + a translucent status bar (index.html) means the bar draws UNDER the notch unless it pads the top inset itself. */ padding:calc(5px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 5px max(18px,env(safe-area-inset-left)); background:var(--chrome-rule) left bottom/100% 1px no-repeat,var(--tex) 0 0/240px 240px, linear-gradient(180deg,var(--chrome-top),var(--chrome-bottom));background-color:var(--chrome-bottom); box-shadow:0 6px 16px -10px rgba(0,0,0,.75)} @media(min-width:1544px){.hdr{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}} /* The owner's complete v2 wordmark, dragon and market orb, scaled as one unit and never cropped. The 512×256 WebP keeps the 48px render sharp; the 1774×887 original stays in design-assets/brand. */ .brand{display:flex;align-items:center;flex:none} .brand-logo{display:block;height:48px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} /* Game switch: a shallow well holding two small faces. The selected game is the open tab; the other is plain idle text, never a colour of its own. */ .games{display:flex;flex:none;gap:2px;padding:2px;border:1px solid var(--face-edge); border-radius:var(--r-3);background:var(--well)} /* The shell ships the switch hidden for the neutral home and admin. A game page (the head script stamps data-page before first paint) shows it at once, as app.js will, so the section tabs never jump right when the app starts. */ :root:is([data-page="app"],[data-page="paper-trading"]) #games[hidden]{display:flex!important} /* A face: a 1px edge a step darker than the face and a 1px highlight along its top; a plain label, no shadow. The 1px edge stands in for a pixel of the old padding, so the switch keeps its size. */ .games :is(button,a){display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--face-edge);border-radius:var(--r-2); background:var(--face);box-shadow:inset 0 1px 0 var(--face-hi);color:var(--dim);text-shadow:none; font-size:var(--fs-nav);font-weight:600;line-height:1.5;text-decoration:none} /* Section tabs: text only on desktop, one 38px height whether a tab holds one line or two (a locked tool stacks its COMING SOON tag under the label). Each tab is a face, as the game switch's buttons are; its 1px edge stands in for a pixel of side padding, so the row keeps its measured widths (the status pill's room at 1280-1366 and the one-row fit at 1280). */ .hdr>.tabs{display:flex;flex:none;align-items:center;gap:3px;min-width:0} .hdr>.tabs>:is(button,a){position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center; height:38px;padding:0 8px;border:1px solid var(--face-edge);border-radius:var(--r-2);background:var(--face); box-shadow:inset 0 1px 0 var(--face-hi);text-shadow:none; color:var(--dim);font-size:var(--fs-nav);font-weight:500;line-height:1.15;white-space:nowrap;text-decoration:none} .tabs .ico{display:none} .tabs .lk{display:inline-block;margin-left:.3em} .tabs .lk .ico{display:inline-block;width:.8em;height:.8em;margin:0;vertical-align:-.05em} /* Locked tools: a dimmer face without its highlight (a disabled interface button) with a faint slow sheen; the name in the idle tone, only the small COMING SOON tag in the title colour. Shown while the tab is a teaser (app.js syncAdminChrome). Not while hovered: it lifts like every face (interaction states), which this rule would otherwise out-rank. */ .hdr>.tabs>.coming-soon{overflow:hidden} .hdr>.tabs>.coming-soon:not(.on,:hover){color:var(--dim);border-color:var(--face-edge);background:var(--face-off);box-shadow:none} .hdr>.tabs>.coming-soon::before{content:"";position:absolute;inset:-20% auto -20% -42%;width:28%; pointer-events:none;transform:skewX(-18deg);opacity:0; background:linear-gradient(90deg,transparent,rgba(255,225,140,.07),transparent); animation:soon-sheen 4.5s ease-in-out infinite} .tabs .soon-tag{display:none} .tabs .coming-soon .soon-tag{display:block;margin-top:1px;color:var(--title); font:600 var(--fs-1)/1 var(--sans);letter-spacing:.05em} @keyframes soon-sheen{0%,70%{left:-42%;opacity:0}76%{opacity:.8}92%{left:120%;opacity:0}100%{left:120%;opacity:0}} @media(prefers-reduced-motion:reduce){.hdr>.tabs>.coming-soon::before{animation:none}} /* The selected game and the current section (a locked one too): the open tab, a calm dark-red fill (RS3: deep blue) with a warm 1px edge and a yellow label; no inner ring, no glow. Never signed text on it (RS3 loss red is 3.5-3.8:1 on the blue). */ .games .on,.hdr>.tabs>.on{color:var(--on-ink);background:var(--on-fill);border-color:var(--on-edge);box-shadow:none} /* Neutral pages hide the game-scoped tabs from first paint (the inline theme script stamps data-page before the stylesheet applies; app.js then sets [hidden]), and the tab group leaves the layout when no tab is visible. */ :root:is([data-page="home"],[data-page="admin"]) #tabs>[data-game-scoped]{display:none!important} #tabs:not(:has(>:not([hidden]))), :root:is([data-page="home"],[data-page="admin"]) #tabs:not(:has(>:not([hidden],[data-game-scoped]))){display:none} /* Data-freshness pill, filling the space between the tabs and the search: a state dot and one line that ellipsises, down to the dot alone when the row is tight (the text stays readable to assistive tech). It is a shallow slot holding a minimap orb, one state per class, each written out so no state can mask another: green = feed current (OSRS: live prices <=12 min old; RS3: guide price <26 h); amber, with amber words = delayed; a plain stone orb = transient messages (lookups, errors); busy = the wyrm mascot. Home has no pill: it names no game. */ .hdr>.tools{container:hdr-tools/inline-size;display:flex;flex:1 1 0;align-items:center;min-width:34px} :root[data-page="home"] .hdr>.tools{display:none} .status{position:relative;display:block;max-width:100%;height:30px;padding:0 12px 0 31px; border:1px solid var(--face-edge);border-radius:var(--r-pill);background:var(--well); color:var(--dim);font-size:var(--fs-3);line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* One fixed 16px slot for every state, so a state change never reflows the pill. Each orb is lit from its top left, inside one thin ring. */ .status::before{content:"";position:absolute;top:6px;left:8px;width:16px;height:16px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#f4efe4 0 14%,#a39a8a 46%,#3d372f 100%);box-shadow:0 0 0 1px var(--ring); transition:box-shadow var(--dur-2) var(--ease-out)} .status.live::before{background:radial-gradient(circle at 35% 30%,#d7ffc9 0 14%,#3fc449 46%,#11591a 100%); box-shadow:0 0 0 1px var(--ring),0 0 5px rgba(80,220,90,.35)} .status.stale{color:var(--warn)} .status.stale::before{background:radial-gradient(circle at 35% 30%,#ffe8c2 0 14%,#e8892e 46%,#6b3408 100%); box-shadow:0 0 0 1px var(--ring)} /* busy: the orb gives way to the wyrm mascot, drawn whole (contain, no round clip, no ring) and softly pulsing while a scan or lookup runs. */ .status.busy::before{border-radius:0;box-shadow:none;background:url("/assets/hero-alpha.webp") center/contain no-repeat; animation:coinpulse 1.2s ease-in-out infinite} @keyframes coinpulse{50%{opacity:.4}} @media(prefers-reduced-motion:reduce){.status.busy::before{animation:none}} @container hdr-tools (max-width:149px){.status{width:34px;padding:0;color:transparent}} /* Before the line would cut its figure ("updated 25h ag…"), a narrow pill drops "· daily guide", then the game (the switch beside it names it). */ @container hdr-tools (max-width:279px){.status .st-x{display:none}} @container hdr-tools (max-width:219px){.status .st-g{display:none}} /* Search and account, pinned right. The search is one size per viewport on every page, so it never moves or resizes between pages. */ .hdr>.hdr-right{display:flex;flex:none;align-items:center;gap:8px;margin-left:auto} .search-wrap{position:relative} .hdr .search-wrap{width:clamp(190px,15vw,280px)} /* A plain dark text box: the shared input (one 1px edge, a shade along its top, the title-colour edge on focus; base elements), at the header's 38px. */ .hdr .search{width:100%;height:38px;padding:0 12px} /* The typeahead is a small window (the PANELS hairlines and stone body on the deepest drop), anchored to the input's right edge so it can grow leftwards on desktop without leaving the viewport. A hovered or arrow-keyed row lifts, its name to the bright yellow. */ .search-dd{position:absolute;top:calc(100% + 6px);right:0;width:max(100%,320px);z-index:60; background:var(--tex) 0 0/240px 240px,linear-gradient(180deg,var(--stone-top),var(--stone));background-color:var(--stone); border:1px solid;border-color:var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);border-radius:var(--r-3); box-shadow:var(--sh-3);max-height:min(380px,60vh);overflow-y:auto;padding:4px} .search-dd .dd-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;color:var(--ink); background:none;border:none;box-shadow:none;padding:7px 9px;border-radius:var(--r-2)} .search-dd .dd-row:hover,.search-dd .dd-row.on{background:var(--row-hover);color:var(--emph)} .search-dd .dd-row .mi-ico{width:26px;height:26px;flex-shrink:0} .search-dd .dd-row .mi-ico img{width:22px;height:22px} .search-dd .dd-row>span:not(.mi-ico){min-width:0;flex:1} .search-dd .dd-row span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-dd .dd-empty{color:var(--faint);font-size:var(--fs-3);padding:9px} /* home searches both games: each result names its game in that game's mark (OSRS orange, RS3 steel blue; DESIGN TOKENS) on a small square well, the one ground the steel blue keeps AA on as small text (6.8:1). */ .search-dd .dd-game{flex:none;margin-left:auto;padding:2px 5px;border:1px solid var(--inset);border-radius:var(--r-1); background:var(--well);color:var(--faint);font:700 var(--fs-1)/1.2 var(--mono);letter-spacing:.04em} .search-dd .dd-game.dd-osrs{color:var(--accent-osrs);border-color:color-mix(in srgb,var(--accent-osrs) 35%,var(--well))} .search-dd .dd-game.dd-rs3{color:var(--accent-rs3);border-color:color-mix(in srgb,var(--accent-rs3) 35%,var(--well))} /* Sign in is the header's one filled control: the primary action (gold law), the gold button: two stops, a darker-gold edge and a hairline highlight along its top; it brightens to the lighter pair on hover (interaction states, with the rest of the gold family). */ .acct-slot{display:flex;flex:none} .btn-signin{display:inline-flex;align-items:center;justify-content:center;flex:none;height:38px;padding:0 18px; border:1px solid var(--btn-edge);border-radius:var(--r-3);background:linear-gradient(180deg,var(--btn-top),var(--btn-bot)); box-shadow:inset 0 1px 0 var(--btn-hi);color:var(--btn-ink);text-shadow:none; font-size:var(--fs-nav);font-weight:700;white-space:nowrap;text-decoration:none} /* Signed in: the account chip is a face (it lifts on hover, the name to the bright yellow); the initial sits in a small well. */ .acct{position:relative} .acct-chip{display:flex;align-items:center;gap:8px;max-width:150px;height:38px;padding:0 10px 0 6px; border:1px solid var(--face-edge);border-radius:var(--r-3);background:var(--face);box-shadow:inset 0 1px 0 var(--face-hi); color:var(--ink);font-size:var(--fs-4);text-decoration:none} .acct-chip:hover{color:var(--emph);border-color:var(--face-edge);background:var(--face-hover)} .acct-chip .av{flex:none;width:24px;height:24px;border:1px solid var(--inset);border-radius:var(--r-2);background:var(--well); color:var(--title);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:var(--fs-3)} .acct-chip .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct-chip .cv{color:var(--faint);font-size:var(--fs-2)} .acct-chip .cv.ico{width:12px;height:12px;margin-left:2px} /* The account menu is a small window: the PANELS hairlines and stone body, on the deeper popover drop. */ .menu{position:absolute;top:44px;right:0;width:190px; background:var(--tex) 0 0/240px 240px,linear-gradient(180deg,var(--stone-top),var(--stone));background-color:var(--stone); border:1px solid;border-color:var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi);border-radius:var(--r-3); padding:6px;z-index:30;box-shadow:var(--edge),var(--sh-2)} .menu[hidden]{display:none} .menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent; border:none;padding:8px 10px;border-radius:var(--r-2);font-size:var(--fs-4);color:var(--dim);box-shadow:none} .menu button .ico{color:var(--faint);width:16px;height:16px;margin-right:0} .menu button:hover .ico{color:var(--gold)} .menu button:hover{background:var(--row-hover);color:var(--emph)} .menu .sep{height:1px;background:var(--div2);margin:5px 6px} /* Below 1280px the tabs take their own row; so do an admin's three extra tabs below 1600px. The quiet divider (--div2) parts the two rows. */ @media(min-width:641px) and (max-width:1279px){ .hdr{flex-wrap:wrap} .hdr>.tabs{order:5;flex:1 1 100%;flex-wrap:wrap;justify-content:center;padding-top:5px; border-top:1px solid var(--div2)} } @media(min-width:1280px) and (max-width:1599px){ .hdr:has(#tabs>[data-mode="WyrmPicks"]:not([hidden])){flex-wrap:wrap} .hdr:has(#tabs>[data-mode="WyrmPicks"]:not([hidden]))>.tabs{order:5;flex:1 1 100%;justify-content:center;padding-top:5px; border-top:1px solid var(--div2)} } /* Up to 760px the search row spans the header under the logo row. */ @media(max-width:760px){ .hdr{flex-wrap:wrap} .hdr>.hdr-right{order:4;flex:1 1 100%;margin-left:0;position:relative} .hdr .search-wrap{flex:1;width:auto;min-width:0;position:static} /* The typeahead spans the whole search row (anchored to .hdr-right above): a 320px panel hung off the input's right edge overhung the left edge of a 375px phone, and the item icons were the part that got cut. */ .search-dd{left:0;right:0;width:auto;top:calc(100% + 4px)} } /* Phones: the tabs become the app-style bottom nav: an opaque ledge of the header's stone with one --rule line along its top and one equal face per visible tab (the open tab as in the header). A locked tool shows its COMING SOON tag in its icon's place, two 11px lines in the icon's 20px slot, so the tag is readable and every cell keeps one height. */ @media(max-width:640px){ .hdr{gap:8px;padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))} .status{font-size:var(--fs-2)} .games :is(button,a){padding:3px 6px} /* Every cell stretches to the tallest (a locked tool's two-line name), so the faces' edges line up along the bar. */ .hdr>.tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px; align-items:stretch; padding:4px calc(6px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); background:var(--tex) 0 0/240px 240px,linear-gradient(180deg,var(--chrome-top),var(--chrome-bottom));background-color:var(--chrome-bottom); border-top:1px solid var(--rule);box-shadow:0 -6px 16px -8px rgba(0,0,0,.7)} /* No side padding and a hair of negative tracking: "Categories" needs the whole cell inside its 1px edges at 390px in the text face. The edge stands in for a pixel of the top padding. */ .hdr>.tabs>:is(button,a){justify-content:flex-start;gap:3px;height:auto;min-width:0;min-height:50px;padding:11px 0 4px; border-radius:var(--r-3);font-size:var(--fs-1);line-height:1.2;letter-spacing:-.01em} .tabs .ico{display:block;width:20px;height:20px;margin:0;stroke-width:1.75} .tabs .tl{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis} .tabs .lk{position:absolute;top:4px;right:6px;margin:0} .tabs .lk .ico{width:9px;height:9px;stroke-width:2.2} .hdr>.tabs>.coming-soon{overflow:visible} .hdr>.tabs>.coming-soon::before{display:none} .hdr>.tabs>.coming-soon .ico{display:none} .tabs .coming-soon .soon-tag{order:-1;display:grid;width:min-content;height:20px;margin:0 auto;place-content:center; font-size:var(--fs-1);line-height:10px;letter-spacing:.02em;text-align:center;white-space:normal} /* A coming-soon tool's name takes two short lines ("Paper" / "Trading") rather than being cut ("Paper Tra…"); its cell starts a little higher so the bar keeps its height. */ .hdr>.tabs>.coming-soon{padding-top:5px} .tabs .coming-soon .tl{overflow:visible;line-height:1;text-overflow:clip;white-space:normal} } /* Narrow phones (360-380px): seven faces leave "Categories" (49px at 11px) less than its cell, so the bar's gaps and sides tighten a little and the labels track in a hair more: 47.7px cells at 360px hold its 46.8px. */ @media(max-width:380px){ .hdr>.tabs{gap:1px;padding-left:calc(3px + env(safe-area-inset-left));padding-right:calc(3px + env(safe-area-inset-right))} .hdr>.tabs>:is(button,a){letter-spacing:-.03em} } /* ===================================================== SEARCH RESULTS ==== The /search page: one window, its title strip naming the query (sans: it is the visitor's own words, DISPLAY TIER) beside the mascot, a row with the count and the pager, then the results table. Rows click through to the item. The mascot is used whole, with a dark drop shadow only. */ .srch-t tbody tr{cursor:pointer} /* The figures' columns are the catalogue's 118px, so a unit line such as "items, last full hour" stays on one line (MARKET). */ .perf-t.srch-t :is(th,td):not(:first-child){width:118px} .search-head{align-items:center} .search-title{display:flex;align-items:center;gap:11px;min-width:0} .search-title img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))} .search-title span{display:flex;flex-direction:column;gap:1px;min-width:0} .search-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* The count and the pager sit on the window's stone between its strip and the column heads, each of which draws its own edge. The pager is a tray (CONTROLS) of faces round its page count. */ .search-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 14px} .search-pager{align-items:center;justify-content:flex-end;flex-wrap:wrap} .search-pager button{height:24px;padding:0 11px;font-size:var(--fs-3)} .search-pager>span{padding:0 8px} .back{background:transparent;border:none;color:var(--dim);font-size:var(--fs-5);padding:6px 4px;box-shadow:none} .back:hover{color:var(--emph)} .ctl{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:var(--fs-3)} .ctl select{padding:6px 8px} /* ---- icon set: the inline sprite at the top of the page, used via . 1em, currentColor stroke, so an icon takes the size and colour of its text — drop it in front of a label and it just fits. pointer-events off so click delegation sees the button, not the svg. ---- */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;pointer-events:none} button .ico,.t-chip .ico,.t-back .ico{margin-right:.4em} button .ico:only-child,.mclose .ico,.t-burger .ico,.wl-actions .ico{margin-right:0} .t-back .ico{margin-right:.2em} .t-chip .ico{width:.85em;height:.85em;margin:0 0 0 .15em;order:2} .t-follow .ico{width:1.05em;height:1.05em;vertical-align:-.2em} .t-follow.on .ico{fill:currentColor} .mclose .ico{width:18px;height:18px} .t-burger .ico{width:17px;height:17px} .wl-actions .ico{width:14px;height:14px;vertical-align:-.1em} .ch-lk .ico{width:.85em;height:.85em;vertical-align:-.1em} /* ============================================================== SHELL ==== One layout shell on every page (v80). #main is a column: the page head, #results and the server-rendered #seo-item block (the static pages' .doc in place of #results) share ONE content column, capped by one rule, so a title always starts and ends where its content does. The column is up to 1500px while ads may show, and up to 1860px for an ad-free visitor (ads.js stamps data-ad-free): the rails' footprint, 160 + 20 + 1500 + 20 + 160. From 1560px a page with side rails (ads.js stamps data-ad-rail-layout, or data-ad-rail-hold while the policy and the visitor load) pads #main by a gutter, a rail and its gap on each side, and the rails are fixed into those gutters, centred on the viewport and hugging the column. Fixed rails take no part in the page's height, so a short page never grows a blank band. The column is centred, so from 1904px rails arriving or leaving move nothing; below that the hold keeps the gutters until ads.js resolves. Only a resolved no-placement state (ads off, an excluded or ad-free account) removes them; a block, a refusal or a no-fill keeps them (house panels fill them). Keep 1560/160/20 in step with RAIL_MIN and the rail unit in ads.js. Scope to #main only: the item terminal's .t-mid is also a
. */ :root{--gutter:22px;--rail-w:160px;--rail-gap:20px;--col-max:1500px;--col-max-free:1860px;--content-max:var(--col-max)} :root[data-ad-free="1"]{--content-max:var(--col-max-free)} #main{width:100%;max-width:none;margin:0;padding:18px var(--gutter) 24px;display:flex;flex-direction:column} #main>:is(#page-head,#results,#seo-item,.doc){width:100%;max-width:var(--content-max);margin-inline:auto;min-width:0} #main>#results{flex:1 0 auto} @media(min-width:1560px){ :root:is([data-ad-rail-layout="1"],[data-ad-rail-hold="1"]) #main, :root[data-page="home"]:not([data-ad-surface]) #main{padding-inline:calc(var(--gutter) + var(--rail-w) + var(--rail-gap))} /* Every visible rail: fixed in its gutter, viewport-centred (ADS), hugging the 1500px column; the max() keeps it inside the gutter below 1904px. */ #main>:is(.ad-rail.ad-template,.mw-brand-rail){position:fixed;top:var(--ad-rail-sticky-top);z-index:2;display:flex!important; min-height:var(--ad-rail-zone-h);margin:0;flex-direction:column;justify-content:center} #main>:is(.ad-homeleft.ad-template,.mw-brand-homeleft){left:max(var(--gutter),calc((100% - var(--col-max))/2 - var(--rail-gap) - var(--rail-w)))} #main>:is(.ad-railright.ad-template,.mw-brand-railright){right:max(var(--gutter),calc((100% - var(--col-max))/2 - var(--rail-gap) - var(--rail-w)))} } /* The fill contract: a view that should reach the footer carries .view-fill (the catalogue and list tables, the game overview, the category directory, the item-list cards, a gate, an empty watchlist, the account check). #results becomes a column and that view takes the spare height; any other view keeps its natural height at the top of #results. */ #results:has(>.view-fill){display:flex;flex-direction:column} #results>.view-fill{flex:1 1 auto;min-height:0} /* Up to 900px #results is a horizontal scroll container, so a wide table scrolls inside it on a phone instead of panning the page. From 901px it is not, so sticky parts (the admin's section nav, a tool's action bar) stick to the viewport. The admin page keeps its sticky section strip at every width; its wide tables scroll in their own wrappers. */ @media(max-width:900px){:root:not([data-page="admin"]) #results{overflow-x:auto}} /* ONE page head everywhere: the display-face h1 (Alagard 32px, 24px on phones, with its 2px black shadow: DISPLAY TIER) and a one-line description on the left. Its right side holds either the 468×60 title-row unit (the public directory and list pages; a row that reserves it keeps one height whatever the ad does, ADS) or the tool's own controls in .page-head-tools (GE Screener, Wyrm Picks, Backtest, Paper Trading: app.js setHeadTools fills it). The static pages and 404 carry the same markup. */ .page-head{margin:0 0 10px;min-width:0} .page-head:empty{display:none} /* From 1280px every head is one height, the 468×60 title row's (ADS), with its title at the top: moving between pages never moves the title or the content under it. */ @media(min-width:1280px){#main>#page-head:not(:empty){min-height:calc(63px + var(--fs-1)*1.4)}} /* Size, weight, tracking and shadow are the DISPLAY TIER's; the head keeps colour and leading. 35.2 + 6 + 21.7 = 62.9px, inside the 1280px head. */ .page-head h1{margin:0;color:var(--title);font-family:var(--display);line-height:1.1} .page-head p{margin:6px 0 0;color:var(--dim);font-size:var(--fs-lede);line-height:1.4} @media(max-width:640px){.page-head h1{line-height:1.15}} .page-head.has-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;align-content:start;gap:8px 24px} .page-head-copy{min-width:0} .page-head-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px} .page-head-tools:empty{display:none} @media(max-width:900px){ .page-head.has-tools{grid-template-columns:minmax(0,1fr)} .page-head-tools{justify-content:flex-start} } /* A tool's status in its head: a small square mono chip on a well, edged in its tone, with up, paused and muted variants, and a quiet note beside it. Its dot is a plain lamp inside the orbs' thin ring, no halo. */ .head-chip{display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:3px 9px; border:1px solid color-mix(in srgb,var(--gold) 52%,var(--well));border-radius:var(--r-pill); color:var(--gold);background:var(--well); font:700 var(--fs-1)/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} .head-chip.is-up{border-color:color-mix(in srgb,var(--up) 52%,var(--well));color:var(--up)} .head-chip.is-paused{border-color:color-mix(in srgb,var(--warn) 52%,var(--well));color:var(--warn)} .head-chip.is-muted{border-color:var(--face-edge);color:var(--faint);font-weight:500} .head-chip>i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor; box-shadow:0 0 0 1px var(--ring)} .head-note{color:var(--faint);font-size:var(--fs-3);white-space:nowrap} a.head-note{color:var(--dim);text-decoration:underline;text-underline-offset:3px} a.head-note:hover{color:var(--ink)} /* A section a head link jumps to (Backtest's saved reports) clears the sticky header. */ .head-target{scroll-margin-top:calc(var(--chrome-h,58px) + 14px)} /* Related-list links in the server-rendered list drawers (the item-list directory itself is with the app pages, LIST CARDS). */ .seo-list-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px} .seo-list-links a{display:block;padding:9px 11px;text-decoration:none} /* =============================================================== FOOTER ==== One