| |
|
|
| :root { |
| --bg: #fbfaff; |
| --surface: #ffffff; |
| --ink: #17112e; |
| --ink-muted: #4a4266; |
| --brand: #5e35b1; |
| --brand-ink: #ffffff; |
| --link: #4527a0; |
| --hero-from: #0a0616; |
| --hero-to: #2a1670; |
| --hero-ink: #efeaff; |
| --hero-muted: #cfc6ee; |
| --line: #d9d2ef; |
| --focus: #8a6100; |
| --code-bg: #efeaff; |
| --radius: 14px; |
| --max: 74rem; |
| color-scheme: light dark; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root:not([data-theme="light"]) { |
| --bg: #0c0819; |
| --surface: #161029; |
| --ink: #efeaff; |
| --ink-muted: #bfb6e0; |
| --brand: #a48bff; |
| --brand-ink: #0a0616; |
| --link: #c4b2ff; |
| --hero-from: #05030c; |
| --hero-to: #1d0f4a; |
| --hero-ink: #efeaff; |
| --hero-muted: #c9bfe9; |
| --line: #2f2552; |
| --focus: #ffd166; |
| --code-bg: #221a40; |
| } |
| } |
|
|
| :root[data-theme="dark"] { |
| --bg: #0c0819; |
| --surface: #161029; |
| --ink: #efeaff; |
| --ink-muted: #bfb6e0; |
| --brand: #a48bff; |
| --brand-ink: #0a0616; |
| --link: #c4b2ff; |
| --hero-from: #05030c; |
| --hero-to: #1d0f4a; |
| --hero-ink: #efeaff; |
| --hero-muted: #c9bfe9; |
| --line: #2f2552; |
| --focus: #ffd166; |
| --code-bg: #221a40; |
| } |
|
|
| *, |
| *::before, |
| *::after { box-sizing: border-box; } |
|
|
| html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } |
|
|
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--ink); |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| font-size: 1rem; |
| line-height: 1.6; |
| } |
|
|
| img { max-width: 100%; height: auto; display: block; } |
|
|
| a { color: var(--link); text-underline-offset: 0.2em; } |
| a:hover { text-decoration-thickness: 2px; } |
|
|
| :focus-visible { |
| outline: 3px solid var(--focus); |
| outline-offset: 3px; |
| border-radius: 4px; |
| } |
|
|
| h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6rem; } |
| h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -0.01em; } |
| h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } |
| h3 { font-size: 1.15rem; } |
|
|
| p { margin: 0 0 1rem; } |
| code { |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| font-size: 0.92em; |
| background: var(--code-bg); |
| padding: 0.1em 0.35em; |
| border-radius: 6px; |
| } |
|
|
| .wrap { |
| width: 100%; |
| max-width: var(--max); |
| margin: 0 auto; |
| padding: 0 16px; |
| } |
|
|
| .section { padding: 3rem 0; } |
|
|
| .band { |
| background: var(--surface); |
| border-block: 1px solid var(--line); |
| padding: 3rem 0; |
| } |
|
|
| .small { font-size: 0.92rem; color: var(--ink-muted); } |
|
|
| .visually-hidden { |
| position: absolute !important; |
| width: 1px; height: 1px; |
| overflow: hidden; |
| clip: rect(0 0 0 0); |
| white-space: nowrap; |
| } |
|
|
| .skip-link { |
| position: absolute; |
| left: 16px; |
| top: -100px; |
| background: var(--brand); |
| color: var(--brand-ink); |
| padding: 0.6rem 1rem; |
| border-radius: 8px; |
| font-weight: 600; |
| z-index: 10; |
| text-decoration: none; |
| } |
| .skip-link:focus { top: 12px; } |
|
|
| |
| .site-header { |
| background: var(--hero-from); |
| color: var(--hero-ink); |
| position: sticky; |
| top: 0; |
| z-index: 5; |
| } |
| .bar { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: space-between; |
| gap: 0.5rem 1.5rem; |
| padding-top: 0.75rem; |
| padding-bottom: 0.75rem; |
| } |
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| color: var(--hero-ink); |
| font-weight: 700; |
| font-size: 1.1rem; |
| text-decoration: none; |
| } |
| .brand-mark { width: 32px; height: 32px; } |
| .nav-list { |
| list-style: none; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.25rem 1rem; |
| margin: 0; |
| padding: 0; |
| } |
| .nav-list a { |
| color: var(--hero-muted); |
| text-decoration: none; |
| padding: 0.25rem 0; |
| font-size: 0.95rem; |
| } |
| .nav-list a:hover { color: var(--hero-ink); text-decoration: underline; } |
| .site-header :focus-visible { outline-color: #ffd166; } |
|
|
| |
| .hero { |
| background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%); |
| color: var(--hero-ink); |
| padding: 3.5rem 0 3rem; |
| } |
| .hero a { color: var(--hero-ink); } |
| .hero .btn-primary { color: #0a0616; } |
| .hero-grid { |
| display: grid; |
| gap: 2rem; |
| align-items: center; |
| grid-template-columns: 1fr; |
| } |
| .lead { |
| font-size: 1.2rem; |
| color: var(--hero-muted); |
| max-width: 36rem; |
| } |
| .actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.75rem; |
| margin: 1.5rem 0 1rem; |
| } |
| .btn { |
| display: inline-block; |
| padding: 0.7rem 1.1rem; |
| border-radius: 999px; |
| font-weight: 600; |
| text-decoration: none; |
| border: 2px solid transparent; |
| line-height: 1.2; |
| } |
| .btn-primary { |
| background: #a48bff; |
| color: #0a0616; |
| } |
| .btn-secondary { |
| border-color: var(--hero-muted); |
| color: var(--hero-ink); |
| } |
| .btn:hover { text-decoration: underline; } |
| .hero .note { font-size: 0.92rem; color: var(--hero-muted); max-width: 36rem; } |
| .hero .note a { color: var(--hero-ink); } |
| .hero :focus-visible { outline-color: #ffd166; } |
|
|
| .shot { |
| margin: 0; |
| background: var(--surface); |
| border-radius: var(--radius); |
| padding: 0.5rem; |
| border: 1px solid var(--line); |
| } |
| .shot figcaption { |
| font-size: 0.9rem; |
| color: var(--ink-muted); |
| padding: 0.5rem 0.25rem 0.25rem; |
| } |
|
|
| |
| .steps { |
| list-style: none; |
| padding: 0; |
| margin: 1.5rem 0 0; |
| display: grid; |
| gap: 1rem; |
| grid-template-columns: 1fr; |
| counter-reset: step; |
| } |
| .steps li { |
| background: var(--bg); |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| padding: 1.25rem; |
| position: relative; |
| padding-left: 3.25rem; |
| } |
| .steps li::before { |
| counter-increment: step; |
| content: counter(step); |
| position: absolute; |
| left: 1.1rem; |
| top: 1.1rem; |
| width: 1.7rem; |
| height: 1.7rem; |
| border-radius: 50%; |
| background: var(--brand); |
| color: var(--brand-ink); |
| font-weight: 700; |
| display: grid; |
| place-items: center; |
| font-size: 0.95rem; |
| } |
|
|
| |
| .two-col, |
| .cards-3 { |
| display: grid; |
| gap: 1rem; |
| grid-template-columns: 1fr; |
| margin-top: 1.5rem; |
| } |
| .card { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| padding: 1.25rem; |
| } |
| .band .card { background: var(--bg); } |
| .tag { color: var(--ink-muted); font-size: 0.92rem; margin-bottom: 0.5rem; } |
| .list { padding-left: 1.25rem; margin: 0; } |
| .list li { margin-bottom: 0.6rem; } |
|
|
| |
| .table-wrap { overflow-x: auto; margin: 1.25rem 0; } |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| background: var(--surface); |
| font-size: 0.95rem; |
| } |
| th, td { |
| text-align: left; |
| vertical-align: top; |
| padding: 0.75rem; |
| border-bottom: 1px solid var(--line); |
| } |
| thead th { border-bottom: 2px solid var(--line); } |
| tbody th { font-weight: 600; } |
|
|
| |
| .site-footer { |
| background: var(--hero-from); |
| color: var(--hero-muted); |
| padding: 2rem 0; |
| } |
| .site-footer a { color: var(--hero-ink); } |
| .site-footer :focus-visible { outline-color: #ffd166; } |
| .footer-grid { |
| display: grid; |
| gap: 1rem; |
| grid-template-columns: 1fr; |
| } |
| .footer-grid p { margin: 0; font-size: 0.95rem; } |
| .footer-links { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem 1.25rem; |
| } |
|
|
| |
| @media (min-width: 760px) { |
| .hero-grid { grid-template-columns: 1.05fr 1fr; } |
| .steps { grid-template-columns: repeat(3, 1fr); } |
| .two-col { grid-template-columns: 1fr 1fr; } |
| .cards-3 { grid-template-columns: repeat(3, 1fr); } |
| .footer-grid { grid-template-columns: 2fr 1fr; align-items: center; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } |
| } |
|
|
