| @@ -2384,4 +2384,363 @@ | ||
| 2384 | 2384 | animation-iteration-count: 1 !important; |
| 2385 | 2385 | transition-duration: 0.01ms !important; |
| 2386 | 2386 | } |
| 2387 | 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; | |
| 2745 | + } | |
| 2746 | +} | |
