:root { --ink: #0f172a; --ink-hover: #1e293b; --ink-2: #334155; --muted: #475569; --code-bg: #0f172a; --code-line: #1e293b; --code-ink: #e2e8f0; --code-muted: #94a3b8; --code-del: #fecaca; --code-del-bg: #4c1d24; --code-add: #bbf7d0; --code-add-bg: #14402a; --line: #e2e8f0; --line-strong: #94a3b8; --bg: #ffffff; --soft: #f8fafc; /* A tinted band on the home page: its text keeps 4.5:1 (muted 6.9, link 6.1, green 6.5). */ --band: #f1f5f9; --link: #1d4ed8; --ok-ink: #166534; --ok-bg: #f0fdf4; --ok-line: #bbf7d0; --warn-ink: #92400e; --warn-bg: #fffbeb; --warn-line: #fde68a; --bad-ink: #b91c1c; --bad-bg: #fef2f2; --bad-line: #fecaca; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; } html:lang(ja) p, html:lang(ja) dd, html:lang(ja) li { line-height: 1.8; } html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3 { word-break: auto-phrase; } a { color: var(--link); text-underline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } code, .mono { font-family: var(--mono); } h1, h2, h3, p { margin: 0; } h1 { font-size: 28px; line-height: 1.3; } h2 { font-size: 20px; line-height: 1.4; } h3 { font-size: 16px; line-height: 1.4; } /* * Icons on their text's centre (ui-craft A5; founder 11-09: the Skipbox mark in the org page's * quote sat 3.5px low, and many more like it). An icon's centre sits half its label's cap height * above the label's first baseline: the middle of a capital, the visual centre of a line in Latin * and in Japanese, in any font. Centring on the line box (align-items: center, a margin of * (line-height - size) / 2) depends on each font's ascent and descent: it missed by 0.5-1.5px, * differently in Chromium and WebKit, and a label on two lines pulled its icon to their middle. * * --cap is the label's cap height: 1cap where the label's font is (a row, or the label itself), * inherited as a length. --ico is the icon's height, from one scale by the text beside it: 16px * beside 13-16px, 20px beside 16-18px, 24px beside 18-28px (and the logo); a badge with text is * the height of its own box (20 or 24px). * * In a row (flex or grid): items align on their first baseline. The icon has no baseline of its * own (an svg; contain: layout for a badge with text), so its bottom edge sits on the label's * baseline; top moves it down by (--ico - --cap) / 2, and margin-top takes its height out of the * row's, so the row stays as tall as its text. A row with a min-height centres its one line with * align-content (flex-wrap: wrap makes it a multi-line container). * In a line of text (.interval-save): vertical-align lifts its bottom edge from the baseline * by (--cap - --ico) / 2. * * icon-centre-*.browser.test.ts measures every icon on every page, in Chromium and WebKit, at * 1280 and 390, in both languages, against a 0.5px tolerance. */ @property --cap { syntax: ""; inherits: true; initial-value: 0px; } .brand > svg, .foot-brand > svg, .quote-icon, .vendor-icon, .term-check, .check-mark, .steps li::before, .disclosure > summary::after, .top-drop > summary::after, .price-badge, .reason input { flex: none; position: relative; contain: layout; height: var(--ico); top: calc((var(--ico) - var(--cap)) / 2); margin-top: calc(-1 * var(--ico)); margin-bottom: 0; } .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; } .top { border-bottom: 1px solid var(--line); } .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; } .brand { --cap: 1cap; --ico: 24px; display: inline-flex; flex-wrap: wrap; align-content: center; align-items: baseline; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; } .brand svg { width: var(--ico); } .top-actions { display: flex; align-items: center; gap: 8px; } .top-actions form { margin: 0; } /* * The public pages' header (site-header.ts): the logo, Pricing, Docs and the Resources menu on * the left; Log in, the small trial button and the language on the right. Under 768px the links, * Log in and the language go into the Menu, and the trial button stays. Both menus are *
, so they open without the script; one opens below its button, over the page. */ .top .top-bar { justify-content: flex-start; } .top-links { display: flex; align-items: center; gap: 4px; margin-left: 16px; } .top-actions { margin-left: auto; } /* A header label never wraps: 「メニュー」 and 「ログイン」 broke into a column at 390. */ .top-bar .textbtn, .top-bar .btn { white-space: nowrap; } .top-link[aria-current="page"] { font-weight: 600; } .top-drop, .top-menu { position: relative; } .top-drop > summary, .top-menu > summary { list-style: none; gap: 6px; } .top-drop > summary::-webkit-details-marker, .top-menu > summary::-webkit-details-marker { display: none; } .top-drop > summary { --cap: 1cap; flex-wrap: wrap; align-content: center; align-items: baseline; } /* The chevron: a V drawn to fill its box, so its box is its ink; flipped when open. */ .top-drop > summary::after { content: ""; --ico: 6px; width: 10px; background: currentColor; clip-path: polygon(0 1.1px, 1.1px 0, 5px 3.9px, 8.9px 0, 10px 1.1px, 5px 6px); } .top-drop[open] > summary::after { transform: rotate(180deg); } .top-drop-list, .top-menu-panel { position: absolute; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 8px 24px rgb(15 23 42 / 0.08); } .top-drop-list { left: 0; min-width: 200px; list-style: none; } .top-drop-link, .top-menu-panel a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 1.5; text-decoration: none; white-space: nowrap; } .top-drop-link:hover, .top-menu-panel a:hover { background: var(--soft); } .top-drop-link[aria-current="page"], .top-menu-panel a[aria-current="page"] { font-weight: 600; } .top-menu { display: none; } .top-menu-panel { right: 0; width: min(280px, calc(100vw - 32px)); } .top-menu-panel ul { margin: 0; padding: 0; list-style: none; } .top-menu-panel li + li:last-child { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .top-menu-panel a { min-height: 44px; font-size: 16px; } /* .top in front: .textbtn (below) sets display too, and a later rule of the same weight wins. */ @media (max-width: 767px) { .top .top-links, .top .top-login, .top .top-lang { display: none; } .top .top-menu { display: block; } .top-actions { gap: 4px; } } /* The public header sticks and, past 40px of scroll, folds the name into the moving mark. */ .logo-mark .logo-r, .logo-mark .logo-b { opacity: 0; } .logo-prism-wrap { mix-blend-mode: screen; } .logo-prism { transform-origin: 16px -14px; transform: translateX(-30px) rotate(20deg); opacity: 0; } .logo-prism polygon, .logo-prism .logo-ch { mix-blend-mode: screen; } .logo-fan { transform-origin: 16px -14px; } .logo-mark[data-s="intro"] .logo-prism { animation: logo-turn 456ms cubic-bezier(.45, .05, .35, 1); } .logo-mark[data-s="intro"] .logo-fan { animation: logo-fan 456ms cubic-bezier(.45, .05, .35, 1); } .logo-mark[data-s="intro"] .logo-ch-r { animation: logo-split-r 456ms cubic-bezier(.6, 0, .9, .4); } .logo-mark[data-s="intro"] .logo-ch-b { animation: logo-split-b 456ms cubic-bezier(.6, 0, .9, .4); } @keyframes logo-fan { from { transform: none; } to { transform: scaleX(2.6); } } @keyframes logo-split-r { from { transform: none; } to { transform: translateX(-3.5px); } } @keyframes logo-split-b { from { transform: none; } to { transform: translateX(3.5px); } } @keyframes logo-turn { 0% { transform: translateX(-30px) rotate(20deg); opacity: 0; } 14% { opacity: .07; } 80% { opacity: .07; } 100% { transform: translateX(72px) rotate(20deg); opacity: 0; } } .logo-mark[data-s="hover"] .logo-prism { animation: logo-turn-loop 2600ms infinite; } .logo-mark[data-s="hover"] .logo-fan { animation: logo-fan-loop 2600ms infinite; } .logo-mark[data-s="hover"] .logo-ch-r { animation: logo-split-r-loop 2600ms infinite; } .logo-mark[data-s="hover"] .logo-ch-b { animation: logo-split-b-loop 2600ms infinite; } @keyframes logo-fan-loop { 0% { transform: none; animation-timing-function: cubic-bezier(.45, .05, .35, 1); } 17.6%, 100% { transform: scaleX(2.6); } } @keyframes logo-split-r-loop { 0% { transform: none; animation-timing-function: cubic-bezier(.6, 0, .9, .4); } 17.6%, 100% { transform: translateX(-3.5px); } } @keyframes logo-split-b-loop { 0% { transform: none; animation-timing-function: cubic-bezier(.6, 0, .9, .4); } 17.6%, 100% { transform: translateX(3.5px); } } @keyframes logo-turn-loop { 0% { transform: translateX(-30px) rotate(20deg); opacity: 0; animation-timing-function: cubic-bezier(.45, .05, .35, 1); } 2.5% { opacity: .07; } 14.2% { opacity: .07; } 17.6%, 100% { transform: translateX(72px) rotate(20deg); opacity: 0; } } .logo-mark[data-s="intro"] .logo-c2 { animation: logo-c2 800ms 60ms; } .logo-mark[data-s="intro"] .logo-c1 { animation: logo-c1 800ms 60ms; } .logo-mark[data-s="intro"] .logo-c0 { animation: logo-c0 800ms 60ms; } .logo-mark[data-s="intro"] .logo-r { animation: logo-r 800ms ease-out 60ms; } .logo-mark[data-s="intro"] .logo-b { animation: logo-b 800ms ease-out 60ms; } @keyframes logo-c2 { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .85, .35); } 36%, 100% { transform: translateX(20px); } } @keyframes logo-c1 { 0%, 12% { transform: translateX(0); animation-timing-function: cubic-bezier(.3, 0, .25, 1); } 48% { transform: translateX(8.9px); } 62% { transform: translateX(7.7px); } 74%, 100% { transform: translateX(8px); } } @keyframes logo-c0 { 0%, 24% { transform: translateX(0); animation-timing-function: cubic-bezier(.2, .75, .25, 1); } 60% { transform: translateX(21px); } 74% { transform: translateX(19.7px); } 86%, 100% { transform: translateX(20px); } } @keyframes logo-r { 0% { opacity: 0; transform: none; } 8% { opacity: .75; transform: translateX(-.9px); } 50% { transform: translateX(-.45px); } 80% { opacity: .35; transform: translateX(-.15px); } 100% { opacity: 0; transform: none; } } @keyframes logo-b { 0% { opacity: 0; transform: none; } 8% { opacity: .75; transform: translateX(.6px); } 50% { transform: translateX(.3px); } 80% { opacity: .35; transform: translateX(.1px); } 100% { opacity: 0; transform: none; } } .logo-mark[data-s="hover"] .logo-c2 { animation: logo-c2-loop 2600ms 60ms infinite backwards; } .logo-mark[data-s="hover"] .logo-c1 { animation: logo-c1-loop 2600ms 60ms infinite backwards; } .logo-mark[data-s="hover"] .logo-c0 { animation: logo-c0-loop 2600ms 60ms infinite backwards; } .logo-mark[data-s="hover"] .logo-r { animation: logo-r-loop 2600ms 60ms infinite ease-out; } .logo-mark[data-s="hover"] .logo-b { animation: logo-b-loop 2600ms 60ms infinite ease-out; } @keyframes logo-c2-loop { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .85, .35); } 9%, 100% { transform: translateX(20px); } } @keyframes logo-c1-loop { 0%, 3% { transform: translateX(0); animation-timing-function: cubic-bezier(.3, 0, .25, 1); } 12% { transform: translateX(8.9px); } 16% { transform: translateX(7.7px); } 19%, 100% { transform: translateX(8px); } } @keyframes logo-c0-loop { 0%, 6% { transform: translateX(0); animation-timing-function: cubic-bezier(.2, .75, .25, 1); } 15% { transform: translateX(21px); } 19% { transform: translateX(19.7px); } 22%, 100% { transform: translateX(20px); } } @keyframes logo-r-loop { 0% { opacity: .75; transform: translateX(-.9px); } 13% { transform: translateX(-.45px); } 21%, 100% { opacity: .3; transform: translateX(-.35px); } } @keyframes logo-b-loop { 0% { opacity: .75; transform: translateX(.6px); } 13% { transform: translateX(.3px); } 21%, 100% { opacity: .3; transform: translateX(.25px); } } .logo-mark[data-s="leave"] .logo-chev { animation: logo-recoil 460ms ease-out; } .logo-mark[data-s="leave"] .logo-r { animation: logo-r-out 320ms ease-out; } .logo-mark[data-s="leave"] .logo-b { animation: logo-b-out 320ms ease-out; } @keyframes logo-recoil { 0% { transform: translateX(1px); } 45% { transform: translateX(-.6px); } 75% { transform: translateX(.15px); } 100% { transform: none; } } @keyframes logo-r-out { from { opacity: .3; transform: translateX(-.35px); } to { opacity: 0; transform: none; } } @keyframes logo-b-out { from { opacity: .3; transform: translateX(.25px); } to { opacity: 0; transform: none; } } .top:has(> .top-bar) { position: sticky; top: 0; z-index: 30; background: var(--bg); } html:has(.top > .top-bar) { scroll-padding-top: 65px; } .top-bar .brand { gap: 0; } .brand-name { display: grid; clip-path: inset(-8px 0); } .brand-name > span { justify-self: start; padding-left: 8px; white-space: nowrap; transition: transform 360ms cubic-bezier(.2, .9, .3, 1.12) 120ms; } .top.is-compact .brand-name > span { transform: translateX(-100%); transition: transform 320ms cubic-bezier(.55, 0, .8, .2); } .top.to-compact .brand > svg { animation: logo-gulp 440ms ease-out 260ms; } .top.to-full .brand > svg { animation: logo-spit 380ms ease-out; } @keyframes logo-gulp { 0% { transform: none; } 35% { transform: scale(1.035); } 65% { transform: scale(.99); } 100% { transform: none; } } @keyframes logo-spit { 0% { transform: none; } 30% { transform: scale(1.03) translateX(.25px); } 100% { transform: none; } } .top.top-still, .top.top-still * { transition: none !important; } /* * From 768px the first view's header is taller, with a larger logo (an 80px bar, a 28px mark, a * 21px name); past 40px of scroll it settles to a quieter 60px bar, a 24px mark and a 36px trial * button (founder, 11-09). The header gains the height it loses as margin below it, on the same * curve, so nothing below moves (and scroll anchoring cannot push the page back above 40px and * open the header again). Under 768px the bar stays 64px: the trial button keeps its 44px target. */ @media (min-width: 768px) { .top:has(> .top-bar) { transition: margin-bottom 300ms ease; } .top > .top-bar { min-height: 80px; transition: min-height 300ms ease; } .top-bar .brand { --ico: 28px; font-size: 21px; transform-origin: left center; transition: transform 300ms ease; } .top-bar .top-cta { transition: min-height 300ms ease, padding 300ms ease; } .top.is-compact { margin-bottom: 20px; } .top.is-compact > .top-bar { min-height: 60px; } .top.is-compact .brand { transform: scale(.857); } .top.is-compact .top-cta { min-height: 36px; padding: 0 14px; } /* The name's box closes with it, so Pricing and the rest move up beside the mark. */ .brand-name { grid-template-columns: minmax(0, 1fr); transition: grid-template-columns 360ms cubic-bezier(.2, .9, .3, 1) 120ms; } .top.is-compact .brand-name { grid-template-columns: minmax(0, 0fr); transition: grid-template-columns 320ms cubic-bezier(.55, 0, .8, .2); } html:has(.top > .top-bar) { scroll-padding-top: 61px; } } @media (prefers-reduced-motion: reduce) { .logo-mark, .logo-mark *, .top:has(> .top-bar), .top:has(> .top-bar) * { animation: none !important; transition: none !important; } } .textbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; text-decoration: none; cursor: pointer; } .textbtn:hover { background: var(--soft); } main { padding: 32px 0 64px; } .lead { margin-top: 12px; max-width: 640px; color: var(--muted); } .lead-note { margin-top: 16px; } /* /workflows: the runs-on line under its lead, not touching it. */ .lead + .code { margin-top: 16px; } .note { color: var(--muted); font-size: 14px; } .consent { margin: 8px 0 0; } /* /connect: under both install cards, outside them. */ .install-consent { margin-top: 16px; } .legal { max-width: 760px; } .legal h2 { margin-top: 32px; } .legal p, .legal ol, .legal ul { margin-top: 12px; } .legal ol, .legal ul { padding-left: 24px; } .legal li + li, .legal li > ul, .legal li > p { margin-top: 8px; } .legal a { overflow-wrap: anywhere; } .legal-table { margin-top: 16px; overflow-x: auto; } .legal-table table { width: 100%; border-collapse: collapse; } .legal-table th, .legal-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .legal-table th[scope="row"] { width: 28%; font-weight: 600; } /* A runs-on label in a docs table is one token to copy: never split at its hyphen, and a column's heading on one row ("Per / month", docs Plans at 1280, walk 11-09). The docs' tables hold only labels and short headings; articles' tables quote long error lines, which wrap. */ .doc-body .legal-table td code, .doc-body .legal-table th code, .doc-body .legal-table thead th { white-space: nowrap; } .eyebrow { color: var(--muted); font-size: 14px; } .section { margin-top: 32px; } .section > h2 + * { margin-top: 16px; } .card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--bg); } .card-soft { background: var(--soft); } .card > * + * { margin-top: 16px; } .card > h2 + p, .card > h3 + p { margin-top: 8px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--ink); color: #ffffff; } .btn-primary:hover { background: var(--ink-hover); } .btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); } .btn-secondary:hover { background: var(--soft); } .btn-small { min-height: 44px; padding: 0 16px; font-size: 14px; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .plans { display: grid; gap: 12px; } .plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .plan-label { font-size: 20px; font-weight: 700; line-height: 1.3; } .plan-price { font-weight: 600; } .plan { display: flex; flex-direction: column; gap: 8px; } /* The label rides with its stepper to the card's foot, so "In all" never floats above its input. */ .plan .qty-label { margin-top: auto; } .qty-label { font-size: 14px; font-weight: 600; } .stepper { display: flex; align-items: center; gap: 8px; } .stepper .input-wrap { flex: 1; } .stepper input { text-align: center; } .step { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; } /* The sign drawn on the button's centre (A5): a glyph sits on its font's math axis, not the box's middle. The text stays for no CSS. */ .step { font-size: 0; background-image: linear-gradient(currentColor, currentColor); background-position: center; background-size: 14px 2px; background-repeat: no-repeat; } .step[data-step="1"] { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 14px 2px, 2px 14px; } .step:hover { background: var(--soft); } .step[aria-disabled="true"], .step[aria-disabled="true"]:hover { color: var(--line-strong); background: var(--bg); cursor: default; } .plan-total { font-size: 18px; } html:lang(ja) .plan-total { word-break: auto-phrase; } /* The plan page's monthly/yearly switch: two radios drawn as one segmented control. */ .interval { margin: 0; padding: 0; border: 0; min-width: 0; } .interval legend { padding: 0; margin-bottom: 8px; } .interval-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; } /* * Its label and badge in one line of text, centred, the badge on the label's centre (A5) and on a * line of its own when the option is too narrow for both (390, plan page): a flex row's baseline * pattern would draw a wrapped badge over its label. */ .interval-option { --cap: 1cap; position: relative; display: block; align-content: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; } .interval-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .interval-option:has(input:checked) { background: var(--ink); color: #ffffff; } .interval-option:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } .interval-option > span { margin-inline: 4px; } /* overflow: hidden puts an inline-block's baseline at its bottom edge, which vertical-align lifts. */ .interval-save { --ico: 20px; display: inline-block; overflow: hidden; height: var(--ico); vertical-align: calc((var(--cap) - var(--ico)) / 2); padding: 0 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; } .back-link { margin-top: 24px; } .stack > * + * { margin-top: 12px; } .share { display: grid; gap: 8px; } .section > .plans + .note { margin-top: 12px; } .perms { margin: 0; } .perm { padding: 16px 0; border-top: 1px solid var(--line); } .perm:first-child { padding-top: 0; border-top: 0; } .perm:last-child { padding-bottom: 0; } .perm dt { font-family: var(--mono); font-size: 14px; font-weight: 600; line-height: 1.5; } .perm dd { margin: 4px 0 0; color: var(--muted); } .card > h3 + .perms { margin-top: 12px; } /* /connect: the organization's app and the personal account's, side by side and the same height on a wide screen, each with its button at the foot; the permissions once below, closed. */ .choices { display: grid; gap: 24px; align-items: stretch; } .choice { display: flex; flex-direction: column; } .choice-action { margin-top: auto; padding-top: 16px; } .choice-action .note { margin-top: 8px; } html:lang(ja) .choice > p, html:lang(ja) .choice-action .note, html:lang(ja) .phrase { word-break: auto-phrase; } /* Side by side, the heading, the sentence and the button share rows across both cards. */ @media (min-width: 900px) { .choices { grid-template-columns: 1fr 1fr; row-gap: 0; } .choice { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; } .choice-action { margin-top: 0; } } .perms-details > .perms { margin-top: 8px; } .perms-details > .note { margin-top: 16px; } .perm-app { display: block; font-size: 13px; line-height: 1.5; margin-bottom: 4px; } .notice { border: 1px solid; border-radius: 12px; padding: 16px; } .notice > * + * { margin-top: 4px; } .notice h2, .notice h3 { font-size: 16px; line-height: 1.5; } .notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); } .notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); } .notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); } .org-head > * + * { margin-top: 4px; } .org-head .others { margin-top: 8px; font-size: 14px; color: var(--muted); } .status-row { display: flex; flex-direction: column; gap: 16px; } .status-line { margin-top: 4px; color: var(--muted); } .status-bad { border-color: var(--bad-line); background: var(--bad-bg); } .status-bad .status-line { color: var(--bad-ink); } .status-warn { border-color: var(--warn-line); background: var(--warn-bg); } .status-warn .status-line { color: var(--warn-ink); } .meter { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: var(--line); appearance: none; -webkit-appearance: none; } .meter::-webkit-progress-bar { background: var(--line); border-radius: 4px; } .meter::-webkit-progress-value { background: var(--ink); border-radius: 4px; } .meter::-moz-progress-bar { background: var(--ink); border-radius: 4px; } .meter + p { margin-top: 8px; } .waiting { font-weight: 600; } .note code, .notice code { white-space: nowrap; } /* A runs-on label never breaks inside itself (skipbox-8x16); the line may break before it. */ .nowrap { white-space: nowrap; } /* A number held with its unit or counter, a login with its さん (units.ts). */ .nb { white-space: nowrap; } /* An account or repository name in a sentence (views.ts accountName): never broken at its hyphen ("acme-/oss"). Inline, so the "." or "'s" after it stays on its line (review 11-09: inline-block let ". Trials" start the next one); names too long for a 390 px heading get no span (NAME_HELD_MAX). */ .name { white-space: nowrap; } /* A link to copy inside a notice (the install link, the plan link) still wraps: nowrap is for short inline code. */ .notice .code code { white-space: normal; } .code { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); } .code code { padding: 0 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } /* The setup card's sizes (views.ts sizesTable): each label, its size, and what this account does with it, a row 44 px tall at least so a row with a button and one without line up. The buttons sit in a last column as wide as the widest of them, each filling it, so their left and right edges line up across rows; a size it runs puts its state and copy button across both last columns, ending on the same right edge. On a phone each row stacks: the label and size, then what the account does, the button column shared by every row through a subgrid. */ .sizes { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; } .sizes th { padding: 0 8px 8px; color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); } .sizes td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } .sizes th:first-child, .sizes td:first-child { padding-left: 0; } .sizes th:last-child, .sizes td:last-child { padding-right: 0; } /* The columns sit where they do in every state, whatever the third one holds. */ .sizes th:nth-child(1) { width: 26%; } .sizes th:nth-child(2) { width: 22%; } .sizes tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; } .sizes code { font-size: 14px; white-space: nowrap; } .sizes .size-vm { white-space: nowrap; font-variant-numeric: tabular-nums; } .sizes .size-use > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-height: 44px; } .sizes .size-price { color: var(--muted); white-space: nowrap; } .sizes .size-act { width: 1%; white-space: nowrap; } .sizes .size-act .btn { width: 100%; } .size-buy { margin: 0; } .card > .sizes + .sizes-note { margin-top: 12px; } .card > .sizes-note + .sizes-note { margin-top: 8px; } html:lang(ja) .sizes-note { word-break: auto-phrase; } @media (max-width: 599px) { .sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .sizes { display: block; } .sizes tbody { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; } .sizes tr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .sizes tbody tr:first-child { padding-top: 0; } .sizes tbody tr:last-child { padding-bottom: 0; border-bottom: 0; } .sizes td, .sizes tbody tr:last-child td { display: block; padding: 0; border: 0; } .sizes .size-vm { grid-column: 2 / -1; justify-self: end; color: var(--muted); } .sizes .size-use { grid-column: 1 / 3; } .sizes .size-act { grid-column: 3; width: auto; } .sizes .size-runs { grid-column: 1 / -1; } /* Every row's button on the card's right edge, its state or price on the left. */ .sizes .size-use > div { justify-content: space-between; } .sizes .size-runs > div > :last-child { margin-left: auto; } .sizes .size-use > div:empty { min-height: 0; } } .field { display: grid; gap: 8px; } .field label { font-weight: 600; font-size: 14px; } .field-row { display: flex; flex-direction: column; gap: 8px; } .input-wrap { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); } .input-wrap:focus-within { outline: 2px solid var(--link); outline-offset: 2px; } .input-wrap .prefix { padding-left: 12px; color: var(--muted); font-family: var(--mono); font-size: 16px; white-space: nowrap; } .input-wrap input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 16px; } .input-wrap input:focus-visible { outline: none; } .input-wrap .prefix + input { padding-left: 0; } .field-error { color: var(--bad-ink); font-size: 14px; } .input-wrap:has(> input[aria-invalid="true"]) { border-color: var(--bad-ink); } /* One question, one answer: the cancel page's reasons (cancel-views.ts). 44 px rows, the whole row is the target. */ .reasons { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .reasons legend { margin-bottom: 8px; padding: 0; font-weight: 600; } .reason { --cap: 1cap; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; } .reason > span { flex: 1 1 0; min-width: 0; } .reason input { --ico: 20px; width: 20px; margin-inline: 0; accent-color: var(--ink); } .reason:has(input:checked) { border-color: var(--ink); background: var(--soft); } .reason:focus-within { outline: 2px solid var(--link); outline-offset: 2px; } .jobs { width: 100%; border-collapse: collapse; font-size: 14px; } .jobs th { padding: 0 8px 8px; color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); } .jobs td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .jobs th:first-child, .jobs td:first-child { padding-left: 0; } .jobs th:last-child, .jobs td:last-child { padding-right: 0; } .jobs .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .jobs .repo { font-weight: 600; overflow-wrap: anywhere; } .jobs .job-name { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; } .pill { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 13px; line-height: 24px; white-space: nowrap; background: var(--soft); border: 1px solid var(--line); } .pill-run { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); } .pill-wait { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); } .pill-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); } .pill-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); font-weight: 600; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .jobs td.cell-log { white-space: nowrap; } .jobs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .jobs-head + * { margin-top: 16px; } .jobs-notes > * + * { margin-top: 12px; } .jobs-notes + .jobs, .jobs-notes + .empty { margin-top: 16px; } .empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); } .empty > * + * { margin-top: 12px; } .jobs .job-why { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .jobs-more { margin-top: 12px; } .jobs-more a { display: inline-flex; align-items: center; min-height: 44px; } /* * The account's views as tabs (views.ts orgHead; docs/skipbox/dashboard-oooui-2026-11-09.md §2): * one row of links under the account's name, the current one dark, each 44 px tall. They wrap to * a second row on a phone rather than scroll, so every view stays in sight. */ /* One row that scrolls sideways where it doesn't fit, as GitHub's tabs do on a phone; COPY_JS brings the current tab into view. The line under the row is the row's own, so the current tab's underline sits on it and starts at the content's edge. */ .org-tabs { margin-top: 24px; } .org-tabs ul { position: relative; display: flex; gap: 0 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); } .org-tabs ul::-webkit-scrollbar { display: none; } .org-tabs li { flex: none; } .org-tabs li:first-child a { padding-left: 0; } .org-tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .org-tabs a:hover { color: var(--ink); } .org-tabs a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); } /* The usage view (usage-view.ts): figures as label over value, days as columns, ranks with bars. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px; margin: 0; } .stat { min-width: 0; } .stat dt { color: var(--muted); font-size: 14px; line-height: 1.5; } .stat dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; } .stat dd strong { color: var(--ok-ink); } .usage-waited { color: var(--warn-ink); font-weight: 600; } .usage-math { color: var(--muted); font-size: 13px; } .plans-billing .stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .usage-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .usage-card-actions > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; } .usage-pager { display: flex; gap: 0 16px; } .usage-pager a { display: inline-flex; align-items: center; min-height: 44px; } .usage-head .jobs-head + .note { margin-top: 0; } .day-chart { margin: 24px 0 0; } .usage-wait .stats { margin-top: 24px; } .day-bars { display: block; width: 100%; height: 120px; overflow: visible; } .day-bars rect { fill: var(--ink); } .day-bars rect:hover { fill: var(--link); } .day-bars line { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; } .day-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 13px; } .usage-rank .meter { margin-top: 8px; height: 4px; } .usage-top > h3 { margin-top: 32px; } .usage-value h2 { text-wrap: balance; } @media (max-width: 599px) { .jobs td.cell-wide { grid-column: 1 / -1; } } .progress .checklist { margin: 16px 0 0; padding: 0; list-style: none; } .progress .checklist + .note { margin-top: 16px; } .check { --cap: 1cap; display: flex; align-items: baseline; gap: 12px; } .check + .check { margin-top: 12px; } .check-mark { --ico: 24px; display: block; width: 24px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; } .check-done .check-mark { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); } .check-now .check-mark { border-color: var(--ink); background: var(--ink); color: var(--bg); } .check-bad .check-mark { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-ink); } .check-body { min-width: 0; } .check .check-title { line-height: 24px; } .check-done .check-title, .check-todo .check-title { color: var(--muted); } .check-now .check-title, .check-bad .check-title { font-weight: 600; } .check-detail { margin-top: 4px; color: var(--muted); font-size: 14px; } .check-bad .check-detail { color: var(--bad-ink); } .trial-nudge, .first-prompt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .trial-nudge > * + *, .first-prompt > * + * { margin-top: 8px; } .notice .first-prompt { border-top-color: var(--ok-line); } .owner-message code { font-family: inherit; white-space: normal; } .sign-in-first .start-form { margin-top: 24px; } .start-form .consent + .note { margin-top: 8px; } html:lang(ja) .sign-in-first p, html:lang(ja) .check-body, html:lang(ja) .notice p,html:lang(ja) .trial-nudge p, html:lang(ja) .empty p, html:lang(ja) .job-why { word-break: auto-phrase; } .quote > * + * { margin-top: 8px; } .quote h3 { margin-top: 24px; font-size: 16px; line-height: 1.5; } .quote .quote-big { margin-top: 16px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .quote .quote-big.quote-ours { margin-top: 4px; } /* Where flat doesn't pay off yet there's no GitHub line above it (quote-view.ts). */ .quote h2 + .quote-big.quote-ours { margin-top: 16px; } .quote .quote-payoff { margin-top: 8px; } .quote-save { color: var(--ok-ink); font-weight: 600; } .quote .quote-mix { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); } .quote-mix > * + * { margin-top: 4px; } .quote-mix-line { font-weight: 600; } /* The recommendation under the prices: plain text, the plan alone in bold, its reason small and muted; the button under it is the card's lead, its terms right below it (founder, 11-09). */ .quote .quote-rec { margin-top: 16px; } .quote-rec > * + * { margin-top: 4px; } .quote-rec strong { font-weight: 700; } .quote .actions { margin-top: 16px; } .quote .actions:has(> .quote-start) { display: block; } /* Try free, the plan to buy beside it, the trial's terms on one line under both; on a phone, stacked full width: Try free, its terms, the plan. Each phrase of the terms wraps whole (lead, 11-09). */ .quote-start { display: grid; grid-template-columns: auto auto; grid-template-areas: "try buy" "terms terms"; justify-content: start; gap: 8px 12px; } .quote-start > a.btn { grid-area: try; min-width: 240px; } .quote-start > .quote-buy { grid-area: buy; margin: 0; } .quote-start > .quote-terms { grid-area: terms; margin: 0; } .quote-terms > span { display: inline-block; } /* GitHub's and Skipbox's marks in one box, on the first line's cap centre (A5); the words wrap beside it. The org quote and the cost tool's result share it, so a wrapped row hangs beside the mark, never under it (walk 11-09). */ .quote-big { --cap: 1cap; } .quote-who { --ico: 20px; display: flex; align-items: baseline; gap: 8px; } .quote-who > span { flex: 1 1 0; min-width: 0; } .quote-icon { width: var(--ico); color: var(--ink); } /* A big line that wraps never leaves one word alone on its last row; in Japanese it breaks between phrases. */ .quote-big, .quote h2 { text-wrap: pretty; } html:lang(ja) .quote-big { word-break: auto-phrase; } /* A phone: both headlines on one row each (28px needed 329-405px of 298, walk 11-09). */ @media (max-width: 480px) { .quote .quote-big { font-size: 24px; } } /* How the quote was counted: closed under the buttons, one line per runner, the time and GitHub's charge in right-aligned columns shared by every line (a subgrid). */ .quote .quote-calc { margin-top: 24px; } /* The summary's title centred on its sign: none of the card's own h3 margin. */ .quote .quote-calc .disclosure-title { margin-top: 0; } .quote .quote-calc:last-child { border-bottom: 0; } .quote-calc > :not(summary) + * { margin-top: 12px; } .quote-calc > :last-child { padding-bottom: 4px; } .quote-lines { display: grid; grid-template-columns: 1fr auto auto; column-gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; } .quote-lines > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); } .quote-lines > li:first-child { border-top: 0; padding-top: 0; } .quote-line-name .note { display: block; font-size: 13px; } .quote-line-time, .quote-line-bill { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .quote .quote-alt { margin-top: 8px; } .quote .quote-alt a { display: inline-flex; align-items: center; min-height: 44px; } .quote .quote-runners { margin-top: 8px; } .quote .quote-runners + .note { margin-top: 16px; } /* No specificity for the margin reset: a list that is also a .section keeps the section's gap (walk, 11-09). */ :where(.wf-list) { margin: 0; } .wf-list { padding: 0; list-style: none; } /* The repository's prompt button on the same edge as its Edit buttons; a notice's one action below its text. */ .repo-prompt { display: flex; justify-content: flex-end; } .notice .notice-action { margin-top: 12px; } .wf { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); } .wf:first-child { border-top: 0; padding-top: 0; } .wf:last-child { padding-bottom: 0; } .wf-name { font-weight: 600; } .wf-path { color: var(--muted); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; } .back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; } /* /account: a plan card's text links side by side, each a 44 px target. */ .card-links { display: flex; flex-wrap: wrap; gap: 0 24px; } .card-links a { display: inline-flex; align-items: center; min-height: 44px; } .repo-list { margin: 0; padding: 0; list-style: none; } .repo-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; } .wf-job-stays .wf-job-name, .wf-job-stays code { color: var(--muted); } .wf-job-line .pill { display: inline-block; } .repo-item { padding: 16px 0; border-top: 1px solid var(--line); } .repo-item > * + * { margin-top: 12px; } .repo-name { font-family: var(--mono); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } .repo-item .wf-list { padding-left: 16px; border-left: 2px solid var(--line); } .wf-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wf-main > div { min-width: 0; } .wf-main .btn { flex: none; } .wf-jobs { margin: 0; padding: 0; list-style: none; font-size: 14px; } .wf-jobs > * + * { margin-top: 8px; } /* Each job's runs in a last column, right-aligned on the list's edge in every row, the period said once above it (views.ts jobRuns, founder 11-09). On a phone the runs sit on the name's line. */ .wf-runs-head { margin-bottom: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: right; } .wf-job { display: grid; grid-template-columns: minmax(96px, 200px) 1fr 6.5em; grid-template-areas: "name line runs"; gap: 4px 16px; line-height: 1.5; } .wf-job-name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; } .wf-job-line { grid-area: line; overflow-wrap: anywhere; } .wf-job-runs { grid-area: runs; justify-self: end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .wf-job-stays .wf-job-runs, .wf-job-moved .wf-job-runs, .wf-job-runs-none { color: var(--muted); } .wf-job-line code { font-size: 13px; } /* * The "→" between a job's two runs-on lines (views.ts) and before GitHub's charge in the quote's * lines (quote-view.ts), drawn on its text's cap centre (A5): the glyph came from different * fallback fonts and sat up to 1px off in one engine or the other. 1cap is the arrow's own font, * the code's on the job line; the glyph stays in the markup for no CSS. */ .wf-job-line > [aria-hidden="true"], .quote-line-bill > [aria-hidden="true"] { --ico: 10px; display: inline-block; width: 14px; height: var(--ico); overflow: hidden; text-indent: 100%; white-space: nowrap; vertical-align: calc((1cap - var(--ico)) / 2); background: currentColor; clip-path: polygon(0 4.25px, 11.13px 4.25px, 6.88px 0, 9px 0, 14px 5px, 9px 10px, 6.88px 10px, 11.13px 5.75px, 0 5.75px); } .wf-job-line > [aria-hidden="true"] { font: 13px var(--mono); } .quote-line-bill > [aria-hidden="true"] { margin-right: 4px; } .wf-job-line code.nowrap { white-space: nowrap; } .wf-job-line .wf-job-alt { display: block; } .wf-job-line .note { font-size: 13px; } /* A note after the runs-on code wraps whole to the next row, never mid-word ("セルフ/ホスト"), and a phrase inside one stays together ("L（月額 $149）") (lead, 11-09). */ .wf-job-line > .note:not(.wf-job-alt), .wf-job-phrase { display: inline-block; } html:lang(ja) .wf-job-line .note { word-break: auto-phrase; } .wf-none { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .repo-empty > * + * { margin-top: 16px; } .repo-more { border-top: 1px solid var(--line); } .repo-more > summary { display: flex; align-items: center; min-height: 48px; color: var(--link); cursor: pointer; font-weight: 600; } .repo-more > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .repo-more > .repo-list > .repo-item:first-child { border-top: 0; padding-top: 0; } .repo-list + .note, .repo-more + .note { margin-top: 16px; } /* The home page (home.ts). One column on a phone; the hero splits at 900px. */ .hero { display: grid; gap: 32px; } .hero h1 { font-size: 30px; line-height: 1.25; text-wrap: balance; } .block h2, .block h3, .fit h2 { text-wrap: balance; } .hero .lead { margin-top: 16px; max-width: none; color: var(--ink-2); font-size: 16px; } /* One sentence a line (founder, 11-09: 「GitHub Actions のランナーです。」 / 「runs-on: を一行書き換えるだけ。」): each of lineUnits' sentences is a block. */ .hero .lead > .unit { display: block; } /* The break chance between two sentences would be a line of its own between the blocks. */ .hero .lead > wbr { display: none; } .hero-main > .notice { margin-top: 16px; } .start { margin-top: 24px; display: grid; gap: 8px; justify-items: start; } .start-form { margin: 0; } .start-note { font-size: 14px; font-weight: 600; } .start .note { max-width: 520px; } /* The trial button and, quieter, the calculator: one row, the same height; stacked full width on a phone. */ .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .hero-cta .btn-secondary { min-height: 56px; } /* * Under the buttons, the risk reversal as body text (founder, 11-09): no card, the trial, the * refund, each after a green tick. One row while it fits, breaking between items, never inside one; * one per line on a phone, where an item too long for the line wraps beside its tick. */ .start-terms { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5; } .start-terms li { --cap: 1cap; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } /* Not inherited: html:lang(ja) li sets 1.8, which would space the one-line terms apart. */ html:lang(ja) .home .start-terms li { line-height: 1.5; } .term-check { --ico: 16px; width: 16px; color: var(--ok-ink); } @media (max-width: 599px) { .start-terms { flex-direction: column; gap: 8px; } .start-terms li, .calc-checks li, html:lang(ja) .calc-checks li { white-space: normal; } } /* Japanese on the home page breaks at phrases, never inside a word (プライベートリポジト/リ): Chromium's phrase breaking. */ html:lang(ja) .home h1, html:lang(ja) .home h2, html:lang(ja) .home h3, html:lang(ja) .home p, html:lang(ja) .home li, html:lang(ja) .home dd, html:lang(ja) .home dt, html:lang(ja) .lead { word-break: auto-phrase; } /* * In every browser, a lead's sentence and a step's clause move whole to the next line (html.ts * lineUnits, founder 11-09: 「runs-on: を一行 / 書き換えるだけ」); one wider than its line wraps inside. */ .unit { display: inline-block; max-width: 100%; } /* * The home page's bands (home.ts homeView; founder, 11-09: where one section ends was hard to see). * Every band the same padding, 48px on a phone and 64px from 768: the hero's room above it too, the * same as below it to the facts. A tinted band is one border-image fill pushed out to the window's * edges, a hairline at its top and bottom (as .final-band: nothing scrolls sideways at 390).
* adds no padding of its own around the bands, so the last one meets the footer. */ main:has(> .wrap > .home) { padding: 0; } .band { padding: 48px 0; } .band > :first-child { margin-top: 0; } .band-tint { border-image: linear-gradient(var(--line) 1px, var(--band) 1px calc(100% - 1px), var(--line) calc(100% - 1px)) fill 0 / 0 / 0 100vmax; } .hero + .facts { margin-top: 48px; } .home .final-band { margin: 0; } @media (min-width: 768px) { .band { padding: 64px 0; } .hero + .facts { margin-top: 64px; } } /* On a tinted band the calculator's grey panel and its controls turn white, so each still reads as a card or a control. */ .band-tint .calc-panel, .band-tint .chips a, .band-tint .seg { background: var(--bg); } .band-tint .chips a:hover { background: var(--soft); } /* runs-on: in a lead never breaks at its hyphen. */ .lead code { white-space: nowrap; } .btn-large { min-height: 56px; padding: 0 32px; font-size: 18px; } .diff { margin: 0; border-radius: 12px; overflow: hidden; background: var(--code-bg); } .diff figcaption { padding: 8px 16px; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font-size: 13px; line-height: 1.5; } .diff figcaption code { color: var(--code-ink); } .diff pre { margin: 0; padding: 16px; overflow-x: auto; color: var(--code-ink); font-family: var(--mono); font-size: 14px; line-height: 1.6; } .diff .del, .diff .add { display: inline-block; min-width: 100%; } .diff .del { background: var(--code-del-bg); color: var(--code-del); } .diff .add { background: var(--code-add-bg); color: var(--code-add); } /* How you start: under the facts, a row of three on a computer, stacked on a phone. */ .start-steps { margin-top: 24px; } .steps-heading { font-size: 16px; line-height: 1.5; } .steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; } .steps li { --cap: 1cap; counter-increment: step; display: grid; grid-template-columns: 24px 1fr; align-items: baseline; gap: 12px; line-height: 24px; } .steps code { white-space: nowrap; } /* runs-on breaks at its hyphen otherwise (en at 1280, 11-09). */ html:lang(ja) .steps li { line-height: 28px; } .steps li::before { content: counter(step); --ico: 24px; display: block; width: 24px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; } .facts { margin: 32px 0 0; padding: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fact dt { color: var(--muted); font-size: 13px; line-height: 1.5; } .fact dd { margin: 4px 0 0; line-height: 1.5; } /* Each fact: the benefit, then the number behind it. */ .fact-main { display: block; color: var(--ink); font-size: 15px; font-weight: 700; } .fact-detail { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; } /* A source, not a claim: small and quiet, a link to GitHub's own page (founder, 11-09). */ .fact-detail a { color: var(--muted); font-size: 12px; text-decoration-color: currentColor; text-underline-offset: 2px; } /* * A dollar price with its yen on a Japanese page (yen.ts): the price is a button with a dotted * underline; its tooltip shows below it on hover (a pointer that hovers), on keyboard focus, and * when calc.js opens it on a tap. Its width is fixed (the note always fills it), so calc.js can * set its left while it is hidden, keeping it 16px inside the viewport: a tooltip laid out past the * edge first and moved after left WebKit a horizontal scroll (ui-craft check, 11-09). The ::before * bridges the gap, so the pointer can move onto the tooltip without closing it. */ /* inline-flex: the box is the button's, so the tooltip sits 8px below the price at any text size. */ .yen { position: relative; display: inline-flex; white-space: nowrap; } .yen-price { position: relative; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: help; text-decoration: underline dotted; text-decoration-thickness: max(1px, 0.06em); text-underline-offset: 0.18em; } /* A 44px-tall target however small the price's text (ui-craft). */ .yen-price::after { content: ""; position: absolute; inset: calc(50% - 22px) -4px; } .yen-tip { display: none; position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; width: min(352px, calc(100vw - 32px)); transform: translateX(-50%); padding: 12px 16px; border-radius: 8px; background: var(--ink); color: #fff; /* A white ring: over the dark trial button just below a price, its edge still shows (founder, 11-09). */ box-shadow: 0 0 0 2px #fff, 0 8px 24px rgb(15 23 42 / 0.18); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-align: left; white-space: normal; text-wrap: wrap; } .yen-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .yen-about { display: block; font-size: 16px; font-weight: 700; } .yen-note { display: block; margin-top: 4px; color: #cbd5e1; font-size: 13px; line-height: 1.6; word-break: auto-phrase; } /* One line each: the rate, that payment is in dollars, the card issuer's rate (founder, 11-09). */ .yen-line { display: block; } @media (hover: hover) { .yen:hover .yen-tip { display: block; } } .yen-price:focus-visible + .yen-tip, .yen[data-open] .yen-tip { display: block; } .yen[data-dismissed] .yen-tip { display: none; } .block { margin-top: 48px; } .block > h2, .fit h2 { font-size: 22px; line-height: 1.35; } /* A section's content starts one gap under its heading, the same in every section (founder, 11-09: the questions' first hairline touched theirs). */ .block > h2 + * { margin-top: 24px; } .block > h2 + .section-lead { margin-top: 8px; } .section-lead { max-width: 720px; color: var(--muted); } .section-lead + * { margin-top: 24px; } .block .card > h3 { font-size: 16px; line-height: 1.5; } .card > h3 + ul, .card > h2 + ul { margin-top: 12px; } .ticks, .crosses { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .ticks li, .crosses li { position: relative; padding-left: 24px; } .ticks li::before, .crosses li::before { position: absolute; left: 0; top: 0; width: 16px; text-align: center; font-weight: 700; } .ticks li::before { content: "\2713"; color: var(--ok-ink); } .crosses li::before { content: "\00D7"; color: var(--bad-ink); } /* * The home calculator (calc spec, 11-09): the question and its input, the example minutes, the job * size, one answer, the trial button, and the arithmetic folded away. One 720 px column. */ .calc-form, .calc-result, .calc-start, .calc-more { max-width: 720px; } .calc-form { display: grid; gap: 24px; } /* * The input rows (founder, 11-09): the question, then a compact box with its unit inside and, beside * it, where to read the minutes; the examples under them in a grid of equal cells; then the size * switch, its label on the same left edge. No calculate button while calc.js runs (the answer * follows the box), so the button is in