| 1 | /* Palette unified with the global.css base tokens; --release-paper keeps the |
| 2 | ledger identity. Dark flips for base tokens live in global.css. */ |
| 3 | :root { |
| 4 | --release-backdrop: var(--bg-soft); |
| 5 | --release-paper: #fbfaf7; |
| 6 | --release-ink: var(--ink); |
| 7 | --release-blue: var(--accent); |
| 8 | --release-blue-soft: var(--accent-soft); |
| 9 | --release-orange: #d97732; |
| 10 | --release-green: #178b67; |
| 11 | } |
| 12 | |
| 13 | :root[data-theme="dark"] { |
| 14 | --release-paper: var(--card); |
| 15 | --release-orange: oklch(0.76 0.13 60); |
| 16 | --release-green: oklch(0.76 0.13 160); |
| 17 | } |
| 18 | |
| 19 | body { |
| 20 | background: |
| 21 | linear-gradient(90deg, transparent 0 49.94%, color-mix(in oklch, var(--accent) 2.5%, transparent) 50%, transparent 50.06%), |
| 22 | var(--release-backdrop); |
| 23 | } |
| 24 | |
| 25 | .release-stage { |
| 26 | min-height: 100vh; |
| 27 | padding: 108px 34px 80px; |
| 28 | } |
| 29 | |
| 30 | .release-grid { |
| 31 | width: min(1440px, 100%); |
| 32 | margin: 0 auto; |
| 33 | display: grid; |
| 34 | grid-template-columns: 220px minmax(0, 920px) 190px; |
| 35 | gap: 30px; |
| 36 | align-items: start; |
| 37 | justify-content: center; |
| 38 | } |
| 39 | |
| 40 | .release-rail, |
| 41 | .release-toc { |
| 42 | position: sticky; |
| 43 | top: 96px; |
| 44 | max-height: calc(100vh - 120px); |
| 45 | overflow-y: auto; |
| 46 | scrollbar-width: thin; |
| 47 | } |
| 48 | |
| 49 | .release-rail__eyebrow { |
| 50 | display: flex; |
| 51 | align-items: center; |
| 52 | gap: 9px; |
| 53 | margin: 4px 0 18px 10px; |
| 54 | color: var(--ink-2); |
| 55 | font-size: 12px; |
| 56 | font-weight: 700; |
| 57 | letter-spacing: .08em; |
| 58 | text-transform: uppercase; |
| 59 | } |
| 60 | |
| 61 | .release-rail__mark { |
| 62 | width: 10px; |
| 63 | height: 10px; |
| 64 | border: 2px solid var(--release-blue); |
| 65 | border-radius: 3px 3px 3px 0; |
| 66 | transform: rotate(-12deg); |
| 67 | } |
| 68 | |
| 69 | .release-rail nav { display: grid; gap: 18px; } |
| 70 | .release-rail__group { display: grid; gap: 7px; } |
| 71 | .release-rail__minor { |
| 72 | margin: 0 0 2px 10px; |
| 73 | color: var(--ink-3); |
| 74 | font-family: var(--font-mono); |
| 75 | font-size: 10.5px; |
| 76 | font-weight: 700; |
| 77 | letter-spacing: .08em; |
| 78 | text-transform: uppercase; |
| 79 | } |
| 80 | .release-rail__more summary { |
| 81 | margin: 2px 10px 6px; |
| 82 | color: var(--ink-3); |
| 83 | font-size: 11.5px; |
| 84 | font-weight: 600; |
| 85 | cursor: pointer; |
| 86 | list-style: none; |
| 87 | } |
| 88 | .release-rail__more summary::-webkit-details-marker { display: none; } |
| 89 | .release-rail__more summary:hover { color: var(--release-blue); } |
| 90 | .release-rail__more .when-open { display: none; } |
| 91 | .release-rail__more[open] .when-open { display: inline; } |
| 92 | .release-rail__more[open] .when-closed { display: none; } |
| 93 | |
| 94 | .release-version-link { |
| 95 | display: grid; |
| 96 | gap: 4px; |
| 97 | padding: 12px 13px; |
| 98 | border: 1px solid transparent; |
| 99 | border-radius: 11px; |
| 100 | color: var(--ink-2); |
| 101 | text-decoration: none; |
| 102 | transition: background .18s, border-color .18s, transform .18s; |
| 103 | } |
| 104 | |
| 105 | .release-version-link:hover { |
| 106 | transform: translateX(2px); |
| 107 | border-color: var(--line); |
| 108 | background: color-mix(in oklch, var(--card) 68%, transparent); |
| 109 | } |
| 110 | |
| 111 | .release-version-link.active { |
| 112 | border-color: color-mix(in srgb, var(--release-blue) 22%, transparent); |
| 113 | background: var(--card); |
| 114 | color: var(--release-blue); |
| 115 | box-shadow: 0 8px 24px rgba(35, 55, 92, .08); |
| 116 | } |
| 117 | |
| 118 | .release-version-link__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; } |
| 119 | .release-version-link strong { font-family: var(--font-mono); font-size: 13px; } |
| 120 | .release-version-link small { color: var(--ink-3); font-size: 11px; } |
| 121 | .release-version-link em { |
| 122 | padding: 2px 6px; |
| 123 | border-radius: 999px; |
| 124 | background: var(--release-blue-soft); |
| 125 | color: var(--release-blue); |
| 126 | font-size: 9px; |
| 127 | font-style: normal; |
| 128 | font-weight: 700; |
| 129 | letter-spacing: .04em; |
| 130 | text-transform: uppercase; |
| 131 | } |
| 132 | |
| 133 | .release-rail__all { |
| 134 | display: inline-block; |
| 135 | margin: 18px 10px; |
| 136 | color: var(--ink-3); |
| 137 | font-size: 12px; |
| 138 | font-weight: 600; |
| 139 | text-decoration: none; |
| 140 | } |
| 141 | .release-rail__all:hover { color: var(--release-blue); } |
| 142 | |
| 143 | .release-paper { |
| 144 | min-width: 0; |
| 145 | overflow: hidden; |
| 146 | border: 1px solid var(--line); |
| 147 | border-radius: 20px; |
| 148 | background: |
| 149 | linear-gradient(color-mix(in oklch, var(--accent) 3.5%, transparent) 1px, transparent 1px) 0 0 / 100% 34px, |
| 150 | var(--release-paper); |
| 151 | box-shadow: 0 28px 80px -42px rgba(24, 35, 60, .38); |
| 152 | } |
| 153 | |
| 154 | .release-hero { |
| 155 | position: relative; |
| 156 | padding: 58px 62px 52px; |
| 157 | background: |
| 158 | radial-gradient(circle at 90% 5%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 28%), |
| 159 | linear-gradient(180deg, color-mix(in oklch, var(--card) 88%, transparent), color-mix(in oklch, var(--release-paper) 92%, transparent)); |
| 160 | } |
| 161 | |
| 162 | .release-hero::after { |
| 163 | content: ""; |
| 164 | position: absolute; |
| 165 | left: 62px; |
| 166 | right: 62px; |
| 167 | bottom: 0; |
| 168 | height: 1px; |
| 169 | background: linear-gradient(90deg, var(--release-blue), var(--line) 36%, transparent); |
| 170 | } |
| 171 | |
| 172 | .release-hero__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; } |
| 173 | .release-hero__meta time { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; } |
| 174 | .release-channel { |
| 175 | display: inline-flex; |
| 176 | align-items: center; |
| 177 | gap: 7px; |
| 178 | color: var(--release-green); |
| 179 | font-size: 11px; |
| 180 | font-weight: 700; |
| 181 | letter-spacing: .08em; |
| 182 | text-transform: uppercase; |
| 183 | } |
| 184 | .release-channel__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); } |
| 185 | .release-hero__version { margin: 50px 0 10px; font-family: var(--font-mono); color: var(--release-blue); font-size: 13px; } |
| 186 | .release-hero h1 { |
| 187 | max-width: 15em; |
| 188 | margin: 0; |
| 189 | color: var(--release-ink); |
| 190 | font-size: clamp(38px, 5vw, 62px); |
| 191 | font-weight: 600; |
| 192 | letter-spacing: -.032em; |
| 193 | line-height: 1.04; |
| 194 | text-wrap: balance; |
| 195 | } |
| 196 | |
| 197 | .release-surfaces { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; } |
| 198 | .release-surfaces > span { |
| 199 | padding: 5px 9px; |
| 200 | border: 1px solid color-mix(in srgb, var(--release-blue) 18%, var(--line)); |
| 201 | border-radius: 999px; |
| 202 | background: color-mix(in oklch, var(--card) 72%, transparent); |
| 203 | color: var(--ink-2); |
| 204 | font-size: 11px; |
| 205 | font-weight: 600; |
| 206 | } |
| 207 | |
| 208 | .release-hero blockquote { |
| 209 | margin: 34px 0 0; |
| 210 | padding: 20px 24px; |
| 211 | border-left: 3px solid var(--release-blue); |
| 212 | border-radius: 0 12px 12px 0; |
| 213 | background: color-mix(in oklch, var(--accent) 5.5%, transparent); |
| 214 | color: var(--ink-2); |
| 215 | font-size: 17px; |
| 216 | line-height: 1.72; |
| 217 | } |
| 218 | |
| 219 | .release-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } |
| 220 | |
| 221 | /* compact hero for patch releases whose title is just the version */ |
| 222 | .release-hero--compact { padding: 42px 62px 38px; } |
| 223 | .release-hero--compact h1 { margin-top: 22px; font-size: clamp(30px, 3.6vw, 42px); } |
| 224 | .release-lede { margin: 22px 0 0; max-width: 640px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; } |
| 225 | |
| 226 | .release-section { padding: 52px 62px 0; scroll-margin-top: 100px; } |
| 227 | .release-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } |
| 228 | .release-section__head > span { |
| 229 | display: grid; |
| 230 | place-items: center; |
| 231 | width: 30px; |
| 232 | height: 30px; |
| 233 | border: 1px solid color-mix(in srgb, var(--release-blue) 24%, var(--line)); |
| 234 | border-radius: 8px; |
| 235 | color: var(--release-blue); |
| 236 | font-family: var(--font-mono); |
| 237 | font-size: 11px; |
| 238 | font-weight: 700; |
| 239 | } |
| 240 | .release-section h2 { color: var(--release-ink); font-size: 27px; font-weight: 650; letter-spacing: -.02em; } |
| 241 | .release-section h3 { color: var(--release-ink); font-size: 17px; font-weight: 650; line-height: 1.35; } |
| 242 | .release-section p { color: var(--ink-2); font-size: 15px; line-height: 1.68; } |
| 243 | |
| 244 | .release-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } |
| 245 | .release-guide { |
| 246 | position: relative; |
| 247 | display: grid; |
| 248 | align-content: start; |
| 249 | min-height: 168px; |
| 250 | padding: 22px; |
| 251 | border: 1px solid var(--line); |
| 252 | border-radius: 14px; |
| 253 | background: color-mix(in oklch, var(--card) 72%, transparent); |
| 254 | color: inherit; |
| 255 | text-decoration: none; |
| 256 | transition: transform .2s, border-color .2s, box-shadow .2s; |
| 257 | } |
| 258 | .release-guide:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--release-blue) 35%, var(--line)); box-shadow: 0 18px 35px -24px rgba(35, 65, 120, .4); } |
| 259 | .release-guide__arrow { position: absolute; top: 18px; right: 18px; color: var(--release-blue); font-size: 18px; } |
| 260 | .release-guide h3 { padding-right: 24px; } |
| 261 | .release-guide p { margin-top: 12px; font-size: 13.5px; } |
| 262 | |
| 263 | .release-highlight-list { display: grid; gap: 12px; } |
| 264 | .release-highlight { |
| 265 | display: grid; |
| 266 | grid-template-columns: 46px minmax(0, 1fr); |
| 267 | gap: 18px; |
| 268 | padding: 24px; |
| 269 | border: 1px solid var(--line); |
| 270 | border-radius: 14px; |
| 271 | background: color-mix(in oklch, var(--card) 68%, transparent); |
| 272 | } |
| 273 | .release-highlight__index { color: color-mix(in srgb, var(--release-blue) 48%, var(--ink-3)); font-family: var(--font-mono); font-size: 12px; padding-top: 4px; } |
| 274 | .release-highlight__kind { margin-bottom: 7px; color: var(--release-blue); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } |
| 275 | .release-highlight[data-kind="security"] .release-highlight__kind { color: var(--release-orange); } |
| 276 | .release-highlight[data-kind="fixed"] .release-highlight__kind { color: var(--release-green); } |
| 277 | .release-highlight p { margin-top: 8px; } |
| 278 | .release-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; } |
| 279 | .release-refs a { |
| 280 | padding: 3px 7px; |
| 281 | border-radius: 6px; |
| 282 | background: var(--release-blue-soft); |
| 283 | color: var(--release-blue); |
| 284 | font-family: var(--font-mono); |
| 285 | font-size: 10px; |
| 286 | font-weight: 600; |
| 287 | text-decoration: none; |
| 288 | } |
| 289 | |
| 290 | .release-change-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } |
| 291 | .release-change-list article { |
| 292 | padding: 20px 22px; |
| 293 | border-top: 2px solid color-mix(in srgb, var(--release-blue) 42%, var(--line)); |
| 294 | background: color-mix(in oklch, var(--card) 46%, transparent); |
| 295 | } |
| 296 | .release-change-list p { margin-top: 8px; font-size: 14px; } |
| 297 | |
| 298 | .release-notice-list { display: grid; gap: 10px; } |
| 299 | .release-notice { |
| 300 | display: grid; |
| 301 | grid-template-columns: 30px minmax(0, 1fr); |
| 302 | gap: 14px; |
| 303 | padding: 18px 20px; |
| 304 | border: 1px solid color-mix(in srgb, var(--release-blue) 22%, var(--line)); |
| 305 | border-radius: 12px; |
| 306 | background: color-mix(in srgb, var(--release-blue-soft) 56%, var(--card)); |
| 307 | } |
| 308 | .release-notice--warning { border-color: color-mix(in srgb, var(--release-orange) 32%, var(--line)); background: color-mix(in srgb, var(--release-orange) 12%, var(--card)); } |
| 309 | .release-notice__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--release-blue); color: white; font-family: var(--font-mono); font-size: 12px; font-weight: 700; } |
| 310 | .release-notice--warning .release-notice__icon { background: var(--release-orange); } |
| 311 | .release-notice p { margin-top: 6px; font-size: 14px; } |
| 312 | |
| 313 | .release-thanks > p { margin-bottom: 14px; } |
| 314 | .release-thanks > div { display: flex; flex-wrap: wrap; gap: 8px; } |
| 315 | .release-thanks a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklch, var(--card) 70%, transparent); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; text-decoration: none; } |
| 316 | .release-thanks a:hover { color: var(--release-blue); border-color: color-mix(in srgb, var(--release-blue) 34%, var(--line)); } |
| 317 | |
| 318 | .release-download { |
| 319 | margin: 56px 62px 62px; |
| 320 | padding: 30px 32px; |
| 321 | display: flex; |
| 322 | align-items: center; |
| 323 | justify-content: space-between; |
| 324 | gap: 26px; |
| 325 | border-radius: 16px; |
| 326 | background: #20242d; |
| 327 | } |
| 328 | .release-download h2 { max-width: 480px; color: #fff; font-size: 28px; } |
| 329 | .release-download__kicker { margin-bottom: 7px; color: #91b8ff !important; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } |
| 330 | .release-download__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } |
| 331 | .release-compare { color: #c9d4e9; font-size: 13px; font-weight: 600; text-decoration: none; } |
| 332 | .release-compare:hover { color: #fff; } |
| 333 | |
| 334 | .release-toc { padding: 6px 0 20px; } |
| 335 | .release-toc > p { margin: 0 0 16px 12px; color: var(--release-ink); font-size: 13px; font-weight: 700; } |
| 336 | .release-toc nav { display: grid; border-left: 1px solid var(--line); } |
| 337 | .release-toc a { |
| 338 | position: relative; |
| 339 | padding: 7px 0 7px 13px; |
| 340 | color: var(--ink-3); |
| 341 | font-size: 12px; |
| 342 | font-weight: 550; |
| 343 | text-decoration: none; |
| 344 | transition: color .16s; |
| 345 | } |
| 346 | .release-toc a::before { content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 2px; border-radius: 4px; background: transparent; } |
| 347 | .release-toc a:hover { color: var(--release-ink); } |
| 348 | .release-toc a.active { color: var(--release-blue); } |
| 349 | .release-toc a.active::before { background: var(--release-blue); } |
| 350 | |
| 351 | .release-mobile-switcher { display: none; } |
| 352 | .release-footer { |
| 353 | width: min(1180px, calc(100% - 64px)); |
| 354 | margin: 0 auto; |
| 355 | padding: 28px 0 38px; |
| 356 | display: flex; |
| 357 | align-items: center; |
| 358 | gap: 20px; |
| 359 | border-top: 1px solid var(--line); |
| 360 | color: var(--ink-3); |
| 361 | font-size: 12px; |
| 362 | } |
| 363 | .release-footer > span { margin-left: auto; color: var(--ink-3); } |
| 364 | .release-footer > a:last-child { color: var(--ink-2); text-decoration: none; } |
| 365 | |
| 366 | @media (max-width: 1180px) { |
| 367 | .release-grid { grid-template-columns: 200px minmax(0, 850px); } |
| 368 | .release-toc { display: none; } |
| 369 | } |
| 370 | |
| 371 | @media (max-width: 840px) { |
| 372 | .release-stage { padding: 92px 16px 48px; } |
| 373 | .release-grid { display: block; } |
| 374 | .release-rail { display: none; } |
| 375 | .release-mobile-switcher { |
| 376 | width: min(720px, 100%); |
| 377 | margin: 0 auto 12px; |
| 378 | display: flex; |
| 379 | align-items: center; |
| 380 | justify-content: space-between; |
| 381 | gap: 14px; |
| 382 | padding: 10px 12px; |
| 383 | border: 1px solid var(--line); |
| 384 | border-radius: 12px; |
| 385 | background: var(--card); |
| 386 | color: var(--ink-2); |
| 387 | font-size: 12px; |
| 388 | font-weight: 700; |
| 389 | } |
| 390 | .release-mobile-switcher select { min-width: 130px; padding: 7px 28px 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: inherit; } |
| 391 | .release-paper { width: min(720px, 100%); margin: 0 auto; border-radius: 15px; } |
| 392 | .release-hero { padding: 38px 28px 34px; } |
| 393 | .release-hero--compact { padding: 30px 28px 28px; } |
| 394 | .release-hero::after { left: 28px; right: 28px; } |
| 395 | .release-hero__version { margin-top: 36px; } |
| 396 | .release-section { padding: 40px 28px 0; } |
| 397 | .release-guide-grid, .release-change-list { grid-template-columns: 1fr; } |
| 398 | .release-download { margin: 44px 28px 28px; padding: 26px; flex-direction: column; align-items: flex-start; } |
| 399 | } |
| 400 | |
| 401 | @media (max-width: 560px) { |
| 402 | .release-hero h1 { font-size: 36px; } |
| 403 | .release-hero blockquote { padding: 17px 18px; font-size: 15px; } |
| 404 | .release-highlight { grid-template-columns: 1fr; gap: 8px; padding: 20px; } |
| 405 | .release-highlight__index { display: none; } |
| 406 | .release-section h2 { font-size: 23px; } |
| 407 | .release-download__actions { align-items: flex-start; flex-direction: column; } |
| 408 | .release-footer { width: calc(100% - 32px); flex-wrap: wrap; } |
| 409 | .release-footer > span { order: 3; width: 100%; margin: 0; } |
| 410 | } |
| 411 | |
| 412 | .release-channel-tabs { |
| 413 | display: grid; |
| 414 | grid-template-columns: 1fr 1fr; |
| 415 | gap: 6px; |
| 416 | margin: 14px 0 18px; |
| 417 | } |
| 418 | |
| 419 | .release-channel-tabs a { |
| 420 | border: 1px solid var(--line); |
| 421 | border-radius: 999px; |
| 422 | color: var(--ink-2); |
| 423 | padding: 7px 10px; |
| 424 | text-align: center; |
| 425 | text-decoration: none; |
| 426 | transition: background 0.2s, border-color 0.2s, color 0.2s; |
| 427 | } |
| 428 | |
| 429 | .release-channel-tabs a:hover { |
| 430 | border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); |
| 431 | color: var(--accent-deep); |
| 432 | } |
| 433 | |
| 434 | .release-channel-tabs a.active { |
| 435 | background: var(--accent-soft); |
| 436 | border-color: color-mix(in oklch, var(--accent) 46%, var(--line)); |
| 437 | color: var(--accent-deep); |
| 438 | } |
| 439 | |
| 440 | .release-channel-tabs a:focus-visible { |
| 441 | outline: 2px solid var(--accent); |
| 442 | outline-offset: 2px; |
| 443 | } |
| 444 | |
| 445 | .release-builds { |
| 446 | display: flex; |
| 447 | flex-wrap: wrap; |
| 448 | gap: 8px; |
| 449 | margin-top: 14px; |
| 450 | } |
| 451 | |
| 452 | .release-builds span { |
| 453 | border: 1px solid var(--line); |
| 454 | border-radius: 999px; |
| 455 | color: var(--ink-2); |
| 456 | font-family: var(--mono); |
| 457 | font-size: 0.78rem; |
| 458 | padding: 6px 10px; |
| 459 | } |
| 460 | |
| 461 | @media (prefers-reduced-motion: reduce) { |
| 462 | .release-version-link, .release-guide, .release-channel-tabs a { transition: none; } |
| 463 | } |
| 464 |