Spaces:
Running
Running
| /* ========================================================================== | |
| Shared stylesheet for wavespeed model reference pages. | |
| Edit here, then run _shared/sync.sh to copy into each Space. | |
| ========================================================================== */ | |
| :root { | |
| --bg: #ffffff; | |
| --bg-soft: #f7f8fa; | |
| --bg-code: #f4f5f7; | |
| --fg: #14161a; | |
| --fg-muted: #5b6270; | |
| --fg-faint: #868d9b; | |
| --line: #e4e6eb; | |
| --line-strong: #d2d6de; | |
| --accent: #2f5bd7; | |
| --accent-soft: #eef2fd; | |
| --radius: 10px; | |
| --radius-sm: 6px; | |
| --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; | |
| --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", | |
| "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; | |
| --maxw: 880px; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0e1014; | |
| --bg-soft: #161920; | |
| --bg-code: #14171d; | |
| --fg: #e7e9ee; | |
| --fg-muted: #99a1b0; | |
| --fg-faint: #6f7788; | |
| --line: #252a33; | |
| --line-strong: #333a46; | |
| --accent: #7ba1ff; | |
| --accent-soft: #172136; | |
| } | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| -webkit-text-size-adjust: 100%; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--fg); | |
| font-family: var(--sans); | |
| font-size: 16px; | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| img, | |
| video { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| hr { | |
| border: 0; | |
| border-top: 1px solid var(--line); | |
| margin: 3rem 0; | |
| } | |
| .wrap { | |
| max-width: var(--maxw); | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* --- header ------------------------------------------------------------- */ | |
| .site-header { | |
| border-bottom: 1px solid var(--line); | |
| background: var(--bg); | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| } | |
| .site-header .wrap { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| height: 56px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--fg); | |
| letter-spacing: -0.01em; | |
| } | |
| .brand:hover { | |
| text-decoration: none; | |
| } | |
| .brand-mark { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 5px; | |
| background: var(--accent); | |
| flex: 0 0 auto; | |
| position: relative; | |
| } | |
| .brand-mark::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 6px 4px; | |
| border-left: 2px solid var(--bg); | |
| border-right: 2px solid var(--bg); | |
| opacity: 0.85; | |
| } | |
| .header-nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| font-size: 0.86rem; | |
| } | |
| .header-nav a { | |
| color: var(--fg-muted); | |
| } | |
| .header-nav a:hover { | |
| color: var(--fg); | |
| text-decoration: none; | |
| } | |
| .brand span:last-child { | |
| white-space: nowrap; | |
| } | |
| @media (max-width: 760px) { | |
| .header-nav a.opt { | |
| display: none; | |
| } | |
| } | |
| /* On phones the in-page anchors aren't worth the crowding — the page is short | |
| enough to scroll, and the one outbound link needs the room. */ | |
| @media (max-width: 560px) { | |
| .header-nav a.jump { | |
| display: none; | |
| } | |
| } | |
| /* --- hero --------------------------------------------------------------- */ | |
| .hero { | |
| padding: 56px 0 12px; | |
| } | |
| .eyebrow { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--fg-faint); | |
| margin: 0 0 14px; | |
| } | |
| h1 { | |
| font-size: 2.6rem; | |
| line-height: 1.15; | |
| letter-spacing: -0.025em; | |
| font-weight: 700; | |
| margin: 0 0 14px; | |
| } | |
| .lede { | |
| font-size: 1.12rem; | |
| color: var(--fg-muted); | |
| margin: 0; | |
| max-width: 68ch; | |
| } | |
| @media (max-width: 620px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .hero { | |
| padding-top: 36px; | |
| } | |
| } | |
| /* metadata strip under the title */ | |
| .meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px 10px; | |
| margin: 26px 0 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .meta li { | |
| font-size: 0.78rem; | |
| font-family: var(--mono); | |
| color: var(--fg-muted); | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| padding: 3px 11px; | |
| white-space: nowrap; | |
| } | |
| .meta li b { | |
| font-weight: 500; | |
| color: var(--fg-faint); | |
| } | |
| /* --- sections ----------------------------------------------------------- */ | |
| section { | |
| padding: 44px 0 0; | |
| } | |
| h2 { | |
| font-size: 1.35rem; | |
| letter-spacing: -0.015em; | |
| font-weight: 650; | |
| margin: 0 0 6px; | |
| scroll-margin-top: 76px; | |
| } | |
| .section-note { | |
| color: var(--fg-muted); | |
| margin: 0 0 22px; | |
| font-size: 0.95rem; | |
| max-width: 70ch; | |
| } | |
| h3 { | |
| font-size: 1rem; | |
| font-weight: 620; | |
| margin: 0 0 6px; | |
| letter-spacing: -0.005em; | |
| } | |
| p { | |
| margin: 0 0 1rem; | |
| } | |
| /* --- cards -------------------------------------------------------------- */ | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 14px; | |
| margin: 0; | |
| } | |
| .card { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 18px 18px 16px; | |
| background: var(--bg); | |
| } | |
| .card p { | |
| margin: 0; | |
| color: var(--fg-muted); | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| } | |
| .card p + p { | |
| margin-top: 0.6rem; | |
| } | |
| /* --- figures ------------------------------------------------------------ */ | |
| figure { | |
| margin: 0 0 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: var(--bg-soft); | |
| } | |
| figure img, | |
| figure video { | |
| width: 100%; | |
| display: block; | |
| } | |
| figcaption { | |
| font-size: 0.82rem; | |
| color: var(--fg-muted); | |
| padding: 10px 14px; | |
| border-top: 1px solid var(--line); | |
| background: var(--bg); | |
| } | |
| figcaption b { | |
| color: var(--fg); | |
| font-weight: 600; | |
| } | |
| .figure-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 14px; | |
| } | |
| .figure-grid figure { | |
| margin: 0; | |
| } | |
| /* --- tables ------------------------------------------------------------- */ | |
| .table-scroll { | |
| overflow-x: auto; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| } | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| font-size: 0.88rem; | |
| min-width: 480px; | |
| } | |
| th, | |
| td { | |
| text-align: left; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| th { | |
| font-weight: 600; | |
| font-size: 0.76rem; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--fg-faint); | |
| background: var(--bg-soft); | |
| white-space: nowrap; | |
| } | |
| tbody tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| td code { | |
| font-size: 0.85em; | |
| } | |
| /* --- code --------------------------------------------------------------- */ | |
| .code { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: var(--bg-code); | |
| margin: 0 0 14px; | |
| } | |
| .code-tabs { | |
| display: flex; | |
| gap: 2px; | |
| padding: 6px 6px 0; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--bg-soft); | |
| } | |
| .code-tabs button { | |
| appearance: none; | |
| border: 0; | |
| background: transparent; | |
| font-family: var(--mono); | |
| font-size: 0.78rem; | |
| color: var(--fg-muted); | |
| padding: 7px 12px; | |
| border-radius: var(--radius-sm) var(--radius-sm) 0 0; | |
| cursor: pointer; | |
| line-height: 1; | |
| } | |
| .code-tabs button:hover { | |
| color: var(--fg); | |
| } | |
| .code-tabs button[aria-selected="true"] { | |
| background: var(--bg-code); | |
| color: var(--fg); | |
| font-weight: 600; | |
| box-shadow: inset 0 -1px 0 var(--bg-code); | |
| } | |
| .code pre { | |
| margin: 0; | |
| padding: 16px 18px; | |
| overflow-x: auto; | |
| font-family: var(--mono); | |
| font-size: 0.815rem; | |
| line-height: 1.65; | |
| tab-size: 2; | |
| } | |
| .code pre[hidden] { | |
| display: none; | |
| } | |
| code { | |
| font-family: var(--mono); | |
| font-size: 0.88em; | |
| } | |
| p code, | |
| li code { | |
| background: var(--bg-code); | |
| border: 1px solid var(--line); | |
| border-radius: 4px; | |
| padding: 1px 5px; | |
| } | |
| /* --- links list --------------------------------------------------------- */ | |
| .links { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); | |
| gap: 10px; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .links a { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 11px 14px; | |
| color: var(--fg); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| } | |
| .links a:hover { | |
| border-color: var(--line-strong); | |
| background: var(--bg-soft); | |
| text-decoration: none; | |
| } | |
| .links .host { | |
| font-family: var(--mono); | |
| font-size: 0.72rem; | |
| color: var(--fg-faint); | |
| font-weight: 400; | |
| } | |
| /* --- run-it callout (the one place we ask for a click) ------------------- */ | |
| .callout { | |
| border: 1px solid var(--line); | |
| border-left: 3px solid var(--accent); | |
| background: var(--bg-soft); | |
| border-radius: var(--radius-sm); | |
| padding: 16px 18px; | |
| font-size: 0.92rem; | |
| color: var(--fg-muted); | |
| } | |
| .callout p { | |
| margin: 0; | |
| } | |
| .callout p + p { | |
| margin-top: 0.5rem; | |
| } | |
| .btn-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 18px; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| border-radius: var(--radius-sm); | |
| padding: 9px 16px; | |
| font-size: 0.89rem; | |
| font-weight: 550; | |
| border: 1px solid var(--accent); | |
| background: var(--accent); | |
| color: #fff; | |
| line-height: 1.4; | |
| } | |
| .btn:hover { | |
| text-decoration: none; | |
| filter: brightness(1.08); | |
| } | |
| .btn.secondary { | |
| background: transparent; | |
| color: var(--fg); | |
| border-color: var(--line-strong); | |
| } | |
| .btn.secondary:hover { | |
| background: var(--bg-soft); | |
| filter: none; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .btn { | |
| color: #0e1014; | |
| } | |
| } | |
| /* --- footer ------------------------------------------------------------- */ | |
| .site-footer { | |
| margin-top: 64px; | |
| border-top: 1px solid var(--line); | |
| padding: 26px 0 44px; | |
| font-size: 0.83rem; | |
| color: var(--fg-faint); | |
| } | |
| .site-footer .wrap { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 24px; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| } | |
| .site-footer a { | |
| color: var(--fg-muted); | |
| } | |
| .site-footer p { | |
| margin: 0; | |
| max-width: 60ch; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |