| 1 | /* 🤖 Carloku shared stylesheet — both pages, zero dependencies, no build step. |
| 2 | Fonts are Geist / Geist Mono (SIL OFL, see /fonts/LICENSE-OFL.txt), self-hosted. */ |
| 3 | |
| 4 | @font-face { |
| 5 | font-family: "Geist"; |
| 6 | src: url("/fonts/Geist-Variable.woff2") format("woff2"); |
| 7 | font-weight: 100 900; |
| 8 | font-display: swap; |
| 9 | } |
| 10 | @font-face { |
| 11 | font-family: "Geist Mono"; |
| 12 | src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); |
| 13 | font-weight: 100 900; |
| 14 | font-display: swap; |
| 15 | } |
| 16 | |
| 17 | :root { |
| 18 | --bg: #ffffff; |
| 19 | --bg-tint: #f8f7fb; |
| 20 | --ink: #1d1927; |
| 21 | --muted: #5d5570; |
| 22 | --faint: #6e6880; |
| 23 | --accent: #5b3e96; |
| 24 | --accent-ink: #4c3380; |
| 25 | --accent-soft: rgba(91, 62, 150, 0.08); |
| 26 | --btn-bg: #5b3e96; |
| 27 | --btn-bg-hover: #4c3380; |
| 28 | --btn-ink: #ffffff; |
| 29 | --line: rgba(29, 25, 39, 0.1); |
| 30 | --line-strong: rgba(29, 25, 39, 0.16); |
| 31 | --band-bg: #221a35; |
| 32 | --band-ink: #f2eef9; |
| 33 | --band-muted: #b9aed6; |
| 34 | --band-line: rgba(242, 238, 249, 0.14); |
| 35 | --term-bg: #120f1a; |
| 36 | --term-chrome: #1b1626; |
| 37 | --term-line: rgba(255, 255, 255, 0.08); |
| 38 | --term-title: #8d84a6; |
| 39 | --term-ink: #ede9f7; |
| 40 | --term-out: #9d93b8; |
| 41 | --term-ok: #7ee2a8; |
| 42 | --term-prompt: #b394f2; |
| 43 | --shadow: 0 1px 2px rgba(20, 12, 40, 0.05), 0 12px 32px -12px rgba(20, 12, 40, 0.18); |
| 44 | --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; |
| 45 | --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| 46 | --wrap: 72rem; |
| 47 | color-scheme: light; |
| 48 | } |
| 49 | @media (prefers-color-scheme: dark) { |
| 50 | :root { |
| 51 | --bg: #0e0c13; |
| 52 | --bg-tint: #14111c; |
| 53 | --ink: #f2eff8; |
| 54 | --muted: #a9a0c2; |
| 55 | --faint: #928aab; |
| 56 | --accent: #b394f2; |
| 57 | --accent-ink: #c9b2f7; |
| 58 | --accent-soft: rgba(179, 148, 242, 0.1); |
| 59 | --btn-bg: #6a48c8; |
| 60 | --btn-bg-hover: #7d5cdb; |
| 61 | --btn-ink: #ffffff; |
| 62 | --line: rgba(242, 239, 248, 0.09); |
| 63 | --line-strong: rgba(242, 239, 248, 0.16); |
| 64 | --band-bg: #261b44; |
| 65 | --band-ink: #f2eef9; |
| 66 | --band-muted: #b3a8d2; |
| 67 | --band-line: rgba(242, 238, 249, 0.12); |
| 68 | --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.55); |
| 69 | color-scheme: dark; |
| 70 | } |
| 71 | } |
| 72 | |
| 73 | * { box-sizing: border-box; margin: 0; } |
| 74 | html { scroll-behavior: smooth; } |
| 75 | body { |
| 76 | background: var(--bg); |
| 77 | color: var(--ink); |
| 78 | font-family: var(--sans); |
| 79 | font-size: 1rem; |
| 80 | line-height: 1.6; |
| 81 | -webkit-font-smoothing: antialiased; |
| 82 | text-rendering: optimizeLegibility; |
| 83 | } |
| 84 | ::selection { background: var(--accent); color: var(--bg); } |
| 85 | a:focus-visible, button:focus-visible { |
| 86 | outline: 2px solid var(--accent); |
| 87 | outline-offset: 3px; |
| 88 | border-radius: 0.25em; |
| 89 | } |
| 90 | html { scrollbar-color: var(--line-strong) transparent; } |
| 91 | |
| 92 | .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; } |
| 93 | .wrap.narrow { max-width: 50rem; } |
| 94 | |
| 95 | .skip { |
| 96 | position: absolute; left: 1rem; top: -3rem; |
| 97 | background: var(--btn-bg); color: var(--btn-ink); |
| 98 | padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; |
| 99 | transition: top 120ms ease-out; z-index: 20; |
| 100 | } |
| 101 | .skip:focus-visible { top: 1rem; } |
| 102 | |
| 103 | /* ---- Header ---- */ |
| 104 | .site-head { |
| 105 | position: sticky; top: 0; z-index: 10; |
| 106 | background: color-mix(in srgb, var(--bg) 82%, transparent); |
| 107 | backdrop-filter: blur(12px); |
| 108 | -webkit-backdrop-filter: blur(12px); |
| 109 | border-bottom: 1px solid transparent; |
| 110 | transition: border-color 160ms ease-out; |
| 111 | } |
| 112 | .site-head.scrolled { border-bottom-color: var(--line); } |
| 113 | .site-head .wrap { |
| 114 | display: flex; align-items: center; gap: 2rem; |
| 115 | height: 4rem; |
| 116 | } |
| 117 | .brand { |
| 118 | font-weight: 640; font-size: 1.05rem; letter-spacing: -0.01em; |
| 119 | color: var(--ink); text-decoration: none; |
| 120 | display: flex; align-items: center; gap: 0.5rem; |
| 121 | } |
| 122 | .brand svg.mark { width: 1.4rem; height: 1.4rem; display: block; } |
| 123 | .site-head nav { |
| 124 | display: flex; gap: 1.75rem; margin-left: auto; align-items: center; |
| 125 | } |
| 126 | .site-head nav a { |
| 127 | color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 480; |
| 128 | white-space: nowrap; |
| 129 | transition: color 120ms ease-out; |
| 130 | } |
| 131 | .site-head nav a:hover { color: var(--ink); } |
| 132 | .site-head .head-cta { |
| 133 | color: var(--accent); font-weight: 560; font-size: 0.95rem; |
| 134 | text-decoration: none; white-space: nowrap; |
| 135 | border: 1px solid var(--line-strong); border-radius: 0.55rem; |
| 136 | padding: 0.42rem 0.95rem; |
| 137 | transition: border-color 120ms ease-out, background 120ms ease-out, color 120ms ease-out; |
| 138 | } |
| 139 | .site-head .head-cta:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } |
| 140 | @media (max-width: 44rem) { |
| 141 | .site-head .wrap { flex-wrap: wrap; height: auto; padding-top: 0.7rem; padding-bottom: 0.7rem; row-gap: 0.35rem; } |
| 142 | .site-head nav { flex-basis: 100%; order: 3; gap: 1.25rem; margin-left: 0; } |
| 143 | .site-head nav a { font-size: 0.9rem; } |
| 144 | .site-head .head-cta { margin-left: auto; padding: 0.3rem 0.8rem; font-size: 0.9rem; } |
| 145 | } |
| 146 | |
| 147 | /* ---- Hero ---- */ |
| 148 | .hero { padding: 5.5rem 0 5rem; } |
| 149 | .nobr { white-space: nowrap; } |
| 150 | .hero .wrap { |
| 151 | display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); |
| 152 | gap: 4.5rem; align-items: center; |
| 153 | } |
| 154 | h1 { |
| 155 | font-size: clamp(2.6rem, 5.4vw, 4.1rem); |
| 156 | line-height: 1.04; letter-spacing: -0.032em; font-weight: 680; |
| 157 | text-wrap: balance; |
| 158 | margin-bottom: 1.35rem; |
| 159 | } |
| 160 | h1 .dot { color: var(--accent); } |
| 161 | .lede { |
| 162 | font-size: 1.17rem; line-height: 1.65; color: var(--muted); |
| 163 | max-width: 34rem; text-wrap: pretty; |
| 164 | } |
| 165 | .cta { margin-top: 2.25rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } |
| 166 | .btn { |
| 167 | display: inline-flex; align-items: center; gap: 0.5rem; |
| 168 | text-decoration: none; font-weight: 580; font-size: 1rem; |
| 169 | border-radius: 0.65rem; padding: 0.72rem 1.4rem; |
| 170 | transition: background 130ms ease-out, border-color 130ms ease-out, transform 130ms ease-out; |
| 171 | } |
| 172 | .btn:active { transform: translateY(1px); } |
| 173 | .btn-primary { |
| 174 | background: var(--btn-bg); color: var(--btn-ink); |
| 175 | box-shadow: 0 1px 2px rgba(20, 12, 40, 0.2), 0 6px 16px -6px color-mix(in srgb, var(--btn-bg) 55%, transparent); |
| 176 | } |
| 177 | .btn-primary:hover { background: var(--btn-bg-hover); } |
| 178 | .btn-quiet { |
| 179 | color: var(--ink); border: 1px solid var(--line-strong); |
| 180 | } |
| 181 | .btn-quiet:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } |
| 182 | .hero-note { |
| 183 | margin-top: 1.4rem; font-size: 0.92rem; color: var(--faint); |
| 184 | } |
| 185 | .hero-note a { color: var(--faint); } |
| 186 | .hero-note a:hover { color: var(--accent); } |
| 187 | |
| 188 | /* ---- Terminal ---- */ |
| 189 | .term { |
| 190 | background: var(--term-bg); |
| 191 | border: 1px solid var(--term-line); |
| 192 | border-radius: 0.85rem; |
| 193 | box-shadow: var(--shadow); |
| 194 | overflow: hidden; |
| 195 | font-family: var(--mono); |
| 196 | font-size: 0.86rem; |
| 197 | font-variant-numeric: tabular-nums; |
| 198 | line-height: 1.75; |
| 199 | } |
| 200 | .term-bar { |
| 201 | display: flex; align-items: center; gap: 0.45rem; |
| 202 | background: var(--term-chrome); |
| 203 | border-bottom: 1px solid var(--term-line); |
| 204 | padding: 0.6rem 0.9rem; |
| 205 | } |
| 206 | .term-bar i { |
| 207 | width: 0.68rem; height: 0.68rem; border-radius: 50%; |
| 208 | background: currentColor; opacity: 0.28; color: var(--term-title); |
| 209 | } |
| 210 | .term-bar span { |
| 211 | margin-left: 0.4rem; color: var(--term-title); |
| 212 | font-size: 0.78rem; letter-spacing: 0.01em; |
| 213 | } |
| 214 | .term-body { padding: 1.05rem 1.15rem 1.2rem; min-height: 17.5rem; } |
| 215 | .term-body .line { display: block; white-space: pre-wrap; word-break: break-word; color: var(--term-out); } |
| 216 | .term-body .cmd { color: var(--term-ink); } |
| 217 | .term-body .cmd::before { content: "$ "; color: var(--term-prompt); font-weight: 560; } |
| 218 | .term-body .cmt { color: var(--term-title); } |
| 219 | .term-body .cmt::before { content: "$ "; color: var(--term-prompt); font-weight: 560; } |
| 220 | .term-body .ok { color: var(--term-ok); } |
| 221 | /* A URL in the transcript is a real link, and it stays terminal furniture: |
| 222 | it takes its line's color rather than the page's purple (the One Voice |
| 223 | Rule keeps purple off the terminal), and earns an underline on hover. |
| 224 | The focus ring is the terminal's own prompt violet — the page accent is |
| 225 | too dark to see against Terminal Black. */ |
| 226 | .term-body a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.2em; } |
| 227 | .term-body a:hover { text-decoration-color: currentColor; } |
| 228 | .term-body a:focus-visible { outline-color: var(--term-prompt); } |
| 229 | .term-caret { |
| 230 | display: inline-block; width: 0.55em; height: 1.05em; |
| 231 | background: var(--term-prompt); vertical-align: text-bottom; |
| 232 | animation: caret 1.1s steps(1) infinite; |
| 233 | } |
| 234 | @keyframes caret { 50% { opacity: 0; } } |
| 235 | |
| 236 | /* ---- Sections ---- */ |
| 237 | section { padding: 5.5rem 0; } |
| 238 | section.tint { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } |
| 239 | h2 { |
| 240 | font-size: clamp(1.7rem, 3vw, 2.3rem); |
| 241 | letter-spacing: -0.025em; line-height: 1.15; font-weight: 650; |
| 242 | text-wrap: balance; |
| 243 | margin-bottom: 0.9rem; |
| 244 | } |
| 245 | .section-lede { color: var(--muted); font-size: 1.08rem; max-width: 38rem; text-wrap: pretty; } |
| 246 | |
| 247 | .steps { |
| 248 | list-style: none; padding: 0; |
| 249 | margin-top: 3rem; |
| 250 | display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); |
| 251 | gap: 2.75rem; |
| 252 | } |
| 253 | .steps li { position: relative; padding-top: 1.15rem; } |
| 254 | .steps li::before { |
| 255 | content: counter(step); counter-increment: step; |
| 256 | position: absolute; top: -0.9rem; left: 0; |
| 257 | font-family: var(--mono); font-weight: 560; font-size: 0.82rem; |
| 258 | color: var(--accent); |
| 259 | background: var(--accent-soft); |
| 260 | width: 1.85rem; height: 1.85rem; border-radius: 50%; |
| 261 | display: grid; place-items: center; |
| 262 | } |
| 263 | .steps { counter-reset: step; } |
| 264 | .steps h3 { |
| 265 | font-size: 1.12rem; font-weight: 620; letter-spacing: -0.01em; |
| 266 | margin: 0.9rem 0 0.45rem; |
| 267 | } |
| 268 | .steps p { color: var(--muted); font-size: 0.98rem; } |
| 269 | .steps code { |
| 270 | font-family: var(--mono); font-size: 0.88em; |
| 271 | background: var(--accent-soft); color: var(--accent-ink); |
| 272 | padding: 0.12em 0.4em; border-radius: 0.3em; |
| 273 | } |
| 274 | |
| 275 | .quiet-grid { |
| 276 | margin-top: 2.75rem; |
| 277 | display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); |
| 278 | gap: 4rem; align-items: center; |
| 279 | } |
| 280 | .features { list-style: none; padding: 0; } |
| 281 | .features li { |
| 282 | display: grid; grid-template-columns: auto 1fr; |
| 283 | gap: 1.15rem; align-items: start; |
| 284 | padding: 1.35rem 0; |
| 285 | } |
| 286 | .features li + li { border-top: 1px solid var(--line); } |
| 287 | .features .icon { |
| 288 | width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; |
| 289 | display: grid; place-items: center; |
| 290 | background: var(--accent-soft); color: var(--accent); |
| 291 | margin-top: 0.15rem; |
| 292 | } |
| 293 | .features .icon svg { width: 1.25rem; height: 1.25rem; } |
| 294 | .features h3 { font-size: 1.08rem; font-weight: 620; letter-spacing: -0.01em; margin-bottom: 0.3rem; } |
| 295 | .features p { color: var(--muted); font-size: 0.97rem; } |
| 296 | .dash-frame { |
| 297 | background: var(--term-bg); |
| 298 | border: 1px solid var(--term-line); |
| 299 | border-radius: 0.85rem; |
| 300 | box-shadow: var(--shadow); |
| 301 | overflow: hidden; |
| 302 | } |
| 303 | .dash-frame img { display: block; width: 100%; height: auto; } |
| 304 | .dash figcaption { |
| 305 | margin-top: 0.8rem; font-size: 0.88rem; color: var(--faint); |
| 306 | } |
| 307 | |
| 308 | /* ---- Open-source band ---- */ |
| 309 | .band { background: var(--band-bg); color: var(--band-ink); padding: 6rem 0; } |
| 310 | .band h2 { color: var(--band-ink); } |
| 311 | .band p { color: var(--band-muted); font-size: 1.08rem; max-width: 40rem; text-wrap: pretty; } |
| 312 | .band p + p { margin-top: 1rem; } |
| 313 | .band .cta { margin-top: 2.2rem; } |
| 314 | .band .btn-primary { background: var(--band-ink); color: var(--band-bg); box-shadow: none; } |
| 315 | .band .btn-primary:hover { background: #ffffff; } |
| 316 | .band .btn-quiet { color: var(--band-ink); border-color: var(--band-line); } |
| 317 | .band .btn-quiet:hover { border-color: var(--band-ink); color: var(--band-ink); background: rgba(255, 255, 255, 0.06); } |
| 318 | .band .proof { |
| 319 | margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--band-line); |
| 320 | font-size: 0.95rem; color: var(--band-muted); |
| 321 | } |
| 322 | .band .proof a { color: var(--band-ink); } |
| 323 | .band ::selection { background: var(--band-ink); color: var(--band-bg); } |
| 324 | |
| 325 | /* ---- Closing CTA ---- */ |
| 326 | .close-cta { padding: 7rem 0; text-align: center; } |
| 327 | .close-cta h2 { font-size: clamp(2rem, 4vw, 3rem); } |
| 328 | .close-cta p { color: var(--muted); font-size: 1.1rem; } |
| 329 | .close-cta .cta { justify-content: center; } |
| 330 | |
| 331 | /* ---- Footer ---- */ |
| 332 | footer { |
| 333 | border-top: 1px solid var(--line); |
| 334 | padding: 3rem 0 3.5rem; |
| 335 | font-size: 0.92rem; color: var(--muted); |
| 336 | } |
| 337 | footer p { max-width: 44rem; } |
| 338 | footer p + p { margin-top: 0.7rem; } |
| 339 | footer a { color: var(--accent); text-decoration: none; } |
| 340 | footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; } |
| 341 | footer code { font-family: var(--mono); font-size: 0.9em; } |
| 342 | |
| 343 | /* ---- Get-started article ---- */ |
| 344 | .page-hero { padding: 4.5rem 0 1rem; } |
| 345 | .page-hero .lede { margin-top: 0; } |
| 346 | article.guide { padding: 1.5rem 0 4rem; } |
| 347 | article.guide section { padding: 2.4rem 0; border-top: 1px solid var(--line); } |
| 348 | article.guide section:first-child { border-top: 0; } |
| 349 | article.guide h2 { font-size: 1.45rem; margin-bottom: 1rem; } |
| 350 | article.guide p, article.guide ul { color: var(--muted); max-width: 42rem; margin-bottom: 1rem; } |
| 351 | article.guide ul { padding-left: 1.2rem; } |
| 352 | article.guide li + li { margin-top: 0.5rem; } |
| 353 | article.guide a { color: var(--accent); text-decoration: none; } |
| 354 | article.guide a:hover { text-decoration: underline; text-underline-offset: 0.2em; } |
| 355 | article.guide pre { |
| 356 | background: var(--term-bg); color: var(--term-ink); |
| 357 | border: 1px solid var(--term-line); |
| 358 | padding: 1rem 1.2rem; border-radius: 0.7rem; |
| 359 | overflow-x: auto; |
| 360 | font-family: var(--mono); font-size: 0.88rem; line-height: 1.7; |
| 361 | margin: 1.1rem 0 1.3rem; |
| 362 | } |
| 363 | article.guide pre code { background: none; padding: 0; color: inherit; font-size: inherit; } |
| 364 | article.guide code { |
| 365 | font-family: var(--mono); font-size: 0.88em; |
| 366 | background: var(--accent-soft); color: var(--accent-ink); |
| 367 | padding: 0.12em 0.4em; border-radius: 0.3em; |
| 368 | } |
| 369 | article.guide .note { |
| 370 | border-left: 1px solid var(--line-strong); |
| 371 | padding-left: 1.1rem; color: var(--faint); font-size: 0.95rem; |
| 372 | } |
| 373 | |
| 374 | /* ---- Responsive ---- */ |
| 375 | @media (max-width: 62rem) { |
| 376 | .hero { padding: 3.5rem 0 4.5rem; } |
| 377 | .hero .wrap { grid-template-columns: 1fr; gap: 3rem; } |
| 378 | .lede { max-width: 38rem; } |
| 379 | .steps { grid-template-columns: 1fr; gap: 2.25rem; } |
| 380 | .quiet-grid { grid-template-columns: 1fr; gap: 2.5rem; } |
| 381 | section, .band { padding: 4rem 0; } |
| 382 | .close-cta { padding: 5rem 0; } |
| 383 | } |
| 384 | |
| 385 | @media (prefers-reduced-motion: reduce) { |
| 386 | html { scroll-behavior: auto; } |
| 387 | *, *::before, *::after { animation: none !important; transition: none !important; } |
| 388 | } |
| 389 | |
amadan