Spaces:
Running
Running
| :root { | |
| --bg: #f7f7f4; | |
| --surface: #ffffff; | |
| --border: #e4e4df; | |
| --accent: #2563eb; | |
| --accent-dark: #1d4ed8; | |
| --text: #161614; | |
| --muted: #6b6b66; | |
| --code: #111111; | |
| --code-text: #e8e8e3; | |
| --soft: #eff4ff; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| line-height: 1.55; | |
| } | |
| body { | |
| max-width: 880px; | |
| margin: 0 auto; | |
| padding: 28px 18px 72px; | |
| } | |
| a { color: var(--accent); } | |
| header { margin-bottom: 28px; } | |
| .kicker { | |
| display: inline-block; | |
| font-size: 12px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--accent-dark); | |
| background: var(--soft); | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| font-weight: 700; | |
| margin-bottom: 14px; | |
| } | |
| h1 { | |
| font-size: clamp(2.2rem, 6vw, 3.4rem); | |
| letter-spacing: -0.04em; | |
| line-height: 1.05; | |
| margin-bottom: 10px; | |
| } | |
| h2 { | |
| font-size: clamp(1.35rem, 3vw, 1.75rem); | |
| letter-spacing: -0.03em; | |
| margin-bottom: 12px; | |
| } | |
| .slogan { | |
| color: var(--accent-dark); | |
| font-weight: 700; | |
| font-size: 1.15rem; | |
| margin-bottom: 12px; | |
| } | |
| .lead { | |
| color: var(--muted); | |
| max-width: 62ch; | |
| margin-bottom: 16px; | |
| font-size: 1.05rem; | |
| } | |
| .callout { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 14px 16px; | |
| color: var(--muted); | |
| margin-bottom: 18px; | |
| max-width: 64ch; | |
| } | |
| .callout strong { color: var(--text); } | |
| .actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin: 8px 0 8px; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 10px 16px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| color: var(--text); | |
| text-decoration: none; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #fff; | |
| border-color: var(--accent); | |
| } | |
| .btn-primary:hover { background: var(--accent-dark); } | |
| section { margin: 32px 0; } | |
| .steps { | |
| list-style: none; | |
| display: grid; | |
| gap: 10px; | |
| margin: 0 0 16px; | |
| } | |
| .steps li { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 12px 14px; | |
| color: var(--muted); | |
| } | |
| .steps strong { color: var(--text); } | |
| code { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 0.9em; | |
| background: #f0f0eb; | |
| border-radius: 6px; | |
| padding: 1px 6px; | |
| } | |
| .terminal { | |
| background: var(--code); | |
| color: var(--code-text); | |
| border-radius: 14px; | |
| padding: 16px 18px; | |
| overflow-x: auto; | |
| border: 1px solid #2a2a2a; | |
| } | |
| .terminal code { | |
| background: transparent; | |
| color: inherit; | |
| padding: 0; | |
| font-size: 0.92rem; | |
| white-space: pre; | |
| } | |
| .cards { | |
| display: grid; | |
| gap: 12px; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 16px; | |
| } | |
| .card h3 { font-size: 1rem; margin-bottom: 8px; letter-spacing: -0.02em; } | |
| .card p { color: var(--muted); font-size: 0.95rem; } | |
| .cta { | |
| margin-top: 28px; | |
| padding: 20px; | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| background: var(--surface); | |
| } | |
| .note { color: var(--muted); font-size: 0.95rem; margin: 8px 0 14px; } | |
| footer { | |
| margin-top: 40px; | |
| color: var(--muted); | |
| font-size: 0.88rem; | |
| } | |