PluginProbe
Elementor Website Builder – more than just a page builder / 3.30.1
Elementor Website Builder – more than just a page builder v3.30.1
4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 All 452 releases
← All changes | assets/css/app.css +516 -203 4.2.03.30.1 View file →
@@ -1,5 +1,8 @@
1 +/*! elementor - v3.30.0 - 07-07-2025 */
1 2 @import "//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
3 +@import "//fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";
4 +@import "//fonts.googleapis.com/css2?family=Source%20Serif%20Pro&display=swap";
2 5 :root {
3 6 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
4 7 }
5 8
@@ -489,9 +492,9 @@
489 492 button {
490 493 border-radius: 0;
491 494 }
492 495
493 -button:focus:not(:where([data-module=onboarding] *)) {
496 +button:focus {
494 497 outline: 1px dotted;
495 498 outline: 5px auto -webkit-focus-ring-color;
496 499 }
497 500
@@ -690,10 +693,10 @@
690 693 height: 0;
691 694 }
692 695 .video-wrapper iframe {
693 696 position: absolute;
694 - inset-block-start: 0;
695 - inset-inline-start: 0;
697 + top: 0;
698 + left: 0;
696 699 width: 100%;
697 700 height: 100%;
698 701 }
699 702
@@ -749,12 +752,12 @@
749 752 justify-content: center;
750 753 position: fixed;
751 754 height: 100%;
752 755 width: 100%;
753 - inset-block-end: 0;
754 - inset-inline-start: 0;
755 756 background-color: var(--app-lightbox-background-color);
756 757 z-index: 1040;
758 + bottom: 0;
759 + left: 0;
757 760 }
758 761 .eps-app__header {
759 762 flex-shrink: 0;
760 763 font-size: 0.9375rem;
@@ -794,11 +797,12 @@
794 797 width: 1.75rem;
795 798 height: 1.75rem;
796 799 line-height: 1.75rem;
797 800 text-align: center;
798 - font-size: 1.75rem;
801 + font-size: calc(0.4 * 1.75rem);
799 802 border-radius: 50%;
800 - color: var(--app-logo-background-color);
803 + color: var(--app-logo-color);
804 + background-color: var(--app-logo-background-color);
801 805 }
802 806 .eps-app__logo:not(:last-child) {
803 807 margin-inline-end: 0.625rem;
804 808 }
@@ -900,11 +904,11 @@
900 904 }
901 905
902 906 .elementor-loader-wrapper {
903 907 position: absolute;
904 - inset-block-start: 50%;
905 - inset-inline-start: 50%;
906 - transform: translate(calc(-50% * var(--direction-multiplier)), -50%);
908 + top: 50%;
909 + left: 50%;
910 + transform: translate(-50%, -50%);
907 911 width: 300px;
908 912 display: flex;
909 913 flex-direction: column;
910 914 align-items: center;
@@ -934,13 +938,13 @@
934 938 }
935 939 .elementor-loader-box:nth-of-type(1) {
936 940 width: 20%;
937 941 height: 100%;
938 - inset-block-start: 0;
939 - inset-inline-start: 0;
942 + left: 0;
943 + top: 0;
940 944 }
941 945 .elementor-loader-box:not(:nth-of-type(1)) {
942 - inset-inline-end: 0;
946 + right: 0;
943 947 height: 20%;
944 948 width: 60%;
945 949 }
946 950 .elementor-loader-box:nth-of-type(2) {
@@ -1050,9 +1054,9 @@
1050 1054 }
1051 1055 .e-app-import-export-wizard-step__notice {
1052 1056 display: block;
1053 1057 position: sticky;
1054 - inset-block-start: 100%; /* Will prevent text overlapping when window height is too short. */
1058 + top: 100%; /* Will prevent text overlapping when window height is too short. */
1055 1059 color: var(--e-app-import-export-wizard-step-block-end-text-color);
1056 1060 font-style: italic;
1057 1061 margin-block-end: 0;
1058 1062 }
@@ -1167,8 +1171,11 @@
1167 1171 border: var(--card-border);
1168 1172 border-radius: 0.1875rem;
1169 1173 transition: 0.3s;
1170 1174 font-size: 0.75rem;
1175 + /*
1176 + todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1177 + */
1171 1178 }
1172 1179 .eps-card__header {
1173 1180 padding: 0.625rem;
1174 1181 border-block-end: var(--card-header-footer-border);
@@ -1178,13 +1185,8 @@
1178 1185 }
1179 1186 .eps-card__header--padding {
1180 1187 padding: var(--eps-card-header-padding);
1181 1188 }
1182 -.eps-card {
1183 - /*
1184 - todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1185 - */
1186 -}
1187 1189 .eps-card__headline {
1188 1190 color: var(--card-headline-color);
1189 1191 margin-block-end: 0;
1190 1192 font-weight: 500;
@@ -1212,14 +1214,14 @@
1212 1214 object-fit: contain;
1213 1215 -o-object-position: top;
1214 1216 object-position: top;
1215 1217 position: absolute;
1216 - inset-block-start: 0;
1217 - inset-inline-start: 0;
1218 + top: 0;
1219 + left: 0;
1218 1220 }
1219 1221 .eps-card__image-overlay {
1220 1222 position: absolute;
1221 - inset-block-start: 0;
1223 + top: 0;
1222 1224 background-color: var(--card-image-overlay-background-color);
1223 1225 z-index: 1;
1224 1226 width: 100%;
1225 1227 height: 100%;
@@ -1266,10 +1268,10 @@
1266 1268 .eps-menu-item::before {
1267 1269 content: "";
1268 1270 display: block;
1269 1271 position: absolute;
1270 - inset-block-start: 0;
1271 - inset-inline-start: 0;
1272 + top: 0;
1273 + left: 0;
1272 1274 height: 100%;
1273 1275 width: var(--menu-item-pointer-width);
1274 1276 background-color: #0C0D0E;
1275 1277 }
@@ -2135,9 +2137,9 @@
2135 2137 position: absolute;
2136 2138 z-index: 1050;
2137 2139 margin-block-start: 9px;
2138 2140 transform: translateX(-50%);
2139 - inset-inline-start: 0.25rem;
2141 + left: 0.25rem;
2140 2142 }
2141 2143 .eps-popover__background {
2142 2144 position: fixed;
2143 2145 inset: 0;
@@ -2152,10 +2154,10 @@
2152 2154 position: absolute;
2153 2155 width: 16px;
2154 2156 height: 9px;
2155 2157 margin: 0 0.1875rem 9px;
2156 - inset-block-start: -9px;
2157 - inset-inline-start: 50%;
2158 + top: -9px;
2159 + left: 50%;
2158 2160 transform: translateX(-50%);
2159 2161 border-color: transparent;
2160 2162 border-style: solid;
2161 2163 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
@@ -2161,14 +2163,14 @@
2161 2163 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
2162 2164 border-block-end-color: var(--popover-arrow-color);
2163 2165 }
2164 2166 .eps-popover--arrow-start::before {
2165 - inset-inline-start: 0.1875rem;
2167 + left: 0.1875rem;
2166 2168 transform: none;
2167 2169 }
2168 2170 .eps-popover--arrow-end::before {
2169 - inset-inline-start: auto;
2170 - inset-inline-end: 0.1875rem;
2171 + right: 0.1875rem;
2172 + left: auto;
2171 2173 transform: none;
2172 2174 }
2173 2175 .eps-popover--arrow-none::before {
2174 2176 display: none;
@@ -2291,8 +2293,12 @@
2291 2293 }
2292 2294 .eps-checkbox--rounded {
2293 2295 border-radius: 50%;
2294 2296 }
2297 +.eps-checkbox--indeterminate {
2298 + --checkbox-background-color: var(--checkbox-checked-background-color);
2299 + --checkbox-border-color: var(--checkbox-checked-background-color);
2300 +}
2295 2301 .eps-checkbox--indeterminate::after {
2296 2302 display: inline-block;
2297 2303 margin-block-end: 0;
2298 2304 content: " ";
@@ -2300,12 +2306,8 @@
2300 2306 height: 0;
2301 2307 transform: rotate(0deg);
2302 2308 border-block-start: 1px solid #ffffff;
2303 2309 }
2304 -.eps-checkbox--indeterminate {
2305 - --checkbox-background-color: var(--checkbox-checked-background-color);
2306 - --checkbox-border-color: var(--checkbox-checked-background-color);
2307 -}
2308 2310 .eps-checkbox--error::before, .eps-checkbox--error::after, .eps-checkbox--error:checked::before, .eps-checkbox--error:checked::after {
2309 2311 display: inline-block;
2310 2312 margin-block-end: 0;
2311 2313 content: " ";
@@ -2353,10 +2355,10 @@
2353 2355 width: 375px;
2354 2356 }
2355 2357 .eps-dialog__close-button {
2356 2358 position: absolute;
2357 - inset-block-start: -2.75rem;
2358 - inset-inline-end: -2.75rem;
2359 + top: -2.75rem;
2360 + right: -2.75rem;
2359 2361 margin-block-start: 0.625rem;
2360 2362 margin-inline-end: 0.625rem;
2361 2363 z-index: 1040;
2362 2364 font-size: 1.25rem;
@@ -2396,10 +2398,10 @@
2396 2398 }
2397 2399 .e-app__popover:before {
2398 2400 content: "";
2399 2401 position: absolute;
2400 - inset-block-start: -16px;
2401 - inset-inline-end: var(--popover-arrow-offset-end, 22px);
2402 + top: -16px;
2403 + right: var(--popover-arrow-offset-end, 22px);
2402 2404 border: 8px solid transparent;
2403 2405 border-block-end-color: #fff;
2404 2406 }
2405 2407
@@ -2661,9 +2663,9 @@
2661 2663 .e-app-export-kit-information__error-container {
2662 2664 height: 20px;
2663 2665 display: flex;
2664 2666 align-items: flex-start;
2665 - margin-block-start: 4px;
2667 + margin-top: 4px;
2666 2668 }
2667 2669 .e-app-export-kit-information__validation-error {
2668 2670 color: var(--e-a-color-danger);
2669 2671 }
@@ -2717,9 +2719,9 @@
2717 2719 outline: none;
2718 2720 }
2719 2721 .eps-collapse__icon {
2720 2722 transition: all 150ms;
2721 - scale: calc(1 * var(--direction-multiplier)) 1;
2723 + transform: rotate(0deg);
2722 2724 }
2723 2725 .eps-collapse__content {
2724 2726 margin-block-start: 0.625rem;
2725 2727 display: none;
@@ -2798,8 +2800,9 @@
2798 2800 .e-kit-library__filter-indication-button {
2799 2801 margin-inline-start: 1.5rem;
2800 2802 }
2801 2803
2804 +#eps-app-header-btn-apply,
2802 2805 #eps-app-header-btn-promotion,
2803 2806 #eps-app-header-btn-connect {
2804 2807 margin-inline-start: 0.625rem;
2805 2808 margin-inline-end: 0.625rem;
@@ -2804,17 +2807,8 @@
2804 2807 margin-inline-start: 0.625rem;
2805 2808 margin-inline-end: 0.625rem;
2806 2809 }
2807 2810
2808 -#eps-app-header-btn-apply {
2809 - margin-inline-start: 0.625rem;
2810 -}
2811 -
2812 -#eps-app-header-btn-download {
2813 - margin-inline-end: 1rem;
2814 - margin-inline-start: 1rem;
2815 -}
2816 -
2817 2811 .e-kit-library__apply-button {
2818 2812 display: flex;
2819 2813 align-items: center;
2820 2814 justify-content: center;
@@ -2863,30 +2857,22 @@
2863 2857 margin: 0 3px;
2864 2858 }
2865 2859 .e-kit-library__kit-item-subscription-plan-badge {
2866 2860 --e-a-color-brand: #467FF7;
2867 -}
2868 -.e-kit-library__kit-item-subscription-plan-badge.promoted {
2869 - --e-a-color-brand: #92003B;
2870 -}
2871 -.e-kit-library__kit-item-subscription-plan-badge {
2872 2861 position: absolute;
2873 - inset-block-start: 0;
2874 - inset-inline-end: 0;
2862 + top: 0;
2863 + right: 0;
2875 2864 margin: 0.3125rem;
2876 2865 background-color: var(--e-a-color-brand);
2877 2866 color: #ffffff;
2878 2867 text-transform: uppercase;
2879 2868 }
2869 +.e-kit-library__kit-item-subscription-plan-badge.promoted {
2870 + --e-a-color-brand: #92003B;
2871 +}
2880 2872 .e-kit-library__kit-item-header {
2881 2873 position: relative;
2882 2874 }
2883 -.e-kit-library__kit-item-lock-icon {
2884 - font-size: 14px;
2885 - margin-inline-end: 8px;
2886 - color: var(--card-headline-color);
2887 - cursor: pointer;
2888 -}
2889 2875 .e-kit-library__kit-item-actions-menu i {
2890 2876 font-size: 16px;
2891 2877 }
2892 2878 .e-kit-library__kit-item-actions-popover {
@@ -2895,11 +2881,11 @@
2895 2881 align-items: start;
2896 2882 min-width: 0;
2897 2883 padding: 12px 0;
2898 2884 position: absolute;
2899 - inset-block-start: 25px;
2900 - inset-inline-start: 100%;
2901 - transform: translateX(calc(-100% * var(--direction-multiplier)));
2885 + top: 25px;
2886 + left: 100%;
2887 + transform: translateX(-100%);
2902 2888 }
2903 2889 .e-kit-library__kit-item-actions-popover-item {
2904 2890 display: flex;
2905 2891 height: 30px;
@@ -2944,22 +2930,8 @@
2944 2930 }
2945 2931 .e-kit-library__kit-item-cloud-overlay-import-button > span {
2946 2932 font-size: 15px;
2947 2933 }
2948 -.e-kit-library__kit-item-cloud-overlay i.eicon-lock {
2949 - font-size: 48px;
2950 - color: rgba(255, 255, 255, 0.8);
2951 - cursor: pointer;
2952 -}
2953 -.e-kit-library__kit-item--locked {
2954 - opacity: 0.6;
2955 -}
2956 -.e-kit-library__kit-item--locked .eps-card__image {
2957 - opacity: 0.7;
2958 -}
2959 -.e-kit-library__kit-item--locked .eps-card__overlay {
2960 - background-color: rgba(0, 0, 0, 0.5);
2961 -}
2962 2934
2963 2935 :root {
2964 2936 --e-kit-library-header-back-border: 1px solid var(--e-a-border-color);
2965 2937 --e-kit-library-header-back-color: #69727D;
@@ -2984,9 +2956,9 @@
2984 2956 flex: 1;
2985 2957 height: 100%;
2986 2958 }
2987 2959 .e-kit-library__header-back .eps-icon {
2988 - scale: calc(1 * var(--direction-multiplier)) 1;
2960 + transform: rotate(0deg);
2989 2961 }
2990 2962
2991 2963 .e-kit-library__page-loader {
2992 2964 width: 100%;
@@ -3044,10 +3016,10 @@
3044 3016 font-size: 1.25rem;
3045 3017 padding: 0.625rem;
3046 3018 color: #69727D;
3047 3019 position: absolute;
3048 - inset-block-start: 0;
3049 - inset-inline-start: 0;
3020 + top: 0;
3021 + left: 0;
3050 3022 height: 100%;
3051 3023 display: flex;
3052 3024 align-items: center;
3053 3025 justify-content: center;
@@ -3059,10 +3031,10 @@
3059 3031 font-size: 0.875rem;
3060 3032 padding: 0.625rem;
3061 3033 color: #69727D;
3062 3034 position: absolute;
3063 - inset-block-start: 0;
3064 - inset-inline-end: 0;
3035 + top: 0;
3036 + right: 0;
3065 3037 height: 100%;
3066 3038 display: flex;
3067 3039 align-items: center;
3068 3040 justify-content: center;
@@ -3097,10 +3069,11 @@
3097 3069 .eps-sort-select__select-wrapper::after {
3098 3070 content: "\e8ad";
3099 3071 font-family: eicons;
3100 3072 position: absolute;
3101 - inset-inline-end: 0.625rem;
3102 - inset-block: 0;
3073 + right: 0.625rem;
3074 + top: 0;
3075 + bottom: 0;
3103 3076 color: #69727D;
3104 3077 display: flex;
3105 3078 align-items: center;
3106 3079 justify-content: center;
@@ -3197,14 +3170,13 @@
3197 3170 }
3198 3171 .e-kit-library__index-layout-heading {
3199 3172 padding: 1.875rem 2.75rem;
3200 3173 position: sticky;
3201 - inset-block-start: -1px;
3174 + top: -1px;
3202 3175 width: 100%;
3203 3176 z-index: 2;
3204 3177 background-color: var(--app-background-color);
3205 3178 gap: 1.5rem;
3206 - align-items: center;
3207 3179 }
3208 3180 .e-kit-library__index-layout-heading-search, .e-kit-library__index-layout-heading-sort {
3209 3181 min-width: 265px;
3210 3182 }
@@ -3210,13 +3182,8 @@
3210 3182 }
3211 3183 .e-kit-library__index-layout-heading-search {
3212 3184 flex: 1;
3213 3185 }
3214 -.e-kit-library__index-layout-heading-quota {
3215 - display: flex;
3216 - align-items: center;
3217 - justify-content: flex-end;
3218 -}
3219 3186 .e-kit-library__index-layout-main {
3220 3187 padding-block-start: 0;
3221 3188 padding-block-end: 1.5rem;
3222 3189 overflow-y: hidden;
@@ -3345,10 +3312,10 @@
3345 3312 }
3346 3313
3347 3314 .e-kit-library__preview-loader {
3348 3315 position: absolute;
3349 - inset-block-start: 0;
3350 - inset-inline-start: 0;
3316 + top: 0;
3317 + left: 0;
3351 3318 z-index: 0;
3352 3319 }
3353 3320 .e-kit-library__preview-iframe {
3354 3321 border: none;
@@ -3376,10 +3343,10 @@
3376 3343 align-items: center;
3377 3344 justify-content: center;
3378 3345 font-size: 0.875rem;
3379 3346 position: absolute;
3380 - inset-block-start: 50%;
3381 - inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);
3347 + top: 50%;
3348 + right: var(--e-app-collapse-toggle-icon-spacing);
3382 3349 transform: translateY(-50%);
3383 3350 }
3384 3351 .e-app-collapse-toggle__icon:before {
3385 3352 transition: all 0.2s linear;
@@ -3394,10 +3361,10 @@
3394 3361 display: block;
3395 3362 }
3396 3363
3397 3364 [dir=rtl] .e-app-collapse-toggle__icon {
3398 - inset-inline-start: var(--e-app-collapse-toggle-icon-spacing);
3399 - inset-inline-end: initial;
3365 + right: initial;
3366 + left: var(--e-app-collapse-toggle-icon-spacing);
3400 3367 }
3401 3368
3402 3369 .eps-theme-dark .e-app-collapse {
3403 3370 --e-app-collapse-icon-color: #BABFC5;
@@ -3524,10 +3491,10 @@
3524 3491 font-size: 1.85rem;
3525 3492 }
3526 3493 .e-app-import-export-loader--absolute-center {
3527 3494 position: absolute;
3528 - inset-block-start: 50%;
3529 - inset-inline-start: 50%;
3495 + top: 50%;
3496 + left: 50%;
3530 3497 transform: translateX(-50%) translateY(-50%);
3531 3498 }
3532 3499
3533 3500 .eps-theme-dark .e-app-import-export-loader {
@@ -3567,152 +3534,498 @@
3567 3534 width: 100%;
3568 3535 justify-content: flex-end;
3569 3536 }
3570 3537
3571 -.e-kit-library__quota-bar {
3538 +.e-onboarding {
3539 + font-family: "DM Sans", "Roboto", sans-serif;
3540 + color-scheme: light;
3541 +}
3542 +.e-onboarding .eps-app__main {
3543 + justify-content: center;
3544 + overflow-y: auto;
3545 +}
3546 +.e-onboarding__content {
3547 + max-width: 1135px;
3548 + padding: 2.75rem;
3549 + margin: initial;
3550 + overflow-y: initial;
3551 +}
3552 +.e-onboarding__checkbox-label {
3572 3553 display: flex;
3554 + line-height: 18px;
3555 + margin-block-end: 27px;
3556 +}
3557 +.e-onboarding__checkbox-input {
3558 + margin-inline-end: 14px;
3559 + width: 16px;
3560 + height: 16px;
3561 + border-color: #69727D;
3562 + border-radius: 2px;
3563 +}
3564 +.e-onboarding__checkbox-input:checked {
3565 + background-color: #525861;
3566 +}
3567 +.e-onboarding__checkbox-input:checked::after {
3568 + margin-block-end: 15%;
3569 + width: 6px;
3570 + height: 9px;
3571 + border-width: 0 2px 2px 0;
3572 +}
3573 +.e-onboarding__feature-list {
3574 + margin-block-end: 40px;
3575 +}
3576 +.e-onboarding__text-input {
3577 + font-size: 14px;
3578 + width: 325px;
3579 + padding: 12px 16px;
3580 + color: #69727D;
3581 + border: 1px solid #9EA5AD;
3582 +}
3583 +.e-onboarding__text-input:focus-visible {
3584 + outline: initial;
3585 + border: 1px solid #3A3F45;
3586 +}
3587 +.e-onboarding__text-input::-moz-placeholder {
3588 + color: #C2C7CC;
3589 +}
3590 +.e-onboarding__text-input::placeholder {
3591 + color: #C2C7CC;
3592 +}
3593 +.e-onboarding__footnote {
3594 + margin-block-start: 24px;
3595 + width: 325px;
3596 + text-align: center;
3597 +}
3598 +.e-onboarding__footnote a {
3599 + text-decoration: underline;
3600 + color: #3A3F45;
3601 +}
3602 +
3603 +#e-app ~ #__wp-uploader-id-2 .media-modal {
3604 + max-width: 1024px;
3605 + max-height: 768px;
3606 + margin: auto;
3607 +}
3608 +
3609 +.e-onboarding__page-content {
3610 + margin-block-end: 70px;
3611 +}
3612 +.e-onboarding__page-content-start {
3613 + max-width: 675px;
3614 + text-align: start;
3615 + flex-basis: 555px;
3616 + align-self: start;
3617 +}
3618 +.e-onboarding__page-content-end {
3619 + min-width: 440px;
3620 + max-width: 540px;
3621 +}
3622 +.e-onboarding__page-content-end img {
3623 + width: 100%;
3624 +}
3625 +.e-onboarding__page-content-section-title {
3626 + font-family: "DM Serif Display", serif;
3627 + font-size: 36px;
3628 + font-weight: 700;
3629 + color: #0C0D0E;
3630 +}
3631 +.e-onboarding__page-content-section-text {
3632 + font-size: 18px;
3633 + color: #3A3F45;
3634 +}
3635 +
3636 +.e-onboarding__header-logo .eps-app__logo {
3637 + background-color: #0C0D0E;
3638 + color: #ffffff;
3639 + width: 1.3rem;
3640 + height: 1.3rem;
3641 + line-height: 1.3rem;
3642 + font-size: 0.48rem;
3643 +}
3644 +.e-onboarding__header-logo .eps-app__logo:not(:last-child) {
3645 + margin-inline-end: 7px;
3646 +}
3647 +.e-onboarding__header-logo img {
3648 + width: 104px;
3649 +}
3650 +.e-onboarding__header .eps-app__header-btn {
3651 + display: flex;
3573 3652 align-items: center;
3653 + font-size: 13px;
3574 3654 }
3575 -.e-kit-library__quota-bar__container {
3655 +.e-onboarding__header .eps-app__header-btn .eps-icon:not(:last-child) {
3656 + margin-inline-end: 7px;
3657 +}
3658 +.e-onboarding__header .eps-button {
3659 + color: #0C0D0E;
3660 +}
3661 +.e-onboarding__header .eps-button__go-pro-btn {
3662 + background-color: #93003f;
3663 + color: #ffffff;
3664 + padding: 4px 8px;
3665 + border-radius: 4px;
3666 + font-weight: 700;
3667 + font-size: 12px;
3668 + transition: 0.5s;
3669 +}
3670 +.e-onboarding__header .eps-button__go-pro-btn:hover {
3671 + background: rgb(198, 0, 84.8571428571);
3672 +}
3673 +
3674 +.e-onboarding__go-pro {
3675 + width: 288px;
3676 + font-size: 12px;
3677 + background-color: #ffffff;
3678 +}
3679 +.e-onboarding__go-pro-title {
3680 + font-size: 18px;
3681 + font-weight: 700;
3682 + color: #93003f;
3683 +}
3684 +.e-onboarding__go-pro-cta {
3685 + display: inline-block;
3686 + color: #93003f;
3687 + padding: 9px;
3688 + border: 1px solid #93003f;
3689 +}
3690 +.e-onboarding__go-pro-cta.e-onboarding__button {
3691 + font-size: 14px;
3692 +}
3693 +.e-onboarding__go-pro-paragraph:not(:last-child) {
3694 + margin-block-end: 20px;
3695 +}
3696 +.e-onboarding__go-pro-already-have {
3697 + text-decoration: underline;
3698 +}
3699 +
3700 +.e-onboarding__progress-bar {
3576 3701 display: flex;
3577 - flex-direction: column;
3578 - gap: 8px;
3579 - min-width: 230px;
3702 + justify-content: center;
3703 + margin-block-end: 125px;
3580 3704 }
3581 -.e-kit-library__quota-bar__header {
3705 +.e-onboarding__progress-bar-item {
3582 3706 display: flex;
3583 - justify-content: space-between;
3584 3707 align-items: center;
3708 + color: #69727D;
3709 + font-size: 0.75rem;
3585 3710 }
3586 -.e-kit-library__quota-bar__label {
3587 - color: var(--body-color);
3588 - font-weight: 400;
3589 - white-space: nowrap;
3590 - font-size: 12px;
3711 +.e-onboarding__progress-bar-item-icon {
3712 + display: inline-block;
3713 + font-family: "DM Serif Display", serif;
3714 + text-align: center;
3715 + width: 1.1rem;
3716 + height: 1.1rem;
3717 + line-height: 1rem;
3718 + font-size: 0.75rem;
3719 + font-weight: bold;
3720 + border-radius: 50%;
3721 + border: 1px solid #69727D;
3722 + margin-inline-end: 8px;
3723 + flex-shrink: 0;
3591 3724 }
3592 -.e-kit-library__quota-bar__progress-container {
3593 - width: 100%;
3594 - height: 4px;
3595 - overflow: hidden;
3596 - position: relative;
3725 +.e-onboarding__progress-bar-item:not(:last-child) {
3726 + margin-inline-end: 22px;
3597 3727 }
3598 -.e-kit-library__quota-bar__progress-container--empty {
3599 - background-color: #F0ABFC;
3728 +.e-onboarding__progress-bar-item:not(:last-child):after {
3729 + font-family: "eicons";
3730 + margin-inline-start: 22px;
3731 + content: "\e89e";
3600 3732 }
3601 -.e-kit-library__quota-bar__progress-container--normal {
3602 - background-color: #F0ABFC;
3733 +.e-onboarding__progress-bar-item--active {
3734 + color: #D004D4;
3603 3735 }
3604 -.e-kit-library__quota-bar__progress-container--warning {
3605 - background-color: rgb(251.0236220472, 216.4291338583, 157.9763779528);
3736 +.e-onboarding__progress-bar-item--active .e-onboarding__progress-bar-item-icon, .e-onboarding__progress-bar-item--completed .e-onboarding__progress-bar-item-icon {
3737 + color: #ffffff;
3738 + border-color: #D004D4;
3739 + background-color: #D004D4;
3606 3740 }
3607 -.e-kit-library__quota-bar__progress-container--alert {
3608 - background: #93003f;
3741 +.e-onboarding__progress-bar-item--skipped, .e-onboarding__progress-bar-item--completed {
3742 + cursor: pointer;
3609 3743 }
3610 -.e-kit-library__quota-bar__progress-bar {
3611 - height: 100%;
3612 - transition: width 0.3s ease;
3744 +.e-onboarding__progress-bar-item--skipped .e-onboarding__progress-bar-item-icon {
3745 + color: #ffffff;
3746 + background-color: #69727D;
3613 3747 }
3614 -.e-kit-library__quota-bar__progress-bar--empty {
3615 - background: transparent;
3748 +
3749 +.e-onboarding__button {
3750 + font-size: 18px;
3751 + cursor: pointer;
3752 + transition: var(--e-a-transition-hover);
3616 3753 }
3617 -.e-kit-library__quota-bar__progress-bar--normal {
3618 - background: #D004D4;
3754 +.e-onboarding__button-action {
3755 + color: var(--e-a-btn-color);
3756 + background-color: var(--e-a-btn-bg-primary);
3757 + min-width: 325px;
3758 + padding: 15px 30px;
3759 + text-align: center;
3619 3760 }
3620 -.e-kit-library__quota-bar__progress-bar--warning {
3621 - background: #F59E0B;
3761 +.e-onboarding__button-action:hover {
3762 + background-color: var(--e-a-btn-bg-primary-hover);
3622 3763 }
3623 -.e-kit-library__quota-bar__progress-bar--alert {
3624 - background: #93003f;
3764 +.e-onboarding__button-skip {
3765 + padding: 8px 16px;
3766 + color: #515962;
3625 3767 }
3626 -.e-kit-library__quota-bar__upgrade-message {
3768 +.e-onboarding__button-skip:hover {
3769 + background-color: #F9FAFA;
3770 +}
3771 +.e-onboarding__button-skip--disabled {
3772 + pointer-events: none;
3773 + cursor: none;
3774 + color: #D5D8DC;
3775 +}
3776 +.e-onboarding__button--disabled {
3777 + pointer-events: none;
3778 + background-color: #D5D8DC;
3779 + color: #9EA5AD;
3780 +}
3781 +.e-onboarding__button--disabled:hover {
3782 + cursor: progress;
3783 +}
3784 +.e-onboarding__button--processing {
3785 + pointer-events: none;
3786 + filter: brightness(90%);
3787 +}
3788 +
3789 +.e-onboarding__card {
3790 + border: 1px solid #3A3F45;
3791 + border-radius: 8px;
3792 + padding: 40px 40px;
3793 + cursor: pointer;
3794 + flex-grow: 1;
3627 3795 display: flex;
3796 + flex-direction: column;
3628 3797 align-items: center;
3629 - gap: 4px;
3630 3798 }
3631 -.e-kit-library__quota-bar__upgrade-link {
3632 - color: #93003f;
3633 - text-decoration: underline;
3634 - cursor: pointer;
3799 +.e-onboarding__card-image, .e-onboarding__card-text {
3800 + width: 345px;
3801 +}
3802 +.e-onboarding__card-image {
3803 + margin-block-end: 44px;
3804 +}
3805 +.e-onboarding__card-text {
3806 + font-size: 20px;
3807 + font-weight: 700;
3808 + text-align: center;
3809 + color: #0C0D0E;
3810 +}
3811 +.e-onboarding__card:hover {
3812 + box-shadow: 4px 4px 0 0 #000000;
3813 +}
3814 +.e-onboarding__card:active {
3815 + box-shadow: initial;
3816 +}
3817 +
3818 +.e-onboarding__checklist {
3819 + padding-inline-start: 0;
3820 +}
3821 +.e-onboarding__checklist-item {
3822 + display: flex;
3823 + align-items: center;
3635 3824 font-size: 12px;
3636 - font-weight: 400;
3825 + margin-block-end: 12px;
3637 3826 }
3638 -.e-kit-library__quota-bar__upgrade-link:hover {
3639 - opacity: 0.8;
3827 +.e-onboarding__checklist-item .eicon-check-circle {
3828 + margin-inline-end: 9px;
3829 + font-size: 16px;
3830 + font-weight: 600;
3640 3831 }
3641 -.e-kit-library__quota-bar__count {
3642 - color: var(--body-color);
3643 - white-space: nowrap;
3644 - font-size: 12px;
3832 +
3833 +.e-onboarding__notice {
3834 + display: inline-block;
3835 + padding: 12px 14px;
3836 + margin-block-end: 16px;
3837 + color: #3A3F45;
3645 3838 }
3839 +.e-onboarding__notice--error {
3840 + background-color: #FDE8EC;
3841 +}
3842 +.e-onboarding__notice--error i {
3843 + font-size: 16px;
3844 + color: #B92136;
3845 +}
3846 +.e-onboarding__notice--success {
3847 + background-color: #ECF9F2;
3848 +}
3849 +.e-onboarding__notice--success i {
3850 + color: #117740;
3851 +}
3852 +.e-onboarding__notice i {
3853 + margin-inline-end: 14px;
3854 +}
3855 +.e-onboarding__notice-empty-spacer {
3856 + height: 61px;
3857 +}
3646 3858
3647 -:root {
3648 - --text-secondary: #3F444B;
3859 +.e-onboarding__page-account .e-onboarding__checkbox-label {
3860 + margin-block-start: 50px;
3649 3861 }
3650 3862
3651 -.e-kit-library__quota-notification {
3863 +.e-onboarding__action-button-text {
3864 + margin-inline-start: 10px;
3865 +}
3866 +
3867 +.e-onboarding__site-name-input {
3868 + margin-block-start: 80px;
3869 +}
3870 +
3871 +.e-onboarding__page-siteLogo .e-app-upload-file__button {
3872 + color: var(--e-a-color-primary-bold);
3873 + border-color: var(--e-a-color-primary-bold);
3874 +}
3875 +.e-onboarding__page-siteLogo .e-app-upload-file__button:hover {
3876 + background-color: #FAE8FF;
3877 +}
3878 +.e-onboarding__drop-zone {
3879 + margin-block-start: 3rem;
3880 +}
3881 +.e-onboarding .eps-display-3 {
3882 + font-size: 16px;
3883 + margin-block-end: 0.5rem;
3884 +}
3885 +.e-onboarding .e-app-upload-file__button {
3886 + max-width: 198px;
3887 + margin: 0 auto;
3888 +}
3889 +.e-onboarding .e-app-drop-zone__secondary-text {
3890 + font-size: 14px;
3891 +}
3892 +.e-onboarding__logo-container {
3893 + position: relative;
3894 + margin-block-start: 3rem;
3895 + min-height: 120px;
3896 + width: -moz-fit-content;
3897 + width: fit-content;
3652 3898 display: flex;
3653 - align-items: flex-start;
3654 - justify-content: space-between;
3655 - padding: 16px 20px;
3656 - margin: 0 44px 30px;
3657 - border-radius: 4px;
3899 + align-items: center;
3900 + justify-content: center;
3901 + min-width: 220px;
3902 + border: 1px solid #BABFC5;
3658 3903 }
3659 -.e-kit-library__quota-notification--warning {
3660 - background-color: #FBF1E6;
3661 - color: #3f444b;
3904 +.e-onboarding__logo-container img {
3905 + height: auto;
3906 + max-height: 100%;
3907 + width: auto;
3662 3908 }
3663 -.e-kit-library__quota-notification--alert {
3664 - background-color: #FDECEC;
3665 - color: #3f444b;
3909 +.e-onboarding__logo-remove {
3910 + position: absolute;
3911 + right: 0;
3912 + top: 5px;
3666 3913 }
3667 -.e-kit-library__quota-notification__content {
3668 - display: flex;
3669 - align-items: flex-start;
3670 - gap: 12px;
3671 - flex: 1;
3914 +.e-onboarding__logo-remove i {
3915 + font-size: 16px;
3916 + width: 15px;
3672 3917 }
3673 -.e-kit-library__quota-notification__icon {
3674 - font-size: 18px;
3675 - margin-top: 1px;
3676 - flex-shrink: 0;
3918 +.e-onboarding__logo-remove:hover {
3919 + cursor: pointer;
3677 3920 }
3678 -.e-kit-library__quota-notification__icon.eicon-warning-full {
3679 - color: #F59E0B;
3921 +.e-onboarding__is-uploading {
3922 + visibility: hidden;
3680 3923 }
3681 -.e-kit-library__quota-notification__icon.eicon-alert {
3682 - color: #DC2626;
3924 +
3925 +.e-onboarding__cards-grid.e-onboarding__page-content {
3926 + margin-block-start: 48px;
3927 + margin-block-end: 48px;
3683 3928 }
3684 -.e-kit-library__quota-notification__message {
3685 - flex: 1;
3686 - line-height: 1.5;
3687 - font-size: 13px;
3929 +.e-onboarding__cards-grid .e-onboarding__card {
3930 + max-width: 555px;
3688 3931 }
3689 -.e-kit-library__quota-notification__message span {
3690 - color: var(--text-secondary);
3691 - font-size: 13px;
3932 +.e-onboarding__cards-grid .e-onboarding__card:not(:last-child) {
3933 + margin-inline-end: 20px;
3692 3934 }
3693 -.e-kit-library__quota-notification__action-link {
3694 - color: inherit;
3935 +.e-onboarding__page-goodToGo .e-onboarding__page-content-section-title,
3936 +.e-onboarding__page-goodToGo .e-onboarding__page-content-section-text {
3937 + text-align: center;
3938 +}
3939 +.e-onboarding__page-goodToGo .e-onboarding__cards-grid {
3940 + justify-content: center;
3941 + flex-wrap: nowrap;
3942 +}
3943 +.e-onboarding__page-goodToGo .e-onboarding__card {
3944 + max-width: 388px;
3945 +}
3946 +.e-onboarding__good-to-go-footer {
3947 + justify-content: end;
3948 +}
3949 +
3950 +.e-onboarding__upload-pro {
3951 + flex-direction: row;
3952 + justify-content: center;
3953 + font-family: "DM Sans", "Roboto", sans-serif;
3954 + text-align: center;
3955 +}
3956 +.e-onboarding__upload-pro .eps-app__content {
3957 + overflow-y: hidden;
3958 + max-width: 1113px;
3959 + padding: 30px;
3960 +}
3961 +.e-onboarding__upload-pro-drop-zone {
3962 + margin-block-end: 24px;
3963 +}
3964 +.e-onboarding__upload-pro-drop-zone h1 {
3965 + font-family: "Source Serif Pro", "Roboto", sans-serif;
3966 +}
3967 +.e-onboarding__upload-pro-drop-zone .e-app-drag-drop {
3968 + padding: 48px;
3969 +}
3970 +.e-onboarding__upload-pro-drop-zone .eps-display-3,
3971 +.e-onboarding__upload-pro-drop-zone .e-app-drop-zone__text,
3972 +.e-onboarding__upload-pro-drop-zone .e-app-drop-zone__secondary-text {
3973 + margin-block-end: 12px;
3974 +}
3975 +.e-onboarding__upload-pro-drop-zone .e-app-upload-file__button {
3976 + background-color: #040080;
3977 + color: #46F2B6;
3978 + padding: 14px 40px;
3979 + border-color: #040080;
3980 +}
3981 +.e-onboarding__upload-pro-get-file {
3982 + font-size: 12px;
3983 + margin-block-start: 24px;
3984 +}
3985 +.e-onboarding__upload-pro-get-file a {
3695 3986 text-decoration: underline;
3696 - font-size: 13px;
3987 +}
3988 +.e-onboarding__upload-pro .e-onboarding__notice {
3989 + margin-block-end: 0;
3990 +}
3991 +
3992 +.e-onboarding__choose-features-section {
3993 + width: 100%;
3994 + display: flex;
3995 + flex-wrap: wrap;
3996 + gap: 10px 20px;
3997 + margin-block: 20px;
3998 +}
3999 +.e-onboarding__choose-features-section__label {
4000 + display: flex;
4001 + align-items: center;
4002 + font-size: 14px;
3697 4003 font-weight: 400;
4004 + line-height: 24px;
4005 + letter-spacing: -0.01em;
4006 + -webkit-user-select: none;
4007 + -moz-user-select: none;
4008 + user-select: none;
4009 + border: 1px solid #D5D8DC;
4010 + padding: 12px 16px;
4011 + width: 267px;
3698 4012 }
3699 -.e-kit-library__quota-notification__action-link:hover {
3700 - opacity: 0.8;
4013 +.e-onboarding__choose-features-section__checkbox {
4014 + justify-self: end;
4015 + margin-inline-end: 8px;
4016 + width: 16px;
4017 + height: 16px;
3701 4018 }
3702 -.e-kit-library__quota-notification__dismiss {
3703 - background: none;
3704 - border: none;
3705 - cursor: pointer;
3706 - padding: 0;
3707 - margin-inline-start: 12px;
3708 - color: inherit;
3709 - opacity: 0.7;
3710 - flex-shrink: 0;
4019 +.e-onboarding__choose-features-section__message {
4020 + font-size: 18px;
4021 + font-weight: 400;
4022 + line-height: 27px;
4023 + letter-spacing: -0.01em;
4024 + padding-inline-end: 120px;
4025 + min-height: 55px;
4026 + margin-block-end: 20px;
3711 4027 }
3712 -.e-kit-library__quota-notification__dismiss:hover {
3713 - opacity: 1;
3714 -}
3715 -.e-kit-library__quota-notification__dismiss i {
3716 - font-size: 14px;
4028 +.e-onboarding__page-chooseFeatures .e-onboarding__page-content {
4029 + margin-bottom: 0;
3717 4030 }
3718 4031 /*# sourceMappingURL=app.css.map */