Spaces:
Running
Running
| :root { | |
| --bg: #0e1a12; --bg2: #0b1410; --card: #14211a; --line: #223328; | |
| --text: #e9f1ec; --muted: #9fb3a6; --accent: #22c55e; --accent2: #38bdf8; | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| margin: 0; color: var(--text); | |
| background: radial-gradient(1200px 600px at 80% -10%, #143a24 0%, var(--bg) 55%) no-repeat, var(--bg2); | |
| font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; | |
| } | |
| .hero { max-width: 1000px; margin: 0 auto; padding: 28px 22px 8px; } | |
| .topline { display: flex; align-items: center; justify-content: space-between; } | |
| .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; } | |
| .logo { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); | |
| display: grid; place-items: center; font-size: 20px; } | |
| .brand-name { font-size: 18px; } | |
| .pill { border: 1px solid var(--line); color: var(--muted); padding: 6px 12px; | |
| border-radius: 999px; font-size: 13px; } | |
| .hero-copy { padding: 46px 0 10px; max-width: 760px; } | |
| .eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; | |
| font-size: 13px; font-weight: 700; margin: 0 0 10px; } | |
| h1 { font-size: clamp(30px, 6vw, 52px); line-height: 1.05; margin: 0 0 16px; | |
| background: linear-gradient(120deg, var(--text), var(--accent2)); -webkit-background-clip: text; | |
| background-clip: text; color: transparent; } | |
| .lede { font-size: 18px; color: #cfe0d6; margin: 0 0 22px; } | |
| .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } | |
| .badges span { border: 1px solid var(--line); background: rgba(255,255,255,.02); | |
| padding: 8px 13px; border-radius: 10px; font-size: 14px; color: #d6e4dc; } | |
| .btn { display: inline-block; color: var(--accent); text-decoration: none; font-weight: 600; | |
| border-bottom: 1px solid transparent; } | |
| .btn:hover { border-color: var(--accent); } | |
| main { max-width: 1000px; margin: 0 auto; padding: 22px; } | |
| .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; | |
| margin: 24px 0 40px; } | |
| .cards article { background: var(--card); border: 1px solid var(--line); border-radius: 14px; | |
| padding: 20px; } | |
| .cards h3 { margin: 0 0 8px; font-size: 17px; } | |
| .cards p { margin: 0; color: var(--muted); font-size: 14.5px; } | |
| .steps { background: var(--card); border: 1px solid var(--line); border-radius: 16px; | |
| padding: 24px 26px; } | |
| .steps h2 { margin: 0 0 12px; } | |
| .steps ol { margin: 0; padding-left: 20px; color: #d6e4dc; } | |
| .steps li { margin: 8px 0; } | |
| code { background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 6px; font-size: 13px; } | |
| footer { max-width: 1000px; margin: 0 auto; padding: 30px 22px 50px; color: var(--muted); | |
| font-size: 13px; } | |
| @media (prefers-color-scheme: light) { | |
| :root { --bg: #eef4f0; --bg2: #e7efe9; --card: #ffffff; --line: #d7e3db; | |
| --text: #10231a; --muted: #567163; } | |
| body { background: radial-gradient(1200px 600px at 80% -10%, #cdeBD8 0%, var(--bg) 55%) no-repeat, var(--bg2); } | |
| .badges span, code { background: rgba(0,0,0,.03); } | |
| } | |