wavespeed/wan2.2
20
1/* ==========================================================================2 Shared stylesheet for wavespeed model reference pages.3 Edit here, then run _shared/sync.sh to copy into each Space.4 ========================================================================== */5 6:root {7 --bg: #ffffff;8 --bg-soft: #f7f8fa;9 --bg-code: #f4f5f7;10 --fg: #14161a;11 --fg-muted: #5b6270;12 --fg-faint: #868d9b;13 --line: #e4e6eb;14 --line-strong: #d2d6de;15 --accent: #2f5bd7;16 --accent-soft: #eef2fd;17 --radius: 10px;18 --radius-sm: 6px;19 --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;20 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",21 "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;22 --maxw: 880px;23}24 25@media (prefers-color-scheme: dark) {26 :root {27 --bg: #0e1014;28 --bg-soft: #161920;29 --bg-code: #14171d;30 --fg: #e7e9ee;31 --fg-muted: #99a1b0;32 --fg-faint: #6f7788;33 --line: #252a33;34 --line-strong: #333a46;35 --accent: #7ba1ff;36 --accent-soft: #172136;37 }38}39 40*,41*::before,42*::after {43 box-sizing: border-box;44}45 46html {47 -webkit-text-size-adjust: 100%;48 scroll-behavior: smooth;49}50 51body {52 margin: 0;53 background: var(--bg);54 color: var(--fg);55 font-family: var(--sans);56 font-size: 16px;57 line-height: 1.65;58 -webkit-font-smoothing: antialiased;59}60 61a {62 color: var(--accent);63 text-decoration: none;64}65 66a:hover {67 text-decoration: underline;68}69 70img,71video {72 max-width: 100%;73 height: auto;74 display: block;75}76 77hr {78 border: 0;79 border-top: 1px solid var(--line);80 margin: 3rem 0;81}82 83.wrap {84 max-width: var(--maxw);85 margin: 0 auto;86 padding: 0 20px;87}88 89/* --- header ------------------------------------------------------------- */90 91.site-header {92 border-bottom: 1px solid var(--line);93 background: var(--bg);94 position: sticky;95 top: 0;96 z-index: 20;97}98 99.site-header .wrap {100 display: flex;101 align-items: center;102 justify-content: space-between;103 gap: 16px;104 height: 56px;105}106 107.brand {108 display: flex;109 align-items: center;110 gap: 9px;111 font-weight: 600;112 font-size: 0.9rem;113 color: var(--fg);114 letter-spacing: -0.01em;115}116 117.brand:hover {118 text-decoration: none;119}120 121.brand-mark {122 width: 20px;123 height: 20px;124 border-radius: 5px;125 background: var(--accent);126 flex: 0 0 auto;127 position: relative;128}129 130.brand-mark::after {131 content: "";132 position: absolute;133 inset: 6px 4px;134 border-left: 2px solid var(--bg);135 border-right: 2px solid var(--bg);136 opacity: 0.85;137}138 139.header-nav {140 display: flex;141 align-items: center;142 gap: 20px;143 font-size: 0.86rem;144}145 146.header-nav a {147 color: var(--fg-muted);148}149 150.header-nav a:hover {151 color: var(--fg);152 text-decoration: none;153}154 155.brand span:last-child {156 white-space: nowrap;157}158 159@media (max-width: 760px) {160 .header-nav a.opt {161 display: none;162 }163}164 165/* On phones the in-page anchors aren't worth the crowding — the page is short166 enough to scroll, and the one outbound link needs the room. */167@media (max-width: 560px) {168 .header-nav a.jump {169 display: none;170 }171}172 173/* --- hero --------------------------------------------------------------- */174 175.hero {176 padding: 56px 0 12px;177}178 179.eyebrow {180 font-size: 0.72rem;181 font-weight: 600;182 letter-spacing: 0.08em;183 text-transform: uppercase;184 color: var(--fg-faint);185 margin: 0 0 14px;186}187 188h1 {189 font-size: 2.6rem;190 line-height: 1.15;191 letter-spacing: -0.025em;192 font-weight: 700;193 margin: 0 0 14px;194}195 196.lede {197 font-size: 1.12rem;198 color: var(--fg-muted);199 margin: 0;200 max-width: 68ch;201}202 203@media (max-width: 620px) {204 h1 {205 font-size: 2rem;206 }207 .hero {208 padding-top: 36px;209 }210}211 212/* metadata strip under the title */213.meta {214 display: flex;215 flex-wrap: wrap;216 gap: 8px 10px;217 margin: 26px 0 0;218 padding: 0;219 list-style: none;220}221 222.meta li {223 font-size: 0.78rem;224 font-family: var(--mono);225 color: var(--fg-muted);226 border: 1px solid var(--line);227 border-radius: 999px;228 padding: 3px 11px;229 white-space: nowrap;230}231 232.meta li b {233 font-weight: 500;234 color: var(--fg-faint);235}236 237/* --- sections ----------------------------------------------------------- */238 239section {240 padding: 44px 0 0;241}242 243h2 {244 font-size: 1.35rem;245 letter-spacing: -0.015em;246 font-weight: 650;247 margin: 0 0 6px;248 scroll-margin-top: 76px;249}250 251.section-note {252 color: var(--fg-muted);253 margin: 0 0 22px;254 font-size: 0.95rem;255 max-width: 70ch;256}257 258h3 {259 font-size: 1rem;260 font-weight: 620;261 margin: 0 0 6px;262 letter-spacing: -0.005em;263}264 265p {266 margin: 0 0 1rem;267}268 269/* --- cards -------------------------------------------------------------- */270 271.grid {272 display: grid;273 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));274 gap: 14px;275 margin: 0;276}277 278.card {279 border: 1px solid var(--line);280 border-radius: var(--radius);281 padding: 18px 18px 16px;282 background: var(--bg);283}284 285.card p {286 margin: 0;287 color: var(--fg-muted);288 font-size: 0.9rem;289 line-height: 1.6;290}291 292.card p + p {293 margin-top: 0.6rem;294}295 296/* --- figures ------------------------------------------------------------ */297 298figure {299 margin: 0 0 18px;300 border: 1px solid var(--line);301 border-radius: var(--radius);302 overflow: hidden;303 background: var(--bg-soft);304}305 306figure img,307figure video {308 width: 100%;309 display: block;310}311 312figcaption {313 font-size: 0.82rem;314 color: var(--fg-muted);315 padding: 10px 14px;316 border-top: 1px solid var(--line);317 background: var(--bg);318}319 320figcaption b {321 color: var(--fg);322 font-weight: 600;323}324 325.figure-grid {326 display: grid;327 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));328 gap: 14px;329}330 331.figure-grid figure {332 margin: 0;333}334 335/* --- tables ------------------------------------------------------------- */336 337.table-scroll {338 overflow-x: auto;339 border: 1px solid var(--line);340 border-radius: var(--radius);341}342 343table {344 border-collapse: collapse;345 width: 100%;346 font-size: 0.88rem;347 min-width: 480px;348}349 350th,351td {352 text-align: left;353 padding: 10px 14px;354 border-bottom: 1px solid var(--line);355}356 357th {358 font-weight: 600;359 font-size: 0.76rem;360 letter-spacing: 0.05em;361 text-transform: uppercase;362 color: var(--fg-faint);363 background: var(--bg-soft);364 white-space: nowrap;365}366 367tbody tr:last-child td {368 border-bottom: 0;369}370 371td code {372 font-size: 0.85em;373}374 375/* --- code --------------------------------------------------------------- */376 377.code {378 border: 1px solid var(--line);379 border-radius: var(--radius);380 overflow: hidden;381 background: var(--bg-code);382 margin: 0 0 14px;383}384 385.code-tabs {386 display: flex;387 gap: 2px;388 padding: 6px 6px 0;389 border-bottom: 1px solid var(--line);390 background: var(--bg-soft);391}392 393.code-tabs button {394 appearance: none;395 border: 0;396 background: transparent;397 font-family: var(--mono);398 font-size: 0.78rem;399 color: var(--fg-muted);400 padding: 7px 12px;401 border-radius: var(--radius-sm) var(--radius-sm) 0 0;402 cursor: pointer;403 line-height: 1;404}405 406.code-tabs button:hover {407 color: var(--fg);408}409 410.code-tabs button[aria-selected="true"] {411 background: var(--bg-code);412 color: var(--fg);413 font-weight: 600;414 box-shadow: inset 0 -1px 0 var(--bg-code);415}416 417.code pre {418 margin: 0;419 padding: 16px 18px;420 overflow-x: auto;421 font-family: var(--mono);422 font-size: 0.815rem;423 line-height: 1.65;424 tab-size: 2;425}426 427.code pre[hidden] {428 display: none;429}430 431code {432 font-family: var(--mono);433 font-size: 0.88em;434}435 436p code,437li code {438 background: var(--bg-code);439 border: 1px solid var(--line);440 border-radius: 4px;441 padding: 1px 5px;442}443 444/* --- links list --------------------------------------------------------- */445 446.links {447 display: grid;448 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));449 gap: 10px;450 list-style: none;451 padding: 0;452 margin: 0;453}454 455.links a {456 display: flex;457 align-items: baseline;458 justify-content: space-between;459 gap: 10px;460 border: 1px solid var(--line);461 border-radius: var(--radius-sm);462 padding: 11px 14px;463 color: var(--fg);464 font-size: 0.9rem;465 font-weight: 500;466}467 468.links a:hover {469 border-color: var(--line-strong);470 background: var(--bg-soft);471 text-decoration: none;472}473 474.links .host {475 font-family: var(--mono);476 font-size: 0.72rem;477 color: var(--fg-faint);478 font-weight: 400;479}480 481/* --- run-it callout (the one place we ask for a click) ------------------- */482 483.callout {484 border: 1px solid var(--line);485 border-left: 3px solid var(--accent);486 background: var(--bg-soft);487 border-radius: var(--radius-sm);488 padding: 16px 18px;489 font-size: 0.92rem;490 color: var(--fg-muted);491}492 493.callout p {494 margin: 0;495}496 497.callout p + p {498 margin-top: 0.5rem;499}500 501.btn-row {502 display: flex;503 flex-wrap: wrap;504 gap: 10px;505 margin-top: 18px;506}507 508.btn {509 display: inline-flex;510 align-items: center;511 gap: 7px;512 border-radius: var(--radius-sm);513 padding: 9px 16px;514 font-size: 0.89rem;515 font-weight: 550;516 border: 1px solid var(--accent);517 background: var(--accent);518 color: #fff;519 line-height: 1.4;520}521 522.btn:hover {523 text-decoration: none;524 filter: brightness(1.08);525}526 527.btn.secondary {528 background: transparent;529 color: var(--fg);530 border-color: var(--line-strong);531}532 533.btn.secondary:hover {534 background: var(--bg-soft);535 filter: none;536}537 538@media (prefers-color-scheme: dark) {539 .btn {540 color: #0e1014;541 }542}543 544/* --- footer ------------------------------------------------------------- */545 546.site-footer {547 margin-top: 64px;548 border-top: 1px solid var(--line);549 padding: 26px 0 44px;550 font-size: 0.83rem;551 color: var(--fg-faint);552}553 554.site-footer .wrap {555 display: flex;556 flex-wrap: wrap;557 gap: 10px 24px;558 align-items: baseline;559 justify-content: space-between;560}561 562.site-footer a {563 color: var(--fg-muted);564}565 566.site-footer p {567 margin: 0;568 max-width: 60ch;569}570 571.footer-links {572 display: flex;573 gap: 16px;574 flex-wrap: wrap;575}576