| 1 | /* đŸ¤– Shared stylesheet for the planet-scale operations guide. |
| 2 | One file styles every page; edit here and every page follows. |
| 3 | Design notes: warm paper + slate-blue ink, serif body for long reading, |
| 4 | sans headings, mono for anything typed into a terminal. Light and dark |
| 5 | are both first-class (prefers-color-scheme plus a data-theme override). */ |
| 6 | |
| 7 | :root { |
| 8 | --paper: #fbfaf7; |
| 9 | --ink: #232f3c; |
| 10 | --muted: #5d6b77; |
| 11 | --accent: #29618e; |
| 12 | --accent-ink: #1d4d75; |
| 13 | --accent-soft: rgba(41, 97, 142, 0.09); |
| 14 | --signal: #a05a18; |
| 15 | --signal-soft: rgba(160, 90, 24, 0.10); |
| 16 | --good: #2f7a55; |
| 17 | --good-soft: rgba(47, 122, 85, 0.10); |
| 18 | --card: #ffffff; |
| 19 | --rule: #dfdcd2; |
| 20 | --shade: #f2f0e9; |
| 21 | --diagram-box: #eef1ec; |
| 22 | --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; |
| 23 | --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif; |
| 24 | --sans: -apple-system, "Segoe UI", system-ui, sans-serif; |
| 25 | } |
| 26 | @media (prefers-color-scheme: dark) { |
| 27 | :root { |
| 28 | --paper: #141b22; |
| 29 | --ink: #d9e2ea; |
| 30 | --muted: #8fa0ae; |
| 31 | --accent: #7fb3dc; |
| 32 | --accent-ink: #9cc6e8; |
| 33 | --accent-soft: rgba(127, 179, 220, 0.12); |
| 34 | --signal: #dca35c; |
| 35 | --signal-soft: rgba(220, 163, 92, 0.12); |
| 36 | --good: #6cbf94; |
| 37 | --good-soft: rgba(108, 191, 148, 0.12); |
| 38 | --card: #1b242e; |
| 39 | --rule: #2a3641; |
| 40 | --shade: #19222b; |
| 41 | --diagram-box: #1e2933; |
| 42 | } |
| 43 | } |
| 44 | :root[data-theme="dark"] { |
| 45 | --paper: #141b22; --ink: #d9e2ea; --muted: #8fa0ae; --accent: #7fb3dc; |
| 46 | --accent-ink: #9cc6e8; --accent-soft: rgba(127, 179, 220, 0.12); |
| 47 | --signal: #dca35c; --signal-soft: rgba(220, 163, 92, 0.12); |
| 48 | --good: #6cbf94; --good-soft: rgba(108, 191, 148, 0.12); |
| 49 | --card: #1b242e; --rule: #2a3641; --shade: #19222b; --diagram-box: #1e2933; |
| 50 | } |
| 51 | :root[data-theme="light"] { |
| 52 | --paper: #fbfaf7; --ink: #232f3c; --muted: #5d6b77; --accent: #29618e; |
| 53 | --accent-ink: #1d4d75; --accent-soft: rgba(41, 97, 142, 0.09); |
| 54 | --signal: #a05a18; --signal-soft: rgba(160, 90, 24, 0.10); |
| 55 | --good: #2f7a55; --good-soft: rgba(47, 122, 85, 0.10); |
| 56 | --card: #ffffff; --rule: #dfdcd2; --shade: #f2f0e9; --diagram-box: #eef1ec; |
| 57 | } |
| 58 | |
| 59 | html { background: var(--paper); scroll-behavior: smooth; } |
| 60 | @media (prefers-reduced-motion: reduce) { |
| 61 | html { scroll-behavior: auto; } |
| 62 | * { animation: none !important; transition: none !important; } |
| 63 | } |
| 64 | body { |
| 65 | margin: 0; |
| 66 | color: var(--ink); |
| 67 | background: var(--paper); |
| 68 | font: 17px/1.7 var(--serif); |
| 69 | -webkit-text-size-adjust: 100%; |
| 70 | } |
| 71 | |
| 72 | /* ---- page frame: sidebar + content ---- */ |
| 73 | .frame { display: flex; min-height: 100vh; } |
| 74 | nav.side { |
| 75 | width: 250px; |
| 76 | flex: none; |
| 77 | border-right: 1px solid var(--rule); |
| 78 | padding: 28px 20px 40px; |
| 79 | box-sizing: border-box; |
| 80 | position: sticky; |
| 81 | top: 0; |
| 82 | align-self: flex-start; |
| 83 | max-height: 100vh; |
| 84 | overflow-y: auto; |
| 85 | font-family: var(--sans); |
| 86 | } |
| 87 | nav.side .brand { |
| 88 | font: 700 15px/1.3 var(--sans); |
| 89 | margin: 0 0 4px; |
| 90 | letter-spacing: -0.01em; |
| 91 | } |
| 92 | nav.side .brand a { color: var(--ink); text-decoration: none; } |
| 93 | nav.side .brand-sub { |
| 94 | font: 400 12px/1.5 var(--sans); |
| 95 | color: var(--muted); |
| 96 | margin: 0 0 20px; |
| 97 | } |
| 98 | nav.side ol { list-style: none; margin: 0; padding: 0; } |
| 99 | nav.side li { margin: 0 0 2px; } |
| 100 | nav.side a { |
| 101 | display: flex; |
| 102 | gap: 9px; |
| 103 | align-items: baseline; |
| 104 | padding: 6px 9px; |
| 105 | border-radius: 7px; |
| 106 | color: var(--ink); |
| 107 | text-decoration: none; |
| 108 | font: 400 13.5px/1.4 var(--sans); |
| 109 | } |
| 110 | nav.side a .num { |
| 111 | font: 600 10.5px/1 var(--mono); |
| 112 | color: var(--muted); |
| 113 | min-width: 16px; |
| 114 | } |
| 115 | nav.side a:hover { background: var(--accent-soft); } |
| 116 | nav.side a[aria-current="page"] { |
| 117 | background: var(--accent-soft); |
| 118 | color: var(--accent-ink); |
| 119 | font-weight: 600; |
| 120 | } |
| 121 | nav.side a[aria-current="page"] .num { color: var(--accent-ink); } |
| 122 | nav.side a:focus-visible, |
| 123 | a:focus-visible, button:focus-visible, summary:focus-visible { |
| 124 | outline: 2px solid var(--accent); |
| 125 | outline-offset: 2px; |
| 126 | } |
| 127 | |
| 128 | main.content { flex: 1; min-width: 0; } |
| 129 | .wrap { max-width: 730px; margin: 0 auto; padding: 0 28px 110px; } |
| 130 | |
| 131 | @media (max-width: 900px) { |
| 132 | .frame { display: block; } |
| 133 | nav.side { |
| 134 | position: static; |
| 135 | width: auto; |
| 136 | max-height: none; |
| 137 | border-right: none; |
| 138 | border-bottom: 1px solid var(--rule); |
| 139 | padding: 18px 20px; |
| 140 | } |
| 141 | nav.side ol { display: flex; flex-wrap: wrap; gap: 2px 6px; } |
| 142 | .wrap { padding: 0 20px 80px; } |
| 143 | } |
| 144 | |
| 145 | /* ---- page header ---- */ |
| 146 | header.top { padding: 54px 0 6px; } |
| 147 | .eyebrow { |
| 148 | font: 600 12px/1.4 var(--sans); |
| 149 | letter-spacing: 0.13em; |
| 150 | text-transform: uppercase; |
| 151 | color: var(--accent); |
| 152 | margin: 0 0 14px; |
| 153 | } |
| 154 | .eyebrow .robot { letter-spacing: 0; margin-right: 6px; } |
| 155 | h1 { |
| 156 | font: 700 clamp(29px, 4.6vw, 38px)/1.14 var(--sans); |
| 157 | letter-spacing: -0.015em; |
| 158 | margin: 0 0 14px; |
| 159 | text-wrap: balance; |
| 160 | } |
| 161 | .thesis { |
| 162 | font-size: 19px; |
| 163 | line-height: 1.6; |
| 164 | color: var(--muted); |
| 165 | margin: 0 0 10px; |
| 166 | text-wrap: balance; |
| 167 | } |
| 168 | .thesis strong { color: var(--ink); font-weight: 600; } |
| 169 | |
| 170 | h2 { |
| 171 | font: 700 23px/1.28 var(--sans); |
| 172 | letter-spacing: -0.01em; |
| 173 | margin: 62px 0 12px; |
| 174 | text-wrap: balance; |
| 175 | } |
| 176 | h3 { font: 650 17.5px/1.35 var(--sans); margin: 36px 0 10px; } |
| 177 | h4 { font: 650 15px/1.4 var(--sans); margin: 26px 0 8px; } |
| 178 | p { margin: 0 0 17px; } |
| 179 | ul, ol { margin: 0 0 17px; padding-left: 26px; } |
| 180 | li { margin: 0 0 7px; } |
| 181 | a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 2.5px; } |
| 182 | a:hover { text-decoration-color: var(--accent); } |
| 183 | strong { font-weight: 650; } |
| 184 | hr { border: none; border-top: 1px solid var(--rule); margin: 48px 0; } |
| 185 | |
| 186 | /* Anchored headings get a hover ¶ link (added by guide.js). */ |
| 187 | .hlink { |
| 188 | margin-left: 8px; |
| 189 | font: 400 0.75em var(--sans); |
| 190 | color: var(--muted); |
| 191 | text-decoration: none; |
| 192 | opacity: 0; |
| 193 | } |
| 194 | h2:hover .hlink, h3:hover .hlink, .hlink:focus-visible { opacity: 1; } |
| 195 | |
| 196 | /* ---- code ---- */ |
| 197 | code { |
| 198 | font: 0.85em var(--mono); |
| 199 | background: var(--accent-soft); |
| 200 | padding: 1px 5px; |
| 201 | border-radius: 4px; |
| 202 | overflow-wrap: break-word; |
| 203 | } |
| 204 | pre { |
| 205 | font: 13px/1.65 var(--mono); |
| 206 | background: var(--card); |
| 207 | border: 1px solid var(--rule); |
| 208 | border-radius: 10px; |
| 209 | padding: 14px 16px; |
| 210 | overflow-x: auto; |
| 211 | margin: 16px 0; |
| 212 | } |
| 213 | pre code { background: transparent; padding: 0; } |
| 214 | pre .comment { color: var(--muted); } |
| 215 | pre .out { color: var(--muted); } |
| 216 | |
| 217 | /* A command block with a labelled title bar: where to run it, as whom. */ |
| 218 | figure.cmd { margin: 22px 0; } |
| 219 | figure.cmd figcaption { |
| 220 | font: 600 11.5px/1.4 var(--sans); |
| 221 | letter-spacing: 0.08em; |
| 222 | text-transform: uppercase; |
| 223 | color: var(--muted); |
| 224 | background: var(--shade); |
| 225 | border: 1px solid var(--rule); |
| 226 | border-bottom: none; |
| 227 | border-radius: 10px 10px 0 0; |
| 228 | padding: 7px 16px; |
| 229 | } |
| 230 | figure.cmd pre { margin: 0; border-radius: 0 0 10px 10px; } |
| 231 | |
| 232 | /* ---- asides / panels ---- */ |
| 233 | .plain { |
| 234 | background: var(--accent-soft); |
| 235 | border-left: 3px solid var(--accent); |
| 236 | border-radius: 0 10px 10px 0; |
| 237 | padding: 14px 18px 4px; |
| 238 | margin: 24px 0; |
| 239 | } |
| 240 | .plain .label, .warn .label, .why .label { |
| 241 | display: block; |
| 242 | font: 700 11.5px/1 var(--sans); |
| 243 | letter-spacing: 0.11em; |
| 244 | text-transform: uppercase; |
| 245 | margin: 0 0 9px; |
| 246 | } |
| 247 | .plain .label { color: var(--accent-ink); } |
| 248 | .plain p { margin-bottom: 12px; } |
| 249 | .warn { |
| 250 | background: var(--signal-soft); |
| 251 | border-left: 3px solid var(--signal); |
| 252 | border-radius: 0 10px 10px 0; |
| 253 | padding: 14px 18px 4px; |
| 254 | margin: 24px 0; |
| 255 | } |
| 256 | .warn .label { color: var(--signal); } |
| 257 | .warn p { margin-bottom: 12px; } |
| 258 | .why { |
| 259 | background: var(--good-soft); |
| 260 | border-left: 3px solid var(--good); |
| 261 | border-radius: 0 10px 10px 0; |
| 262 | padding: 14px 18px 4px; |
| 263 | margin: 24px 0; |
| 264 | } |
| 265 | .why .label { color: var(--good); } |
| 266 | .why p { margin-bottom: 12px; } |
| 267 | |
| 268 | /* ---- step-by-step procedures ---- */ |
| 269 | ol.procedure { list-style: none; padding: 0; margin: 26px 0; counter-reset: step; } |
| 270 | ol.procedure > li { |
| 271 | counter-increment: step; |
| 272 | position: relative; |
| 273 | padding: 0 0 26px 58px; |
| 274 | margin: 0; |
| 275 | } |
| 276 | ol.procedure > li::before { |
| 277 | content: counter(step); |
| 278 | position: absolute; |
| 279 | left: 0; |
| 280 | top: 1px; |
| 281 | width: 34px; |
| 282 | height: 34px; |
| 283 | border-radius: 50%; |
| 284 | background: var(--accent-soft); |
| 285 | color: var(--accent-ink); |
| 286 | font: 700 15px/34px var(--sans); |
| 287 | text-align: center; |
| 288 | } |
| 289 | ol.procedure > li::after { |
| 290 | content: ""; |
| 291 | position: absolute; |
| 292 | left: 16.5px; |
| 293 | top: 42px; |
| 294 | bottom: 6px; |
| 295 | width: 1px; |
| 296 | background: var(--rule); |
| 297 | } |
| 298 | ol.procedure > li:last-child::after { display: none; } |
| 299 | ol.procedure > li > .step-title { |
| 300 | font: 650 16px/1.4 var(--sans); |
| 301 | margin: 5px 0 8px; |
| 302 | } |
| 303 | ol.procedure pre { margin: 12px 0; } |
| 304 | ol.procedure figure.cmd { margin: 12px 0; } |
| 305 | |
| 306 | /* ---- tables ---- */ |
| 307 | .tablewrap { overflow-x: auto; margin: 20px 0; } |
| 308 | table { |
| 309 | border-collapse: collapse; |
| 310 | width: 100%; |
| 311 | font: 14px/1.55 var(--sans); |
| 312 | } |
| 313 | th { |
| 314 | text-align: left; |
| 315 | font: 650 12px/1.4 var(--sans); |
| 316 | letter-spacing: 0.07em; |
| 317 | text-transform: uppercase; |
| 318 | color: var(--muted); |
| 319 | border-bottom: 2px solid var(--rule); |
| 320 | padding: 8px 14px 8px 0; |
| 321 | white-space: nowrap; |
| 322 | } |
| 323 | td { |
| 324 | border-bottom: 1px solid var(--rule); |
| 325 | padding: 9px 14px 9px 0; |
| 326 | vertical-align: top; |
| 327 | } |
| 328 | td code, th code { white-space: nowrap; } |
| 329 | td:last-child, th:last-child { padding-right: 0; } |
| 330 | |
| 331 | /* ---- the system map (the "you are here" diagram) ---- */ |
| 332 | .sysmap { |
| 333 | margin: 30px 0 8px; |
| 334 | border: 1px solid var(--rule); |
| 335 | border-radius: 12px; |
| 336 | background: var(--card); |
| 337 | padding: 14px 10px 6px; |
| 338 | } |
| 339 | .sysmap svg { display: block; width: 100%; height: auto; } |
| 340 | .sysmap-caption { |
| 341 | font: 13px/1.6 var(--sans); |
| 342 | color: var(--muted); |
| 343 | margin: 8px 0 26px; |
| 344 | } |
| 345 | .sysmap text { font-family: var(--sans); fill: var(--ink); } |
| 346 | .sysmap .boxlabel { font-size: 11.5px; font-weight: 600; } |
| 347 | .sysmap .sublabel { font-size: 9.5px; fill: var(--muted); } |
| 348 | .sysmap .zonelabel { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; fill: var(--muted); } |
| 349 | .sysmap rect.node { fill: var(--diagram-box); stroke: var(--rule); stroke-width: 1; rx: 7; } |
| 350 | .sysmap rect.zone { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 4 4; rx: 10; } |
| 351 | .sysmap line.wire, .sysmap path.wire { stroke: var(--muted); stroke-width: 1.2; fill: none; } |
| 352 | .sysmap .here rect.node { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; } |
| 353 | .sysmap .here text.boxlabel { fill: var(--accent-ink); } |
| 354 | |
| 355 | /* generic figure/diagram captions */ |
| 356 | .caption { font: 13px/1.6 var(--sans); color: var(--muted); margin: 10px 0 24px; } |
| 357 | figure { margin: 26px 0; } |
| 358 | figure.diagram { |
| 359 | border: 1px solid var(--rule); |
| 360 | border-radius: 12px; |
| 361 | background: var(--card); |
| 362 | padding: 16px 12px 8px; |
| 363 | } |
| 364 | figure.diagram svg { display: block; width: 100%; height: auto; } |
| 365 | figure.diagram text { font-family: var(--sans); fill: var(--ink); } |
| 366 | figure.diagram figcaption { font: 13px/1.6 var(--sans); color: var(--muted); padding: 8px 8px 6px; } |
| 367 | |
| 368 | /* ---- definition lists (for flags, env vars) ---- */ |
| 369 | dl { margin: 0 0 20px; } |
| 370 | dt { font: 600 14.5px/1.5 var(--sans); margin: 18px 0 4px; } |
| 371 | dt code { font-size: 13.5px; } |
| 372 | dd { margin: 0 0 10px 0; padding-left: 18px; border-left: 2px solid var(--rule); } |
| 373 | |
| 374 | /* ---- build-status badges: what is real and what is aspirational ---- */ |
| 375 | .status { |
| 376 | display: inline-block; |
| 377 | font: 700 10.5px/1 var(--sans); |
| 378 | letter-spacing: 0.08em; |
| 379 | text-transform: uppercase; |
| 380 | padding: 4px 9px 3px; |
| 381 | border-radius: 999px; |
| 382 | vertical-align: 2px; |
| 383 | white-space: nowrap; |
| 384 | } |
| 385 | .status.built { background: var(--good-soft); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); } |
| 386 | .status.partial { background: var(--signal-soft); color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); } |
| 387 | .status.planned { background: var(--shade); color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); } |
| 388 | |
| 389 | /* A framed panel for describing designed-but-unbuilt behaviour, so aspirational |
| 390 | material never reads as something an operator could run today. */ |
| 391 | .roadmap { |
| 392 | border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); |
| 393 | border-radius: 12px; |
| 394 | background: var(--shade); |
| 395 | padding: 16px 20px 6px; |
| 396 | margin: 24px 0; |
| 397 | } |
| 398 | .roadmap .label { |
| 399 | display: block; |
| 400 | font: 700 11.5px/1 var(--sans); |
| 401 | letter-spacing: 0.11em; |
| 402 | text-transform: uppercase; |
| 403 | color: var(--muted); |
| 404 | margin: 0 0 9px; |
| 405 | } |
| 406 | .roadmap p { margin-bottom: 12px; } |
| 407 | |
| 408 | /* ---- prev / next footer ---- */ |
| 409 | footer.pager { |
| 410 | display: flex; |
| 411 | gap: 14px; |
| 412 | justify-content: space-between; |
| 413 | margin: 70px 0 0; |
| 414 | padding-top: 26px; |
| 415 | border-top: 1px solid var(--rule); |
| 416 | font-family: var(--sans); |
| 417 | } |
| 418 | footer.pager a { |
| 419 | flex: 1; |
| 420 | max-width: 48%; |
| 421 | border: 1px solid var(--rule); |
| 422 | border-radius: 10px; |
| 423 | padding: 12px 16px; |
| 424 | text-decoration: none; |
| 425 | color: var(--ink); |
| 426 | background: var(--card); |
| 427 | } |
| 428 | footer.pager a:hover { border-color: var(--accent); } |
| 429 | footer.pager .dir { |
| 430 | display: block; |
| 431 | font: 600 11px/1 var(--sans); |
| 432 | letter-spacing: 0.1em; |
| 433 | text-transform: uppercase; |
| 434 | color: var(--muted); |
| 435 | margin-bottom: 6px; |
| 436 | } |
| 437 | footer.pager .dest { font: 600 14px/1.4 var(--sans); color: var(--accent-ink); } |
| 438 | footer.pager a.next { text-align: right; margin-left: auto; } |
| 439 | footer.colophon { |
| 440 | font: 12.5px/1.7 var(--sans); |
| 441 | color: var(--muted); |
| 442 | margin-top: 30px; |
| 443 | } |
| 444 | footer.colophon a { color: var(--muted); } |
| 445 | |
amadan