/* * ShinobiHub v2 - visual system * * The same surfaces as ShinobiShop v2, so the two read as one product: a * light, airy canvas; white cards with hairline borders and soft layered * shadows; one confident violet accent; deep navy ink rather than black; * generous spacing. Colour means something (state, selection), never decoration. * * ## Light and dark are a choice here, not a guess * * The shop follows `prefers-color-scheme`. The hub does not, deliberately. * It is a reading and writing surface, its default is light, and the visitor * decides otherwise with the toggle in the masthead. That choice is a cookie * read on the server and written onto `` before the first * byte, so there is no flash of the wrong theme while a script catches up. * * Every colour below is a variable for that reason. A rule that hardcodes * `#fff` or `#000` works in one theme and is a bug in the other. */ :root, :root[data-theme="light"] { /* Ink. Navy, not black: softer on a light canvas and reads as considered. */ --ink: #0a2540; --ink-soft: #425466; --ink-faint: #697386; /* Surfaces */ --canvas: #f6f9fc; --surface: #ffffff; --surface-sunken: #f6f9fc; --surface-raised: #ffffff; /* Hairlines. Two weights: one barely there, one for real separation. */ --line: #e6ebf1; --line-strong: #d5dbe4; /* Accent */ --accent: #635bff; --accent-hover: #4f46e5; --accent-ink: #ffffff; --accent-wash: #f5f4ff; --accent-edge: #c7c3ff; /* State */ --good: #0e7c5a; --good-wash: #e3f5ee; --good-edge: #a6ddc8; --warn: #a15c07; --warn-wash: #fdf3e3; --warn-edge: #f0d3a4; --bad: #b3261e; --bad-wash: #fdeceb; --bad-edge: #f3bfbb; /* Text on a filled `--bad`. White reads on the light theme's deep red and is unreadable on the dark theme's salmon, so it is a token of its own. */ --bad-ink: #ffffff; /* The ground behind a letterboxed image or video, in both themes. Video is usually dark at the edges and black is what a player mats against. */ --media-mat: #000000; /* Layered shadows: what makes a card sit on the page rather than be drawn on it. */ --shadow-sm: 0 1px 2px rgba(10, 37, 64, .06), 0 1px 3px rgba(10, 37, 64, .04); --shadow-md: 0 2px 5px rgba(10, 37, 64, .06), 0 6px 14px rgba(10, 37, 64, .06); --shadow-lg: 0 4px 8px rgba(10, 37, 64, .06), 0 14px 32px rgba(10, 37, 64, .09); --shadow-accent: 0 0 0 1px var(--accent), 0 2px 6px rgba(99, 91, 255, .18); /* The masthead gradient, as the shop has it. */ --masthead-from: #3a2d8f; --masthead-to: #635bff; --masthead-ink: #ffffff; --masthead-ink-soft: rgba(255, 255, 255, .72); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; color-scheme: light; } :root[data-theme="dark"] { --ink: #eaf0f6; --ink-soft: #a9b6c6; --ink-faint: #8493a5; --canvas: #0b1220; --surface: #141c2b; --surface-sunken: #0f1725; --surface-raised: #1a2436; --line: #24304a; --line-strong: #33415e; --accent: #8b85ff; --accent-hover: #a29bff; --accent-ink: #0b1220; --accent-wash: #1a1d3d; --accent-edge: #4b4590; --good: #4ecfa0; --good-wash: #10281f; --good-edge: #2c5f4b; --warn: #e0a651; --warn-wash: #2a2113; --warn-edge: #5e4a25; --bad: #f08a83; --bad-wash: #2c1614; --bad-edge: #6b322d; /* Dark ink on the salmon, where the light theme uses white on deep red. */ --bad-ink: #2c1614; --media-mat: #000000; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45); --shadow-lg: 0 8px 28px rgba(0, 0, 0, .5); --shadow-accent: 0 0 0 1px var(--accent), 0 2px 8px rgba(139, 133, 255, .25); --masthead-from: #171a3d; --masthead-to: #3b3590; --masthead-ink: #eaf0f6; --masthead-ink-soft: rgba(234, 240, 246, .66); color-scheme: dark; } /* * Dancing Script, self-hosted. * * Served from our own origin rather than a font CDN: it keeps the wordmark * identical everywhere, avoids a third-party request on every page load, and * means the masthead does not depend on Google being reachable. Latin subset * only, since the wordmark is ASCII. `swap` so text is never invisible while * it loads. */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/dancing-script-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { box-sizing: border-box; } body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; font-weight: 500; } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 650; } h1 { font-size: 30px; letter-spacing: -.02em; } h2 { font-size: 21px; letter-spacing: -.01em; } h3 { font-size: 17px; } p { margin: 0 0 1em; color: var(--ink-soft); } hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } code, pre, .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ------------------------------------------------------------------ masthead */ /* * The masthead, and why the diagonal is drawn on a layer of its own. * * `clip-path` on an element clips every one of its descendants, absolutely * positioned ones included, and no amount of `z-index` escapes it: a clip is * applied after painting rather than competing for stacking order. With the * cut on `.masthead` itself, the navigation dropdowns and the mobile panel * were sliced off at the diagonal, so a menu opened and showed a sliver of * white and nothing else. * * So the gradient and the cut live on a pseudo-element behind the content, and * `.masthead` does no clipping at all. The result is pixel for pixel what it * was, and the menus can now hang below the header where they belong. */ .masthead { position: relative; color: var(--masthead-ink); padding-bottom: 26px; } .masthead::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--masthead-from), var(--masthead-to)); /* The diagonal cut the v1 shop had, kept because it is the identity. */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); } .topbar { max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; /* * Above the gradient behind it, and above the page below it, so an open * dropdown covers the article listing rather than being covered by it. */ position: relative; z-index: 50; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--masthead-ink); font-size: 20px; font-weight: 600; white-space: nowrap; } .brand:hover { color: var(--masthead-ink); } .brand-mark { width: 28px; height: 28px; border-radius: 6px; } .brand-script { font-family: 'Dancing Script', cursive; font-size: 25px; font-weight: 700; } .brand b { font-weight: 650; } .sitenav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .navlink, .navtrigger { background: none; border: 0; font: inherit; color: var(--masthead-ink-soft); padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; } .navlink:hover, .navtrigger:hover, .navgroup.open .navtrigger { color: var(--masthead-ink); background: rgba(255, 255, 255, .12); } .navgroup { position: relative; } .navchev { transition: transform .15s ease; } .navgroup.open .navchev { transform: rotate(180deg); } .navmenu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; } .navmenu-right { left: auto; right: 0; } .navgroup.open .navmenu { display: block; } .navmenu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; } .navmenu a:hover { background: var(--accent-wash); color: var(--ink); } .navitem-title { display: block; } .navitem-blurb { display: block; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; } .navtail { display: flex; align-items: center; gap: 10px; margin-left: 8px; } .navwho { color: var(--masthead-ink-soft); font-size: 13px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navtoggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .navtoggle span { display: block; width: 22px; height: 2px; margin: 4px 0; background: var(--masthead-ink); border-radius: 2px; } /* ------------------------------------------------------------- theme toggle */ /* * Two states, one control. It shows the theme you would get by pressing it, * not the one you are in, because a button labelled with the current state * reads as a status light rather than a switch. */ .themetoggle { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: var(--masthead-ink); width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; } .themetoggle:hover { background: rgba(255, 255, 255, .22); } .themetoggle svg { width: 16px; height: 16px; display: block; } /* Each icon shows only in the theme whose opposite it offers. */ .themetoggle .icon-sun { display: none; } :root[data-theme="dark"] .themetoggle .icon-sun { display: block; } :root[data-theme="dark"] .themetoggle .icon-moon { display: none; } /* ---------------------------------------------------------------- structure */ main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; } main.reading { max-width: 820px; } .pagehead { margin-bottom: 22px; } .pagehead h1 { margin-bottom: 6px; } .pagehead p { color: var(--ink-faint); margin: 0; } .pagehead-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .pagehead-row > :first-child { flex: 1 1 320px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; } .card-flush { padding: 0; overflow: hidden; } .card h2:first-child, .card h3:first-child { margin-top: 0; } .muted { color: var(--ink-faint); } .small { font-size: 13px; } .right { text-align: right; } .stack > * + * { margin-top: 14px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .spacer { flex: 1; } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .06s ease; } .btn:hover { background: var(--surface-sunken); color: var(--ink); border-color: var(--ink-faint); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .btn-danger { color: var(--bad); border-color: var(--bad-edge); background: var(--bad-wash); } .btn-danger:hover { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); } .btn-small { padding: 6px 11px; font-size: 13px; } .btn-onDark { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); color: var(--masthead-ink); } .btn-onDark:hover { background: rgba(255, 255, 255, .24); color: var(--masthead-ink); } .btnrow { display: flex; gap: 10px; flex-wrap: wrap; } /* ------------------------------------------------------------------- forms */ label { display: block; font-weight: 550; font-size: 13.5px; margin-bottom: 5px; color: var(--ink); } /* * Stacked fields need the gap between them. Fields laid out by a grid do not: * the grid's own `gap` already spaces them, and this margin lands on every * field except the first, so the first one in a row sits 14px higher than its * neighbours and the labels no longer line up. * * Scoped to direct children, so a pair of fields genuinely stacked inside one * grid cell still gets the gap. */ .field + .field { margin-top: 14px; } .grid > .field + .field { margin-top: 0; } /* * An input with a control beside it, both the same height. * * `.btn-small` is shorter than an input, so a flex row centred on the cross * axis leaves the button floating in the middle of the field. Stretching makes * the two agree without pinning either to a fixed height. */ .field-inline { display: flex; align-items: stretch; gap: 6px; } .field-inline input { flex: 1 1 auto; min-width: 0; } .field-inline .btn { flex: none; } .field-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; } input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-accent); } textarea { resize: vertical; min-height: 90px; } .checkline { display: flex; align-items: flex-start; gap: 9px; } .checkline input { margin-top: 3px; flex: none; width: auto; } .checkline label { margin: 0; font-weight: 500; } /* * A rule with a word sitting in it, dividing two ways of doing the same thing. * * The line is drawn by the pseudo-elements either side rather than by a border * on the container, because the gap the word sits in has to be exactly as wide * as the word: a border plus a background-coloured span breaks the moment the * surface behind it is not the colour that span was painted. */ .orline { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--ink-faint, var(--ink-soft)); font-size: 13px; } .orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* A button that owns its row, for a single alternative action. */ .btn-block { display: block; width: 100%; text-align: center; } /* * A checkbox sitting inline with the controls beside it. * * The box and its words are one label so the words are part of the hit area, * and the baseline is centred rather than inherited, because a bare checkbox * in a flex row lines up with the top of a text input instead of its middle. */ .check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); cursor: pointer; user-select: none; } .check input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); cursor: pointer; } /* ------------------------------------------------------------------ notices */ .notice { padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-soft); font-size: 14px; } .notice.ok { background: var(--good-wash); border-color: var(--good-edge); color: var(--good); } .notice.warn { background: var(--warn-wash); border-color: var(--warn-edge); color: var(--warn); } .notice.error { background: var(--bad-wash); border-color: var(--bad-edge); color: var(--bad); } .notice:empty { display: none; } /* ------------------------------------------------------------------- badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; border: 1px solid var(--line-strong); background: var(--surface-sunken); color: var(--ink-faint); white-space: nowrap; } .badge-good { background: var(--good-wash); border-color: var(--good-edge); color: var(--good); } .badge-warn { background: var(--warn-wash); border-color: var(--warn-edge); color: var(--warn); } .badge-bad { background: var(--bad-wash); border-color: var(--bad-edge); color: var(--bad); } .badge-accent { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent); } /* --------------------------------------------------------------------- tabs */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; } .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-weight: 550; color: var(--ink-faint); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .tabs button:hover { color: var(--ink); } .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); } .tabs .count { font-size: 11px; font-weight: 600; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; color: var(--ink-faint); } .tabs button.active .count { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent); } .tabpane { display: none; } .tabpane.active { display: block; } /* ------------------------------------------------------------------- tables */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); } .table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); background: var(--surface-sunken); font-weight: 600; } .table tr:last-child td { border-bottom: 0; } .table-wrap { overflow-x: auto; } /* ------------------------------------------------------------ listing cards */ .listing { display: grid; gap: 14px; } .entry { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; color: var(--ink); font-weight: 400; transition: box-shadow .14s ease, border-color .14s ease, transform .06s ease; } .entry:hover { color: var(--ink); border-color: var(--accent-edge); box-shadow: var(--shadow-md); transform: translateY(-1px); } .entry h3 { margin: 0 0 6px; font-size: 17px; } .entry p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; } .entry-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); } /* * An entry only its author and staff can see. * * Marked with a real edge rather than a badge alone, because the whole * problem this listing had was unpublished work being indistinguishable from * published work. */ .entry-unlisted { border-left: 3px solid var(--warn); } .empty { text-align: center; padding: 48px 24px; color: var(--ink-faint); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-sunken); } .empty h3 { color: var(--ink-soft); } /* --------------------------------------------------------------- pagination */ .pager { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 22px; } .pager button { min-width: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); border-radius: var(--radius-sm); font: inherit; font-size: 13px; cursor: pointer; } .pager button:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); } .pager button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .pager button[disabled] { opacity: .4; cursor: not-allowed; } /* ---------------------------------------------------------------- searchbar */ .searchbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .searchbar input[type=search] { flex: 1 1 240px; } .searchbar select { flex: 0 0 auto; width: auto; } /* ------------------------------------------------------------------ article */ /* * The reading surface. * * Wider measure than the app chrome, larger type, more air between blocks. * `.formatted` is also what the editor styles while writing, so what is typed * is what appears. */ .article-head { margin-bottom: 26px; } .article-head h1 { font-size: 34px; margin-bottom: 10px; } .article-lede { font-size: 17px; color: var(--ink-soft); margin-bottom: 14px; } .article-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); padding-bottom: 18px; border-bottom: 1px solid var(--line); } .formatted { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); } .formatted h2 { font-size: 24px; margin: 1.6em 0 .5em; color: var(--ink); } .formatted h3 { font-size: 19px; margin: 1.4em 0 .4em; color: var(--ink); } .formatted p { margin: 0 0 1.1em; } .formatted ul, .formatted ol { margin: 0 0 1.1em; padding-left: 1.4em; } .formatted li { margin-bottom: .4em; } .formatted a { text-decoration: underline; text-underline-offset: 2px; } .formatted blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent-edge); color: var(--ink-faint); font-style: italic; } .formatted pre { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; margin: 0 0 1.2em; } .formatted code:not(pre code) { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } .formatted table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; } .formatted th, .formatted td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; } .formatted th { background: var(--surface-sunken); } /* * Attached media. * * Constrained to the measure and never wider than its column, because an * image dropped in at its natural size was the other half of "image attach * does not work well". */ .formatted img, .formatted video, .formatted iframe { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.4em auto; } .formatted video { background: var(--media-mat); width: 100%; } .formatted figure { margin: 1.6em 0; } .formatted figcaption { font-size: 13.5px; color: var(--ink-faint); text-align: center; margin-top: 8px; } /* ContentTools wraps an embedded video in this. Keeps a 16:9 box. */ .formatted .ce-element--type-video, .formatted .video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 1.4em 0; border-radius: var(--radius); overflow: hidden; background: var(--media-mat); } .formatted .ce-element--type-video iframe, .formatted .video-embed iframe, .formatted .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; } /* --------------------------------------------------------------- key + code */ .keyline { display: flex; align-items: center; gap: 8px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; } .keyline .spacer { flex: 1; } .jsonblock { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); max-height: 520px; margin: 0; } /* -------------------------------------------------------------------- modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10, 37, 64, .5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; } :root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .66); } .modal { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; max-width: 460px; width: 100%; } .modal h3 { margin-top: 0; } .modal .btnrow { justify-content: flex-end; margin-top: 18px; } /* ------------------------------------------------------------------- footer */ .sitefoot { border-top: 1px solid var(--line); background: var(--surface); padding: 26px 24px; color: var(--ink-faint); font-size: 13px; } .sitefoot .inner { max-width: 1180px; margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .sitefoot a { color: var(--ink-soft); font-weight: 500; } .sitefoot a:hover { color: var(--accent); } /* ------------------------------------------------------------------ mobile */ @media (max-width: 940px) { .navtoggle { display: block; margin-left: auto; } .sitenav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface-raised); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 10px; z-index: 80; max-height: 78vh; overflow-y: auto; } .topbar { position: relative; flex-wrap: wrap; } .sitenav.open { display: flex; } .navlink, .navtrigger { color: var(--ink); justify-content: space-between; } .navlink:hover, .navtrigger:hover { background: var(--accent-wash); color: var(--ink); } /* One panel with every group already open, so nothing hides behind a second tap. */ .navchev { display: none; } .navmenu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 6px 10px; min-width: 0; background: none; } .navtail { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); } .navwho { color: var(--ink-faint); max-width: none; } .btn-onDark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-onDark:hover { background: var(--accent-hover); color: var(--accent-ink); } .themetoggle { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink); } .themetoggle:hover { background: var(--accent-wash); } main { padding: 22px 16px 48px; } .article-head h1 { font-size: 27px; } h1 { font-size: 25px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------- cookie bar */ /* * Sits above everything, including the chat widget it is asking about. * * `pointer-events: none` on the strip and `auto` on the panel inside it, so * the empty space either side of the bar does not swallow clicks on the page * behind it. */ .cookiebar { position: fixed; z-index: 2147483000; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; pointer-events: none; } .cookiebar[hidden] { display: none; } .cookiebar-inner { pointer-events: auto; max-width: 1080px; margin: 0 auto; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(10, 37, 64, .18); padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cookiebar-text { flex: 1 1 340px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; } .cookiebar-text b { color: var(--ink); } .cookiebar-actions { display: flex; gap: 8px; margin-left: auto; } /* A button that has to read as the quiet footer text around it. */ .linkbutton { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .linkbutton:hover { color: var(--accent); text-decoration: underline; } .linkbutton[hidden] { display: none; }