| 1 | /* ------------------------------------------------------------------ */ |
| 2 | /* Base — the ground, type, and the few legacy structures docs use */ |
| 3 | /* ------------------------------------------------------------------ */ |
| 4 | |
| 5 | html { |
| 6 | -webkit-font-smoothing: antialiased; |
| 7 | -moz-osx-font-smoothing: grayscale; |
| 8 | max-width: 100%; |
| 9 | overflow-x: clip; |
| 10 | background: var(--bg); |
| 11 | /* Keep a focused control clear of the sticky header in both Tab |
| 12 | directions (WCAG 2.4.11). */ |
| 13 | scroll-padding-top: 5rem; |
| 14 | } |
| 15 | |
| 16 | body { |
| 17 | /* The ground: paper under a pale sky in light; the navy ocean rising into |
| 18 | the logo's blue at the top of the page in dark. */ |
| 19 | min-height: 100vh; |
| 20 | display: flex; |
| 21 | flex-direction: column; |
| 22 | background: var(--ground), var(--bg); |
| 23 | background-repeat: no-repeat; |
| 24 | color: var(--text); |
| 25 | font-family: var(--font-body); |
| 26 | font-size: var(--text-body); |
| 27 | line-height: 1.5; |
| 28 | font-feature-settings: "ss01", "cv11"; |
| 29 | max-width: 100%; |
| 30 | overflow-x: clip; |
| 31 | position: relative; |
| 32 | } |
| 33 | |
| 34 | main { flex: 1 0 auto; } |
| 35 | main, header, footer, nav { position: relative; z-index: 1; } |
| 36 | |
| 37 | /* ---------- type ---------- */ |
| 38 | /* One face: Shannon Sans for headings, body and labels, a little negative |
| 39 | tracking on the big headings. Code uses the system monospace stack. No |
| 40 | serif, no all-caps, no wide tracking. */ |
| 41 | .font-display { font-family: var(--font-display); font-weight: 600; } |
| 42 | .font-cjk { font-family: var(--font-cjk); } |
| 43 | .font-mono { font-family: var(--font-mono); } |
| 44 | |
| 45 | h1, h2 { |
| 46 | font-family: var(--font-display); |
| 47 | font-weight: 600; |
| 48 | letter-spacing: -0.02em; |
| 49 | color: var(--text); |
| 50 | text-wrap: balance; |
| 51 | word-break: keep-all; |
| 52 | overflow-wrap: anywhere; |
| 53 | } |
| 54 | h3, h4 { |
| 55 | font-family: var(--font-display); |
| 56 | font-weight: 600; |
| 57 | letter-spacing: -0.01em; |
| 58 | color: var(--text); |
| 59 | } |
| 60 | |
| 61 | h1 { font-size: var(--text-display); line-height: 1.08; } |
| 62 | h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; } |
| 63 | h3, h4 { font-size: var(--text-heading); line-height: 1.35; } |
| 64 | |
| 65 | p { text-wrap: pretty; } |
| 66 | |
| 67 | /* Han headings gain nothing from Latin tracking; strict CJK line-breaking |
| 68 | keeps punctuation attached while still breaking between characters. */ |
| 69 | html[lang="zh"] :is(h1, h2, h3), |
| 70 | html[lang="ja"] :is(h1, h2, h3), |
| 71 | html[lang="ko"] :is(h1, h2, h3) { |
| 72 | letter-spacing: 0; |
| 73 | line-break: strict; |
| 74 | word-break: normal; |
| 75 | overflow-wrap: break-word; |
| 76 | } |
| 77 | |
| 78 | @media (max-width: 640px) { |
| 79 | h1, h2 { hyphens: auto; } |
| 80 | html[lang="en"] h1, |
| 81 | html[lang="en"] h2 { hyphens: none; } |
| 82 | } |
| 83 | |
| 84 | .tabular { font-variant-numeric: tabular-nums; } |
| 85 | |
| 86 | /* ---------- containers ---------- */ |
| 87 | .site-container, |
| 88 | .portal-container { |
| 89 | width: var(--container); |
| 90 | margin-inline: auto; |
| 91 | } |
| 92 | |
| 93 | /* ---------- the ` · ` chain (release-truth in the docs) ---------- */ |
| 94 | .dotline { |
| 95 | display: flex; |
| 96 | flex-wrap: wrap; |
| 97 | align-items: baseline; |
| 98 | font-size: var(--text-caption); |
| 99 | } |
| 100 | .dotline > *:not(:last-child)::after { |
| 101 | content: "·"; |
| 102 | margin-inline: 0.5em; |
| 103 | color: var(--muted); |
| 104 | } |
| 105 | |
| 106 | /* ---------- legacy structures still used by the docs ---------- */ |
| 107 | .hairline-t { border-top: 1px solid var(--line); } |
| 108 | .hairline-b { border-bottom: 1px solid var(--line); } |
| 109 | .hairline-l { border-inline-start: 1px solid var(--line); } |
| 110 | .hairline-r { border-inline-end: 1px solid var(--line); } |
| 111 | |
| 112 | /* The docs band. New pages use .page-head. */ |
| 113 | .hero { |
| 114 | position: relative; |
| 115 | border-bottom: 1px solid var(--line); |
| 116 | color: var(--text); |
| 117 | padding-block: var(--hero-pad); |
| 118 | } |
| 119 | |
| 120 | .section { padding-block: var(--section-pad); } |
| 121 | |
| 122 | .eyebrow { |
| 123 | font-size: var(--text-caption); |
| 124 | font-weight: 500; |
| 125 | color: var(--muted); |
| 126 | } |
| 127 | |
| 128 | .pill { |
| 129 | display: inline-flex; |
| 130 | align-items: center; |
| 131 | gap: 0.35rem; |
| 132 | padding: 0.125rem 0.5rem; |
| 133 | font-size: var(--text-caption); |
| 134 | font-weight: 500; |
| 135 | border: 1px solid var(--line); |
| 136 | border-radius: var(--radius-control); |
| 137 | background: var(--surface); |
| 138 | color: var(--text); |
| 139 | } |
| 140 | |
| 141 | /* ---------- code ---------- */ |
| 142 | /* Code is set into the floor: the recessed surface, a hairline, the page's |
| 143 | own ink. Prompts and comments recede; keys stay in the text ink. */ |
| 144 | pre.code-block { |
| 145 | background: var(--surface); |
| 146 | color: var(--text); |
| 147 | max-width: 100%; |
| 148 | min-width: 0; |
| 149 | margin: 0; |
| 150 | padding: var(--space-3) var(--space-4); |
| 151 | font-family: var(--font-mono); |
| 152 | font-size: var(--text-mono); |
| 153 | line-height: 1.6; |
| 154 | border: 1px solid var(--line); |
| 155 | border-radius: var(--radius-surface); |
| 156 | overflow-x: auto; |
| 157 | position: relative; |
| 158 | white-space: pre; |
| 159 | tab-size: 2; |
| 160 | -webkit-overflow-scrolling: touch; |
| 161 | /* Commands read left to right in every locale, including RTL pages. */ |
| 162 | direction: ltr; |
| 163 | text-align: left; |
| 164 | unicode-bidi: isolate; |
| 165 | } |
| 166 | pre.code-block .prompt, |
| 167 | pre.code-block .comment { color: var(--muted); } |
| 168 | pre.code-block .key { color: var(--text); font-weight: 500; } |
| 169 | |
| 170 | code.inline, |
| 171 | .prose :not(pre) > code { |
| 172 | background: var(--surface); |
| 173 | padding: 0.0625rem 0.3125rem; |
| 174 | font-family: var(--font-mono); |
| 175 | font-size: 0.875em; |
| 176 | border-radius: var(--radius-control); |
| 177 | overflow-wrap: anywhere; |
| 178 | } |
| 179 | |
| 180 | kbd, |
| 181 | .kbd { |
| 182 | display: inline-block; |
| 183 | padding: 0 0.3125rem; |
| 184 | font-family: var(--font-mono); |
| 185 | font-size: var(--text-caption); |
| 186 | color: var(--muted); |
| 187 | background: var(--panel); |
| 188 | border: 1px solid var(--line); |
| 189 | border-radius: var(--radius-control); |
| 190 | } |
| 191 | |
| 192 | /* ---------- search ---------- */ |
| 193 | .search-input { |
| 194 | width: 100%; |
| 195 | min-height: 2.75rem; |
| 196 | font-family: var(--font-body); |
| 197 | font-size: var(--text-body); |
| 198 | padding-block: var(--space-2); |
| 199 | padding-inline: 2.5rem var(--space-3); |
| 200 | background: var(--surface); |
| 201 | color: var(--text); |
| 202 | border: 1px solid var(--line-strong); |
| 203 | border-radius: var(--radius-control); |
| 204 | transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out); |
| 205 | } |
| 206 | .search-input::placeholder { color: var(--muted); } |
| 207 | .search-input:focus-visible { border-color: var(--ring); box-shadow: var(--glow-focus); } |
| 208 | |
| 209 | mark.search-highlight { |
| 210 | background: var(--selection); |
| 211 | color: inherit; |
| 212 | } |
| 213 | |
| 214 | /* ---------- a11y: skip link ---------- */ |
| 215 | .skip-link { |
| 216 | position: absolute; |
| 217 | inset-inline-start: 1rem; |
| 218 | top: -3.5rem; |
| 219 | z-index: 60; |
| 220 | padding: 0.5rem 0.875rem; |
| 221 | background: var(--text); |
| 222 | color: var(--bg); |
| 223 | font-size: var(--text-ui); |
| 224 | font-weight: 500; |
| 225 | border-radius: var(--radius-control); |
| 226 | } |
| 227 | .skip-link:focus-visible { top: 0.5rem; } |
| 228 | |
| 229 | /* The docs band's mark and label (docs/layout.tsx): the reading whale. */ |
| 230 | .portal-mark-pose { --pose-size: 2.25rem; flex: none; } |
| 231 | .portal-mark { |
| 232 | display: flex; |
| 233 | align-items: center; |
| 234 | gap: 0.625rem; |
| 235 | margin-bottom: 1.25rem; |
| 236 | color: var(--muted); |
| 237 | font-size: var(--text-caption); |
| 238 | font-weight: 600; |
| 239 | } |
| 240 |