/* TypeAnyKey. The case. * * The whole site, one stylesheet. See DESIGN.md for why any of this is the * way it is. The short version: this is a compositor's type case rendered in * a browser, so compartments are ruled rather than boxed, size carries * information, and nothing that can hold still is allowed to move. * * Rules that are load-bearing, not taste: * - no gradient, no shadow, no blur, no radius above 1px on a compartment * - the spot colour marks two things and nothing else: the four signature * places (wordmark rule, active drawer, the word COPIED, the warning * that an Alt code needs a registry change) and the hover state of * anything you can act on. Never as a fill, never a tint, never on a * resting element. A copy is an inversion to solid ink, not a wash * - the page body never scrolls sideways. Tables get their own scroller */ /* ---------------------------------------------------------------- tokens */ :root{ --paper:#FFFFFF; --paper-raised:#FAFAFA; --paper-sunk:#EFEFEE; --rule:#DEDEDC; --rule-strong:#B2B2AF; /* The border of a thing you can operate, as opposed to a rule between two * compartments. WCAG wants 3:1 on a control boundary and --rule is 1.35:1 * against paper, so the select, the toggle and the search field were * drawing their own edges at a ratio a person cannot be assumed to see. * #8E8E8B is 3.29 on paper and 3.15 on raised paper. A rule between two * compartments is not a control and keeps --rule: it is texture, and it * is the thing that makes this look like a type case. */ --rule-control:#8E8E8B; --ink:#0A0A0A; --ink-2:#3D3D3B; /* Third-tier ink: counts, key legends, the word under a glyph. It was * #767674, which is 4.55 against white and 3.96 against the drawer floor * a lot of it actually sits on - below AA for text this size, and the * contrast failure Lighthouse reported on every page tested. #686866 is * 4.85 on the drawer floor, 5.35 on a compartment, 5.58 on paper, and is * still clearly a tier below --ink-2 at 9.46. */ --ink-3:#686866; /* The spot. Rubine, a real printing ink, and nothing in this category * uses magenta. Four signature places (the wordmark rule, the active * drawer, the word COPIED, the warning that an Alt code needs a registry * change) plus one job: it is the colour of the pointer. Every hover cue * on the site is this and only this, which is what makes a hover legible * as "you can take this" rather than as a generic highlight. It is never * a fill and never a tint. A tint reads as a highlighter; ink does not. * Focus rings stay --ink: an outline has to win on contrast, not hue. */ --spot:#C4006B; --u:64px; /* the compartment unit */ /* The spine. --rail is the cabinet column; +1px is the rule down the left * of the drawers; +16px is the inset the drawer label already hangs at. * Every section heading on a page that has a case lands on --spine-text, * and every ruled block on --spine-box, so one vertical line runs from the * first drawer to the footer. */ --rail:150px; --spine-box:calc(var(--rail) + 1px); --spine-text:calc(var(--rail) + 17px); --rail-h:56px; --measure:62ch; --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-press:cubic-bezier(.34,1.4,.64,1); --f-disp:'Fraunces',Georgia,'Times New Roman',serif; --f-read:'Charis SIL',Georgia,'Times New Roman',serif; --f-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Charis first so accented Latin sets in the reading face; the Noto faces * pick up only what it lacks; the system emoji font takes the 102 * characters no bundled outline would ever be asked to draw. */ --f-glyph:'Charis SIL','Noto Sans Symbols 2','Noto Sans Symbols', 'Noto Sans Math','Noto Sans Mono','Noto Sans','Noto Sans Thai', 'Noto Sans Runic','Noto Sans Canadian Aboriginal','Noto Sans JP', 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',serif; color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#0B0B0C; --paper-raised:#151517; --paper-sunk:#08080A; --rule:#2A2A2D; --rule-strong:#46464A; --rule-control:#6E6E72; --ink:#F2F2F0; --ink-2:#B4B4B1; --ink-3:#90908E; --spot:#FF3D97; color-scheme:dark; } } :root[data-theme="dark"]{ --paper:#0B0B0C; --paper-raised:#151517; --paper-sunk:#08080A; --rule:#2A2A2D; --rule-strong:#46464A; --rule-control:#6E6E72; --ink:#F2F2F0; --ink-2:#B4B4B1; --ink-3:#90908E; --spot:#FF3D97; color-scheme:dark; } /* A theme change is not an animation. Without this every cell mid-ebb * animates its background across the swap. */ html.swapping *,html.swapping *::before,html.swapping *::after{transition:none!important} /* ------------------------------------------------------------------ base */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden} body{ background:var(--paper);color:var(--ink); font:400 16px/1.6 var(--f-read); -webkit-font-smoothing:antialiased; max-width:100%;overflow-x:hidden; padding-bottom:calc(var(--rail-h) + 20px); } img{max-width:100%} [hidden]{display:none!important} a{color:var(--ink);text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px;text-decoration-color:var(--rule-strong)} a:hover{text-decoration-color:var(--spot)} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} .wrap{max-width:1320px;margin:0 auto;padding-inline:24px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper); padding:10px 16px;font:500 12px/1 var(--f-mono);z-index:99} .skip-link:focus{left:8px;top:8px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---------------------------------------------------------------- header * One row, at every width that can hold one. The rail used to carry three * locale chips beside three counts beside the toggle, which overflowed the * flex line at EVERY width from 768 to 1440 and wrapped the whole right-hand * group onto a second row: the header was 117px tall on a 1440px screen and * had never once rendered as designed. The chips are now one answers all three. It is one control at every width, * it opens as the platform's own picker on a phone, and the endonym is the * label, so a reader looks for the word they already use. */ .locswitch{display:inline-flex;align-items:center;position:relative} .locswitch select{appearance:none;-webkit-appearance:none; border:1px solid var(--rule-control);background:var(--paper);color:var(--ink-2); font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; padding:8px 24px 8px 10px;cursor:pointer;border-radius:0; transition:border-color 90ms linear,color 90ms linear} .locswitch::after{content:"";position:absolute;right:9px;top:50%; width:5px;height:5px;margin-top:-4px;pointer-events:none; border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg);color:var(--ink-3)} .locswitch:hover select,.locswitch select:focus-visible{border-color:var(--spot);color:var(--ink)} .locswitch:hover::after{color:var(--spot)} .locswitch select:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* An example glyph inside a table. The character is the whole point of the cell, so it takes the glyph face at reading size instead of the body font the other columns use. */ .shortcut-table td.ex{font-family:var(--f-glyph);font-size:20px;color:var(--ink); text-align:center} /* A line said under a table rather than over it: where the numbers came from, or the one instruction that would be pompous as a heading. */ .section-note{font:400 13px/1.6 var(--f-read);color:var(--ink-3);margin:6px 0 18px} /* A list of links that is a list of places, not prose. Bullets add nothing. */ .plain-list{list-style:none;padding:0;margin:0 0 22px} .plain-list li{border-bottom:1px solid var(--rule);padding:10px 0} .plain-list a{font:500 15px/1.4 var(--f-read)} /* kbd is styled inside .manual already; the keyboard pages are prose. */ .prose kbd{font:500 12px/1 var(--f-mono);border:1px solid var(--rule); background:var(--paper-raised);padding:3px 6px} .breadcrumb{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin-bottom:14px} .guide-group{margin-bottom:30px} .guide-group-title{font:400 21px/1 var(--f-disp);font-variation-settings:'opsz' 30,'WONK' 1; padding-bottom:9px;border-bottom:2px solid var(--rule-strong);margin-bottom:0} .guide-list{list-style:none;border-top:0} .guide-list li{border-bottom:1px solid var(--rule)} .guide-list a{display:block;padding:11px 4px;text-decoration:none;font:400 16px/1.4 var(--f-read)} .guide-list a:hover{background:var(--paper-raised);box-shadow:inset 2px 0 0 0 var(--spot)} /* --------------------------------------------------------- the page index * The prose column is the reading measure, 62ch, inside a 1320px wrap, so on * a wide screen it left roughly 800px of empty page down its right. That does * not read as a measure held on purpose, it reads as a column that stopped. * * The case answers this on its own pages with a sticky index of the drawers * down the left. This is that object again for prose: the section's own * headings, set in the margin the prose was not using. case.js builds it from * the headings already in the markup, and only where there are at least three * of them, so short pages are untouched and no generator has to know. * * Below 1180px there is no spare margin, so there is no rail: the index is * hidden rather than stacked, because a list of links between a heading and * its own first paragraph is worse than scrolling. */ .pagenav{display:none} @media (min-width:1180px){ /* Three columns: the measure, air, the index. Putting the index straight after the prose only moved the empty space further right; sending it to the far edge turns the same two blocks into a spread that holds the whole width, which is what the page is actually asking for. */ .section > .container.tool-content, .section > .container.prose{ display:grid; grid-template-columns:minmax(0,var(--measure)) minmax(40px,1fr) 220px; /* The container goes back to being the site's 1320px band, centred like the header and the footer, and the MEASURE moves to the first grid column where it belongs. `.container.prose{margin-inline:0}` further up exists to stop a column narrowed to 62ch from centring itself in a 1320px box - the bug that put /about's

at x=385. Once the width is a column rather than a max-width on the container, that problem is gone and the rule is actively wrong: it left the prose at x=24 while the header sat at x=324. So it is reversed here, above 1180px only. */ max-width:1320px; margin-inline:auto; } .section > .container.tool-content > *, .section > .container.prose > *{grid-column:1;min-width:0} /* Both selectors, and both at least as specific as the `> *` rule above: `.pagenav` alone is one class against that rule's two plus a child combinator, so it lost and the rail rendered in the prose column. */ .section > .container.tool-content > .pagenav, .section > .container.prose > .pagenav{display:block;grid-column:3;grid-row:1 / 200; position:sticky;top:24px;align-self:start;justify-self:end; width:220px;padding-left:20px;border-left:1px solid var(--rule)} /* Not uppercase mono. These are whole sentences - "What Degree Symbol is used for" - and set in caps at 10px every one of them wrapped to three lines and the rail read as a wall. Sentence case in the reading face scans the way the headings it points at do. */ .pagenav ol{list-style:none;margin:0;padding:0; font:400 13px/1.45 var(--f-read)} .pagenav li{margin-bottom:9px} .pagenav::before{content:"";display:block;width:18px;height:1px; background:var(--rule-strong);margin:0 0 12px -20px} .pagenav a{display:block;color:var(--ink-3);text-decoration:none; border-left:2px solid transparent;margin-left:-22px;padding-left:20px; transition:color 90ms linear,border-color 90ms linear} .pagenav a:hover{color:var(--ink);border-left-color:var(--spot)} /* Where you are, in the spot colour, the same as the active drawer in the cabinet. It is a position, not a hover, which is the one other thing --spot is allowed to mark. */ .pagenav a.on{color:var(--ink);border-left-color:var(--spot)} /* A table or a wide grid inside the prose column may still run full width; it has its own scroller and the rail must not collide with it. */ .tool-content .tablewrap,.tool-content .category-descriptions, .tool-content .alt-methods-grid{max-width:100%} } /* ------------------------------------------------------------- how-to hub * The ten places a reader might be typing. These four class names were * emitted by the build and had NO CSS behind them at all, so the page * rendered as ten underlined links run together into one paragraph, each * followed by its monthly search volume. Compartments, like the rest of the * site: ruled, not boxed, and the name carries the card. */ .hub{padding-block:44px 8px} .hub .tool-title,.hub .lead,.hub .section-note{max-width:var(--measure)} .hub .lead{margin-bottom:26px} .hub .section-note{margin-top:18px} .category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); border-top:1px solid var(--rule);border-left:1px solid var(--rule); background:var(--paper-raised);margin-bottom:4px} .cat-card{position:relative;display:flex;align-items:center;min-height:84px; padding:16px 20px;text-decoration:none;background:var(--paper-raised); border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); overflow:hidden} .cat-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:var(--spot);opacity:0;transition:opacity 90ms linear} .cat-card:hover::before,.cat-card:focus-visible::before{opacity:1} .cat-card:hover{background:var(--paper)} .cat-card:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;z-index:3} .cat-name{font:400 20px/1.22 var(--f-disp);font-variation-settings:'opsz' 28; color:var(--ink)} @media (max-width:640px){ .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cat-card{padding:14px 13px 15px} .cat-name{font-size:16px} } /* static pages: about, privacy, contact, 404 */ .prose{max-width:var(--measure);padding-block:44px 60px} .prose h1{font:400 40px/1.1 var(--f-disp); font-variation-settings:'opsz' 90,'WONK' 1,'SOFT' 20;letter-spacing:-.02em;margin-bottom:16px} .prose h2{font:400 24px/1.25 var(--f-disp);font-variation-settings:'opsz' 32,'WONK' 1;margin:32px 0 12px} .prose p,.prose li{font:400 17px/1.65 var(--f-read);margin-bottom:16px} .prose ul,.prose ol{margin-left:20px} .lead{font:400 19px/1.55 var(--f-read);color:var(--ink-2)} .tool-title{font:400 40px/1.1 var(--f-disp); font-variation-settings:'opsz' 90,'WONK' 1,'SOFT' 20;letter-spacing:-.02em;margin-bottom:12px} .tool-subtitle{font:400 19px/1.55 var(--f-read);color:var(--ink-2);margin-bottom:20px} .guide-hero{padding-block:36px 0} .guide-char-display{font-family:var(--f-glyph);font-size:96px;line-height:1;margin-bottom:18px} .hidden{display:none} /* ------------------------------------------------------- guide drawers * The guides index is a case too, but its compartments navigate instead of * copying, so they get their own class: case.js copies anything matching * .cell on pointerdown and would otherwise swallow the link. * * Wider than a symbol compartment on purpose. Here the name is what you * scan for, not the glyph, so the glyph sits in a fixed gutter at the left * and the name gets the room. */ .gridg{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-bottom:34px} .gcell{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center; min-height:72px;background:var(--paper-raised);text-decoration:none;color:var(--ink); border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); position:relative;overflow:hidden} .gcell::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:var(--spot);opacity:0;transition:opacity 90ms linear} .gcell:hover::before,.gcell:focus-visible::before{opacity:1} .gcell:hover{background:var(--paper)} .gcell:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;z-index:3} .gcell .g{font-size:30px;text-align:center;border-right:1px solid var(--rule); height:100%;display:flex;align-items:center;justify-content:center} .gcell:hover .g{color:var(--ink)} .gcell .tx{padding:10px 12px;min-width:0} /* Two lines rather than an ellipsis: "Ballot Box with Check" is the whole point of the row, and "Ballot Box with Ch..." is not an answer. */ .gcell .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; font:400 14px/1.25 var(--f-disp);font-variation-settings:'opsz' 18; color:var(--ink);overflow:hidden} .gcell .wc{display:block;margin-top:5px;font:500 9px/1 var(--f-mono); font-variation-settings:'wdth' 75;letter-spacing:.05em;color:var(--ink-3)} .gcell.dim{opacity:.16;transition:opacity 140ms var(--ease-out)} @media (max-width:640px){ /* One column at 312 rows is a list again, which is the thing we replaced. Two, with a narrower gutter and the name allowed three lines. */ .gridg{grid-template-columns:repeat(2,minmax(0,1fr))} .gcell{grid-template-columns:44px minmax(0,1fr);min-height:66px} .gcell .g{font-size:22px} .gcell .tx{padding:8px 9px} .gcell .nm{font-size:13px;-webkit-line-clamp:3} } /* The invisible-characters table. A copy button whose character draws nothing would be an invisible button, so the slot carries the word instead and the dashes say "there is something here to take". */ .blank-slot{font:600 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em; text-transform:uppercase;opacity:.75} .cell:has(.blank-slot){min-width:5.5rem;border-style:dashed} .cell:has(.blank-slot):hover,.cell:has(.blank-slot):focus-visible{border-style:solid} .cell:has(.blank-slot) .blank-slot{opacity:1} .inv-item{border-top:1px solid var(--rule);padding:1.1rem 0} .inv-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .2rem} .inv-head .inv-name{font-weight:600} .inv-width{margin:.1rem 0 .6rem;opacity:.7;font-size:.92em} .cell.inv-copy{display:inline-flex;min-width:5rem;height:2rem;border:1px dashed var(--rule); border-radius:2px;margin-left:auto} .cell.inv-copy:hover,.cell.inv-copy:focus-visible{border-style:solid} /* A button that reads as a link, for the PNG rasteriser beside the SVG link. */ .linkish{background:none;border:0;padding:0;font:inherit;color:inherit; text-decoration:underline;text-underline-offset:2px;cursor:pointer} /* ------------------------------------------------------------- consent * One small card above the rail, never over it: the rail is the readout and * a banner that covers it hides the thing the page is for. [hidden] is * restated because .consent sets display, and a class selector outranks the * user-agent rule that hidden relies on. */ .consent{position:fixed;right:16px;bottom:calc(var(--rail-h) + 12px);z-index:50; max-width:420px;display:flex;flex-direction:column;gap:14px;padding:16px 18px; background:var(--paper-raised);color:var(--ink);border:2px solid var(--ink)} .consent[hidden]{display:none} .consent p{font:400 14px/1.5 var(--f-read);margin:0} .consent p a{color:var(--ink);text-decoration-color:var(--spot);text-underline-offset:3px} .consent-actions{display:flex;gap:10px;flex-wrap:wrap} .consent-actions button{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; padding:10px 14px;cursor:pointer;border:1px solid var(--ink);background:none;color:var(--ink)} .consent-actions button[data-consent="granted"]{background:var(--ink);color:var(--paper)} .consent-actions button:hover{border-color:var(--spot)} .consent-actions button[data-consent="granted"]:hover{background:var(--spot);border-color:var(--spot)} .consent-actions button:focus-visible{outline:2px solid var(--spot);outline-offset:2px} @media (max-width:640px){.consent{left:16px;right:16px;max-width:none}} .footer-consent{font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);background:none;border:0;padding:0;cursor:pointer} .footer-consent:hover{color:var(--ink);text-decoration:underline; text-underline-offset:3px;text-decoration-color:var(--spot)}