diff --git a/marketing-site/styles/globals.css b/marketing-site/styles/globals.css index 4695729..87c8586 100644 --- a/marketing-site/styles/globals.css +++ b/marketing-site/styles/globals.css @@ -590,6 +590,67 @@ h1, h2, h3 { text-wrap: balance; margin: 0; } .chapter-outline-mobile[open] summary { margin-bottom: 10px; } .chapter-outline-mobile .outline-progress { margin-top: 4px; } + +.chapter-kit { + margin: 0 0 28px; + padding: 18px 20px 16px; + background: var(--color-pine-wash); + border: 1px solid var(--color-pine-tint); + border-radius: 16px; +} +.chapter-kit-title { + font-family: var(--font-display); font-weight: 600; + font-size: 1.2rem; letter-spacing: -0.02em; + margin: 0 0 6px; +} +.chapter-kit-lede { + font-size: 14.5px; color: var(--color-muted); + margin: 0 0 16px; +} +.kit-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px 28px; + margin: 0; +} +@media (min-width: 900px) { + .kit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} +@media (max-width: 720px) { + .kit-grid { grid-template-columns: 1fr; } +} +.kit-grid dt { + font-family: var(--font-mono); font-size: 11px; font-weight: 500; + letter-spacing: 0.12em; text-transform: uppercase; + color: var(--color-pine); margin: 0 0 6px; +} +.kit-grid dd { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--color-ink); } +.kit-grid ul { list-style: none; margin: 0; padding: 0; } +.kit-grid li { margin: 0 0 4px; } +.kit-grid li:last-child { margin-bottom: 0; } + +.workflow-kit { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); + gap: 12px 16px; + margin: 4px 0 8px; + padding: 14px 0 16px; + border-bottom: 1px dashed var(--color-line-2); +} +.workflow-kit dt { + font-family: var(--font-mono); font-size: 11px; font-weight: 500; + letter-spacing: 0.1em; text-transform: uppercase; + color: var(--color-pine); margin: 0 0 4px; +} +.workflow-kit dd { + margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-ink); +} + +.rail-kit { + font-size: 12.5px; line-height: 1.35; color: var(--color-muted); +} +.rail-out { color: var(--color-ink); } + .chapter-map { display: grid; grid-template-columns: 1fr 1fr;