@charset "utf-8"; /* CSS Document */ /* -------------------------------------------------- Root variables -------------------------------------------------- */ :root { --bg: #f3f4f6; --bg-alt: #ffffff; --fg: #111827; --muted: #4b5563; --accent: #2563eb; --border: #e5e7eb; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* -------------------------------------------------- Global reset / base -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); background: var(--bg); color: var(--fg); display: flex; justify-content: center; padding: 2.5rem 1.4rem 3rem; } /* For very simple pages that need no card shell, you can add `.body-plain` to and override if desired. */ .body-plain { background: var(--bg); } /* -------------------------------------------------- Main wrappers -------------------------------------------------- */ .container, .shell { width: 100%; max-width: 960px; background: var(--bg-alt); border-radius: 16px; border: 1px solid var(--border); padding: 2rem 2.25rem 2.4rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } /* The home page "shell" can be slightly more elevated */ .shell { max-width: 960px; border-radius: 20px; } /* Narrower variant if you want it for some legal/policy pages */ .container--narrow { max-width: 800px; } /* -------------------------------------------------- Typography -------------------------------------------------- */ h1, h2, h3, h4 { color: var(--fg); font-weight: 600; } h1 { margin-top: 0; margin-bottom: 0.3rem; font-size: 2rem; } h2 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: 0.6rem; } h3 { font-size: 1.05rem; margin-top: 1.25rem; margin-bottom: 0.35rem; } h4 { font-size: 0.95rem; margin-top: 1rem; margin-bottom: 0.2rem; } p { font-size: 0.94rem; line-height: 1.65; color: var(--muted); margin-top: 0.3rem; margin-bottom: 0.6rem; } ul, ol { padding-left: 1.25rem; margin-top: 0.3rem; margin-bottom: 0.7rem; font-size: 0.92rem; color: var(--muted); } li + li { margin-top: 0.25rem; } .small { font-size: 0.82rem; color: var(--muted); } .note { font-size: 0.82rem; color: var(--muted); } /* -------------------------------------------------- Links -------------------------------------------------- */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* -------------------------------------------------- Header blocks (spec, etc.) -------------------------------------------------- */ header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.6rem; } .title-block h1 { margin: 0; font-size: 1.9rem; } .title-block p { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--muted); } .meta-block { text-align: right; font-size: 0.8rem; color: var(--muted); } .meta-block div + div { margin-top: 0.15rem; } /* MSP-1 "pill"/badge styles */ .pill, .badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid #bfdbfe; background: #eff6ff; color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; } /* For cases where pill spacing differs slightly */ .pill { margin-top: 0.4rem; } /* -------------------------------------------------- Cards, sections, group headings -------------------------------------------------- */ .card { margin-top: 1.5rem; border-radius: 16px; border: 1px solid var(--border); background: #ffffff; padding: 1.4rem 1.6rem; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); } .card h2 { margin-top: 0; font-size: 1.3rem; } .group-heading { margin-top: 1.6rem; font-weight: 600; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } /* -------------------------------------------------- Navigation / contents blocks -------------------------------------------------- */ nav { border-radius: 14px; border: 1px solid var(--border); background: #f9fafb; padding: 1.2rem 1.4rem; margin-bottom: 1.8rem; } nav h2 { margin-top: 0; margin-bottom: 0.65rem; font-size: 1.1rem; } nav ol { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; color: var(--muted); } /* -------------------------------------------------- Code & preformatted blocks -------------------------------------------------- */ code { font-family: var(--font-mono); font-size: 0.86rem; background: #f3f4f6; border-radius: 3px; padding: 0.12rem 0.3rem; border: 1px solid #e5e7eb; color: #0f172a; } pre { background: #111827; border-radius: 10px; border: 1px solid #1f2937; padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.85rem; margin: 0.7rem 0 1rem; } pre code { background: none; border: none; padding: 0; color: #e5e7eb; } /* -------------------------------------------------- Tables -------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin: 0.7rem 0 1rem; font-size: 0.85rem; } th, td { border: 1px solid var(--border); padding: 0.45rem 0.5rem; text-align: left; vertical-align: top; } th { background: #f9fafb; font-weight: 600; color: var(--fg); } /* -------------------------------------------------- Footer -------------------------------------------------- */ footer { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem; font-size: 0.8rem; color: var(--muted); } footer a { color: var(--accent); } /* -------------------------------------------------- Optional: homepage / hero / links (for the main MSP-1 landing page if you use it) -------------------------------------------------- */ .hero { max-width: 640px; margin-bottom: 2rem; } .hero h2 { font-size: clamp(1.9rem, 3vw, 2.3rem); line-height: 1.2; margin: 0 0 0.65rem; } .hero p { margin: 0; color: var(--muted); font-size: 0.98rem; max-width: 38rem; } .links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .links a { font-size: 0.83rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.06); } .links a span { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.7rem; margin-left: 0.45rem; color: var(--muted); } /* Responsive helper */ @media (max-width: 800px) { body { padding: 1.8rem 1.1rem 2.4rem; } .container, .shell { padding: 1.7rem 1.5rem 2rem; } header { flex-direction: column; align-items: flex-start; } .meta-block { text-align: left; } }