| @@ -10,40 +10,42 @@ | ||
| 10 | 10 | * ---------------------------------------------------------------- */ |
| 11 | 11 | |
| 12 | 12 | .gs-app { |
| 13 | 13 | /* Brand */ |
| 14 | - --gs-brand: #5034c5; | |
| 15 | - --gs-brand-hover: #4229ad; | |
| 16 | - --gs-brand-soft: #efecfd; | |
| 17 | - --gs-brand-ring: rgba(80, 52, 197, 0.28); | |
| 18 | - --gs-brand-grad: linear-gradient(135deg, #6a4be0 0%, #5034c5 55%, #3f27a6 100%); | |
| 14 | + --gs-brand: #5325e8; | |
| 15 | + --gs-brand-hover: #451dcc; | |
| 16 | + --gs-brand-soft: #efebfe; | |
| 17 | + --gs-brand-line: #d9cffb; | |
| 18 | + --gs-brand-ring: rgba(83, 37, 232, 0.28); | |
| 19 | + --gs-brand-grad: linear-gradient(135deg, #6a45f0 0%, #5325e8 55%, #3f1bbd 100%); | |
| 19 | 20 | |
| 20 | 21 | /* Surfaces */ |
| 21 | - --gs-bg: #f6f7fb; | |
| 22 | + --gs-bg: #f4f5f8; | |
| 22 | 23 | --gs-surface: #fff; |
| 23 | - --gs-surface-2: #fbfbfe; | |
| 24 | + --gs-surface-2: #fafafc; | |
| 24 | 25 | --gs-surface-sunk: #f1f2f7; |
| 25 | 26 | |
| 26 | 27 | /* Lines */ |
| 27 | - --gs-line: #e7e8ef; | |
| 28 | - --gs-line-strong: #d8dae4; | |
| 28 | + --gs-line: #e4e6ec; | |
| 29 | + --gs-line-strong: #d3d7e0; | |
| 29 | 30 | |
| 30 | 31 | /* Text */ |
| 31 | - --gs-text: #14162b; | |
| 32 | - --gs-text-2: #5c6079; | |
| 33 | - --gs-text-3: #8b8fa6; | |
| 32 | + --gs-text: #12141c; | |
| 33 | + --gs-text-2: #5c6275; | |
| 34 | + --gs-text-3: #8a90a2; | |
| 34 | 35 | |
| 35 | 36 | /* Status */ |
| 36 | 37 | --gs-ok: #12855a; |
| 37 | - --gs-ok-soft: #e6f6ef; | |
| 38 | + --gs-ok-soft: #e4f5ee; | |
| 38 | 39 | --gs-danger: #c0362c; |
| 39 | 40 | --gs-danger-soft: #fdeceb; |
| 40 | - --gs-gold: #b7791f; | |
| 41 | - --gs-gold-soft: #fdf3e0; | |
| 41 | + --gs-gold: #b45309; | |
| 42 | + --gs-gold-soft: #fdf2e3; | |
| 42 | 43 | |
| 43 | 44 | /* Shape */ |
| 44 | 45 | --gs-r-sm: 8px; |
| 45 | - --gs-r: 12px; | |
| 46 | + --gs-r-md: 10px; | |
| 47 | + --gs-r: 14px; | |
| 46 | 48 | --gs-r-lg: 18px; |
| 47 | 49 | --gs-r-full: 999px; |
| 48 | 50 | |
| 49 | 51 | /* Elevation */ |
| @@ -58,13 +60,14 @@ | ||
| 58 | 60 | } |
| 59 | 61 | |
| 60 | 62 | .gs-app[data-gs-theme='dark'], |
| 61 | 63 | .gs-app.gs-dark { |
| 62 | - --gs-brand: #8d76ff; | |
| 63 | - --gs-brand-hover: #a08fff; | |
| 64 | + --gs-brand: #9b83ff; | |
| 65 | + --gs-brand-hover: #b09dff; | |
| 64 | 66 | --gs-brand-soft: #241f3d; |
| 65 | - --gs-brand-ring: rgba(141, 118, 255, 0.35); | |
| 66 | - --gs-brand-grad: linear-gradient(135deg, #6f56e8 0%, #5b3fd0 55%, #43299f 100%); | |
| 67 | + --gs-brand-line: #362f5c; | |
| 68 | + --gs-brand-ring: rgba(155, 131, 255, 0.35); | |
| 69 | + --gs-brand-grad: linear-gradient(135deg, #7a5df0 0%, #5f3fd8 55%, #4529ad 100%); | |
| 67 | 70 | |
| 68 | 71 | --gs-bg: #0e0f1a; |
| 69 | 72 | --gs-surface: #16182a; |
| 70 | 73 | --gs-surface-2: #1b1d31; |
| @@ -100,11 +103,11 @@ | ||
| 100 | 103 | body.gutslider-admin-page #wpbody-content { |
| 101 | 104 | padding-bottom: 0; |
| 102 | 105 | } |
| 103 | 106 | |
| 107 | +/* The shell prints its own footer bar, so the wp-admin one is redundant. */ | |
| 104 | 108 | body.gutslider-admin-page #wpfooter { |
| 105 | - padding-left: 24px; | |
| 106 | - padding-right: 24px; | |
| 109 | + display: none; | |
| 107 | 110 | } |
| 108 | 111 | |
| 109 | 112 | /* Hide third-party nags printed outside our shell. Notices we render |
| 110 | 113 | inside .gs-app (settings errors, for example) are kept and restyled. */ |
| @@ -124,11 +127,12 @@ | ||
| 124 | 127 | * ---------------------------------------------------------------- */ |
| 125 | 128 | |
| 126 | 129 | .gs-app { |
| 127 | 130 | box-sizing: border-box; |
| 131 | + display: flex; | |
| 132 | + flex-direction: column; | |
| 128 | 133 | min-height: calc(100vh - 32px); |
| 129 | 134 | margin: 0; |
| 130 | - padding-bottom: 96px; | |
| 131 | 135 | background: var(--gs-bg); |
| 132 | 136 | color: var(--gs-text); |
| 133 | 137 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif; |
| 134 | 138 | font-size: 14px; |
| @@ -161,9 +165,9 @@ | ||
| 161 | 165 | } |
| 162 | 166 | |
| 163 | 167 | .gs-shell { |
| 164 | 168 | width: 100%; |
| 165 | - max-width: 1240px; | |
| 169 | + max-width: 1248px; | |
| 166 | 170 | margin: 0 auto; |
| 167 | 171 | padding: 0 24px; |
| 168 | 172 | } |
| 169 | 173 | |
| @@ -168,8 +172,10 @@ | ||
| 168 | 172 | } |
| 169 | 173 | |
| 170 | 174 | .gs-main { |
| 171 | 175 | display: block; |
| 176 | + flex: 1 0 auto; | |
| 177 | + padding-bottom: 56px; | |
| 172 | 178 | } |
| 173 | 179 | |
| 174 | 180 | .gs-stack { |
| 175 | 181 | display: flex; |
| @@ -200,16 +206,18 @@ | ||
| 200 | 206 | background: var(--gs-surface); |
| 201 | 207 | } |
| 202 | 208 | } |
| 203 | 209 | |
| 210 | +/* Three tracks so the nav stays optically centred whatever flanks it. */ | |
| 204 | 211 | .gs-bar__inner { |
| 205 | - display: flex; | |
| 212 | + display: grid; | |
| 213 | + grid-template-columns: 1fr auto 1fr; | |
| 206 | 214 | align-items: center; |
| 207 | 215 | gap: 24px; |
| 208 | - max-width: 1240px; | |
| 216 | + max-width: 1440px; | |
| 209 | 217 | margin: 0 auto; |
| 210 | - padding: 0 24px; | |
| 211 | - height: 64px; | |
| 218 | + padding: 0 28px; | |
| 219 | + height: 60px; | |
| 212 | 220 | } |
| 213 | 221 | |
| 214 | 222 | .gs-brand { |
| 215 | 223 | display: flex; |
| @@ -216,9 +224,10 @@ | ||
| 216 | 224 | align-items: center; |
| 217 | 225 | gap: 10px; |
| 218 | 226 | text-decoration: none; |
| 219 | 227 | color: var(--gs-text); |
| 220 | - flex-shrink: 0; | |
| 228 | + justify-self: start; | |
| 229 | + min-width: 0; | |
| 221 | 230 | } |
| 222 | 231 | |
| 223 | 232 | .gs-brand:hover, |
| 224 | 233 | .gs-brand:focus { |
| @@ -227,32 +236,26 @@ | ||
| 227 | 236 | |
| 228 | 237 | .gs-brand__mark { |
| 229 | 238 | display: grid; |
| 230 | 239 | place-items: center; |
| 231 | - width: 32px; | |
| 232 | - height: 32px; | |
| 240 | + width: 26px; | |
| 241 | + height: 26px; | |
| 242 | + flex-shrink: 0; | |
| 233 | 243 | border-radius: var(--gs-r-sm); |
| 234 | - background: var(--gs-brand-grad); | |
| 244 | + background: var(--gs-brand); | |
| 235 | 245 | color: #fff; |
| 236 | - box-shadow: 0 4px 12px -4px var(--gs-brand-ring); | |
| 237 | 246 | } |
| 238 | 247 | |
| 239 | 248 | .gs-brand__mark svg { |
| 240 | - width: 17px; | |
| 241 | - height: 17px; | |
| 249 | + width: 14px; | |
| 250 | + height: 14px; | |
| 242 | 251 | display: block; |
| 243 | 252 | } |
| 244 | 253 | |
| 245 | -.gs-brand__text { | |
| 246 | - display: flex; | |
| 247 | - align-items: center; | |
| 248 | - gap: 8px; | |
| 249 | -} | |
| 250 | - | |
| 251 | 254 | .gs-brand__name { |
| 252 | 255 | font-size: 15px; |
| 253 | 256 | font-weight: 650; |
| 254 | - letter-spacing: -0.01em; | |
| 257 | + letter-spacing: -0.013em; | |
| 255 | 258 | } |
| 256 | 259 | |
| 257 | 260 | .gs-chip { |
| 258 | 261 | display: inline-flex; |
| @@ -257,21 +260,25 @@ | ||
| 257 | 260 | .gs-chip { |
| 258 | 261 | display: inline-flex; |
| 259 | 262 | align-items: center; |
| 260 | 263 | height: 20px; |
| 261 | - padding: 0 8px; | |
| 262 | - border-radius: var(--gs-r-full); | |
| 264 | + padding: 0 7px; | |
| 265 | + border-radius: 6px; | |
| 263 | 266 | font-size: 11px; |
| 264 | - font-weight: 600; | |
| 265 | - letter-spacing: 0.02em; | |
| 266 | - background: var(--gs-surface-sunk); | |
| 267 | - color: var(--gs-text-3); | |
| 267 | + font-weight: 550; | |
| 268 | + letter-spacing: 0; | |
| 269 | + background: var(--gs-surface-2); | |
| 270 | + color: var(--gs-text-2); | |
| 268 | 271 | border: 1px solid var(--gs-line); |
| 269 | 272 | } |
| 270 | 273 | |
| 271 | 274 | .gs-chip--pro { |
| 272 | - background: var(--gs-brand-grad); | |
| 273 | - color: #fff; | |
| 275 | + padding: 0 8px; | |
| 276 | + font-size: 10px; | |
| 277 | + font-weight: 700; | |
| 278 | + letter-spacing: 0.06em; | |
| 279 | + background: var(--gs-brand-soft); | |
| 280 | + color: var(--gs-brand); | |
| 274 | 281 | border-color: transparent; |
| 275 | 282 | } |
| 276 | 283 | |
| 277 | 284 | /* Nav */ |
| @@ -279,9 +286,8 @@ | ||
| 279 | 286 | .gs-nav { |
| 280 | 287 | display: flex; |
| 281 | 288 | align-items: center; |
| 282 | 289 | gap: 2px; |
| 283 | - flex: 1; | |
| 284 | 290 | min-width: 0; |
| 285 | 291 | overflow-x: auto; |
| 286 | 292 | scrollbar-width: none; |
| 287 | 293 | } |
| @@ -293,10 +299,10 @@ | ||
| 293 | 299 | .gs-nav__link { |
| 294 | 300 | position: relative; |
| 295 | 301 | display: inline-flex; |
| 296 | 302 | align-items: center; |
| 297 | - height: 34px; | |
| 298 | - padding: 0 14px; | |
| 303 | + height: 32px; | |
| 304 | + padding: 0 12px; | |
| 299 | 305 | border-radius: var(--gs-r-sm); |
| 300 | 306 | font-size: 13.5px; |
| 301 | 307 | font-weight: 550; |
| 302 | 308 | text-decoration: none; |
| @@ -314,8 +320,9 @@ | ||
| 314 | 320 | |
| 315 | 321 | .gs-nav__link.is-active { |
| 316 | 322 | color: var(--gs-brand); |
| 317 | 323 | background: var(--gs-brand-soft); |
| 324 | + font-weight: 600; | |
| 318 | 325 | } |
| 319 | 326 | |
| 320 | 327 | .gs-bar__actions { |
| 321 | 328 | display: flex; |
| @@ -320,20 +327,20 @@ | ||
| 320 | 327 | .gs-bar__actions { |
| 321 | 328 | display: flex; |
| 322 | 329 | align-items: center; |
| 323 | 330 | gap: 8px; |
| 324 | - flex-shrink: 0; | |
| 331 | + justify-self: end; | |
| 325 | 332 | } |
| 326 | 333 | |
| 327 | 334 | .gs-icon-btn { |
| 328 | 335 | display: grid; |
| 329 | 336 | place-items: center; |
| 330 | - width: 34px; | |
| 331 | - height: 34px; | |
| 337 | + width: 32px; | |
| 338 | + height: 32px; | |
| 332 | 339 | padding: 0; |
| 333 | - border: 1px solid transparent; | |
| 340 | + border: 1px solid var(--gs-line); | |
| 334 | 341 | border-radius: var(--gs-r-sm); |
| 335 | - background: transparent; | |
| 342 | + background: var(--gs-surface); | |
| 336 | 343 | color: var(--gs-text-2); |
| 337 | 344 | cursor: pointer; |
| 338 | 345 | text-decoration: none; |
| 339 | 346 | transition: all var(--gs-fast); |
| @@ -339,10 +346,10 @@ | ||
| 339 | 346 | transition: all var(--gs-fast); |
| 340 | 347 | } |
| 341 | 348 | |
| 342 | 349 | .gs-icon-btn:hover { |
| 343 | - background: var(--gs-surface-sunk); | |
| 344 | - border-color: var(--gs-line); | |
| 350 | + background: var(--gs-surface-2); | |
| 351 | + border-color: var(--gs-line-strong); | |
| 345 | 352 | color: var(--gs-text); |
| 346 | 353 | } |
| 347 | 354 | |
| 348 | 355 | .gs-icon { |
| @@ -371,11 +378,11 @@ | ||
| 371 | 378 | position: relative; |
| 372 | 379 | display: inline-flex; |
| 373 | 380 | align-items: center; |
| 374 | 381 | justify-content: center; |
| 375 | - gap: 8px; | |
| 376 | - height: 40px; | |
| 377 | - padding: 0 18px; | |
| 382 | + gap: 7px; | |
| 383 | + height: 36px; | |
| 384 | + padding: 0 14px; | |
| 378 | 385 | border: 1px solid transparent; |
| 379 | 386 | border-radius: var(--gs-r-sm); |
| 380 | 387 | font-family: inherit; |
| 381 | 388 | font-size: 13.5px; |
| @@ -404,11 +411,9 @@ | ||
| 404 | 411 | |
| 405 | 412 | .gs-btn--primary { |
| 406 | 413 | background: var(--gs-brand); |
| 407 | 414 | color: #fff; |
| 408 | - box-shadow: | |
| 409 | - 0 1px 2px rgba(20, 22, 43, 0.12), | |
| 410 | - 0 6px 16px -8px var(--gs-brand-ring); | |
| 415 | + box-shadow: 0 1px 2px rgba(18, 20, 28, 0.08); | |
| 411 | 416 | } |
| 412 | 417 | |
| 413 | 418 | .gs-btn--primary:hover, |
| 414 | 419 | .gs-btn--primary:focus { |
| @@ -545,20 +550,15 @@ | ||
| 545 | 550 | } |
| 546 | 551 | |
| 547 | 552 | .gs-eyebrow { |
| 548 | 553 | display: inline-block; |
| 549 | - margin-bottom: 14px; | |
| 550 | - font-size: 11.5px; | |
| 554 | + font-size: 10.5px; | |
| 551 | 555 | font-weight: 700; |
| 552 | - letter-spacing: 0.09em; | |
| 556 | + letter-spacing: 0.08em; | |
| 553 | 557 | text-transform: uppercase; |
| 554 | 558 | color: var(--gs-brand); |
| 555 | 559 | } |
| 556 | 560 | |
| 557 | -.gs-eyebrow--light { | |
| 558 | - color: rgba(255, 255, 255, 0.72); | |
| 559 | -} | |
| 560 | - | |
| 561 | 561 | .gs-page-head { |
| 562 | 562 | display: flex; |
| 563 | 563 | align-items: flex-end; |
| 564 | 564 | justify-content: space-between; |
| @@ -566,18 +566,58 @@ | ||
| 566 | 566 | flex-wrap: wrap; |
| 567 | 567 | padding-top: 40px; |
| 568 | 568 | } |
| 569 | 569 | |
| 570 | +.gs-page-head__actions { | |
| 571 | + display: flex; | |
| 572 | + align-items: center; | |
| 573 | + gap: 10px; | |
| 574 | + flex-wrap: wrap; | |
| 575 | +} | |
| 576 | + | |
| 570 | 577 | .gs-page-title { |
| 571 | - font-size: 26px; | |
| 578 | + font-size: 23px; | |
| 579 | + letter-spacing: -0.026em; | |
| 572 | 580 | } |
| 573 | 581 | |
| 574 | 582 | .gs-page-sub { |
| 575 | - max-width: 62ch; | |
| 576 | - margin-top: 6px; | |
| 583 | + max-width: 68ch; | |
| 584 | + margin-top: 5px; | |
| 585 | + font-size: 13.5px; | |
| 577 | 586 | color: var(--gs-text-2); |
| 578 | 587 | } |
| 579 | 588 | |
| 589 | +/* Status pill — licence state in the page header. */ | |
| 590 | + | |
| 591 | +.gs-pill { | |
| 592 | + display: inline-flex; | |
| 593 | + align-items: center; | |
| 594 | + gap: 7px; | |
| 595 | + padding: 7px 12px; | |
| 596 | + border-radius: var(--gs-r-full); | |
| 597 | + font-size: 12.5px; | |
| 598 | + font-weight: 550; | |
| 599 | + background: var(--gs-ok-soft); | |
| 600 | + color: var(--gs-ok); | |
| 601 | +} | |
| 602 | + | |
| 603 | +.gs-pill__dot { | |
| 604 | + width: 7px; | |
| 605 | + height: 7px; | |
| 606 | + border-radius: 50%; | |
| 607 | + background: currentcolor; | |
| 608 | +} | |
| 609 | + | |
| 610 | +.gs-pill--expiring { | |
| 611 | + background: var(--gs-gold-soft); | |
| 612 | + color: var(--gs-gold); | |
| 613 | +} | |
| 614 | + | |
| 615 | +.gs-pill--inactive { | |
| 616 | + background: var(--gs-danger-soft); | |
| 617 | + color: var(--gs-danger); | |
| 618 | +} | |
| 619 | + | |
| 580 | 620 | .gs-count { |
| 581 | 621 | flex-shrink: 0; |
| 582 | 622 | padding: 6px 12px; |
| 583 | 623 | border-radius: var(--gs-r-full); |
| @@ -588,142 +628,194 @@ | ||
| 588 | 628 | font-variant-numeric: tabular-nums; |
| 589 | 629 | color: var(--gs-text-2); |
| 590 | 630 | } |
| 591 | 631 | |
| 592 | -.gs-section__head { | |
| 593 | - margin-bottom: 20px; | |
| 632 | +/* ------------------------------------------------------------------ | |
| 633 | + * 7. Dashboard layout | |
| 634 | + * ---------------------------------------------------------------- */ | |
| 635 | + | |
| 636 | +.gs-page { | |
| 637 | + display: flex; | |
| 638 | + flex-direction: column; | |
| 639 | + gap: 22px; | |
| 640 | + | |
| 641 | + /* Matches the top opening on the blocks and settings screens. */ | |
| 642 | + padding-top: 40px; | |
| 643 | + padding-bottom: 40px; | |
| 594 | 644 | } |
| 595 | 645 | |
| 596 | -.gs-section__title { | |
| 597 | - font-size: 19px; | |
| 646 | +.gs-page .gs-page-head { | |
| 647 | + padding-top: 0; | |
| 598 | 648 | } |
| 599 | 649 | |
| 600 | -.gs-section__sub { | |
| 601 | - margin-top: 4px; | |
| 650 | +/* Top banner — licence prompts and similar, supplied by filter. */ | |
| 651 | + | |
| 652 | +.gs-banner { | |
| 653 | + display: flex; | |
| 654 | + align-items: center; | |
| 655 | + gap: 14px; | |
| 656 | + flex-wrap: wrap; | |
| 657 | + padding: 16px 18px; | |
| 658 | + border-radius: var(--gs-r); | |
| 659 | + border: 1px solid var(--gs-line); | |
| 660 | + background: var(--gs-surface); | |
| 661 | + box-shadow: var(--gs-shadow-sm); | |
| 662 | +} | |
| 663 | + | |
| 664 | +.gs-banner__icon { | |
| 665 | + display: grid; | |
| 666 | + place-items: center; | |
| 667 | + width: 36px; | |
| 668 | + height: 36px; | |
| 669 | + flex-shrink: 0; | |
| 670 | + border-radius: var(--gs-r-sm); | |
| 671 | + border: 1px solid var(--gs-line); | |
| 672 | + background: var(--gs-brand-soft); | |
| 673 | + color: var(--gs-brand); | |
| 674 | +} | |
| 675 | + | |
| 676 | +.gs-banner__text { | |
| 677 | + flex: 1; | |
| 678 | + min-width: 220px; | |
| 679 | +} | |
| 680 | + | |
| 681 | +.gs-banner__title { | |
| 682 | + display: block; | |
| 683 | + font-size: 14px; | |
| 684 | + font-weight: 620; | |
| 685 | + color: var(--gs-text); | |
| 686 | +} | |
| 687 | + | |
| 688 | +.gs-banner__sub { | |
| 689 | + margin-top: 2px; | |
| 690 | + font-size: 12.5px; | |
| 691 | + line-height: 1.5; | |
| 602 | 692 | color: var(--gs-text-2); |
| 603 | 693 | } |
| 604 | 694 | |
| 605 | -/* ------------------------------------------------------------------ | |
| 606 | - * 7. Hero | |
| 607 | - * ---------------------------------------------------------------- */ | |
| 695 | +/* Toned banners keep a hairline border tinted from their own accent, so the | |
| 696 | + edge reads as intentional rather than as a colour block on the page. */ | |
| 608 | 697 | |
| 609 | -.gs-hero { | |
| 610 | - position: relative; | |
| 611 | - overflow: hidden; | |
| 612 | - padding: 56px 0 52px; | |
| 698 | +.gs-banner--warning { | |
| 699 | + border-color: #f0ddc2; | |
| 700 | + border-color: color-mix(in srgb, var(--gs-gold) 20%, transparent); | |
| 701 | + background: var(--gs-gold-soft); | |
| 702 | +} | |
| 703 | + | |
| 704 | +.gs-banner--warning .gs-banner__icon { | |
| 705 | + border-color: #f0ddc2; | |
| 706 | + border-color: color-mix(in srgb, var(--gs-gold) 20%, transparent); | |
| 613 | 707 | background: var(--gs-surface); |
| 614 | - border-bottom: 1px solid var(--gs-line); | |
| 708 | + color: var(--gs-gold); | |
| 615 | 709 | } |
| 616 | 710 | |
| 617 | -.gs-hero::before { | |
| 618 | - content: ''; | |
| 619 | - position: absolute; | |
| 620 | - top: -180px; | |
| 621 | - right: -120px; | |
| 622 | - width: 520px; | |
| 623 | - height: 520px; | |
| 624 | - border-radius: 50%; | |
| 625 | - background: radial-gradient(circle, var(--gs-brand-ring) 0%, transparent 68%); | |
| 626 | - opacity: 0.55; | |
| 627 | - pointer-events: none; | |
| 711 | +.gs-banner--error { | |
| 712 | + border-color: #f7d7d4; | |
| 713 | + border-color: color-mix(in srgb, var(--gs-danger) 20%, transparent); | |
| 714 | + background: var(--gs-danger-soft); | |
| 628 | 715 | } |
| 629 | 716 | |
| 630 | -.gs-hero__grid { | |
| 631 | - position: relative; | |
| 632 | - display: grid; | |
| 633 | - grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); | |
| 634 | - gap: 48px; | |
| 635 | - align-items: center; | |
| 717 | +.gs-banner--error .gs-banner__icon { | |
| 718 | + border-color: #f7d7d4; | |
| 719 | + border-color: color-mix(in srgb, var(--gs-danger) 20%, transparent); | |
| 720 | + background: var(--gs-surface); | |
| 721 | + color: var(--gs-danger); | |
| 636 | 722 | } |
| 637 | 723 | |
| 638 | -.gs-hero__title { | |
| 639 | - font-size: clamp(28px, 3.4vw, 40px); | |
| 640 | - letter-spacing: -0.03em; | |
| 724 | +.gs-banner--info { | |
| 725 | + border-color: var(--gs-brand-line); | |
| 726 | + background: var(--gs-brand-soft); | |
| 641 | 727 | } |
| 642 | 728 | |
| 643 | -.gs-hero__lead { | |
| 644 | - max-width: 52ch; | |
| 645 | - margin-top: 14px; | |
| 646 | - font-size: 15px; | |
| 647 | - color: var(--gs-text-2); | |
| 729 | +.gs-banner--info .gs-banner__icon { | |
| 730 | + border-color: var(--gs-brand-line); | |
| 731 | + background: var(--gs-surface); | |
| 648 | 732 | } |
| 649 | 733 | |
| 650 | -.gs-hero__actions { | |
| 651 | - display: flex; | |
| 652 | - gap: 10px; | |
| 653 | - margin-top: 26px; | |
| 654 | - flex-wrap: wrap; | |
| 655 | -} | |
| 734 | +/* Metric row */ | |
| 656 | 735 | |
| 657 | -.gs-hero__stats { | |
| 736 | +.gs-metrics { | |
| 658 | 737 | display: grid; |
| 659 | - gap: 12px; | |
| 738 | + grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| 739 | + gap: 16px; | |
| 660 | 740 | } |
| 661 | 741 | |
| 662 | -.gs-stat { | |
| 742 | +.gs-metric { | |
| 743 | + display: flex; | |
| 744 | + flex-direction: column; | |
| 745 | + gap: 10px; | |
| 663 | 746 | padding: 18px; |
| 664 | 747 | border-radius: var(--gs-r); |
| 665 | - background: var(--gs-surface-2); | |
| 748 | + background: var(--gs-surface); | |
| 666 | 749 | border: 1px solid var(--gs-line); |
| 667 | 750 | } |
| 668 | 751 | |
| 669 | -.gs-stat__value { | |
| 670 | - display: block; | |
| 671 | - font-size: 30px; | |
| 672 | - font-weight: 680; | |
| 673 | - letter-spacing: -0.03em; | |
| 674 | - line-height: 1.1; | |
| 675 | - font-variant-numeric: tabular-nums; | |
| 752 | +.gs-metric__head { | |
| 753 | + display: flex; | |
| 754 | + align-items: center; | |
| 755 | + justify-content: space-between; | |
| 756 | + gap: 10px; | |
| 676 | 757 | } |
| 677 | 758 | |
| 678 | -.gs-stat__value--sm { | |
| 679 | - font-size: 17px; | |
| 680 | - margin-bottom: 2px; | |
| 759 | +.gs-metric__label { | |
| 760 | + font-size: 12.5px; | |
| 761 | + font-weight: 550; | |
| 762 | + color: var(--gs-text-2); | |
| 681 | 763 | } |
| 682 | 764 | |
| 683 | -.gs-stat__label { | |
| 684 | - display: block; | |
| 685 | - font-size: 12.5px; | |
| 686 | - font-weight: 600; | |
| 687 | - color: var(--gs-text-2); | |
| 765 | +.gs-metric__icon { | |
| 766 | + display: grid; | |
| 767 | + place-items: center; | |
| 768 | + width: 26px; | |
| 769 | + height: 26px; | |
| 770 | + flex-shrink: 0; | |
| 771 | + border-radius: 7px; | |
| 772 | + background: var(--gs-brand-soft); | |
| 773 | + color: var(--gs-brand); | |
| 688 | 774 | } |
| 689 | 775 | |
| 690 | -.gs-stat__meta { | |
| 691 | - display: block; | |
| 692 | - font-size: 12px; | |
| 693 | - color: var(--gs-text-3); | |
| 776 | +.gs-metric__icon .gs-icon { | |
| 777 | + width: 14px; | |
| 778 | + height: 14px; | |
| 694 | 779 | } |
| 695 | 780 | |
| 696 | -.gs-stat--split { | |
| 697 | - display: grid; | |
| 698 | - grid-template-columns: 1fr 1fr; | |
| 699 | - gap: 18px; | |
| 781 | +.gs-metric__value { | |
| 782 | + display: flex; | |
| 783 | + align-items: baseline; | |
| 784 | + gap: 6px; | |
| 785 | + font-size: 30px; | |
| 786 | + font-weight: 680; | |
| 787 | + line-height: 1; | |
| 788 | + letter-spacing: -0.033em; | |
| 789 | + font-variant-numeric: tabular-nums; | |
| 700 | 790 | } |
| 701 | 791 | |
| 702 | -.gs-stat--split .gs-stat__value { | |
| 703 | - font-size: 22px; | |
| 792 | +.gs-metric__unit { | |
| 793 | + font-size: 13px; | |
| 794 | + font-weight: 550; | |
| 795 | + letter-spacing: 0; | |
| 796 | + color: var(--gs-text-3); | |
| 704 | 797 | } |
| 705 | 798 | |
| 706 | -.gs-stat--status.is-pro { | |
| 707 | - background: var(--gs-brand-soft); | |
| 708 | - border-color: transparent; | |
| 799 | +.gs-metric__foot { | |
| 800 | + font-size: 12px; | |
| 801 | + color: var(--gs-text-3); | |
| 709 | 802 | } |
| 710 | 803 | |
| 711 | -.gs-meter { | |
| 712 | - margin-top: 12px; | |
| 713 | - height: 6px; | |
| 714 | - border-radius: var(--gs-r-full); | |
| 715 | - background: var(--gs-surface-sunk); | |
| 716 | - overflow: hidden; | |
| 804 | +/* Two-column body */ | |
| 805 | + | |
| 806 | +.gs-cols { | |
| 807 | + display: grid; | |
| 808 | + grid-template-columns: minmax(0, 1fr) 372px; | |
| 809 | + align-items: start; | |
| 810 | + gap: 22px; | |
| 717 | 811 | } |
| 718 | 812 | |
| 719 | -.gs-meter__fill { | |
| 720 | - display: block; | |
| 721 | - height: 100%; | |
| 722 | - width: var(--gs-meter, 0%); | |
| 723 | - border-radius: inherit; | |
| 724 | - background: var(--gs-brand-grad); | |
| 725 | - transition: width 600ms var(--gs-ease); | |
| 813 | +.gs-col { | |
| 814 | + display: flex; | |
| 815 | + flex-direction: column; | |
| 816 | + gap: 22px; | |
| 817 | + min-width: 0; | |
| 726 | 818 | } |
| 727 | 819 | |
| 728 | 820 | /* ------------------------------------------------------------------ |
| 729 | 821 | * 8. Cards & grids |
| @@ -728,20 +820,16 @@ | ||
| 728 | 820 | /* ------------------------------------------------------------------ |
| 729 | 821 | * 8. Cards & grids |
| 730 | 822 | * ---------------------------------------------------------------- */ |
| 731 | 823 | |
| 732 | -.gs-section { | |
| 733 | - padding-top: 4px; | |
| 734 | -} | |
| 735 | - | |
| 736 | 824 | .gs-shell.gs-stack { |
| 737 | 825 | padding-top: 40px; |
| 738 | 826 | padding-bottom: 40px; |
| 739 | 827 | } |
| 740 | 828 | |
| 741 | -/* Extra breathing room where content follows the dashboard hero. */ | |
| 742 | -.gs-hero + .gs-shell.gs-stack { | |
| 743 | - padding-top: 64px; | |
| 829 | +/* The stack already opens with 40px, so the head must not add its own. */ | |
| 830 | +.gs-shell.gs-stack > .gs-page-head { | |
| 831 | + padding-top: 0; | |
| 744 | 832 | } |
| 745 | 833 | |
| 746 | 834 | .gs-grid { |
| 747 | 835 | display: grid; |
| @@ -747,166 +835,400 @@ | ||
| 747 | 835 | display: grid; |
| 748 | 836 | gap: 16px; |
| 749 | 837 | } |
| 750 | 838 | |
| 751 | -/* Stretch, so cards in a row share one height regardless of copy length. */ | |
| 752 | -.gs-grid--3 { | |
| 753 | - grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 754 | - align-items: stretch; | |
| 755 | -} | |
| 756 | - | |
| 757 | -/* Stacked grids are siblings, not flex children, so they need their own | |
| 758 | - separation — a little more than the in-grid gap to read as a new group. */ | |
| 759 | -.gs-grid + .gs-grid { | |
| 760 | - margin-top: 24px; | |
| 761 | -} | |
| 762 | - | |
| 763 | 839 | .gs-grid--cards { |
| 764 | 840 | grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); |
| 765 | 841 | } |
| 766 | 842 | |
| 843 | +/* ------------------------------------------------------------------ | |
| 844 | + * 8. Cards | |
| 845 | + * ---------------------------------------------------------------- */ | |
| 846 | + | |
| 767 | 847 | .gs-card { |
| 768 | 848 | display: flex; |
| 769 | 849 | flex-direction: column; |
| 770 | - gap: 14px; | |
| 771 | - padding: 20px; | |
| 772 | 850 | border-radius: var(--gs-r); |
| 773 | 851 | background: var(--gs-surface); |
| 774 | 852 | border: 1px solid var(--gs-line); |
| 775 | - box-shadow: var(--gs-shadow-sm); | |
| 776 | 853 | text-decoration: none; |
| 777 | 854 | color: inherit; |
| 778 | 855 | transition: |
| 779 | - transform var(--gs-mid), | |
| 780 | - box-shadow var(--gs-mid), | |
| 781 | - border-color var(--gs-mid); | |
| 856 | + border-color var(--gs-mid), | |
| 857 | + box-shadow var(--gs-mid); | |
| 782 | 858 | } |
| 783 | 859 | |
| 860 | +/* Flush cards let their header, list and footer own the edges. */ | |
| 861 | +.gs-card--flush { | |
| 862 | + overflow: hidden; | |
| 863 | +} | |
| 864 | + | |
| 865 | +.gs-card--pad { | |
| 866 | + gap: 16px; | |
| 867 | + padding: 18px; | |
| 868 | +} | |
| 869 | + | |
| 870 | +.gs-card__head { | |
| 871 | + display: flex; | |
| 872 | + align-items: center; | |
| 873 | + justify-content: space-between; | |
| 874 | + gap: 16px; | |
| 875 | + padding: 16px 18px; | |
| 876 | + border-bottom: 1px solid var(--gs-line); | |
| 877 | +} | |
| 878 | + | |
| 879 | +/* Inside a padded card the header is just the top row, not a band. */ | |
| 880 | +.gs-card__head--plain { | |
| 881 | + padding: 0; | |
| 882 | + border-bottom: 0; | |
| 883 | +} | |
| 884 | + | |
| 885 | +.gs-card__head--tight { | |
| 886 | + padding: 15px 18px 11px; | |
| 887 | + border-bottom: 0; | |
| 888 | +} | |
| 889 | + | |
| 890 | +.gs-card__heading { | |
| 891 | + font-size: 15px; | |
| 892 | + font-weight: 620; | |
| 893 | + letter-spacing: -0.008em; | |
| 894 | +} | |
| 895 | + | |
| 896 | +.gs-card__sub { | |
| 897 | + margin-top: 3px; | |
| 898 | + font-size: 12.5px; | |
| 899 | + line-height: 1.5; | |
| 900 | + color: var(--gs-text-3); | |
| 901 | +} | |
| 902 | + | |
| 784 | 903 | .gs-card__body { |
| 785 | 904 | display: flex; |
| 786 | 905 | flex-direction: column; |
| 787 | - gap: 6px; | |
| 906 | + gap: 5px; | |
| 788 | 907 | align-items: flex-start; |
| 908 | + padding: 16px; | |
| 789 | 909 | } |
| 790 | 910 | |
| 791 | -.gs-card__title { | |
| 792 | - font-size: 15px; | |
| 793 | - font-weight: 640; | |
| 911 | +.gs-card__body .gs-card__sub { | |
| 912 | + color: var(--gs-text-2); | |
| 794 | 913 | } |
| 795 | 914 | |
| 796 | -.gs-card__text { | |
| 797 | - font-size: 13.5px; | |
| 915 | +.gs-card__foot { | |
| 916 | + display: flex; | |
| 917 | + align-items: center; | |
| 918 | + justify-content: space-between; | |
| 919 | + gap: 16px; | |
| 920 | + flex-wrap: wrap; | |
| 921 | + padding: 13px 18px; | |
| 922 | + background: var(--gs-surface-2); | |
| 923 | + border-top: 1px solid var(--gs-line); | |
| 924 | +} | |
| 925 | + | |
| 926 | +.gs-card__summary { | |
| 927 | + font-size: 12.5px; | |
| 798 | 928 | color: var(--gs-text-2); |
| 929 | + font-variant-numeric: tabular-nums; | |
| 799 | 930 | } |
| 800 | 931 | |
| 801 | 932 | .gs-card--link:hover, |
| 802 | 933 | .gs-card--link:focus { |
| 803 | - transform: translateY(-2px); | |
| 804 | 934 | border-color: var(--gs-brand); |
| 805 | 935 | box-shadow: var(--gs-shadow); |
| 806 | 936 | color: inherit; |
| 807 | 937 | } |
| 808 | 938 | |
| 809 | -.gs-card--link { | |
| 810 | - flex-direction: row; | |
| 811 | - gap: 14px; | |
| 812 | - align-items: flex-start; | |
| 939 | +/* ------------------------------------------------------------------ | |
| 940 | + * 8b. Block rows | |
| 941 | + * ---------------------------------------------------------------- */ | |
| 942 | + | |
| 943 | +.gs-rows { | |
| 944 | + --gs-row-h: 62px; | |
| 945 | + --gs-row-gap: 8px; | |
| 946 | + | |
| 947 | + display: flex; | |
| 948 | + flex-direction: column; | |
| 949 | + gap: var(--gs-row-gap); | |
| 950 | + | |
| 951 | + /* Exactly five rows, then scroll — the card must not run the length | |
| 952 | + of the page. Scroll chaining is left alone so the wheel carries on | |
| 953 | + down the page once the list bottoms out. */ | |
| 954 | + max-height: calc((5 * var(--gs-row-h)) + (4 * var(--gs-row-gap)) + 28px); | |
| 955 | + overflow-y: auto; | |
| 956 | + padding: 14px; | |
| 813 | 957 | } |
| 814 | 958 | |
| 815 | -.gs-card__icon { | |
| 959 | +.gs-row { | |
| 960 | + display: flex; | |
| 961 | + align-items: center; | |
| 962 | + gap: 12px; | |
| 963 | + padding: 12px 16px; | |
| 964 | + border-radius: var(--gs-r-md); | |
| 965 | + background: var(--gs-surface); | |
| 966 | + border: 1px solid var(--gs-line); | |
| 967 | + transition: | |
| 968 | + border-color var(--gs-fast), | |
| 969 | + background var(--gs-fast); | |
| 970 | +} | |
| 971 | + | |
| 972 | +.gs-row:hover { | |
| 973 | + border-color: var(--gs-line-strong); | |
| 974 | +} | |
| 975 | + | |
| 976 | +.gs-row.is-dirty { | |
| 977 | + border-color: var(--gs-brand); | |
| 978 | + background: var(--gs-brand-soft); | |
| 979 | +} | |
| 980 | + | |
| 981 | +.gs-row.is-hidden { | |
| 982 | + display: none; | |
| 983 | +} | |
| 984 | + | |
| 985 | +.gs-row__icon { | |
| 816 | 986 | display: grid; |
| 817 | 987 | place-items: center; |
| 818 | 988 | width: 34px; |
| 819 | 989 | height: 34px; |
| 820 | 990 | flex-shrink: 0; |
| 821 | - border-radius: var(--gs-r-sm); | |
| 991 | + border-radius: 9px; | |
| 822 | 992 | background: var(--gs-brand-soft); |
| 823 | 993 | color: var(--gs-brand); |
| 824 | 994 | } |
| 825 | 995 | |
| 826 | -.gs-card--step { | |
| 827 | - flex-direction: row; | |
| 828 | - gap: 14px; | |
| 996 | +.gs-row__icon .gs-icon { | |
| 997 | + width: 17px; | |
| 998 | + height: 17px; | |
| 999 | +} | |
| 1000 | + | |
| 1001 | +.gs-row__text { | |
| 1002 | + display: flex; | |
| 1003 | + flex-direction: column; | |
| 1004 | + gap: 2px; | |
| 1005 | + flex: 1; | |
| 1006 | + min-width: 0; | |
| 1007 | +} | |
| 1008 | + | |
| 1009 | +/* Pinned line heights: the row must measure a predictable --gs-row-h so | |
| 1010 | + the list crops to a whole number of rows. */ | |
| 1011 | +.gs-row__name { | |
| 1012 | + font-size: 13.5px; | |
| 1013 | + font-weight: 600; | |
| 1014 | + line-height: 18px; | |
| 1015 | + color: var(--gs-text); | |
| 1016 | +} | |
| 1017 | + | |
| 1018 | +/* Off and locked blocks recede without disappearing. */ | |
| 1019 | +.gs-row.is-off .gs-row__icon, | |
| 1020 | +.gs-row.is-locked .gs-row__icon { | |
| 1021 | + background: var(--gs-surface-2); | |
| 1022 | + color: var(--gs-text-3); | |
| 1023 | +} | |
| 1024 | + | |
| 1025 | +.gs-row.is-off .gs-row__name, | |
| 1026 | +.gs-row.is-locked .gs-row__name { | |
| 1027 | + color: var(--gs-text-2); | |
| 1028 | +} | |
| 1029 | + | |
| 1030 | +.gs-row__desc { | |
| 1031 | + font-size: 12px; | |
| 1032 | + line-height: 16px; | |
| 1033 | + color: var(--gs-text-3); | |
| 1034 | + overflow: hidden; | |
| 1035 | + text-overflow: ellipsis; | |
| 1036 | + white-space: nowrap; | |
| 1037 | +} | |
| 1038 | + | |
| 1039 | +/* ------------------------------------------------------------------ | |
| 1040 | + * 8c. Get started | |
| 1041 | + * ---------------------------------------------------------------- */ | |
| 1042 | + | |
| 1043 | +.gs-progress { | |
| 1044 | + display: flex; | |
| 1045 | + align-items: center; | |
| 1046 | + gap: 10px; | |
| 1047 | + flex-shrink: 0; | |
| 1048 | +} | |
| 1049 | + | |
| 1050 | +.gs-progress__count { | |
| 1051 | + font-size: 12px; | |
| 1052 | + font-weight: 550; | |
| 1053 | + color: var(--gs-text-2); | |
| 1054 | + white-space: nowrap; | |
| 1055 | +} | |
| 1056 | + | |
| 1057 | +.gs-progress__track { | |
| 1058 | + display: block; | |
| 1059 | + width: 96px; | |
| 1060 | + height: 6px; | |
| 1061 | + border-radius: var(--gs-r-full); | |
| 1062 | + background: var(--gs-line); | |
| 1063 | + overflow: hidden; | |
| 1064 | +} | |
| 1065 | + | |
| 1066 | +.gs-progress__fill { | |
| 1067 | + display: block; | |
| 1068 | + height: 100%; | |
| 1069 | + border-radius: inherit; | |
| 1070 | + background: var(--gs-brand); | |
| 1071 | + transition: width 600ms var(--gs-ease); | |
| 1072 | +} | |
| 1073 | + | |
| 1074 | +.gs-steps { | |
| 1075 | + display: grid; | |
| 1076 | + grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 1077 | + gap: 12px; | |
| 1078 | +} | |
| 1079 | + | |
| 1080 | +.gs-step { | |
| 1081 | + display: flex; | |
| 1082 | + flex-direction: column; | |
| 829 | 1083 | align-items: flex-start; |
| 1084 | + gap: 8px; | |
| 1085 | + padding: 14px; | |
| 1086 | + border-radius: var(--gs-r-md); | |
| 1087 | + background: var(--gs-surface-2); | |
| 1088 | + border: 1px solid var(--gs-line); | |
| 830 | 1089 | } |
| 831 | 1090 | |
| 1091 | +.gs-step.is-done { | |
| 1092 | + background: var(--gs-brand-soft); | |
| 1093 | + border-color: var(--gs-brand-line); | |
| 1094 | +} | |
| 1095 | + | |
| 1096 | +.gs-step__top { | |
| 1097 | + display: flex; | |
| 1098 | + align-items: center; | |
| 1099 | + gap: 8px; | |
| 1100 | +} | |
| 1101 | + | |
| 832 | 1102 | .gs-step__n { |
| 833 | 1103 | font-size: 12px; |
| 834 | 1104 | font-weight: 700; |
| 835 | - letter-spacing: 0.05em; | |
| 1105 | + letter-spacing: 0.04em; | |
| 836 | 1106 | color: var(--gs-text-3); |
| 837 | - padding-top: 2px; | |
| 1107 | + font-variant-numeric: tabular-nums; | |
| 838 | 1108 | } |
| 839 | 1109 | |
| 840 | -/* Feature row: the walkthrough gets the lion's share of the width, with | |
| 841 | - the numbered steps riding alongside it. */ | |
| 842 | -/* The walkthrough still leads, but at a width where its 16:9 frame plus | |
| 843 | - caption lands level with the three steps beside it. Both columns | |
| 844 | - stretch, and the steps share the leftover height evenly. */ | |
| 845 | -.gs-grid--feature { | |
| 846 | - grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); | |
| 847 | - align-items: stretch; | |
| 1110 | +.gs-step__check { | |
| 1111 | + display: grid; | |
| 1112 | + place-items: center; | |
| 1113 | + width: 18px; | |
| 1114 | + height: 18px; | |
| 1115 | + flex-shrink: 0; | |
| 1116 | + border-radius: 50%; | |
| 1117 | + background: var(--gs-brand); | |
| 1118 | + color: #fff; | |
| 848 | 1119 | } |
| 849 | 1120 | |
| 850 | -.gs-grid--feature > .gs-stack { | |
| 851 | - height: 100%; | |
| 1121 | +.gs-step__check .gs-icon { | |
| 1122 | + width: 11px; | |
| 1123 | + height: 11px; | |
| 1124 | + stroke-width: 3; | |
| 852 | 1125 | } |
| 853 | 1126 | |
| 854 | -.gs-grid--feature .gs-card--step { | |
| 855 | - flex: 1 1 0; | |
| 1127 | +.gs-step__title { | |
| 1128 | + font-size: 13.5px; | |
| 1129 | + font-weight: 600; | |
| 856 | 1130 | } |
| 857 | 1131 | |
| 858 | -/* The video bleeds to the card edges and leads; copy sits underneath. */ | |
| 859 | -.gs-card--media { | |
| 860 | - gap: 0; | |
| 1132 | +.gs-step__text { | |
| 1133 | + font-size: 12.5px; | |
| 1134 | + line-height: 1.5; | |
| 1135 | + color: var(--gs-text-2); | |
| 1136 | +} | |
| 1137 | + | |
| 1138 | +/* ------------------------------------------------------------------ | |
| 1139 | + * 8d. Walkthrough | |
| 1140 | + * ---------------------------------------------------------------- */ | |
| 1141 | + | |
| 1142 | +.gs-video { | |
| 1143 | + position: relative; | |
| 1144 | + display: block; | |
| 1145 | + width: 100%; | |
| 1146 | + height: 196px; | |
| 861 | 1147 | padding: 0; |
| 1148 | + border: 0; | |
| 1149 | + background: #14152a; | |
| 1150 | + cursor: pointer; | |
| 862 | 1151 | overflow: hidden; |
| 863 | 1152 | } |
| 864 | 1153 | |
| 865 | -.gs-card--media .gs-card__body { | |
| 866 | - padding: 20px 24px 24px; | |
| 1154 | +.gs-video__stage { | |
| 1155 | + position: absolute; | |
| 1156 | + inset: 0; | |
| 1157 | + display: flex; | |
| 1158 | + flex-direction: column; | |
| 1159 | + align-items: center; | |
| 1160 | + justify-content: center; | |
| 1161 | + gap: 14px; | |
| 1162 | + background: | |
| 1163 | + radial-gradient(ellipse 55% 60% at 50% 15%, rgba(83, 37, 232, 0.9) 0%, rgba(83, 37, 232, 0) 100%); | |
| 867 | 1164 | } |
| 868 | 1165 | |
| 869 | -.gs-card--media:hover { | |
| 870 | - transform: translateY(-2px); | |
| 871 | - box-shadow: var(--gs-shadow); | |
| 1166 | +.gs-video__slides { | |
| 1167 | + display: flex; | |
| 1168 | + align-items: center; | |
| 1169 | + gap: 8px; | |
| 1170 | + height: 104px; | |
| 872 | 1171 | } |
| 873 | 1172 | |
| 874 | -.gs-card__kicker { | |
| 875 | - display: inline-flex; | |
| 1173 | +.gs-video__slide { | |
| 1174 | + width: 34px; | |
| 1175 | + height: 72px; | |
| 1176 | + border-radius: var(--gs-r-sm); | |
| 1177 | + background: rgba(255, 255, 255, 0.06); | |
| 1178 | + border: 1px solid rgba(255, 255, 255, 0.2); | |
| 1179 | +} | |
| 1180 | + | |
| 1181 | +.gs-video__slide--main { | |
| 1182 | + width: 150px; | |
| 1183 | + height: 104px; | |
| 1184 | + background: rgba(255, 255, 255, 0.12); | |
| 1185 | +} | |
| 1186 | + | |
| 1187 | +.gs-video__dots { | |
| 1188 | + display: flex; | |
| 876 | 1189 | align-items: center; |
| 877 | 1190 | gap: 6px; |
| 878 | - margin-bottom: 2px; | |
| 879 | - font-size: 11.5px; | |
| 880 | - font-weight: 700; | |
| 881 | - letter-spacing: 0.08em; | |
| 882 | - text-transform: uppercase; | |
| 883 | - color: var(--gs-brand); | |
| 884 | 1191 | } |
| 885 | 1192 | |
| 886 | -.gs-card__kicker .gs-icon { | |
| 887 | - width: 13px; | |
| 888 | - height: 13px; | |
| 1193 | +.gs-video__dot { | |
| 1194 | + width: 6px; | |
| 1195 | + height: 6px; | |
| 1196 | + border-radius: 50%; | |
| 1197 | + background: rgba(255, 255, 255, 0.35); | |
| 889 | 1198 | } |
| 890 | 1199 | |
| 891 | -.gs-card__title--lg { | |
| 892 | - font-size: 21px; | |
| 893 | - letter-spacing: -0.02em; | |
| 1200 | +.gs-video__dot.is-active { | |
| 1201 | + background: #fff; | |
| 894 | 1202 | } |
| 895 | 1203 | |
| 896 | -.gs-embed { | |
| 897 | - position: relative; | |
| 898 | - padding-top: 56.25%; | |
| 899 | - border-radius: var(--gs-r-sm); | |
| 900 | - overflow: hidden; | |
| 901 | - background: var(--gs-surface-sunk); | |
| 1204 | +.gs-video__play { | |
| 1205 | + position: absolute; | |
| 1206 | + top: 50%; | |
| 1207 | + left: 50%; | |
| 1208 | + display: grid; | |
| 1209 | + place-items: center; | |
| 1210 | + width: 52px; | |
| 1211 | + height: 52px; | |
| 1212 | + transform: translate(-50%, -50%); | |
| 1213 | + border-radius: 50%; | |
| 1214 | + background: rgba(255, 255, 255, 0.95); | |
| 1215 | + color: var(--gs-brand); | |
| 1216 | + box-shadow: 0 6px 20px rgba(11, 11, 20, 0.35); | |
| 1217 | + transition: transform var(--gs-mid); | |
| 902 | 1218 | } |
| 903 | 1219 | |
| 904 | -.gs-card--media .gs-embed { | |
| 905 | - border-radius: 0; | |
| 1220 | +.gs-video__play .gs-icon { | |
| 1221 | + width: 19px; | |
| 1222 | + height: 19px; | |
| 1223 | + margin-left: 2px; | |
| 906 | 1224 | } |
| 907 | 1225 | |
| 908 | -.gs-embed iframe { | |
| 1226 | +.gs-video:hover .gs-video__play { | |
| 1227 | + transform: translate(-50%, -50%) scale(1.06); | |
| 1228 | +} | |
| 1229 | + | |
| 1230 | +.gs-video iframe { | |
| 909 | 1231 | position: absolute; |
| 910 | 1232 | inset: 0; |
| 911 | 1233 | width: 100%; |
| 912 | 1234 | height: 100%; |
| @@ -913,8 +1235,160 @@ | ||
| 913 | 1235 | border: 0; |
| 914 | 1236 | } |
| 915 | 1237 | |
| 916 | 1238 | /* ------------------------------------------------------------------ |
| 1239 | + * 8e. What's new | |
| 1240 | + * ---------------------------------------------------------------- */ | |
| 1241 | + | |
| 1242 | +.gs-news { | |
| 1243 | + display: flex; | |
| 1244 | + flex-direction: column; | |
| 1245 | + gap: 12px; | |
| 1246 | + margin: 0; | |
| 1247 | + padding: 0; | |
| 1248 | + list-style: none; | |
| 1249 | +} | |
| 1250 | + | |
| 1251 | +.gs-news__item { | |
| 1252 | + display: flex; | |
| 1253 | + align-items: flex-start; | |
| 1254 | + gap: 10px; | |
| 1255 | + margin: 0; | |
| 1256 | +} | |
| 1257 | + | |
| 1258 | +.gs-news__text { | |
| 1259 | + flex: 1; | |
| 1260 | + font-size: 12.5px; | |
| 1261 | + line-height: 1.45; | |
| 1262 | + color: var(--gs-text-2); | |
| 1263 | +} | |
| 1264 | + | |
| 1265 | +/* ------------------------------------------------------------------ | |
| 1266 | + * 8f. Help & support | |
| 1267 | + * ---------------------------------------------------------------- */ | |
| 1268 | + | |
| 1269 | +.gs-help { | |
| 1270 | + display: flex; | |
| 1271 | + align-items: center; | |
| 1272 | + gap: 11px; | |
| 1273 | + padding: 12px 18px; | |
| 1274 | + border-top: 1px solid var(--gs-line); | |
| 1275 | + text-decoration: none; | |
| 1276 | + color: inherit; | |
| 1277 | + transition: background var(--gs-fast); | |
| 1278 | +} | |
| 1279 | + | |
| 1280 | +.gs-help:hover, | |
| 1281 | +.gs-help:focus { | |
| 1282 | + background: var(--gs-surface-2); | |
| 1283 | + color: inherit; | |
| 1284 | +} | |
| 1285 | + | |
| 1286 | +.gs-help__icon { | |
| 1287 | + display: grid; | |
| 1288 | + place-items: center; | |
| 1289 | + width: 30px; | |
| 1290 | + height: 30px; | |
| 1291 | + flex-shrink: 0; | |
| 1292 | + border-radius: var(--gs-r-sm); | |
| 1293 | + background: var(--gs-brand-soft); | |
| 1294 | + color: var(--gs-brand); | |
| 1295 | +} | |
| 1296 | + | |
| 1297 | +.gs-help__icon .gs-icon { | |
| 1298 | + width: 15px; | |
| 1299 | + height: 15px; | |
| 1300 | +} | |
| 1301 | + | |
| 1302 | +.gs-help__text { | |
| 1303 | + display: flex; | |
| 1304 | + flex-direction: column; | |
| 1305 | + gap: 2px; | |
| 1306 | + flex: 1; | |
| 1307 | + min-width: 0; | |
| 1308 | +} | |
| 1309 | + | |
| 1310 | +.gs-help__title { | |
| 1311 | + font-size: 13px; | |
| 1312 | + font-weight: 600; | |
| 1313 | +} | |
| 1314 | + | |
| 1315 | +.gs-help__sub { | |
| 1316 | + font-size: 12px; | |
| 1317 | + color: var(--gs-text-3); | |
| 1318 | +} | |
| 1319 | + | |
| 1320 | +.gs-help__chevron { | |
| 1321 | + flex-shrink: 0; | |
| 1322 | + color: var(--gs-text-3); | |
| 1323 | +} | |
| 1324 | + | |
| 1325 | +/* ------------------------------------------------------------------ | |
| 1326 | + * 8g. More from the workshop | |
| 1327 | + * ---------------------------------------------------------------- */ | |
| 1328 | + | |
| 1329 | +.gs-workshop { | |
| 1330 | + display: flex; | |
| 1331 | + flex-direction: column; | |
| 1332 | + gap: 14px; | |
| 1333 | + padding-top: 12px; | |
| 1334 | +} | |
| 1335 | + | |
| 1336 | +.gs-workshop__grid { | |
| 1337 | + display: grid; | |
| 1338 | + grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 1339 | + align-items: stretch; | |
| 1340 | + gap: 16px; | |
| 1341 | +} | |
| 1342 | + | |
| 1343 | +.gs-workshop__grid .gs-card { | |
| 1344 | + gap: 8px; | |
| 1345 | +} | |
| 1346 | + | |
| 1347 | +.gs-product__top { | |
| 1348 | + display: flex; | |
| 1349 | + align-items: center; | |
| 1350 | + gap: 10px; | |
| 1351 | +} | |
| 1352 | + | |
| 1353 | +.gs-product__title { | |
| 1354 | + font-size: 14px; | |
| 1355 | + font-weight: 600; | |
| 1356 | + color: var(--gs-text); | |
| 1357 | +} | |
| 1358 | + | |
| 1359 | +/* ------------------------------------------------------------------ | |
| 1360 | + * 8h. App footer | |
| 1361 | + * ---------------------------------------------------------------- */ | |
| 1362 | + | |
| 1363 | +.gs-appfoot { | |
| 1364 | + flex-shrink: 0; | |
| 1365 | + background: var(--gs-surface); | |
| 1366 | + border-top: 1px solid var(--gs-line); | |
| 1367 | +} | |
| 1368 | + | |
| 1369 | +.gs-appfoot__inner { | |
| 1370 | + display: flex; | |
| 1371 | + align-items: center; | |
| 1372 | + justify-content: space-between; | |
| 1373 | + gap: 16px; | |
| 1374 | + flex-wrap: wrap; | |
| 1375 | + max-width: 1248px; | |
| 1376 | + margin: 0 auto; | |
| 1377 | + padding: 16px 24px; | |
| 1378 | + font-size: 12.5px; | |
| 1379 | + color: var(--gs-text-3); | |
| 1380 | +} | |
| 1381 | + | |
| 1382 | +.gs-appfoot__link { | |
| 1383 | + color: var(--gs-text-2); | |
| 1384 | +} | |
| 1385 | + | |
| 1386 | +.gs-appfoot__link:hover { | |
| 1387 | + color: var(--gs-brand); | |
| 1388 | +} | |
| 1389 | + | |
| 1390 | +/* ------------------------------------------------------------------ | |
| 917 | 1391 | * 9. Blocks toolbar |
| 918 | 1392 | * ---------------------------------------------------------------- */ |
| 919 | 1393 | |
| 920 | 1394 | .gs-toolbar { |
| @@ -1006,8 +1480,28 @@ | ||
| 1006 | 1480 | .gs-search__input:not(:placeholder-shown) ~ .gs-search__kbd { |
| 1007 | 1481 | opacity: 0; |
| 1008 | 1482 | } |
| 1009 | 1483 | |
| 1484 | +/* Compact variant for card headers, where the field sits beside a title. */ | |
| 1485 | +.gs-search--sm { | |
| 1486 | + flex: 0 0 220px; | |
| 1487 | + min-width: 0; | |
| 1488 | +} | |
| 1489 | + | |
| 1490 | +.gs-search--sm .gs-icon { | |
| 1491 | + left: 10px; | |
| 1492 | + width: 14px; | |
| 1493 | + height: 14px; | |
| 1494 | +} | |
| 1495 | + | |
| 1496 | +.gs-search--sm input.gs-search__input { | |
| 1497 | + height: 34px; | |
| 1498 | + padding: 0 12px 0 32px; | |
| 1499 | + border-color: var(--gs-line); | |
| 1500 | + background: var(--gs-surface-2); | |
| 1501 | + font-size: 13px; | |
| 1502 | +} | |
| 1503 | + | |
| 1010 | 1504 | .gs-segment { |
| 1011 | 1505 | display: inline-flex; |
| 1012 | 1506 | gap: 2px; |
| 1013 | 1507 | padding: 3px; |
| @@ -1152,21 +1646,41 @@ | ||
| 1152 | 1646 | |
| 1153 | 1647 | .gs-tag { |
| 1154 | 1648 | display: inline-flex; |
| 1155 | 1649 | align-items: center; |
| 1156 | - height: 20px; | |
| 1650 | + flex-shrink: 0; | |
| 1651 | + height: 21px; | |
| 1157 | 1652 | padding: 0 8px; |
| 1158 | - border-radius: var(--gs-r-full); | |
| 1159 | - background: var(--gs-surface-sunk); | |
| 1653 | + border-radius: 6px; | |
| 1654 | + background: var(--gs-surface-2); | |
| 1160 | 1655 | border: 1px solid var(--gs-line); |
| 1161 | 1656 | font-size: 10.5px; |
| 1162 | - font-weight: 700; | |
| 1163 | - letter-spacing: 0.05em; | |
| 1164 | - text-transform: uppercase; | |
| 1165 | - color: var(--gs-text-3); | |
| 1657 | + font-weight: 600; | |
| 1658 | + letter-spacing: 0.03em; | |
| 1659 | + color: var(--gs-text-2); | |
| 1166 | 1660 | } |
| 1167 | 1661 | |
| 1168 | 1662 | .gs-tag--pro { |
| 1663 | + background: var(--gs-brand-soft); | |
| 1664 | + border-color: var(--gs-brand-line); | |
| 1665 | + color: var(--gs-brand); | |
| 1666 | +} | |
| 1667 | + | |
| 1668 | +/* Release-note tags. */ | |
| 1669 | + | |
| 1670 | +.gs-tag--new { | |
| 1671 | + background: var(--gs-brand-soft); | |
| 1672 | + border-color: transparent; | |
| 1673 | + color: var(--gs-brand); | |
| 1674 | +} | |
| 1675 | + | |
| 1676 | +.gs-tag--improved { | |
| 1677 | + background: var(--gs-ok-soft); | |
| 1678 | + border-color: transparent; | |
| 1679 | + color: var(--gs-ok); | |
| 1680 | +} | |
| 1681 | + | |
| 1682 | +.gs-tag--fixed { | |
| 1169 | 1683 | background: var(--gs-gold-soft); |
| 1170 | 1684 | border-color: transparent; |
| 1171 | 1685 | color: var(--gs-gold); |
| 1172 | 1686 | } |
| @@ -1173,24 +1687,29 @@ | ||
| 1173 | 1687 | |
| 1174 | 1688 | .gs-lock { |
| 1175 | 1689 | display: inline-flex; |
| 1176 | 1690 | align-items: center; |
| 1691 | + justify-content: center; | |
| 1177 | 1692 | gap: 6px; |
| 1178 | 1693 | height: 28px; |
| 1179 | - padding: 0 12px; | |
| 1694 | + min-width: 34px; | |
| 1695 | + padding: 0 9px; | |
| 1696 | + flex-shrink: 0; | |
| 1180 | 1697 | border-radius: var(--gs-r-full); |
| 1181 | - background: var(--gs-gold-soft); | |
| 1182 | - color: var(--gs-gold); | |
| 1698 | + background: var(--gs-surface-2); | |
| 1699 | + border: 1px solid var(--gs-line); | |
| 1700 | + color: var(--gs-text-3); | |
| 1183 | 1701 | font-size: 12px; |
| 1184 | 1702 | font-weight: 650; |
| 1185 | 1703 | text-decoration: none; |
| 1186 | - transition: filter var(--gs-fast); | |
| 1704 | + transition: all var(--gs-fast); | |
| 1187 | 1705 | } |
| 1188 | 1706 | |
| 1189 | 1707 | .gs-lock:hover, |
| 1190 | 1708 | .gs-lock:focus { |
| 1191 | - color: var(--gs-gold); | |
| 1192 | - filter: brightness(0.96); | |
| 1709 | + background: var(--gs-brand-soft); | |
| 1710 | + border-color: var(--gs-brand-line); | |
| 1711 | + color: var(--gs-brand); | |
| 1193 | 1712 | } |
| 1194 | 1713 | |
| 1195 | 1714 | .gs-lock .gs-icon { |
| 1196 | 1715 | width: 13px; |
| @@ -1218,11 +1737,11 @@ | ||
| 1218 | 1737 | } |
| 1219 | 1738 | |
| 1220 | 1739 | .gs-switch__track { |
| 1221 | 1740 | display: block; |
| 1222 | - width: 40px; | |
| 1223 | - height: 23px; | |
| 1224 | - padding: 3px; | |
| 1741 | + width: 34px; | |
| 1742 | + height: 20px; | |
| 1743 | + padding: 2px; | |
| 1225 | 1744 | border-radius: var(--gs-r-full); |
| 1226 | 1745 | background: var(--gs-line-strong); |
| 1227 | 1746 | transition: background var(--gs-mid); |
| 1228 | 1747 | } |
| @@ -1228,13 +1747,13 @@ | ||
| 1228 | 1747 | } |
| 1229 | 1748 | |
| 1230 | 1749 | .gs-switch__thumb { |
| 1231 | 1750 | display: block; |
| 1232 | - width: 17px; | |
| 1233 | - height: 17px; | |
| 1751 | + width: 16px; | |
| 1752 | + height: 16px; | |
| 1234 | 1753 | border-radius: 50%; |
| 1235 | 1754 | background: #fff; |
| 1236 | - box-shadow: 0 1px 3px rgba(20, 22, 43, 0.3); | |
| 1755 | + box-shadow: 0 1px 2px rgba(18, 20, 28, 0.25); | |
| 1237 | 1756 | transform: translateX(0); |
| 1238 | 1757 | transition: transform var(--gs-mid); |
| 1239 | 1758 | } |
| 1240 | 1759 | |
| @@ -1242,9 +1761,9 @@ | ||
| 1242 | 1761 | background: var(--gs-brand); |
| 1243 | 1762 | } |
| 1244 | 1763 | |
| 1245 | 1764 | .gs-switch__input:checked ~ .gs-switch__track .gs-switch__thumb { |
| 1246 | - transform: translateX(17px); | |
| 1765 | + transform: translateX(14px); | |
| 1247 | 1766 | } |
| 1248 | 1767 | |
| 1249 | 1768 | .gs-switch__input:focus-visible ~ .gs-switch__track { |
| 1250 | 1769 | box-shadow: 0 0 0 3px var(--gs-brand-ring); |
| @@ -1288,8 +1807,22 @@ | ||
| 1288 | 1807 | width: 28px; |
| 1289 | 1808 | height: 28px; |
| 1290 | 1809 | } |
| 1291 | 1810 | |
| 1811 | +/* Inside a card the empty state is a quiet strip, not a dashed panel. */ | |
| 1812 | +.gs-empty--sm { | |
| 1813 | + gap: 8px; | |
| 1814 | + padding: 28px 18px; | |
| 1815 | + border: 0; | |
| 1816 | + border-radius: 0; | |
| 1817 | + font-size: 13px; | |
| 1818 | +} | |
| 1819 | + | |
| 1820 | +.gs-empty--sm .gs-icon { | |
| 1821 | + width: 20px; | |
| 1822 | + height: 20px; | |
| 1823 | +} | |
| 1824 | + | |
| 1292 | 1825 | .gs-note { |
| 1293 | 1826 | display: flex; |
| 1294 | 1827 | align-items: flex-start; |
| 1295 | 1828 | gap: 12px; |
| @@ -1310,86 +1843,11 @@ | ||
| 1310 | 1843 | font-size: inherit; |
| 1311 | 1844 | } |
| 1312 | 1845 | |
| 1313 | 1846 | /* ------------------------------------------------------------------ |
| 1314 | - * 13. Promo band | |
| 1847 | + * 13. Settings | |
| 1315 | 1848 | * ---------------------------------------------------------------- */ |
| 1316 | 1849 | |
| 1317 | -.gs-promo { | |
| 1318 | - position: relative; | |
| 1319 | - overflow: hidden; | |
| 1320 | - display: grid; | |
| 1321 | - grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); | |
| 1322 | - gap: 40px; | |
| 1323 | - align-items: center; | |
| 1324 | - padding: 40px; | |
| 1325 | - border-radius: var(--gs-r-lg); | |
| 1326 | - background: var(--gs-brand-grad); | |
| 1327 | - color: #fff; | |
| 1328 | - box-shadow: var(--gs-shadow); | |
| 1329 | -} | |
| 1330 | - | |
| 1331 | -.gs-promo::after { | |
| 1332 | - content: ''; | |
| 1333 | - position: absolute; | |
| 1334 | - right: -80px; | |
| 1335 | - bottom: -140px; | |
| 1336 | - width: 380px; | |
| 1337 | - height: 380px; | |
| 1338 | - border-radius: 50%; | |
| 1339 | - background: rgba(255, 255, 255, 0.08); | |
| 1340 | - pointer-events: none; | |
| 1341 | -} | |
| 1342 | - | |
| 1343 | -.gs-promo__copy { | |
| 1344 | - position: relative; | |
| 1345 | -} | |
| 1346 | - | |
| 1347 | -.gs-promo__title { | |
| 1348 | - font-size: 26px; | |
| 1349 | - color: #fff; | |
| 1350 | - letter-spacing: -0.03em; | |
| 1351 | -} | |
| 1352 | - | |
| 1353 | -.gs-promo__text { | |
| 1354 | - max-width: 48ch; | |
| 1355 | - margin-top: 10px; | |
| 1356 | - color: rgba(255, 255, 255, 0.82); | |
| 1357 | -} | |
| 1358 | - | |
| 1359 | -.gs-promo .gs-btn { | |
| 1360 | - margin-top: 22px; | |
| 1361 | -} | |
| 1362 | - | |
| 1363 | -.gs-promo__list { | |
| 1364 | - position: relative; | |
| 1365 | - display: grid; | |
| 1366 | - gap: 10px; | |
| 1367 | - margin: 0; | |
| 1368 | - padding: 0; | |
| 1369 | - list-style: none; | |
| 1370 | -} | |
| 1371 | - | |
| 1372 | -.gs-promo__list li { | |
| 1373 | - display: flex; | |
| 1374 | - align-items: center; | |
| 1375 | - gap: 10px; | |
| 1376 | - margin: 0; | |
| 1377 | - font-size: 13.5px; | |
| 1378 | - font-weight: 550; | |
| 1379 | - color: rgba(255, 255, 255, 0.92); | |
| 1380 | -} | |
| 1381 | - | |
| 1382 | -.gs-promo__list .gs-icon { | |
| 1383 | - width: 15px; | |
| 1384 | - height: 15px; | |
| 1385 | - color: rgba(255, 255, 255, 0.7); | |
| 1386 | -} | |
| 1387 | - | |
| 1388 | -/* ------------------------------------------------------------------ | |
| 1389 | - * 14. Settings | |
| 1390 | - * ---------------------------------------------------------------- */ | |
| 1391 | - | |
| 1392 | 1850 | .gs-settings { |
| 1393 | 1851 | display: grid; |
| 1394 | 1852 | grid-template-columns: 200px minmax(0, 1fr); |
| 1395 | 1853 | gap: 32px; |
| @@ -1607,9 +2065,9 @@ | ||
| 1607 | 2065 | color: var(--gs-text); |
| 1608 | 2066 | } |
| 1609 | 2067 | |
| 1610 | 2068 | /* ------------------------------------------------------------------ |
| 1611 | - * 15. Save bar | |
| 2069 | + * 14. Save bar | |
| 1612 | 2070 | * ---------------------------------------------------------------- */ |
| 1613 | 2071 | |
| 1614 | 2072 | /* Kept in the layout so the slide-in can animate; visibility (rather than |
| 1615 | 2073 | display) keeps it out of the accessibility tree while it is parked. */ |
| @@ -1700,9 +2158,9 @@ | ||
| 1700 | 2158 | height: 36px; |
| 1701 | 2159 | } |
| 1702 | 2160 | |
| 1703 | 2161 | /* ------------------------------------------------------------------ |
| 1704 | - * 16. Toasts | |
| 2162 | + * 15. Toasts | |
| 1705 | 2163 | * ---------------------------------------------------------------- */ |
| 1706 | 2164 | |
| 1707 | 2165 | .gs-toasts { |
| 1708 | 2166 | position: fixed; |
| @@ -1775,27 +2233,31 @@ | ||
| 1775 | 2233 | } |
| 1776 | 2234 | } |
| 1777 | 2235 | |
| 1778 | 2236 | /* ------------------------------------------------------------------ |
| 1779 | - * 17. Responsive | |
| 2237 | + * 16. Responsive | |
| 1780 | 2238 | * ---------------------------------------------------------------- */ |
| 1781 | 2239 | |
| 1782 | -@media (max-width: 1100px) { | |
| 1783 | - .gs-grid--3 { | |
| 1784 | - grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 2240 | +@media (max-width: 1240px) { | |
| 2241 | + .gs-cols { | |
| 2242 | + grid-template-columns: minmax(0, 1fr); | |
| 1785 | 2243 | } |
| 1786 | 2244 | |
| 1787 | - .gs-grid--feature { | |
| 1788 | - grid-template-columns: minmax(0, 1fr); | |
| 2245 | + /* The sidebar cards read better side by side once they drop below. */ | |
| 2246 | + .gs-col--side { | |
| 2247 | + display: grid; | |
| 2248 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 2249 | + align-items: start; | |
| 1789 | 2250 | } |
| 2251 | +} | |
| 1790 | 2252 | |
| 1791 | - .gs-hero__grid { | |
| 1792 | - grid-template-columns: 1fr; | |
| 1793 | - gap: 32px; | |
| 2253 | +@media (max-width: 1100px) { | |
| 2254 | + .gs-metrics { | |
| 2255 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 1794 | 2256 | } |
| 1795 | 2257 | |
| 1796 | - .gs-hero__stats { | |
| 1797 | - grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 2258 | + .gs-workshop__grid { | |
| 2259 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 1798 | 2260 | } |
| 1799 | 2261 | |
| 1800 | 2262 | .gs-settings { |
| 1801 | 2263 | grid-template-columns: 1fr; |
| @@ -1818,28 +2280,29 @@ | ||
| 1818 | 2280 | .gs-bar { |
| 1819 | 2281 | top: 46px; |
| 1820 | 2282 | } |
| 1821 | 2283 | |
| 2284 | + /* Stack the three bar tracks: brand and actions share a row, the nav | |
| 2285 | + runs full width underneath. */ | |
| 1822 | 2286 | .gs-bar__inner { |
| 1823 | 2287 | height: auto; |
| 1824 | 2288 | min-height: 60px; |
| 1825 | 2289 | padding: 10px 16px; |
| 1826 | - flex-wrap: wrap; | |
| 2290 | + grid-template-columns: minmax(0, 1fr) auto; | |
| 1827 | 2291 | gap: 10px; |
| 1828 | 2292 | } |
| 1829 | 2293 | |
| 1830 | 2294 | .gs-nav { |
| 1831 | 2295 | order: 3; |
| 1832 | - width: 100%; | |
| 1833 | - flex: 1 0 100%; | |
| 2296 | + grid-column: 1 / -1; | |
| 1834 | 2297 | } |
| 1835 | 2298 | |
| 1836 | - .gs-bar__actions { | |
| 1837 | - margin-left: auto; | |
| 2299 | + .gs-shell { | |
| 2300 | + padding: 0 16px; | |
| 1838 | 2301 | } |
| 1839 | 2302 | |
| 1840 | - .gs-shell { | |
| 1841 | - padding: 0 16px; | |
| 2303 | + .gs-appfoot__inner { | |
| 2304 | + padding: 16px; | |
| 1842 | 2305 | } |
| 1843 | 2306 | |
| 1844 | 2307 | .gs-toolbar { |
| 1845 | 2308 | position: static; |
| @@ -1854,19 +2317,29 @@ | ||
| 1854 | 2317 | .gs-toolbar__actions .gs-btn { |
| 1855 | 2318 | flex: 1; |
| 1856 | 2319 | } |
| 1857 | 2320 | |
| 1858 | - .gs-grid--3, | |
| 1859 | - .gs-hero__stats, | |
| 1860 | - .gs-promo, | |
| 2321 | + .gs-metrics, | |
| 2322 | + .gs-steps, | |
| 2323 | + .gs-workshop__grid, | |
| 2324 | + .gs-col--side, | |
| 1861 | 2325 | .gs-radio-cards { |
| 1862 | 2326 | grid-template-columns: 1fr; |
| 1863 | 2327 | } |
| 1864 | 2328 | |
| 1865 | - .gs-promo { | |
| 1866 | - padding: 28px; | |
| 2329 | + .gs-card__head { | |
| 2330 | + flex-direction: column; | |
| 2331 | + align-items: stretch; | |
| 1867 | 2332 | } |
| 1868 | 2333 | |
| 2334 | + .gs-search--sm { | |
| 2335 | + flex: 1 1 auto; | |
| 2336 | + } | |
| 2337 | + | |
| 2338 | + .gs-row__desc { | |
| 2339 | + white-space: normal; | |
| 2340 | + } | |
| 2341 | + | |
| 1869 | 2342 | .gs-field { |
| 1870 | 2343 | grid-template-columns: 1fr; |
| 1871 | 2344 | gap: 14px; |
| 1872 | 2345 | align-items: start; |
| @@ -1899,9 +2372,9 @@ | ||
| 1899 | 2372 | } |
| 1900 | 2373 | } |
| 1901 | 2374 | |
| 1902 | 2375 | /* ------------------------------------------------------------------ |
| 1903 | - * 18. Motion preferences | |
| 2376 | + * 17. Motion preferences | |
| 1904 | 2377 | * ---------------------------------------------------------------- */ |
| 1905 | 2378 | |
| 1906 | 2379 | @media (prefers-reduced-motion: reduce) { |
| 1907 | 2380 | .gs-app *, |
| @@ -1909,6 +2382,365 @@ | ||
| 1909 | 2382 | .gs-app *::after { |
| 1910 | 2383 | animation-duration: 0.01ms !important; |
| 1911 | 2384 | animation-iteration-count: 1 !important; |
| 1912 | 2385 | transition-duration: 0.01ms !important; |
| 2386 | + } | |
| 2387 | +} | |
| 2388 | + | |
| 2389 | +/* ------------------------------------------------------------------ | |
| 2390 | + * 8h. Free vs Pro (dashboard, without Pro) | |
| 2391 | + * ---------------------------------------------------------------- */ | |
| 2392 | + | |
| 2393 | +.gs-compare { | |
| 2394 | + display: flex; | |
| 2395 | + flex-direction: column; | |
| 2396 | + gap: 16px; | |
| 2397 | +} | |
| 2398 | + | |
| 2399 | +/* Upgrade banner */ | |
| 2400 | + | |
| 2401 | +.gs-upsell { | |
| 2402 | + position: relative; | |
| 2403 | + display: grid; | |
| 2404 | + grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); | |
| 2405 | + align-items: center; | |
| 2406 | + gap: 32px; | |
| 2407 | + padding: 32px 36px; | |
| 2408 | + overflow: hidden; | |
| 2409 | + border-radius: var(--gs-r-lg); | |
| 2410 | + background: var(--gs-brand-grad); | |
| 2411 | + color: #fff; | |
| 2412 | + box-shadow: var(--gs-shadow-lg); | |
| 2413 | + isolation: isolate; | |
| 2414 | +} | |
| 2415 | + | |
| 2416 | +.gs-upsell::before, | |
| 2417 | +.gs-upsell::after { | |
| 2418 | + content: ''; | |
| 2419 | + position: absolute; | |
| 2420 | + z-index: -1; | |
| 2421 | + border-radius: 50%; | |
| 2422 | + pointer-events: none; | |
| 2423 | +} | |
| 2424 | + | |
| 2425 | +.gs-upsell::before { | |
| 2426 | + top: -120px; | |
| 2427 | + right: -60px; | |
| 2428 | + width: 340px; | |
| 2429 | + height: 340px; | |
| 2430 | + background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 65%); | |
| 2431 | +} | |
| 2432 | + | |
| 2433 | +.gs-upsell::after { | |
| 2434 | + bottom: -160px; | |
| 2435 | + left: 30%; | |
| 2436 | + width: 420px; | |
| 2437 | + height: 420px; | |
| 2438 | + background: radial-gradient(circle, rgba(255, 196, 92, 0.18), transparent 65%); | |
| 2439 | +} | |
| 2440 | + | |
| 2441 | +.gs-upsell__text { | |
| 2442 | + display: flex; | |
| 2443 | + flex-direction: column; | |
| 2444 | + align-items: flex-start; | |
| 2445 | + gap: 10px; | |
| 2446 | +} | |
| 2447 | + | |
| 2448 | +.gs-upsell__eyebrow { | |
| 2449 | + display: inline-flex; | |
| 2450 | + align-items: center; | |
| 2451 | + gap: 6px; | |
| 2452 | + height: 26px; | |
| 2453 | + padding: 0 10px; | |
| 2454 | + border: 1px solid rgba(255, 255, 255, 0.28); | |
| 2455 | + border-radius: var(--gs-r-full); | |
| 2456 | + background: rgba(255, 255, 255, 0.12); | |
| 2457 | + font-size: 11px; | |
| 2458 | + font-weight: 700; | |
| 2459 | + letter-spacing: 0.08em; | |
| 2460 | + text-transform: uppercase; | |
| 2461 | +} | |
| 2462 | + | |
| 2463 | +.gs-upsell__eyebrow svg { | |
| 2464 | + width: 14px; | |
| 2465 | + height: 14px; | |
| 2466 | + color: #ffd27a; | |
| 2467 | +} | |
| 2468 | + | |
| 2469 | +.gs-app .gs-upsell__title { | |
| 2470 | + margin: 4px 0 0; | |
| 2471 | + color: #fff; | |
| 2472 | + font-size: 26px; | |
| 2473 | + font-weight: 700; | |
| 2474 | + line-height: 1.2; | |
| 2475 | + letter-spacing: -0.02em; | |
| 2476 | +} | |
| 2477 | + | |
| 2478 | +.gs-upsell__sub { | |
| 2479 | + max-width: 520px; | |
| 2480 | + color: rgba(255, 255, 255, 0.82); | |
| 2481 | + font-size: 14px; | |
| 2482 | + line-height: 1.6; | |
| 2483 | +} | |
| 2484 | + | |
| 2485 | +.gs-upsell__actions { | |
| 2486 | + display: flex; | |
| 2487 | + flex-wrap: wrap; | |
| 2488 | + gap: 10px; | |
| 2489 | + margin-top: 8px; | |
| 2490 | +} | |
| 2491 | + | |
| 2492 | +.gs-upsell__actions .gs-btn { | |
| 2493 | + height: 40px; | |
| 2494 | + padding: 0 18px; | |
| 2495 | +} | |
| 2496 | + | |
| 2497 | +.gs-upsell__ghost { | |
| 2498 | + border-color: rgba(255, 255, 255, 0.4); | |
| 2499 | + background: transparent; | |
| 2500 | + color: #fff; | |
| 2501 | +} | |
| 2502 | + | |
| 2503 | +.gs-upsell__ghost:hover, | |
| 2504 | +.gs-upsell__ghost:focus { | |
| 2505 | + border-color: #fff; | |
| 2506 | + background: rgba(255, 255, 255, 0.1); | |
| 2507 | + color: #fff; | |
| 2508 | +} | |
| 2509 | + | |
| 2510 | +.gs-upsell__stats { | |
| 2511 | + display: grid; | |
| 2512 | + gap: 10px; | |
| 2513 | + margin: 0; | |
| 2514 | + padding: 0; | |
| 2515 | + list-style: none; | |
| 2516 | +} | |
| 2517 | + | |
| 2518 | +.gs-upsell__stats li { | |
| 2519 | + display: flex; | |
| 2520 | + align-items: baseline; | |
| 2521 | + gap: 10px; | |
| 2522 | + margin: 0; | |
| 2523 | + padding: 14px 18px; | |
| 2524 | + border: 1px solid rgba(255, 255, 255, 0.18); | |
| 2525 | + border-radius: var(--gs-r); | |
| 2526 | + background: rgba(255, 255, 255, 0.08); | |
| 2527 | + backdrop-filter: blur(6px); | |
| 2528 | +} | |
| 2529 | + | |
| 2530 | +.gs-upsell__stats strong { | |
| 2531 | + min-width: 58px; | |
| 2532 | + font-size: 26px; | |
| 2533 | + font-weight: 700; | |
| 2534 | + letter-spacing: -0.02em; | |
| 2535 | + line-height: 1; | |
| 2536 | +} | |
| 2537 | + | |
| 2538 | +.gs-upsell__stats span { | |
| 2539 | + color: rgba(255, 255, 255, 0.82); | |
| 2540 | + font-size: 13px; | |
| 2541 | +} | |
| 2542 | + | |
| 2543 | +/* Comparison table */ | |
| 2544 | + | |
| 2545 | +.gs-compare__scroll { | |
| 2546 | + position: relative; | |
| 2547 | + overflow-x: auto; | |
| 2548 | +} | |
| 2549 | + | |
| 2550 | +.gs-compare__table { | |
| 2551 | + width: 100%; | |
| 2552 | + min-width: 560px; | |
| 2553 | + border-collapse: collapse; | |
| 2554 | + font-size: 13.5px; | |
| 2555 | +} | |
| 2556 | + | |
| 2557 | +.gs-compare__table th, | |
| 2558 | +.gs-compare__table td { | |
| 2559 | + padding: 12px 20px; | |
| 2560 | + border-top: 1px solid var(--gs-line); | |
| 2561 | + text-align: left; | |
| 2562 | + vertical-align: middle; | |
| 2563 | +} | |
| 2564 | + | |
| 2565 | +.gs-compare__table thead th { | |
| 2566 | + position: sticky; | |
| 2567 | + top: 0; | |
| 2568 | + z-index: 1; | |
| 2569 | + border-top: 0; | |
| 2570 | + background: var(--gs-surface-2); | |
| 2571 | + color: var(--gs-text-3); | |
| 2572 | + font-size: 11px; | |
| 2573 | + font-weight: 700; | |
| 2574 | + letter-spacing: 0.06em; | |
| 2575 | + text-transform: uppercase; | |
| 2576 | +} | |
| 2577 | + | |
| 2578 | +.gs-compare__table .gs-compare__col { | |
| 2579 | + width: 150px; | |
| 2580 | + text-align: center; | |
| 2581 | +} | |
| 2582 | + | |
| 2583 | +/* The Pro column is lightly tinted all the way down. */ | |
| 2584 | +.gs-compare__table .gs-compare__col--pro { | |
| 2585 | + background: var(--gs-brand-soft); | |
| 2586 | + border-left: 1px solid var(--gs-brand-line); | |
| 2587 | +} | |
| 2588 | + | |
| 2589 | +.gs-compare__table thead .gs-compare__col--pro { | |
| 2590 | + background: var(--gs-brand-soft); | |
| 2591 | +} | |
| 2592 | + | |
| 2593 | +.gs-compare__badge { | |
| 2594 | + display: inline-flex; | |
| 2595 | + align-items: center; | |
| 2596 | + height: 22px; | |
| 2597 | + padding: 0 10px; | |
| 2598 | + border-radius: var(--gs-r-full); | |
| 2599 | + background: var(--gs-brand); | |
| 2600 | + color: #fff; | |
| 2601 | + font-size: 11px; | |
| 2602 | + letter-spacing: 0.06em; | |
| 2603 | +} | |
| 2604 | + | |
| 2605 | +.gs-compare__group th { | |
| 2606 | + padding-top: 18px; | |
| 2607 | + padding-bottom: 8px; | |
| 2608 | + background: var(--gs-surface); | |
| 2609 | + color: var(--gs-brand); | |
| 2610 | + font-size: 11px; | |
| 2611 | + font-weight: 700; | |
| 2612 | + letter-spacing: 0.08em; | |
| 2613 | + text-transform: uppercase; | |
| 2614 | +} | |
| 2615 | + | |
| 2616 | +.gs-compare__table th.gs-compare__feature { | |
| 2617 | + font-weight: 400; | |
| 2618 | +} | |
| 2619 | + | |
| 2620 | +.gs-compare__label { | |
| 2621 | + display: block; | |
| 2622 | + color: var(--gs-text); | |
| 2623 | + font-weight: 600; | |
| 2624 | +} | |
| 2625 | + | |
| 2626 | +.gs-compare__hint { | |
| 2627 | + display: block; | |
| 2628 | + margin-top: 3px; | |
| 2629 | + color: var(--gs-text-3); | |
| 2630 | + font-size: 12.5px; | |
| 2631 | + line-height: 1.45; | |
| 2632 | +} | |
| 2633 | + | |
| 2634 | +.gs-compare__yes { | |
| 2635 | + display: inline-grid; | |
| 2636 | + place-items: center; | |
| 2637 | + width: 24px; | |
| 2638 | + height: 24px; | |
| 2639 | + border-radius: 50%; | |
| 2640 | + background: var(--gs-ok-soft); | |
| 2641 | + color: var(--gs-ok); | |
| 2642 | +} | |
| 2643 | + | |
| 2644 | +.gs-compare__yes.is-pro { | |
| 2645 | + background: var(--gs-brand); | |
| 2646 | + color: #fff; | |
| 2647 | +} | |
| 2648 | + | |
| 2649 | +.gs-compare__yes svg { | |
| 2650 | + width: 14px; | |
| 2651 | + height: 14px; | |
| 2652 | + stroke-width: 3; | |
| 2653 | +} | |
| 2654 | + | |
| 2655 | +.gs-compare__no { | |
| 2656 | + display: inline-block; | |
| 2657 | + width: 12px; | |
| 2658 | + height: 2px; | |
| 2659 | + border-radius: 2px; | |
| 2660 | + background: var(--gs-line-strong); | |
| 2661 | + vertical-align: middle; | |
| 2662 | +} | |
| 2663 | + | |
| 2664 | +.gs-compare__text { | |
| 2665 | + color: var(--gs-text-2); | |
| 2666 | + font-weight: 600; | |
| 2667 | +} | |
| 2668 | + | |
| 2669 | +.gs-compare__text.is-pro { | |
| 2670 | + color: var(--gs-brand); | |
| 2671 | +} | |
| 2672 | + | |
| 2673 | +.gs-compare__foot { | |
| 2674 | + display: flex; | |
| 2675 | + align-items: center; | |
| 2676 | + justify-content: space-between; | |
| 2677 | + gap: 12px; | |
| 2678 | + padding: 14px 20px; | |
| 2679 | + border-top: 1px solid var(--gs-line); | |
| 2680 | + background: var(--gs-surface-2); | |
| 2681 | +} | |
| 2682 | + | |
| 2683 | +.gs-compare__foot .gs-btn--primary { | |
| 2684 | + margin-left: auto; | |
| 2685 | +} | |
| 2686 | + | |
| 2687 | +.gs-compare__note { | |
| 2688 | + color: var(--gs-text-2); | |
| 2689 | + font-size: 13px; | |
| 2690 | +} | |
| 2691 | + | |
| 2692 | +/* "Free vs Pro" in the top bar. */ | |
| 2693 | +.gs-nav__link--upgrade { | |
| 2694 | + display: inline-flex; | |
| 2695 | + align-items: center; | |
| 2696 | + gap: 6px; | |
| 2697 | + color: var(--gs-brand); | |
| 2698 | +} | |
| 2699 | + | |
| 2700 | +.gs-nav__link--upgrade svg { | |
| 2701 | + width: 14px; | |
| 2702 | + height: 14px; | |
| 2703 | +} | |
| 2704 | + | |
| 2705 | +@media (max-width: 1100px) { | |
| 2706 | + .gs-upsell { | |
| 2707 | + grid-template-columns: 1fr; | |
| 2708 | + gap: 22px; | |
| 2709 | + } | |
| 2710 | + | |
| 2711 | + .gs-upsell__stats { | |
| 2712 | + grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| 2713 | + } | |
| 2714 | + | |
| 2715 | + .gs-upsell__stats li { | |
| 2716 | + flex-direction: column; | |
| 2717 | + gap: 4px; | |
| 2718 | + } | |
| 2719 | +} | |
| 2720 | + | |
| 2721 | +@media (max-width: 782px) { | |
| 2722 | + .gs-upsell { | |
| 2723 | + padding: 24px 20px; | |
| 2724 | + } | |
| 2725 | + | |
| 2726 | + .gs-app .gs-upsell__title { | |
| 2727 | + font-size: 22px; | |
| 2728 | + } | |
| 2729 | + | |
| 2730 | + .gs-upsell__stats { | |
| 2731 | + grid-template-columns: 1fr; | |
| 2732 | + } | |
| 2733 | + | |
| 2734 | + .gs-upsell__stats li { | |
| 2735 | + flex-direction: row; | |
| 2736 | + } | |
| 2737 | + | |
| 2738 | + .gs-compare__table th, | |
| 2739 | + .gs-compare__table td { | |
| 2740 | + padding: 10px 14px; | |
| 2741 | + } | |
| 2742 | + | |
| 2743 | + .gs-compare__table .gs-compare__col { | |
| 2744 | + width: 96px; | |
| 1913 | 2745 | } |
| 1914 | 2746 | } |
