/* Rocket01 — Material 3 theme Tokens generated from seed color #0061A4 (blue) using Google's own material-color-utilities (themeFromSourceColor), Tonal Spot variant. Light tokens live on :root. Dark tokens are applied via html.dark, toggled by the md-switch in the nav bar (see inline script in ). */ :root { --md-sys-color-primary: #0061a4; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d1e4ff; --md-sys-color-on-primary-container: #001d36; --md-sys-color-secondary: #535f70; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d7e3f8; --md-sys-color-on-secondary-container: #101c2b; --md-sys-color-tertiary: #0061a4; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #d1e4ff; --md-sys-color-on-tertiary-container: #001d36; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #fdfcff; --md-sys-color-on-background: #1a1c1e; --md-sys-color-surface: #fdfcff; --md-sys-color-on-surface: #1a1c1e; --md-sys-color-surface-variant: #dfe2eb; --md-sys-color-on-surface-variant: #43474e; --md-sys-color-outline: #73777f; --md-sys-color-outline-variant: #c3c6cf; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f3f7; --md-sys-color-surface-container: #eeedf1; --md-sys-color-surface-container-high: #e8e8eb; --md-sys-color-surface-container-highest: #e2e2e6; --md-sys-color-inverse-surface: #2f3033; --md-sys-color-inverse-on-surface: #f1f0f4; --md-sys-color-inverse-primary: #9fcaff; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; color-scheme: light; } html.dark { --md-sys-color-primary: #9fcaff; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #00497d; --md-sys-color-on-primary-container: #d1e4ff; --md-sys-color-secondary: #bbc7db; --md-sys-color-on-secondary: #253140; --md-sys-color-secondary-container: #3b4858; --md-sys-color-on-secondary-container: #d7e3f8; --md-sys-color-tertiary: #9fcaff; --md-sys-color-on-tertiary: #003258; --md-sys-color-tertiary-container: #00497d; --md-sys-color-on-tertiary-container: #d1e4ff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffb4ab; --md-sys-color-background: #1a1c1e; --md-sys-color-on-background: #e2e2e6; --md-sys-color-surface: #1a1c1e; --md-sys-color-on-surface: #e2e2e6; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf; --md-sys-color-outline: #8d9199; --md-sys-color-outline-variant: #43474e; --md-sys-color-surface-container-lowest: #0d0e11; --md-sys-color-surface-container-low: #1a1c1e; --md-sys-color-surface-container: #1e2022; --md-sys-color-surface-container-high: #282a2d; --md-sys-color-surface-container-highest: #333538; --md-sys-color-inverse-surface: #e2e2e6; --md-sys-color-inverse-on-surface: #2f3033; --md-sys-color-inverse-primary: #0061a4; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); font-family: 'Roboto', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--md-sys-color-primary); } md-icon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; } /* ---------- Scrollbar ---------- */ html { overflow-y: scroll; } /* ---------- Layout ---------- */ .container { max-width: 880px; margin: 0 auto; padding: 0 24px; } /* ---------- Top app bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--md-sys-color-outline-variant); } .topbar-inner { max-width: 880px; margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--md-sys-color-on-surface); flex-shrink: 0; } .brand md-icon { color: var(--md-sys-color-primary); } .topbar-right { display: flex; align-items: center; gap: 8px; } .topnav { display: flex; align-items: center; gap: 4px; } .topnav md-text-button.current { --md-text-button-label-text-color: var(--md-sys-color-primary); font-weight: 700; } .theme-toggle { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); } .theme-toggle md-icon { font-size: 18px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--md-sys-color-surface-container-low) 0%, var(--md-sys-color-background) 100%); border-bottom: 1px solid var(--md-sys-color-outline-variant); } .hero::before { content: ""; position: absolute; top: -180px; right: -120px; width: 480px; height: 480px; border-radius: 50%; background: var(--md-sys-color-primary-container); opacity: 0.45; filter: blur(40px); pointer-events: none; } .hero-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 72px 24px 72px; } .eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--shape-sm); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); margin-bottom: 20px; } .hero h1 { margin: 0 0 16px; max-width: 620px; color: var(--md-sys-color-on-background); } .hero p.lead { max-width: 580px; color: var(--md-sys-color-on-surface-variant); margin: 0 0 28px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- Sections ---------- */ main { max-width: 880px; margin: 0 auto; } .section { padding: 48px 24px; } .section + .section { border-top: 1px solid var(--md-sys-color-outline-variant); } .section-tag { display: inline-block; color: var(--md-sys-color-primary); margin-bottom: 8px; } .section h2 { margin: 0 0 16px; color: var(--md-sys-color-on-background); } .section h3 { margin: 28px 0 8px; color: var(--md-sys-color-on-background); } .section p { max-width: 640px; color: var(--md-sys-color-on-surface-variant); margin: 0 0 12px; } .section p.tight { margin-bottom: 4px; } .section p strong { color: var(--md-sys-color-on-background); } /* ---------- Lists ---------- */ md-list { max-width: 640px; background: transparent; --md-list-container-color: transparent; } md-list-item { border-radius: var(--shape-md); --md-list-item-label-text-color: var(--md-sys-color-on-surface); } md-list-item md-icon[slot="start"] { color: var(--md-sys-color-primary); } /* ---------- Surfaces / Cards ---------- */ .surface { position: relative; border-radius: var(--shape-lg); background: var(--md-sys-color-surface-container-low); --md-elevation-level: 1; padding: 24px; margin-bottom: 16px; } .card-grid { display: grid; gap: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; position: relative; z-index: 1; } .card-title { display: flex; align-items: center; gap: 10px; color: var(--md-sys-color-on-surface); } .card-title md-icon { color: var(--md-sys-color-primary); } .tag-chip { font-size: 12px; padding: 3px 10px; border-radius: var(--shape-sm); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); white-space: nowrap; } .surface p { position: relative; z-index: 1; color: var(--md-sys-color-on-surface-variant); margin: 0 0 16px; max-width: 100%; } .surface .surface-actions { position: relative; z-index: 1; } /* ---------- Definition rows ---------- */ .dl-row { display: flex; gap: 24px; padding: 14px 0; border-top: 1px solid var(--md-sys-color-outline-variant); } .dl-row:first-child { border-top: none; } .dl-term { width: 180px; flex-shrink: 0; color: var(--md-sys-color-on-surface-variant); } .dl-desc { flex: 1; color: var(--md-sys-color-on-surface); } /* ---------- Code block ---------- */ .code-block { background: var(--md-sys-color-surface-container-highest); border-radius: var(--shape-md); padding: 14px 16px; font-family: 'Roboto Mono', monospace; font-size: 13px; color: var(--md-sys-color-on-surface); margin: 8px 0 16px; display: inline-block; } /* ---------- Numbered policy sections ---------- */ .num-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); margin-right: 10px; font-size: 13px; font-weight: 700; vertical-align: middle; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); } .footer-inner { max-width: 880px; margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--md-sys-color-on-surface-variant); } .footer-inner a { margin-left: 16px; text-decoration: none; color: var(--md-sys-color-on-surface-variant); } .footer-inner a:hover { color: var(--md-sys-color-primary); } @media (max-width: 600px) { .hero-inner { padding: 56px 20px 40px; } .dl-row { flex-direction: column; gap: 4px; } .dl-term { width: auto; } .topbar-inner { padding: 0 12px; } .topnav md-text-button { --md-text-button-label-text-color: inherit; } } /* ---------- Fixes ---------- */